@viliha/vui-ui 1.1.7 → 1.2.0

package/template/lib/demo-data.ts

@@ -0,0 +1,267 @@
+/**
+ * In-memory demo data for the backoffice homepage (organizations, branches,
+ * departments, employees, markets, countries/regions). Swap this for a real
+ * data/API layer when you wire up a backend.
+ */
+
+export type OrganizationStatus = "active" | "trial" | "suspended";
+
+export interface DemoOrganization {
+  id: number;
+  name: string;
+  url: string;
+  email: string;
+  countryCode: string;
+  country: string;
+  branches: number;
+  employees: number;
+  status: OrganizationStatus;
+  /** Fallback initials for the avatar. */
+  initials: string;
+  /** Relative "created/updated" label for the recent list. */
+  updated: string;
+}
+
+export interface DemoEmployee {
+  id: number;
+  code: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  department: string;
+  branch: string;
+  organization: string;
+  isActive: boolean;
+}
+
+export interface DemoMarket {
+  id: number;
+  name: string;
+  organization: string;
+  radiusMiles: number | null;
+}
+
+export interface RegionBreakdown {
+  region: string;
+  organizations: number;
+}
+
+export const organizations: DemoOrganization[] = [
+  {
+    id: 1,
+    name: "Northwind Retail",
+    url: "northwind.example.com",
+    email: "ops@northwind.example.com",
+    countryCode: "US",
+    country: "United States",
+    branches: 12,
+    employees: 340,
+    status: "active",
+    initials: "NR",
+    updated: "2h ago",
+  },
+  {
+    id: 2,
+    name: "Sakura Foods",
+    url: "sakura.example.jp",
+    email: "hello@sakura.example.jp",
+    countryCode: "JP",
+    country: "Japan",
+    branches: 8,
+    employees: 210,
+    status: "active",
+    initials: "SF",
+    updated: "5h ago",
+  },
+  {
+    id: 3,
+    name: "Alpine Logistics",
+    url: "alpine.example.ch",
+    email: "contact@alpine.example.ch",
+    countryCode: "CH",
+    country: "Switzerland",
+    branches: 5,
+    employees: 96,
+    status: "trial",
+    initials: "AL",
+    updated: "yesterday",
+  },
+  {
+    id: 4,
+    name: "Lagos Digital",
+    url: "lagosdigital.example.ng",
+    email: "team@lagosdigital.example.ng",
+    countryCode: "NG",
+    country: "Nigeria",
+    branches: 3,
+    employees: 54,
+    status: "active",
+    initials: "LD",
+    updated: "yesterday",
+  },
+  {
+    id: 5,
+    name: "Meridian Media",
+    url: "meridian.example.uk",
+    email: "press@meridian.example.uk",
+    countryCode: "GB",
+    country: "United Kingdom",
+    branches: 7,
+    employees: 178,
+    status: "suspended",
+    initials: "MM",
+    updated: "2 days ago",
+  },
+  {
+    id: 6,
+    name: "Pampas Commerce",
+    url: "pampas.example.ar",
+    email: "ventas@pampas.example.ar",
+    countryCode: "AR",
+    country: "Argentina",
+    branches: 4,
+    employees: 71,
+    status: "trial",
+    initials: "PC",
+    updated: "3 days ago",
+  },
+  {
+    id: 7,
+    name: "Nordic Wear",
+    url: "nordicwear.example.se",
+    email: "hej@nordicwear.example.se",
+    countryCode: "SE",
+    country: "Sweden",
+    branches: 6,
+    employees: 133,
+    status: "active",
+    initials: "NW",
+    updated: "4 days ago",
+  },
+  {
+    id: 8,
+    name: "Coral Bay Resorts",
+    url: "coralbay.example.au",
+    email: "stay@coralbay.example.au",
+    countryCode: "AU",
+    country: "Australia",
+    branches: 9,
+    employees: 264,
+    status: "active",
+    initials: "CB",
+    updated: "5 days ago",
+  },
+];
+
+export const employees: DemoEmployee[] = [
+  {
+    id: 1,
+    code: "NR-0142",
+    firstName: "Ava",
+    lastName: "Bennett",
+    email: "ava.bennett@northwind.example.com",
+    department: "Operations",
+    branch: "Seattle HQ",
+    organization: "Northwind Retail",
+    isActive: true,
+  },
+  {
+    id: 2,
+    code: "SF-0098",
+    firstName: "Haruto",
+    lastName: "Tanaka",
+    email: "haruto.tanaka@sakura.example.jp",
+    department: "Supply Chain",
+    branch: "Osaka",
+    organization: "Sakura Foods",
+    isActive: true,
+  },
+  {
+    id: 3,
+    code: "AL-0031",
+    firstName: "Lena",
+    lastName: "Fischer",
+    email: "lena.fischer@alpine.example.ch",
+    department: "Fleet",
+    branch: "Zürich",
+    organization: "Alpine Logistics",
+    isActive: false,
+  },
+  {
+    id: 4,
+    code: "LD-0007",
+    firstName: "Chidi",
+    lastName: "Okafor",
+    email: "chidi.okafor@lagosdigital.example.ng",
+    department: "Engineering",
+    branch: "Lagos",
+    organization: "Lagos Digital",
+    isActive: true,
+  },
+  {
+    id: 5,
+    code: "CB-0210",
+    firstName: "Mia",
+    lastName: "Nguyen",
+    email: "mia.nguyen@coralbay.example.au",
+    department: "Guest Services",
+    branch: "Cairns",
+    organization: "Coral Bay Resorts",
+    isActive: true,
+  },
+  {
+    id: 6,
+    code: "NW-0064",
+    firstName: "Erik",
+    lastName: "Lindqvist",
+    email: "erik.lindqvist@nordicwear.example.se",
+    department: "Retail",
+    branch: "Stockholm",
+    organization: "Nordic Wear",
+    isActive: true,
+  },
+];
+
+export const markets: DemoMarket[] = [
+  { id: 1, name: "Pacific Northwest", organization: "Northwind Retail", radiusMiles: 150 },
+  { id: 2, name: "Kansai", organization: "Sakura Foods", radiusMiles: 60 },
+  { id: 3, name: "DACH Core", organization: "Alpine Logistics", radiusMiles: null },
+  { id: 4, name: "Greater Sydney", organization: "Coral Bay Resorts", radiusMiles: 90 },
+];
+
+export const regionBreakdown: RegionBreakdown[] = [
+  { region: "Americas", organizations: 3 },
+  { region: "EMEA", organizations: 3 },
+  { region: "APAC", organizations: 2 },
+];
+
+function sum(values: number[]): number {
+  return values.reduce((total, value) => total + value, 0);
+}
+
+export const stats = {
+  organizations: {
+    label: "Organizations",
+    value: organizations.length,
+    delta: "+2 this month",
+    trend: "up" as const,
+  },
+  employees: {
+    label: "Employees",
+    value: sum(organizations.map((org) => org.employees)),
+    delta: "+128 this month",
+    trend: "up" as const,
+  },
+  activeMarkets: {
+    label: "Active markets",
+    value: markets.length,
+    delta: "+1 this week",
+    trend: "up" as const,
+  },
+  branches: {
+    label: "Branches",
+    value: sum(organizations.map((org) => org.branches)),
+    delta: "No change",
+    trend: "flat" as const,
+  },
+};

