@busiverse/ui 0.2.7 → 0.2.9

package/README.md

@@ -1,39 +1,274 @@
 # @busiverse/ui
 
-Shared BUSIVERSE frontend UI package.
+Shared BUSIVERSE frontend package for separately deployed React/Vercel applications.
 
-Version: `0.2.7`
+It contains:
 
-## Purpose
+- Official BUSIVERSE brand asset wrappers.
+- Design tokens and Tailwind 4-compatible theme helpers.
+- Global CSS, fonts, reduced-motion, focus states, glass cards, buttons, tables, forms, and app shell.
+- Gateway-only API client foundation.
+- OIDC/auth UI helpers for signin and user-frontend-only signup routing.
+- Internationalization, country/region/currency, timezone, and locale utilities.
+- CRUD and time-series-ready table components.
+- Dashboard, billing, feedback, and marketing primitives.
 
-`@busiverse/ui` is the shared UI foundation for separately deployed Busiverse frontends on Vercel. It owns reusable brand assets, design tokens, shared CSS, brand metadata, social icons, i18n region context, reusable app-shell primitives, data tables, internal pricing tooling, and customer-facing marketing primitives.
+## Requirements
 
-The package remains network-neutral. It does not call `fetch`, load remote fonts, open sockets, or make network requests by itself. Frontends inject their own Gateway transport when they need API access.
+- Node.js `>=22.12.0`
+- npm `>=10.9.0`
+- React `19.2.7` compatible frontend applications
 
-## Public vs internal pricing
+This package is ESM-only. It does not publish CommonJS output.
 
-The package contains two separate layers:
+## Tailwind 4 note
 
-- `@busiverse/ui/marketing`: public/customer-facing pricing cards and marketing primitives.
-- `@busiverse/ui/billing`: internal/admin pricing explorer for operation-level tariffs, costs, margins, and chargeback visibility.
+`@busiverse/ui` does not require PostCSS.
 
-BusiLand should use the marketing layer. Internal/admin frontends may use the billing layer.
+The package ships its own compiled/global CSS as `@busiverse/ui/styles.css` and exports a plain Tailwind-compatible preset object from `@busiverse/ui/tailwind`. Consuming applications may use Tailwind through Vite, PostCSS, or another supported integration. The UI package itself does not force `@tailwindcss/postcss` or `@tailwindcss/vite` on consumers.
 
-## Imports
+## Install in separately deployed Vercel frontends
+
+Recommended production option: publish to a private npm registry package.
+
+```bash
+npm install @busiverse/ui
+```
+
+Local package test option:
+
+```bash
+cd packages/busiverse-ui
+npm install
+npm run build
+npm pack
+# then in each frontend
+npm install ../packages/busiverse-ui/busiverse-ui-0.1.0.tgz
+```
+
+## Add CSS once per frontend
+
+In `src/main.tsx` or `src/App.tsx`:
 
 ```tsx
 import "@busiverse/ui/styles.css";
-import { BusiverseBrandHead, BusiverseLogo } from "@busiverse/ui/brand";
-import { BusiverseI18nProvider } from "@busiverse/ui/i18n";
-import { MarketingPricingCard } from "@busiverse/ui/marketing";
-import { BusiverseGithubIcon } from "@busiverse/ui/social";
 ```
 
