@busiverse/ui 0.2.1 → 0.2.2

package/README.md

@@ -217,3 +217,21 @@ export const gateway = createGatewayClient({
 ```
 
 Font loading is also app-owned. The shared CSS does not import Google Fonts or any remote stylesheet. Each separately deployed Vercel frontend should self-host the BUSIVERSE fonts or load them explicitly at the app level.
+
+
+## v0.2.2 brand asset ownership
+
+`@busiverse/ui` is now the owner of BUSIVERSE favicons, platform icons, social preview defaults, and logo assets. Consuming frontends should not duplicate BUSIVERSE favicon/logo assets in their own `public/` folders unless a deployment platform explicitly requires a static file before JavaScript loads.
+
+Use `BusiverseBrandHead` once near the root of each frontend to inject the shared favicons, app manifest, Open Graph metadata, Twitter card metadata, and Microsoft tile metadata from package-owned assets.
+
+```tsx
+import { BusiverseBrandHead } from "@busiverse/ui";
+
+<BusiverseBrandHead
+  title="BUSIVERSE — Turn Ideas Into Operating Businesses"
+  description="BUSIVERSE combines AI automation, blockchain-backed trust, and modular business services to help teams launch and operate ventures faster."
+/>
+```
+
+The package remains network-neutral: it does not call `fetch`, open sockets, or import remote fonts.

package/dist/assets/assets.d.ts

@@ -25,7 +25,23 @@ export declare const busiverseAssets: {
         readonly ico: string;
         readonly png16: string;
         readonly png32: string;
+        readonly png96: string;
         readonly appleTouchIcon: string;
+        readonly androidChrome192: string;
+        readonly androidChrome512: string;
+        readonly androidIcon192: string;
+        readonly msTile144: string;
+    };
+    readonly social: {
+        readonly xHeader: string;
+        readonly xProfile: string;
+        readonly linkedInCover: string;
+        readonly linkedInProfile: string;
+        readonly facebookCover: string;
+        readonly facebookProfile: string;
+        readonly instagramPost: string;
+        readonly instagramProfile: string;
     };
 };
+export type BusiverseAssets = typeof busiverseAssets;
 //# sourceMappingURL=assets.d.ts.map

package/dist/assets/assets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../../src/assets/assets.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BlB,CAAC"}
+{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../../src/assets/assets.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ClB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC"}

package/dist/components/brand/BusiverseBrandHead.d.ts

@@ -0,0 +1,16 @@
+export interface BusiverseBrandHeadProps {
+    title?: string;
+    description?: string;
+    siteName?: string;
+    url?: string;
+    image?: string;
+    twitterSite?: string;
+    keywords?: string;
+    locale?: string;
+    themeColor?: string;
+    appleMobileWebAppTitle?: string;
+    applicationName?: string;
+}
+export declare function applyBusiverseBrandHead({ title, description, siteName, url, image, twitterSite, keywords, locale, themeColor, appleMobileWebAppTitle, applicationName, }?: BusiverseBrandHeadProps): void;
+export declare function BusiverseBrandHead(props: BusiverseBrandHeadProps): null;
+//# sourceMappingURL=BusiverseBrandHead.d.ts.map

package/dist/components/brand/BusiverseBrandHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusiverseBrandHead.d.ts","sourceRoot":"","sources":["../../../src/components/brand/BusiverseBrandHead.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA6CD,wBAAgB,uBAAuB,CAAC,EACtC,KAAqB,EACrB,WAAiC,EACjC,QAAsB,EACtB,GAAG,EACH,KAAsC,EACtC,WAA2B,EAC3B,QAA8H,EAC9H,MAAgB,EAChB,UAAgC,EAChC,sBAAoC,EACpC,eAA6B,GAC9B,GAAE,uBAA4B,QAgC9B;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,QAkBhE"}

package/dist/components/brand/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./BusiverseLogo";
+export * from "./BusiverseBrandHead";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/brand/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/brand/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/brand/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -42,7 +42,22 @@ var busiverseAssets = {
     ico: new URL("./assets/favicon.io/favicon.ico", import.meta.url).href,
     png16: new URL("./assets/favicon.io/favicon-16x16.png", import.meta.url).href,
     png32: new URL("./assets/favicon.io/favicon-32x32.png", import.meta.url).href,
-    appleTouchIcon: new URL("./assets/favicon.io/apple-touch-icon.png", import.meta.url).href
+    png96: new URL("./assets/favicon.io/favicon-96x96.png", import.meta.url).href,
+    appleTouchIcon: new URL("./assets/favicon.io/apple-touch-icon.png", import.meta.url).href,
+    androidChrome192: new URL("./assets/favicon.io/android-chrome-192x192.png", import.meta.url).href,
+    androidChrome512: new URL("./assets/favicon.io/android-chrome-512x512.png", import.meta.url).href,
+    androidIcon192: new URL("./assets/favicon.io/android-icon-192x192.png", import.meta.url).href,
+    msTile144: new URL("./assets/favicon.io/ms-icon-144x144.png", import.meta.url).href
+  },
+  social: {
+    xHeader: new URL("./assets/social/busiverse-twitter_x-header-2.7777777777777777x-darkbg.png", import.meta.url).href,
+    xProfile: new URL("./assets/social/busiverse-twitter_x-profile-picture-2.2222222222222223x-darkbg.png", import.meta.url).href,
+    linkedInCover: new URL("./assets/social/busiverse-linkedin-cover-photo-2.64x-darkbg.png", import.meta.url).href,
+    linkedInProfile: new URL("./assets/social/busiverse-linkedin-profile-picture-2.2222222222222223x-darkbg.png", import.meta.url).href,
+    facebookCover: new URL("./assets/social/busiverse-facebook-cover-photo-1.7333333333333334x-darkbg.png", import.meta.url).href,
+    facebookProfile: new URL("./assets/social/busiverse-facebook-profile-picture-1x-darkbg.png", import.meta.url).href,
+    instagramPost: new URL("./assets/social/busiverse-instagram-post-6x-darkbg.png", import.meta.url).href,
+    instagramProfile: new URL("./assets/social/busiverse-instagram-profile-picture-1.7777777777777777x-darkbg.png", import.meta.url).href
   }
 };
 
@@ -100,8 +115,109 @@ function BusiverseLogo({ variant = "horizontal", tone = "white", label = "BUSIVE
   );
 }
 
-// src/components/primitives/Button.tsx
+// src/components/brand/BusiverseBrandHead.tsx
 import * as React from "react";
+var DEFAULT_TITLE = "BUSIVERSE \u2014 Turn Ideas Into Operating Businesses";
+var DEFAULT_DESCRIPTION = "BUSIVERSE combines AI automation, blockchain-backed trust, and modular business services to help teams launch and operate ventures faster.";
+var DEFAULT_THEME_COLOR = "#020617";
+function ensureMeta(selector, attributes) {
+  let node = document.head.querySelector(selector);
+  if (!node) {
+    node = document.createElement("meta");
+    document.head.appendChild(node);
+  }
+  Object.entries(attributes).forEach(([key, value]) => node?.setAttribute(key, value));
+  return node;
+}
+function ensureLink(selector, attributes) {
+  let node = document.head.querySelector(selector);
+  if (!node) {
+    node = document.createElement("link");
+    node.setAttribute("data-busiverse-ui-head", "true");
+    document.head.appendChild(node);
+  }
+  Object.entries(attributes).forEach(([key, value]) => node?.setAttribute(key, value));
+  return node;
+}
+function createManifestDataUrl(title, description, themeColor) {
+  const manifest = {
+    name: title,
+    short_name: "BUSIVERSE",
+    description,
+    start_url: "/",
+    scope: "/",
+    display: "standalone",
+    background_color: themeColor,
+    theme_color: themeColor,
+    icons: [
+      { src: busiverseAssets.favicon.androidChrome192, sizes: "192x192", type: "image/png" },
+      { src: busiverseAssets.favicon.androidChrome512, sizes: "512x512", type: "image/png" }
+    ]
+  };
+  return `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifest))}`;
+}
+function applyBusiverseBrandHead({
+  title = DEFAULT_TITLE,
+  description = DEFAULT_DESCRIPTION,
+  siteName = "Busiverse",
+  url,
+  image = busiverseAssets.social.xHeader,
+  twitterSite = "@busiverse1",
+  keywords = "Busiverse, AI automation, blockchain-backed trust, modular business services, distributed business infrastructure",
+  locale = "en_NG",
+  themeColor = DEFAULT_THEME_COLOR,
+  appleMobileWebAppTitle = "BUSIVERSE",
+  applicationName = "BUSIVERSE"
+} = {}) {
+  document.title = title;
+  ensureMeta('meta[name="description"]', { name: "description", content: description });
+  ensureMeta('meta[name="keywords"]', { name: "keywords", content: keywords });
+  ensureMeta('meta[name="theme-color"]', { name: "theme-color", content: themeColor });
+  ensureMeta('meta[name="application-name"]', { name: "application-name", content: applicationName });
+  ensureMeta('meta[name="apple-mobile-web-app-title"]', { name: "apple-mobile-web-app-title", content: appleMobileWebAppTitle });
+  ensureMeta('meta[name="msapplication-TileColor"]', { name: "msapplication-TileColor", content: themeColor });
+  ensureMeta('meta[name="msapplication-TileImage"]', { name: "msapplication-TileImage", content: busiverseAssets.favicon.msTile144 });
+  ensureLink('link[data-busiverse-ui-head="icon-ico"]', { rel: "icon", type: "image/x-icon", href: busiverseAssets.favicon.ico, "data-busiverse-ui-head": "icon-ico" });
+  ensureLink('link[data-busiverse-ui-head="icon-16"]', { rel: "icon", type: "image/png", sizes: "16x16", href: busiverseAssets.favicon.png16, "data-busiverse-ui-head": "icon-16" });
+  ensureLink('link[data-busiverse-ui-head="icon-32"]', { rel: "icon", type: "image/png", sizes: "32x32", href: busiverseAssets.favicon.png32, "data-busiverse-ui-head": "icon-32" });
+  ensureLink('link[data-busiverse-ui-head="icon-96"]', { rel: "icon", type: "image/png", sizes: "96x96", href: busiverseAssets.favicon.png96, "data-busiverse-ui-head": "icon-96" });
+  ensureLink('link[data-busiverse-ui-head="icon-192"]', { rel: "icon", type: "image/png", sizes: "192x192", href: busiverseAssets.favicon.androidIcon192, "data-busiverse-ui-head": "icon-192" });
+  ensureLink('link[data-busiverse-ui-head="apple-touch-icon"]', { rel: "apple-touch-icon", sizes: "180x180", href: busiverseAssets.favicon.appleTouchIcon, "data-busiverse-ui-head": "apple-touch-icon" });
+  ensureLink('link[data-busiverse-ui-head="manifest"]', { rel: "manifest", href: createManifestDataUrl(title, description, themeColor), "data-busiverse-ui-head": "manifest" });
+  ensureMeta('meta[property="og:title"]', { property: "og:title", content: title });
+  ensureMeta('meta[property="og:description"]', { property: "og:description", content: description });
+  ensureMeta('meta[property="og:type"]', { property: "og:type", content: "website" });
+  ensureMeta('meta[property="og:site_name"]', { property: "og:site_name", content: siteName });
+  ensureMeta('meta[property="og:locale"]', { property: "og:locale", content: locale });
+  ensureMeta('meta[property="og:image"]', { property: "og:image", content: image });
+  if (url) ensureMeta('meta[property="og:url"]', { property: "og:url", content: url });
+  ensureMeta('meta[name="twitter:card"]', { name: "twitter:card", content: "summary_large_image" });
+  ensureMeta('meta[name="twitter:title"]', { name: "twitter:title", content: title });
+  ensureMeta('meta[name="twitter:description"]', { name: "twitter:description", content: description });
+  ensureMeta('meta[name="twitter:site"]', { name: "twitter:site", content: twitterSite });
+  ensureMeta('meta[name="twitter:image"]', { name: "twitter:image", content: image });
+}
+function BusiverseBrandHead(props) {
+  React.useEffect(() => {
+    applyBusiverseBrandHead(props);
+  }, [
+    props.title,
+    props.description,
+    props.siteName,
+    props.url,
+    props.image,
+    props.twitterSite,
+    props.keywords,
+    props.locale,
+    props.themeColor,
+    props.appleMobileWebAppTitle,
+    props.applicationName
+  ]);
+  return null;
+}
+
+// src/components/primitives/Button.tsx
+import * as React2 from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var variants = {
   primary: "busiverse-btn-primary",
@@ -116,7 +232,7 @@ var sizes = {
   md: "busiverse-btn-md",
   lg: "busiverse-btn-lg"
 };
-var Button = React.forwardRef(function Button2({ className, variant = "primary", size = "md", isLoading, children, disabled, ...props }, ref) {
+var Button = React2.forwardRef(function Button2({ className, variant = "primary", size = "md", isLoading, children, disabled, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -158,23 +274,23 @@ function Badge({ className, tone = "blue", ...props }) {
 }
 
 // src/components/primitives/Input.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Input = React2.forwardRef(function Input2({ className, ...props }, ref) {
+var Input = React3.forwardRef(function Input2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx5("input", { ref, className: cn("busiverse-focus-ring busiverse-input", className), ...props });
 });
 
 // src/components/primitives/Select.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Select = React3.forwardRef(function Select2({ className, ...props }, ref) {
+var Select = React4.forwardRef(function Select2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx6("select", { ref, className: cn("busiverse-focus-ring busiverse-input", className), ...props });
 });
 
 // src/components/primitives/Textarea.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var Textarea = React4.forwardRef(function Textarea2({ className, ...props }, ref) {
+var Textarea = React5.forwardRef(function Textarea2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx7("textarea", { ref, className: cn("busiverse-focus-ring busiverse-input busiverse-textarea", className), ...props });
 });
 
@@ -429,7 +545,7 @@ function UsageQuotaBar({ used, limit, label }) {
 }
 
 // src/components/billing/ServicePricingExplorer.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 
 // src/pricing/regions.ts
 var busiverseSupportedRegions = [
@@ -448,7 +564,7 @@ function getSupportedRegion(countryCode) {
 }
 
 // src/i18n/BusiverseI18nProvider.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var defaultRegion = {
   locale: "en-NG",
@@ -457,10 +573,10 @@ var defaultRegion = {
   currencyCode: "NGN",
   timeZone: "Africa/Lagos"
 };
-var I18nContext = React5.createContext(null);
+var I18nContext = React6.createContext(null);
 function BusiverseI18nProvider({ children, initialRegion, bundles = {} }) {
-  const [region, setRegion] = React5.useState({ ...defaultRegion, ...initialRegion });
-  const t = React5.useCallback((key, fallback, vars) => {
+  const [region, setRegion] = React6.useState({ ...defaultRegion, ...initialRegion });
+  const t = React6.useCallback((key, fallback, vars) => {
     const value = bundles[region.locale]?.[key] ?? bundles[region.locale.split("-")[0]]?.[key] ?? fallback ?? key;
     if (!vars) return value;
     return Object.entries(vars).reduce((acc, [name, val]) => acc.replaceAll(`{${name}}`, String(val)), value);
@@ -468,7 +584,7 @@ function BusiverseI18nProvider({ children, initialRegion, bundles = {} }) {
   return /* @__PURE__ */ jsx20(I18nContext.Provider, { value: { region, bundles, setRegion, t }, children });
 }
 function useBusiverseI18n() {
-  const ctx = React5.useContext(I18nContext);
+  const ctx = React6.useContext(I18nContext);
   if (!ctx) throw new Error("useBusiverseI18n must be used inside BusiverseI18nProvider");
   return ctx;
 }
@@ -8078,7 +8194,7 @@ function summarizeRange(min, max, region) {
   return `${formatPricingValue(min, region)} \u2013 ${formatPricingValue(max, region)}`;
 }
 function useFilteredSummaries(rows) {
-  return React6.useMemo(() => {
+  return React7.useMemo(() => {
     const serviceKeys = [...new Set(rows.map((row) => row.service))];
     return getServicePricingSummaries(busiverseServices.filter((service) => serviceKeys.includes(service.key)));
   }, [rows]);
@@ -8093,19 +8209,19 @@ function ServicePricingExplorer({
   maxInitialRows = 48
 }) {
   const { region } = useBusiverseI18n();
-  const [audience, setAudience] = React6.useState(defaultAudience);
-  const [category, setCategory] = React6.useState("all");
-  const [query, setQuery] = React6.useState("");
-  const [showAllRows, setShowAllRows] = React6.useState(false);
+  const [audience, setAudience] = React7.useState(defaultAudience);
+  const [category, setCategory] = React7.useState("all");
+  const [query, setQuery] = React7.useState("");
+  const [showAllRows, setShowAllRows] = React7.useState(false);
   const summaries = useFilteredSummaries(rows);
-  const filteredSummaries = React6.useMemo(() => summaries.filter((summary) => {
+  const filteredSummaries = React7.useMemo(() => summaries.filter((summary) => {
     const service = getBusiverseService(summary.service);
     if (category !== "all" && service?.category !== category) return false;
     if (!query.trim()) return true;
     const haystack = `${summary.service} ${service?.name ?? ""} ${service?.description ?? ""}`.toLowerCase();
     return haystack.includes(query.toLowerCase());
   }), [category, query, summaries]);
-  const filteredRows = React6.useMemo(() => {
+  const filteredRows = React7.useMemo(() => {
     const allowedServices = new Set(filteredSummaries.map((summary) => summary.service));
     return rows.filter((row) => allowedServices.has(row.service));
   }, [rows, filteredSummaries]);
@@ -8270,14 +8386,14 @@ function createGatewayClient(options) {
 }
 
 // src/auth/AuthSessionProvider.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
-var AuthContext = React7.createContext(null);
+var AuthContext = React8.createContext(null);
 function AuthSessionProvider({ children, session }) {
   return /* @__PURE__ */ jsx24(AuthContext.Provider, { value: session, children });
 }
 function useBusiverseAuth() {
-  const value = React7.useContext(AuthContext);
+  const value = React8.useContext(AuthContext);
   if (!value) throw new Error("useBusiverseAuth must be used inside AuthSessionProvider");
   return value;
 }
@@ -8317,6 +8433,7 @@ export {
   AppShell,
   AuthSessionProvider,
   Badge,
+  BusiverseBrandHead,
   BusiverseI18nProvider,
   BusiverseLogo,
   Button,
@@ -8348,6 +8465,7 @@ export {
   TimeSeriesTable,
   UsageQuotaBar,
   UserMenu,
+  applyBusiverseBrandHead,
   busiverseAssets,
   busiverseColors,
   busiverseContainers,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@busiverse/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": "Joel Julius Okoromi <okmarq@gmail.com> (https://busiversehq.com)",
   "description": "BUSIVERSE shared React UI, design tokens, pricing, i18n, auth helpers, and product shell. Network-neutral core; Gateway transport is app-injected.",
   "type": "module",