@viliha/vui-ui 1.5.3 → 1.5.4

package/CHANGELOG.md

@@ -7,6 +7,21 @@ backward-compatible features, **major** for breaking changes.
 
 To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
 
+## 1.5.4 — 2026-07-24
+
+### Added
+
+- `NEXT_PUBLIC_APP_NAME` env var (in the scaffold) renames the app — the sidebar,
+  wordmark, auth screens, and page titles now read from one place (`SITE.name`)
+  instead of a hard-coded "Vui Starter".
+
+### Fixed
+
+- `ChartContainer` no longer triggers Recharts' "width(0) and height(0) … should
+  be greater than 0" warning when it renders inside a hidden container (e.g. a
+  kept-alive inactive tab). It waits for a measured size before mounting the
+  `ResponsiveContainer`.
+
 ## 1.5.3 — 2026-07-24
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/src/chart.tsx

@@ -35,18 +35,38 @@ export function ChartContainer({
     Object.entries(config).map(([key, v]) => [`--color-${key}`, v.color]),
   ) as React.CSSProperties;
 
+  // Only mount the ResponsiveContainer once the wrapper has a real size.
+  // Keep-alive tabs render inactive pages with `display:none` (0×0), which makes
+  // Recharts warn "width(0) and height(0) … should be greater than 0"; gating on
+  // an observed size avoids that and mounts the chart the moment the tab shows.
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [sized, setSized] = React.useState(false);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      const r = entry?.contentRect;
+      setSized(!!r && r.width > 0 && r.height > 0);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   return (
     <ChartConfigContext.Provider value={config}>
       <div
+        ref={ref}
         style={cssVars}
         className={cn(
           "aspect-video w-full text-xs [&_.recharts-cartesian-grid_line]:stroke-border/60 [&_.recharts-text]:fill-muted-foreground",
           className,
         )}
       >
-        <ResponsiveContainer width="100%" height="100%">
-          {children}
-        </ResponsiveContainer>
+        {sized && (
+          <ResponsiveContainer width="100%" height="100%">
+            {children}
+          </ResponsiveContainer>
+        )}
       </div>
     </ChartConfigContext.Provider>
   );

package/template/.env.example

@@ -2,6 +2,9 @@
 # All are optional; defaults are used when unset. NEXT_PUBLIC_ vars are read at
 # build time and inlined into the exported site.
 
+# App / brand name shown in the sidebar, wordmark, auth screens, and page titles.
+NEXT_PUBLIC_APP_NAME="Vui Starter"
+
 NEXT_PUBLIC_COMPANY_NAME="VILIHA PTE. LTD."
 # Optional — links the company name in the footer:
 NEXT_PUBLIC_COMPANY_URL="https://viliha.com"

package/template/app/_components/app-sidebar.tsx

@@ -13,6 +13,7 @@ import {
 } from "@radix-ui/react-icons";
 
 import { cn } from "@/lib/utils";
+import { SITE } from "@/lib/seo";
 import { Menu as MenuPanel } from "@viliha/vui-ui/menu";
 import { Logo } from "./logo";
 import { QuickActionsLauncher } from "./quick-actions";
@@ -369,13 +370,13 @@ function SidebarBody({
             collapsed ? "w-9 shrink-0 justify-center px-0" : "flex-1",
           )}
           aria-label="Switch workspace"
-          title={collapsed ? "Vui Starter" : undefined}
+          title={collapsed ? SITE.name : undefined}
         >
           <Logo variant="mark" className="h-6 w-6 shrink-0" />
           {!collapsed && (
             <>
               <span className="min-w-0 flex-1 truncate text-lg font-bold tracking-tight text-foreground">
-                Vui Starter
+                {SITE.name}
               </span>
               <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
             </>

package/template/app/_components/logo.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import { cn } from "@/lib/utils";
+import { SITE } from "@/lib/seo";
 
 type LogoProps = {
   /** Kept for call-site compatibility; the mark is the same either way. */
@@ -32,7 +33,7 @@ export function Logo({ className }: LogoProps) {
     <svg
       viewBox="0 0 24 24"
       role="img"
-      aria-label="Vui Starter"
+      aria-label={SITE.name}
       className={cn("h-6 w-6", className)}
     >
       <rect width="24" height="24" rx="6" fill="var(--brand-indigo)" />

package/template/app/_components/wordmark.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import { cn } from "@/lib/utils";
+import { SITE } from "@/lib/seo";
 import { Logo } from "./logo";
 
 /**
@@ -29,14 +30,14 @@ export function Wordmark({
           textClassName,
         )}
       >
-        Vui Starter
+        {SITE.name}
       </span>
     </>
   );
   const classes = cn("flex items-center gap-2", className);
 
   return href ? (
-    <Link href={href} aria-label="Vui Starter" className={classes}>
+    <Link href={href} aria-label={SITE.name} className={classes}>
       {content}
     </Link>
   ) : (

package/template/lib/seo.ts

@@ -3,7 +3,9 @@ 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",
+  // App/brand name shown in the sidebar, wordmark, auth screens, and page
+  // titles. Override per deployment via env (NEXT_PUBLIC_ = inlined at build).
+  name: process.env.NEXT_PUBLIC_APP_NAME ?? "Vui Starter",
   tagline: "React Admin & CRM Design System",
   url: "https://vui.viliha.com",
   description: