@luxfi/ui 7.4.0 → 7.4.2

package/src/vite.ts

@@ -0,0 +1,78 @@
+// The bundler wiring the gui engine needs on web, as ONE plugin.
+//
+// @hanzo/gui is authored against React Native primitives, so a web bundle has to
+// alias `react-native` → `react-native-web`, pre-bundle the CJS-only pieces, keep
+// exactly one physical copy of React and of the engine, and define the platform
+// flags the engine reads at module scope. Every Lux surface needs the identical
+// six-part incantation, and every surface that hand-rolled it got a different
+// subset — which is how you end up debugging `createContext of undefined` in one
+// app and a duplicate-React theme context in another.
+//
+//   import { luxUi } from '@luxfi/ui/vite'
+//   export default defineConfig({ plugins: [react(), luxUi()] })
+//
+// Node-only (it is a build-time module) and dependency-free: it returns a plain
+// Vite plugin object, so it does not force `vite` into anyone's runtime graph.
+
+interface LuxUiViteOptions {
+  /**
+   * Extra packages to keep to a single physical copy. React, the gui engine and
+   * TanStack Query are always deduped.
+   */
+  readonly dedupe?: ReadonlyArray<string>;
+  /**
+   * Extra packages to pre-bundle. The engine, react-native-web and the CJS-only
+   * colour helper are always included.
+   */
+  readonly include?: ReadonlyArray<string>;
+}
+
+/** Minimal structural shape of a Vite plugin — avoids a hard `vite` type dep. */
+interface LuxUiVitePlugin {
+  readonly name: string;
+  readonly config: () => {
+    define: Record<string, string>;
+    resolve: { alias: Record<string, string>; dedupe: Array<string> };
+    optimizeDeps: { include: Array<string> };
+  };
+}
+
+const DEDUPE = [
+  'react',
+  'react-dom',
+  '@tanstack/react-query',
+  '@hanzo/gui',
+  '@hanzogui/core',
+  '@hanzogui/web',
+];
+
+const INCLUDE = [
+  'react-native-web',
+  '@react-native/normalize-color',
+  '@hanzo/gui',
+  '@hanzogui/core',
+  '@luxfi/ui',
+];
+
+export function luxUi(options: LuxUiViteOptions = {}): LuxUiVitePlugin {
+  return {
+    name: '@luxfi/ui',
+    config: () => ({
+      // The engine branches on these at module scope; without them it takes the
+      // native path in a browser bundle.
+      define: {
+        'process.env.EXPO_OS': JSON.stringify('web'),
+        'process.env.IS_WEB': JSON.stringify('true'),
+      },
+      resolve: {
+        alias: { 'react-native': 'react-native-web' },
+        dedupe: [ ...new Set([ ...DEDUPE, ...(options.dedupe ?? []) ]) ],
+      },
+      optimizeDeps: {
+        include: [ ...new Set([ ...INCLUDE, ...(options.include ?? []) ]) ],
+      },
+    }),
+  };
+}
+
+export type { LuxUiViteOptions };

package/src/white-label.ts