-## Publish
+## Configure env per Vercel frontend
+
+```env
+VITE_GATEWAY_API_URL=https://api.busiversehq.com
+VITE_SIGNUP_URL=https://user.busiversehq.com/signup
+VITE_SERVICE_KEY=communication
+VITE_DEFAULT_LOCALE=en-NG
+VITE_DEFAULT_COUNTRY=NG
+VITE_DEFAULT_REGION=NG-LA
+VITE_DEFAULT_CURRENCY=NGN
+VITE_DEFAULT_TIME_ZONE=Africa/Lagos
+```
+
+## Use AppShell
+
+```tsx
+import { AppShell, PageHeader, Button } from "@busiverse/ui";
+
+export function Dashboard() {
+  return (
+    <AppShell service="communication">
+      <PageHeader
+        title="Communication"
+        description="Send, automate, and track messages across Busiverse."
+        action={<Button>New message</Button>}
+      />
+    </AppShell>
+  );
+}
+```
+
+## Use Gateway client
+
+```tsx
+import { createGatewayClient } from "@busiverse/ui";
+
+const gateway = createGatewayClient({
+  baseUrl: import.meta.env.VITE_GATEWAY_API_URL,
+  getAccessToken: async () => token,
+  region: {
+    locale: "en-NG",
+    countryCode: "NG",
+    regionCode: "NG-LA",
+    currencyCode: "NGN",
+    timeZone: "Africa/Lagos"
+  }
+});
+
+await gateway.get("/communication/api/v1/messages");
+```
+
+## Use the Tailwind preset only when needed
+
+If a consuming app uses Tailwind and wants Busiverse tokens:
+
+```ts
+import { busiverseTailwindPreset } from "@busiverse/ui/tailwind";
+
+export default {
+  presets: [busiverseTailwindPreset],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"]
+};
+```
+
+For Busiverse Vite frontends, Tailwind itself should be configured in the frontend app, not inside this UI package.
+
+## Timeseries table
+
+```tsx
+import { TimeSeriesTable } from "@busiverse/ui";
+
+<TimeSeriesTable
+  rows={metrics}
+  timestampKey="createdAt"
+  valueColumns={["requestCount", "p95LatencyMs", "errorRate"]}
+/>
+```
+
+## Signup rule
+
+Only `user-frontend` should own real signup. Other frontends should use `<SignUpLink />` and route users to `https://user.busiversehq.com/signup`.
+
+## Build and publish
 
 ```bash
 npm install
 npm run typecheck
 npm run build
+npm audit --audit-level=low
+npm pack --dry-run
 npm publish --access public
 ```
+
+## Version 0.2.0 additions
+
+This release adds the BUSIVERSE standardized service pricing system used by `busiverse-landing` and reusable by every separately deployed Vercel frontend.
+
+### Added
+
+- `busiverseServicePricingCatalog` with 257 Account-rated operation rows.
+- `ServicePricingExplorer` for external pricing, internal Busiverse chargeback, estimated direct cost, margin, and standardized equivalents.
+- `RegionSelector` and supported pricing regions.
+- Country/region/currency/time-zone aware pricing display helpers.
+- Time-series aware service metadata for services that surface metrics, decision history, request metering, blockchain events, model jobs, and market data.
+
+### Vercel frontend usage
+
+Install from public npm after publishing this version:
+
+```bash
+npm install @busiverse/ui@^0.2.0
+```
+
+Import shared styles once in each Vite frontend entrypoint:
+
+```tsx
+import "@busiverse/ui/styles.css";
+```
+
+Wrap the frontend with the i18n provider:
+
+```tsx
+import { BusiverseI18nProvider } from "@busiverse/ui";
+
+<BusiverseI18nProvider
+  initialRegion={{
+    locale: import.meta.env.VITE_DEFAULT_LOCALE ?? "en-NG",
+    countryCode: import.meta.env.VITE_DEFAULT_COUNTRY ?? "NG",
+    regionCode: import.meta.env.VITE_DEFAULT_REGION ?? "NG-LA",
+    currencyCode: import.meta.env.VITE_DEFAULT_CURRENCY ?? "NGN",
+    timeZone: import.meta.env.VITE_DEFAULT_TIME_ZONE ?? "Africa/Lagos",
+  }}
+>
+  <App />
+</BusiverseI18nProvider>
+```
+
+Use the standardized pricing explorer anywhere pricing must be shown:
+
+```tsx
+import { ServicePricingExplorer } from "@busiverse/ui";
+
+<ServicePricingExplorer />
+```
+
+The current currency conversion rates are display fallbacks only. Final production charging still belongs to Account, with Location and Mint resolving region, currency, taxes, pass-through cost, and local pricing rules.
+
+
+## v0.2.1 network-neutral security patch
+
+`@busiverse/ui` no longer performs direct network access from inside the package. The previous `createGatewayClient` implementation used the browser `fetch` global directly, which can be flagged by npm/package scanners as “network access”. The package now requires the consuming frontend to inject a transport function.
+
+```ts
+import { createGatewayClient } from "@busiverse/ui";
+
+export const gateway = createGatewayClient({
+  baseUrl: import.meta.env.VITE_GATEWAY_API_URL,
+  transport: window.fetch.bind(window),
+  getAccessToken: async () => accessToken,
+});
+```
+
+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.
+
+
+## v0.2.4 social icon ownership
+
+`@busiverse/ui` owns BUSIVERSE-approved social icon wrappers so separately deployed frontends do not import brand icons from `lucide-react`. Lucide is an outline UI-icon library and newer builds do not export brand icons such as `Github`, `Twitter`, or `Linkedin`. Use:
+
+```tsx
+import { BusiverseGithubIcon, BusiverseXIcon, BusiverseLinkedInIcon, BusiverseMailIcon } from "@busiverse/ui";
+```
+
+The package remains network-neutral. The icons are inline SVG React components and do not fetch remote assets.
+
+## v0.2.8 export and BusiLand marketing patch
+
+This release fixes public subpath exports required by Vite/Rolldown:
+
+```ts
+import { BusiverseBrandHead } from "@busiverse/ui/brand";
+import { BusiverseI18nProvider } from "@busiverse/ui/i18n";
+import { BusiverseGithubIcon } from "@busiverse/ui/social";
+import { MarketingFeatureCard } from "@busiverse/ui/marketing";
+```
+
+It also corrects brand asset URL paths so packaged favicon, icon, logo, and social assets resolve at build time.
+
+Public marketing pages should not expose internal chargeback, operation codes, direct costs, margin, Account ledger mechanics, or outbox/saga details. Those remain internal/admin concerns. BusiLand should use customer-facing plans and bundles.
+
+
+## v0.2.9 — asset-manifest build warning fix
+
+This release fixes Vite/Rolldown warnings caused by social asset URLs resolving against the published package root. The `busiverseAssets` manifest now points to `dist/assets/...` paths at package-consumer build time. No frontend content changes are required.
+
+```bash
+npm install @busiverse/ui@0.2.9 --save-exact
+```
+
+The frontend should not duplicate BUSIVERSE brand assets in `public/`; brand assets remain owned by `@busiverse/ui`.

