@viliha/vui-ui 1.6.3 → 1.7.0

package/CHANGELOG.md

@@ -7,6 +7,16 @@ backward-compatible features, **major** for breaking changes.
 
 To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
 
+## 1.7.0 — 2026-07-25
+
+### Added
+
+- **Configurable favicon** via the runtime brand system. `BrandProvider` gains a
+  `faviconUrl` field (alongside `logoUrl`): set `NEXT_PUBLIC_FAVICON_URL` for a
+  build-time default, return `faviconUrl` from your `NEXT_PUBLIC_BRAND_URL` JSON
+  (or call `useBrand().setBrand({ faviconUrl })`) to change the browser-tab icon
+  live per tenant, no rebuild. The static `app/icon.*` files remain the fallback.
+
 ## 1.6.3 — 2026-07-25
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "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/template/.env.example

@@ -12,10 +12,11 @@ NEXT_PUBLIC_APP_DESCRIPTION="Your app description for search engines and social
 NEXT_PUBLIC_APP_URL="https://vui.viliha.com"
 
 # Runtime branding (multi-tenant / white-label). Point this at a JSON endpoint
-# returning any of { name, tagline, description, logoUrl, company, companyUrl };
-# BrandProvider fetches it on load and overrides the values above — including the
-# tab title — live, no rebuild. (Or seed <BrandProvider initial={…}> from a
-# loader, or call useBrand().setBrand(…) once your API responds.)
+# returning any of { name, tagline, description, logoUrl, faviconUrl, company,
+# companyUrl }; BrandProvider fetches it on load and overrides the values above —
+# including the tab title and favicon — live, no rebuild. (Or seed
+# <BrandProvider initial={…}> from a loader, or call useBrand().setBrand(…) once
+# your API responds.)
 # NEXT_PUBLIC_BRAND_URL="https://api.example.com/branding"
 
 NEXT_PUBLIC_COMPANY_NAME="VILIHA PTE. LTD."
@@ -28,6 +29,10 @@ NEXT_PUBLIC_LICENSE="MIT Licensed"
 # mark. e.g. drop public/logo.svg and set:
 # NEXT_PUBLIC_LOGO_URL="/logo.svg"
 
+# Optional — browser-tab icon (favicon). Overrides the static app/icon.* files;
+# falls back to them when unset. Serve from /public or use an absolute URL.
+# NEXT_PUBLIC_FAVICON_URL="/favicon.png"
+
 # Override the entire footer line at once (takes precedence over the vars above):
 # NEXT_PUBLIC_FOOTER_NOTICE="© 2026 Acme Inc. · All rights reserved"
 

package/template/app/_components/brand.tsx

@@ -26,6 +26,9 @@ export type Brand = {
   description: string;
   /** Overrides NEXT_PUBLIC_LOGO_URL at runtime; unset → the built-in mark. */
   logoUrl?: string;
+  /** Browser-tab icon. Overrides NEXT_PUBLIC_FAVICON_URL at runtime; unset →
+   *  the static app/icon.* file convention. */
+  faviconUrl?: string;
   company: string;
   companyUrl: string;
 };
@@ -35,6 +38,7 @@ const DEFAULT_BRAND: Brand = {
   tagline: SITE.tagline,
   description: SITE.description,
   logoUrl: process.env.NEXT_PUBLIC_LOGO_URL || undefined,
+  faviconUrl: process.env.NEXT_PUBLIC_FAVICON_URL || undefined,
   company: SITE.company,
   companyUrl: SITE.companyUrl,
 };
@@ -106,6 +110,32 @@ export function BrandProvider({
     return () => cancelAnimationFrame(id);
   }, [pathname, brand.name, brand.tagline]);
 
+  // Swap the browser-tab icon when the brand provides one (env default or API).
+  // The static app/icon.* links are the pre-JS fallback; here we point every
+  // icon <link> at the brand favicon and restore them if it changes/unmounts.
+  React.useEffect(() => {
+    const href = brand.faviconUrl;
+    if (!href) return; // no override — keep the static file-convention icons
+    const links = Array.from(
+      document.querySelectorAll<HTMLLinkElement>("link[rel~='icon']"),
+    );
+    if (links.length === 0) {
+      const link = document.createElement("link");
+      link.rel = "icon";
+      document.head.appendChild(link);
+      links.push(link);
+    }
+    const prev = links.map((l) => l.getAttribute("href"));
+    links.forEach((l) => l.setAttribute("href", href));
+    return () => {
+      links.forEach((l, i) => {
+        const p = prev[i];
+        if (p == null) l.remove(); // was created/absent → drop it
+        else l.setAttribute("href", p);
+      });
+    };
+  }, [brand.faviconUrl]);
+
   return (
     <BrandContext.Provider value={{ brand, setBrand }}>
       {children}