package/template/lib/mock-data.ts

@@ -0,0 +1,169 @@
+/**
+ * In-memory mock data for the backoffice entity tables. Foreign keys are
+ * flattened to display strings (e.g. `organization` instead of
+ * `organization_id`). Swap this for a real data/API layer when you wire up a
+ * backend.
+ *
+ * Organizations and employees live in `./demo-data` and are reused by their
+ * tables; everything else is defined here.
+ */
+
+// ── Records ────────────────────────────────────────────────────────────────
+
+export interface Branch {
+  id: number;
+  organization: string;
+  name: string;
+  code: string;
+  email: string;
+  phone: string;
+  city: string;
+  isHeadquarters: boolean;
+}
+
+export const branches: Branch[] = [
+  { id: 1, organization: "Northwind Retail", name: "Seattle HQ", code: "SEA", email: "sea@northwind.example.com", phone: "+1 206 555 0110", city: "Seattle", isHeadquarters: true },
+  { id: 2, organization: "Northwind Retail", name: "Portland", code: "PDX", email: "pdx@northwind.example.com", phone: "+1 503 555 0134", city: "Portland", isHeadquarters: false },
+  { id: 3, organization: "Sakura Foods", name: "Osaka", code: "OSA", email: "osaka@sakura.example.jp", phone: "+81 6 6555 0177", city: "Osaka", isHeadquarters: true },
+  { id: 4, organization: "Sakura Foods", name: "Tokyo", code: "TYO", email: "tokyo@sakura.example.jp", phone: "+81 3 6555 0188", city: "Tokyo", isHeadquarters: false },
+  { id: 5, organization: "Alpine Logistics", name: "Zürich", code: "ZRH", email: "zurich@alpine.example.ch", phone: "+41 44 555 0143", city: "Zürich", isHeadquarters: true },
+  { id: 6, organization: "Coral Bay Resorts", name: "Cairns", code: "CNS", email: "cairns@coralbay.example.au", phone: "+61 7 5555 0166", city: "Cairns", isHeadquarters: true },
+  { id: 7, organization: "Nordic Wear", name: "Stockholm", code: "STO", email: "sto@nordicwear.example.se", phone: "+46 8 555 0199", city: "Stockholm", isHeadquarters: true },
+  { id: 8, organization: "Lagos Digital", name: "Lagos", code: "LOS", email: "lagos@lagosdigital.example.ng", phone: "+234 1 555 0122", city: "Lagos", isHeadquarters: true },
+];
+
+export interface Department {
+  id: number;
+  organization: string;
+  title: string;
+  code: string;
+  employees: number;
+}
+
+export const departments: Department[] = [
+  { id: 1, organization: "Northwind Retail", title: "Operations", code: "OPS", employees: 84 },
+  { id: 2, organization: "Northwind Retail", title: "Merchandising", code: "MER", employees: 41 },
+  { id: 3, organization: "Sakura Foods", title: "Supply Chain", code: "SCM", employees: 58 },
+  { id: 4, organization: "Alpine Logistics", title: "Fleet", code: "FLT", employees: 33 },
+  { id: 5, organization: "Coral Bay Resorts", title: "Guest Services", code: "GST", employees: 96 },
+  { id: 6, organization: "Nordic Wear", title: "Retail", code: "RET", employees: 72 },
+  { id: 7, organization: "Lagos Digital", title: "Engineering", code: "ENG", employees: 27 },
+  { id: 8, organization: "Meridian Media", title: "Editorial", code: "EDT", employees: 45 },
+];
+
+export interface Market {
+  id: number;
+  organization: string;
+  name: string;
+  centerLatitude: number | null;
+  centerLongitude: number | null;
+  radiusMiles: number | null;
+}
+
+export const markets: Market[] = [
+  { id: 1, organization: "Northwind Retail", name: "Pacific Northwest", centerLatitude: 47.6062, centerLongitude: -122.3321, radiusMiles: 150 },
+  { id: 2, organization: "Sakura Foods", name: "Kansai", centerLatitude: 34.6937, centerLongitude: 135.5023, radiusMiles: 60 },
+  { id: 3, organization: "Alpine Logistics", name: "DACH Core", centerLatitude: null, centerLongitude: null, radiusMiles: null },
+  { id: 4, organization: "Coral Bay Resorts", name: "Greater Sydney", centerLatitude: -33.8688, centerLongitude: 151.2093, radiusMiles: 90 },
+  { id: 5, organization: "Nordic Wear", name: "Mälardalen", centerLatitude: 59.3293, centerLongitude: 18.0686, radiusMiles: 75 },
+  { id: 6, organization: "Lagos Digital", name: "Lagos Metro", centerLatitude: 6.5244, centerLongitude: 3.3792, radiusMiles: 40 },
+];
+
+export interface Business {
+  id: number;
+  title: string;
+  code: string;
+  description: string;
+}
+
+export const businesses: Business[] = [
+  { id: 1, title: "Retail", code: "RETAIL", description: "Brick-and-mortar and online consumer sales." },
+  { id: 2, title: "Food & Beverage", code: "FNB", description: "Food production, distribution, and hospitality." },
+  { id: 3, title: "Logistics", code: "LOGISTICS", description: "Freight, fleet, and last-mile delivery." },
+  { id: 4, title: "Media", code: "MEDIA", description: "Publishing, broadcast, and digital content." },
+  { id: 5, title: "Hospitality", code: "HOSPITALITY", description: "Hotels, resorts, and travel services." },
+  { id: 6, title: "Technology", code: "TECH", description: "Software, platforms, and IT services." },
+];
+
+// ── System / reference data ──────────────────────────────────────────────────
+
+export interface Region {
+  id: number;
+  name: string;
+  code: string;
+}
+
+export const regions: Region[] = [
+  { id: 1, name: "Americas", code: "AMER" },
+  { id: 2, name: "Europe, Middle East & Africa", code: "EMEA" },
+  { id: 3, name: "Asia-Pacific", code: "APAC" },
+];
+
+export interface Country {
+  id: number;
+  name: string;
+  code: string;
+  region: string;
+}
+
+export const countries: Country[] = [
+  { id: 1, name: "United States", code: "US", region: "Americas" },
+  { id: 2, name: "Argentina", code: "AR", region: "Americas" },
+  { id: 3, name: "United Kingdom", code: "GB", region: "Europe, Middle East & Africa" },
+  { id: 4, name: "Switzerland", code: "CH", region: "Europe, Middle East & Africa" },
+  { id: 5, name: "Sweden", code: "SE", region: "Europe, Middle East & Africa" },
+  { id: 6, name: "Nigeria", code: "NG", region: "Europe, Middle East & Africa" },
+  { id: 7, name: "Japan", code: "JP", region: "Asia-Pacific" },
+  { id: 8, name: "Australia", code: "AU", region: "Asia-Pacific" },
+];
+
+export interface City {
+  id: number;
+  name: string;
+  state: string;
+  country: string;
+}
+
+export const cities: City[] = [
+  { id: 1, name: "Seattle", state: "Washington", country: "United States" },
+  { id: 2, name: "Portland", state: "Oregon", country: "United States" },
+  { id: 3, name: "Osaka", state: "Osaka", country: "Japan" },
+  { id: 4, name: "Tokyo", state: "Tokyo", country: "Japan" },
+  { id: 5, name: "Zürich", state: "Zürich", country: "Switzerland" },
+  { id: 6, name: "Cairns", state: "Queensland", country: "Australia" },
+  { id: 7, name: "Stockholm", state: "Stockholm", country: "Sweden" },
+  { id: 8, name: "Lagos", state: "Lagos", country: "Nigeria" },
+];
+
+export interface Currency {
+  id: number;
+  name: string;
+  code: string;
+  symbol: string;
+}
+
+export const currencies: Currency[] = [
+  { id: 1, name: "US Dollar", code: "USD", symbol: "$" },
+  { id: 2, name: "Euro", code: "EUR", symbol: "€" },
+  { id: 3, name: "British Pound", code: "GBP", symbol: "£" },
+  { id: 4, name: "Japanese Yen", code: "JPY", symbol: "¥" },
+  { id: 5, name: "Swiss Franc", code: "CHF", symbol: "Fr" },
+  { id: 6, name: "Swedish Krona", code: "SEK", symbol: "kr" },
+  { id: 7, name: "Australian Dollar", code: "AUD", symbol: "A$" },
+  { id: 8, name: "Nigerian Naira", code: "NGN", symbol: "₦" },
+];
+
+export interface Language {
+  id: number;
+  name: string;
+  code: string;
+}
+
+export const languages: Language[] = [
+  { id: 1, name: "English", code: "en" },
+  { id: 2, name: "Japanese", code: "ja" },
+  { id: 3, name: "German", code: "de" },
+  { id: 4, name: "Swedish", code: "sv" },
+  { id: 5, name: "Spanish", code: "es" },
+  { id: 6, name: "French", code: "fr" },
+];