package/dist/assets-public.d.ts

@@ -0,0 +1,2 @@
+export * from "./assets/assets";
+//# sourceMappingURL=assets-public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"assets-public.d.ts","sourceRoot":"","sources":["../src/assets-public.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/assets-public.js

@@ -0,0 +1,6 @@
+import {
+  busiverseAssets
+} from "./chunk-UN2VM6WK.js";
+export {
+  busiverseAssets
+};

package/dist/billing.d.ts

@@ -0,0 +1,3 @@
+export * from "./components/billing";
+export * from "./pricing";
+//# sourceMappingURL=billing.d.ts.map

package/dist/billing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"billing.d.ts","sourceRoot":"","sources":["../src/billing.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC"}

package/dist/billing.js

@@ -0,0 +1,46 @@
+import {
+  CurrencyAmount,
+  ServicePricingExplorer,
+  UsageQuotaBar,
+  busiverseServicePricingCatalog,
+  cadenceLabels,
+  convertUsdToRegionCurrency,
+  describeTimeEquivalents,
+  formatMargin,
+  formatPricingValue,
+  formatUsdAsRegionCurrency,
+  getPricingRowsByService,
+  getRowDirectCostUsd,
+  getRowGrossMargin,
+  getRowPriceUsd,
+  getServicePricingSummaries,
+  getServicePricingSummary,
+  labelCadence
+} from "./chunk-MPBOCUY4.js";
+import {
+  busiverseSupportedRegions,
+  getSupportedRegion
+} from "./chunk-WDOMYE77.js";
+import "./chunk-IVTESKF4.js";
+import "./chunk-PYZVP4NI.js";
+export {
+  CurrencyAmount,
+  ServicePricingExplorer,
+  UsageQuotaBar,
+  busiverseServicePricingCatalog,
+  busiverseSupportedRegions,
+  cadenceLabels,
+  convertUsdToRegionCurrency,
+  describeTimeEquivalents,
+  formatMargin,
+  formatPricingValue,
+  formatUsdAsRegionCurrency,
+  getPricingRowsByService,
+  getRowDirectCostUsd,
+  getRowGrossMargin,
+  getRowPriceUsd,
+  getServicePricingSummaries,
+  getServicePricingSummary,
+  getSupportedRegion,
+  labelCadence
+};

package/dist/brand.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/brand";
+//# sourceMappingURL=brand.d.ts.map

package/dist/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/{components/brand/index.js → brand.js}