@@ -0,0 +1,240 @@
+// White-label resolution — BY HOSTNAME, never per deployment.
+//
+// One image, many brands. Brand, gui theme row, IAM client id and OIDC issuer
+// are all a pure function of the Host header, so the same container serves
+// lux.cloud, zoo.network, hanzo.ai and pars.id without a rebuild, an env var or
+// a per-deployment override. Nothing here reads process.env.
+//
+// This module is VALUES ONLY (no React, no DOM) so it resolves identically in
+// three places that must agree:
+//   - the Next/SSR server, from `req.headers.host`
+//   - the browser, from `location.host`
+//   - an edge/middleware rewrite, from the incoming URL
+//
+// Logos, SEO copy and marketing palettes live in @luxfi/brand. This is the
+// runtime identity the UI layer needs and nothing more.
+
+// ---------------------------------------------------------------------------
+// Branding = VALUE, not place.
+// The ONE spot brand hex is allowed to live (project rule: never hardcode hex
+// in components). It lives HERE, beside the identity table it colours, rather
+// than in ./lux.config — that module builds the gui engine, and an identity
+// value that drags a Tamagui config behind it cannot be read by a server
+// component, a route handler or the `@luxfi/ui/iam` client. lux.config imports
+// these; nothing imports lux.config to get them.
+// ---------------------------------------------------------------------------
+export const LUX_BRAND = {
+  lux: '#7000FF',
+  zoo: '#6C5EFB',
+  hanzo: '#EA580C',
+  pars: '#1C3879',
+  // bootno.de is its own white label with its own IdP (id.bootno.de) — accent
+  // taken from the bootnode console's own brand default, not invented here.
+  bootnode: '#3B82F6',
+} as const;
+
+export const PARS_GOLD = '#C8A45C';
+
+export type LuxBrand = keyof typeof LUX_BRAND;
+
+export type Org = LuxBrand;
+
+export interface OrgIdentity {
+  /** Org id — also the gui child-theme suffix (`dark_lux`, `dark_zoo`, …). */
+  readonly org: Org;
+  /** Display name for chrome (header, title, sign-in copy). */
+  readonly name: string;
+  /** Canonical apex domain. */
+  readonly domain: string;
+  /** IAM/OIDC host. The issuer is `https://` + this. */
+  readonly iamDomain: string;
+  /** Brand accent hex — the same value the gui child-theme row is built from. */
+  readonly accent: string;
+  /** Foreground used on top of the accent. */
+  readonly accentForeground: string;
+}
+
+// The ONE table. Every hostname in the fleet resolves into one of these rows.
+const ORGS: Readonly<Record<Org, OrgIdentity>> = {
+  lux: {
+    org: 'lux',
+    name: 'Lux',
+    domain: 'lux.network',
+    iamDomain: 'lux.id',
+    accent: LUX_BRAND.lux,
+    accentForeground: '#FFFFFF',
+  },
+  zoo: {
+    org: 'zoo',
+    name: 'Zoo',
+    domain: 'zoo.ngo',
+    // Zoo's IdP is `id.zoo.network`, not a `zoo.id` apex — the one row in this
+    // table where the issuer is not `<org>.id`, and the one every hand-rolled
+    // per-app branding map got wrong.
+    iamDomain: 'id.zoo.network',
+    accent: LUX_BRAND.zoo,
+    accentForeground: '#FFFFFF',
+  },
+  bootnode: {
+    org: 'bootnode',
+    name: 'Bootnode',
+    domain: 'bootno.de',
+    iamDomain: 'id.bootno.de',
+    accent: LUX_BRAND.lux,
+    accentForeground: '#FFFFFF',
+  },
+  hanzo: {
+    org: 'hanzo',
+    name: 'Hanzo',
+    domain: 'hanzo.ai',
+    iamDomain: 'hanzo.id',
+    accent: LUX_BRAND.hanzo,
+    accentForeground: '#FFFFFF',
+  },
+  pars: {
+    org: 'pars',
+    name: 'Pars',
+    domain: 'pars.id',
+    iamDomain: 'pars.id',
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD,
+  },
+};
+
+// Registrable domains that belong to each org. Matched against the hostname
+// SUFFIX on a label boundary, so `mpc.lux.cloud` and `lux.cloud` both hit `lux`
+// while `notlux.cloud` does not.
+//
+// The third slot names the app at the domain's APEX. It is usually derivable
+// (`lux.cloud` → `cloud` → client `lux-cloud`), so it is only written where the
+// registered client says otherwise — `bootno.de` is `bootnode-platform`, not
+// `bootnode-de`. A client id is a registration, not a guess.
+const DOMAIN_ORG: ReadonlyArray<readonly [string, Org, string?]> = [
+  [ 'lux.network', 'lux' ],
+  [ 'lux.cloud', 'lux' ],
+  [ 'lux.id', 'lux' ],
+  [ 'lux.finance', 'lux' ],
+  [ 'zoo.ngo', 'zoo' ],
+  [ 'zoo.network', 'zoo' ],
+  [ 'zoo.cloud', 'zoo' ],
+  [ 'zoo.id', 'zoo' ],
+  [ 'hanzo.ai', 'hanzo' ],
+  [ 'hanzo.cloud', 'hanzo' ],
+  [ 'hanzo.id', 'hanzo' ],
+  [ 'pars.id', 'pars' ],
+  [ 'parsdao.org', 'pars' ],
+  [ 'bootno.de', 'bootnode', 'platform' ],
+];
+
+export const DEFAULT_ORG: Org = 'lux';
+
+export interface WhiteLabel extends OrgIdentity {
+  /** Hostname the identity was resolved from, port stripped, lowercased. */
+  readonly host: string;
+  /** App slug taken from the hostname — `mpc.lux.cloud` → `mpc`. */
+  readonly app: string;
+  /** gui child-theme row to hand GuiProvider — `dark_lux`, `dark_zoo`, … */
+  readonly theme: string;
+  /** OIDC issuer — `https://lux.id`. */
+  readonly issuer: string;
+  /** IAM client id, `<org>-<app>` per the fleet naming scheme — `lux-mpc`. */
+  readonly clientId: string;
+}
+
+/** Strip the port and any trailing dot, lowercase. `LUX.cloud:3000` → `lux.cloud`. */
+function normalizeHost(host: string): string {
+  const noPort = host.trim().toLowerCase().split(':')[0] ?? '';
+  return noPort.replace(/\.$/, '');
+}
+
+/** true when `host` is `domain` or a subdomain of it (label boundary respected). */
+function isUnder(host: string, domain: string): boolean {
+  return host === domain || host.endsWith(`.${ domain }`);
+}
+
+/** The registrable domain this host sits under, or undefined for unknown hosts. */
+function matchDomain(host: string): readonly [string, Org, string?] | undefined {
+  // Longest domain first so `zoo.network` wins over a hypothetical `network`.
+  let best: readonly [string, Org, string?] | undefined;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+
+/**
+ * App slug for the IAM client id.
+ *
+ * `mpc.lux.cloud`  → `mpc`      (leftmost label)
+ * `lux.cloud`      → `cloud`    (apex: the service name, not the org)
+ * `www.lux.network`→ `network`  (www is chrome, not an app)
+ * `localhost`      → `local`
+ */
+function appSlug(host: string, domain: string, apexApp?: string): string {
+  const sub = host === domain ? '' : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split('.')[0] ?? '';
+  if (leftmost && leftmost !== 'www') return leftmost;
+  // Apex (or www) — the registered name when the table gives one, else the
+  // domain's own service label.
+  if (apexApp) return apexApp;
+  const label = domain.split('.')[0] ?? '';
+  const tld = domain.split('.').slice(1).join('.');
+  // `lux.network` → `network`, `lux.cloud` → `cloud`, `pars.id` → `id`.
+  return tld.split('.')[0] || label;
+}
+
+/** Loopback / LAN / *.local hosts a developer actually types. */
+function isLocal(host: string): boolean {
+  return (
+    host === 'localhost' ||
+    host.endsWith('.localhost') ||
+    host === '127.0.0.1' ||
+    host === '0.0.0.0' ||
+    host === '[::1]' ||
+    host.endsWith('.local')
+  );
+}
+
+/**
+ * Resolve the full white-label identity from a Host header value.
+ *
+ * Pure and total: an unknown or missing host falls back to the Lux row rather
+ * than throwing, so a preview URL or a health probe never blanks the UI.
+ *
+ *   resolveWhiteLabel('mpc.lux.cloud')  // org lux,  clientId lux-mpc,   issuer https://lux.id
+ *   resolveWhiteLabel('zoo.network')    // org zoo,  clientId zoo-network, issuer https://zoo.id
+ *   resolveWhiteLabel('id.pars.id')     // org pars, clientId pars-id,   issuer https://pars.id
+ */
+export function resolveWhiteLabel(host?: string | null): WhiteLabel {
+  const h = normalizeHost(host ?? '');
+  const match = h ? matchDomain(h) : undefined;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : (h && isLocal(h) ? 'local' : 'app');
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${ org }`,
+    issuer: `https://${ identity.iamDomain }`,
+    clientId: `${ org }-${ app }`,
+  };
+}
+
+/**
+ * The current host in a browser, or '' during SSR / prerender.
+ * Server code must pass `req.headers.host` to resolveWhiteLabel explicitly —
+ * there is no ambient request here, and guessing would bake in a brand.
+ */
+export function currentHost(): string {
+  return typeof window === 'undefined' ? '' : window.location.host;
+}
+
+/** Identity for the org id itself, for the rare surface that is not host-routed. */
+export function orgIdentity(org: Org): OrgIdentity {
+  return ORGS[org];
+}
+
+export { ORGS as orgs };