package/template/lib/org-store.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+import { organizations as seed, type DemoOrganization } from "./demo-data";
+
+// Client-side store shared by the organizations table and the create/edit
+// routes so a record added on /organizations/new shows up in the list.
+// A real app would back this with an API; the shape is intentionally simple.
+// ponytail: module-level array is fine for a demo/template; swap for a data
+// layer (React Query, server actions) when wiring a backend.
+let rows: DemoOrganization[] = [...seed];
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+export const orgStore = {
+  subscribe(listener: () => void) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+  snapshot: () => rows,
+  set(next: DemoOrganization[]) {
+    rows = next;
+    emit();
+  },
+  add(row: DemoOrganization) {
+    rows = [row, ...rows];
+    emit();
+  },
+  update(row: DemoOrganization) {
+    rows = rows.map((r) => (r.id === row.id ? row : r));
+    emit();
+  },
+  get(id: number) {
+    return rows.find((r) => r.id === id) ?? null;
+  },
+};
+
+export function useOrganizations(): DemoOrganization[] {
+  return useSyncExternalStore(
+    orgStore.subscribe,
+    orgStore.snapshot,
+    orgStore.snapshot,
+  );
+}

package/template/lib/seo.ts

@@ -0,0 +1,188 @@
+import type { Metadata } from "next";
+
+/** Single source of truth for site-wide SEO. Deployed as a static export to a
+ * custom domain (see ../CNAME), so URLs are absolute against SITE.url. */
+export const SITE = {
+  name: "Vui Starter",
+  tagline: "React Admin & CRM Design System",
+  url: "https://vui.viliha.com",
+  description:
+    "Vui Starter is a free, open-source React admin & CRM design system — a token-driven component library (@viliha/vui-ui) plus a full backoffice demo.",
+  ogImage: "/brand/pulse-wordmark.png",
+  author: "Suman Bonakurthi",
+  // Footer identity — overridable per deployment via env (see .env.example).
+  // NEXT_PUBLIC_ so the value is inlined into the client bundle at build time.
+  company: process.env.NEXT_PUBLIC_COMPANY_NAME ?? "VILIHA PTE. LTD.",
+  // Optional link for the company name in the footer (e.g. https://viliha.com).
+  companyUrl: process.env.NEXT_PUBLIC_COMPANY_URL ?? "",
+  // Always the current year — inlined at build, so a rebuild/deploy keeps it fresh.
+  copyrightYear: new Date().getFullYear(),
+  license: process.env.NEXT_PUBLIC_LICENSE ?? "MIT Licensed",
+} as const;
+
+/** Footer copyright line (plain string). Set NEXT_PUBLIC_FOOTER_NOTICE to
+ * override the whole thing, or set company / url / license vars above (the year
+ * is always the current year). The app footer links the company to its url. */
+export const FOOTER_NOTICE =
+  process.env.NEXT_PUBLIC_FOOTER_NOTICE ??
+  `© ${SITE.copyrightYear} ${SITE.company} · ${SITE.license}`;
+
+/** True when the footer line is a custom override (render it verbatim). */
+export const FOOTER_OVERRIDDEN = Boolean(process.env.NEXT_PUBLIC_FOOTER_NOTICE);
+
+/** Per-route title + description for the backoffice demo pages. Keeping it in
+ * one table means a page file only names its route, not its copy. */
+const ROUTE_META: Record<string, { title: string; description: string }> = {
+  "/dashboard": {
+    title: "Dashboard",
+    description:
+      "Admin dashboard demo with KPI stat cards, activity tables and charts, built on the Vui Starter React design system.",
+  },
+  "/charts": {
+    title: "Charts",
+    description:
+      "Chart component showcase — line, bar, area and pie charts styled with Vui Starter design tokens.",
+  },
+  "/components": {
+    title: "Components",
+    description:
+      "Live component gallery for @viliha/vui-ui — buttons, forms, tables, dialogs, menus and more.",
+  },
+  "/forms": {
+    title: "Forms",
+    description:
+      "Form patterns demo — inputs, selects, validation and multi-step forms built with React Hook Form and vui-ui.",
+  },
+  "/steps": {
+    title: "Steps",
+    description:
+      "Multi-step wizard demo built on the Steps indicator — stepper, per-step forms and Back/Next in the Vui Starter admin.",
+  },
+  "/calendar": {
+    title: "Calendar",
+    description:
+      "Calendar demo — a Google-style month view with appointments you can add and remove, built on the Vui Starter design system.",
+  },
+  "/settings": {
+    title: "Settings",
+    description:
+      "Settings screen demo — profile, appearance and preferences in the Vui Starter admin template.",
+  },
+  "/organizations": {
+    title: "Organizations",
+    description:
+      "Organizations data-table demo with sorting, filtering and pagination, from the Vui Starter admin.",
+  },
+  "/branches": {
+    title: "Branches",
+    description:
+      "Branches management screen — an example data table in the Vui Starter React admin template.",
+  },
+  "/departments": {
+    title: "Departments",
+    description:
+      "Departments management screen — an example data table in the Vui Starter React admin template.",
+  },
+  "/employees": {
+    title: "Employees",
+    description:
+      "Employees directory demo — a sortable, filterable data table from the Vui Starter admin template.",
+  },
+  "/markets": {
+    title: "Markets",
+    description:
+      "Markets management screen — an example data table in the Vui Starter React admin template.",
+  },
+  "/businesses": {
+    title: "Businesses",
+    description:
+      "Businesses management screen — an example data table in the Vui Starter React admin template.",
+  },
+  "/users": {
+    title: "Users",
+    description:
+      "User management demo — roles, status and access control in the Vui Starter admin template.",
+  },
+  "/crm/companies": {
+    title: "Companies",
+    description:
+      "CRM companies demo — manage accounts in the Vui Starter React admin & CRM design system.",
+  },
+  "/crm/people": {
+    title: "People",
+    description:
+      "CRM contacts demo — manage people and leads in the Vui Starter React admin & CRM design system.",
+  },
+  "/crm/opportunities": {
+    title: "Opportunities",
+    description:
+      "CRM pipeline demo — a kanban opportunities board in the Vui Starter admin & CRM design system.",
+  },
+  "/system/regions": {
+    title: "Regions",
+    description:
+      "System regions reference data — an example data table in the Vui Starter admin.",
+  },
+  "/system/countries": {
+    title: "Countries",
+    description:
+      "System countries reference data — an example data table in the Vui Starter admin.",
+  },
+  "/system/cities": {
+    title: "Cities",
+    description:
+      "System cities reference data — an example data table in the Vui Starter admin.",
+  },
+  "/system/currencies": {
+    title: "Currencies",
+    description:
+      "System currencies reference data — an example data table in the Vui Starter admin.",
+  },
+  "/system/languages": {
+    title: "Languages",
+    description:
+      "System languages reference data — an example data table in the Vui Starter admin.",
+  },
+};
+
+/** All public routes, for the sitemap. */
+export const PUBLIC_ROUTES: string[] = [
+  "/",
+  ...Object.keys(ROUTE_META),
+  "/docs",
+  "/docs/installation",
+  "/docs/configuration",
+  "/docs/theming",
+  "/docs/layout",
+  "/docs/components",
+  "/docs/data-table",
+  "/docs/steps",
+  "/docs/charts",
+  "/docs/auth",
+  "/docs/shadcn-ui",
+  "/docs/ai-agents",
+  "/docs/templates",
+  "/docs/contributing",
+];
+
+/** Self-referencing canonical for a route. The app is exported with
+ * `trailingSlash: true`, so pages are served at `/foo/` — the canonical must
+ * match that exactly, otherwise it points at a URL the host 301s away from. */
+export function canonicalFor(path: string): string {
+  return path === "/" ? "/" : `${path}/`;
+}
+
+/** Page metadata for a backoffice route. Sets a per-page title, description
+ * and self-canonical (Open Graph / Twitter inherit the rest from root). */
+export function pageMeta(path: string): Metadata {
+  const m = ROUTE_META[path];
+  if (!m) return {};
+  const { title, description } = m;
+  return {
+    title,
+    description,
+    alternates: { canonical: canonicalFor(path) },
+    openGraph: { title, description, url: canonicalFor(path) },
+    twitter: { title, description },
+  };
+}

package/template/lib/utils.ts

@@ -0,0 +1,3 @@
+// Single source of truth for cn() is @viliha/vui-ui. Re-exported here so shadcn's
+// "@/lib/utils" alias keeps resolving. Do not reintroduce a local clsx/tailwind-merge impl.
+export { cn } from "@viliha/vui-ui/utils";

package/template/next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // VUI ships as TypeScript source — Next must transpile it.
+  transpilePackages: ["@viliha/vui-ui"],
+  // Static export makes the open-tabs keep-alive work (all client at runtime).
+  // Remove these three if you need server components rendered per route.
+  output: "export",
+  images: { unoptimized: true },
+  trailingSlash: true,
+};
+
+export default nextConfig;