@@ -1,11 +1,12 @@
 import {
   BusiverseBrandHead,
   applyBusiverseBrandHead
-} from "../../chunk-SZVGFEJG.js";
+} from "./chunk-FMJ6TFBB.js";
+import "./chunk-UN2VM6WK.js";
 import {
   BusiverseLogo
-} from "../../chunk-32FPZZH2.js";
-import "../../chunk-PYZVP4NI.js";
+} from "./chunk-32FPZZH2.js";
+import "./chunk-PYZVP4NI.js";
 export {
   BusiverseBrandHead,
   BusiverseLogo,

package/dist/{chunk-SZVGFEJG.js → chunk-FMJ6TFBB.js}

@@ -1,15 +1,9 @@
+import {
+  busiverseAssets
+} from "./chunk-UN2VM6WK.js";
+
 // src/components/brand/BusiverseBrandHead.tsx
 import * as React from "react";
-var faviconIco = new URL("../../assets/favicon.io/favicon.ico", import.meta.url).href;
-var favicon16 = new URL("../../assets/favicon.io/favicon-16x16.png", import.meta.url).href;
-var favicon32 = new URL("../../assets/favicon.io/favicon-32x32.png", import.meta.url).href;
-var favicon96 = new URL("../../assets/favicon.io/favicon-96x96.png", import.meta.url).href;
-var appleTouchIcon = new URL("../../assets/favicon.io/apple-touch-icon.png", import.meta.url).href;
-var androidChrome192 = new URL("../../assets/favicon.io/android-chrome-192x192.png", import.meta.url).href;
-var androidChrome512 = new URL("../../assets/favicon.io/android-chrome-512x512.png", import.meta.url).href;
-var androidIcon192 = new URL("../../assets/favicon.io/android-icon-192x192.png", import.meta.url).href;
-var msTile144 = new URL("../../assets/favicon.io/ms-icon-144x144.png", import.meta.url).href;
-var defaultSocialImage = new URL("../../assets/social/busiverse-twitter_x-header-2.7777777777777777x-darkbg.png", import.meta.url).href;
 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";
@@ -43,8 +37,8 @@ function createManifestDataUrl(title, description, themeColor) {
     background_color: themeColor,
     theme_color: themeColor,
     icons: [
-      { src: androidChrome192, sizes: "192x192", type: "image/png" },
-      { src: androidChrome512, sizes: "512x512", type: "image/png" }
+      { 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))}`;
@@ -54,7 +48,7 @@ function applyBusiverseBrandHead({
   description = DEFAULT_DESCRIPTION,
   siteName = "Busiverse",
   url,
-  image = defaultSocialImage,
+  image = busiverseAssets.social.xHeader,
   twitterSite = "@busiverse1",
   keywords = "Busiverse, AI automation, blockchain-backed trust, modular business services, distributed business infrastructure",
   locale = "en_NG",
@@ -69,13 +63,13 @@ function applyBusiverseBrandHead({
   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: msTile144 });
-  ensureLink('link[data-busiverse-ui-head="icon-ico"]', { rel: "icon", type: "image/x-icon", href: faviconIco, "data-busiverse-ui-head": "icon-ico" });
-  ensureLink('link[data-busiverse-ui-head="icon-16"]', { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16, "data-busiverse-ui-head": "icon-16" });
-  ensureLink('link[data-busiverse-ui-head="icon-32"]', { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32, "data-busiverse-ui-head": "icon-32" });
-  ensureLink('link[data-busiverse-ui-head="icon-96"]', { rel: "icon", type: "image/png", sizes: "96x96", href: favicon96, "data-busiverse-ui-head": "icon-96" });
-  ensureLink('link[data-busiverse-ui-head="icon-192"]', { rel: "icon", type: "image/png", sizes: "192x192", href: androidIcon192, "data-busiverse-ui-head": "icon-192" });
-  ensureLink('link[data-busiverse-ui-head="apple-touch-icon"]', { rel: "apple-touch-icon", sizes: "180x180", href: appleTouchIcon, "data-busiverse-ui-head": "apple-touch-icon" });
+  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 });

package/dist/{chunk-GRZVAWCA.js → chunk-IVTESKF4.js}

@@ -35,29 +35,6 @@ var Button = React.forwardRef(function Button2({ className, variant = "primary",
   );
 });
 
-// src/components/primitives/Card.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Card({ className, interactive, ...props }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("busiverse-card", interactive && "busiverse-card-interactive", className), ...props });
-}
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("busiverse-card-header", className), ...props });
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("h3", { className: cn("busiverse-card-title", className), ...props });
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("p", { className: cn("busiverse-card-description", className), ...props });
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("busiverse-card-content", className), ...props });
-}
-
 export {
-  Button,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent
+  Button
 };