@luxfi/ui 7.3.2 → 7.4.2

package/src/slider.tsx

@@ -1,4 +1,4 @@
-import * as RadixSlider from '@radix-ui/react-slider';
+import { Slider as GuiSlider } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -20,9 +20,10 @@ export interface SliderProps {
   readonly className?: string;
 }
 
-const THUMB_SIZE = 20;
-const TRACK_HEIGHT = 6;
-
+// gui's Slider: pointer, touch and keyboard from one implementation, with the
+// drag handled as a pan gesture by the engine rather than by mouse events — so it
+// works under a finger, not only under a cursor. `role=slider` and the arrow-key
+// contract come from the primitive.
 export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
   function Slider(props, ref) {
     const {
@@ -35,7 +36,7 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
       max = 100,
       step,
       disabled,
-      orientation,
+      orientation = 'horizontal',
       name,
       onValueChange,
       onValueCommit,
@@ -51,6 +52,17 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
 
     const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
 
+    // gui signals the end of a drag without echoing the value, so keep the last
+    // one to satisfy the Chakra-shaped `onValueCommit(value)` contract.
+    const latest = React.useRef<Array<number>>(value ?? defaultValue ?? []);
+    const handleValueChange = React.useCallback((next: Array<number>) => {
+      latest.current = next;
+      onValueChange?.(next);
+    }, [ onValueChange ]);
+    const handleSlideEnd = React.useCallback(() => {
+      onValueCommit?.(latest.current);
+    }, [ onValueCommit ]);
+
     return (
       <div className={ cn('flex flex-col gap-1', className) }>
         { label && !showValue && (
@@ -69,8 +81,9 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
           </div>
         ) }
 
-        <RadixSlider.Root
-          ref={ ref }
+        <GuiSlider
+          ref={ ref as never }
+          unstyled
           className={ cn(
             'relative flex w-full touch-none select-none items-center',
             hasMarkLabel && 'mb-6',
@@ -83,23 +96,26 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
           disabled={ disabled }
           orientation={ orientation }
           name={ name }
-          onValueChange={ onValueChange }
-          onValueCommit={ onValueCommit }
+          onValueChange={ handleValueChange }
+          onSlideEnd={ handleSlideEnd }
         >
-          <RadixSlider.Track
-            className={ cn(
-              'relative grow rounded-full bg-border-divider',
-              `h-[${ TRACK_HEIGHT }px]`,
-            ) }
+          <GuiSlider.Track
+            unstyled
+            className="relative grow h-1.5 rounded-full bg-border-divider"
           >
-            <RadixSlider.Range className="absolute h-full rounded-full bg-link-primary"/>
-          </RadixSlider.Track>
+            <GuiSlider.TrackActive
+              unstyled
+              className="absolute h-full rounded-full bg-link-primary"
+            />
+          </GuiSlider.Track>
 
           { resolvedValue?.map((_, index) => (
-            <RadixSlider.Thumb
+            <GuiSlider.Thumb
               key={ index }
+              index={ index }
+              unstyled
               className={ cn(
-                `block h-[${ THUMB_SIZE }px] w-[${ THUMB_SIZE }px]`,
+                'block h-5 w-5',
                 'rounded-full border-2 border-link-primary bg-white',
                 'shadow-sm transition-colors',
                 'hover:border-link-primary-hover',
@@ -108,7 +124,7 @@ export const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(
               ) }
             />
           )) }
-        </RadixSlider.Root>
+        </GuiSlider>
 
         <SliderMarks marks={ marks } min={ min } max={ max }/>
       </div>

package/src/strategy-builder.tsx

@@ -207,9 +207,10 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
         type="button"
         className={cn(
           'px-2 py-0.5 rounded text-xs font-medium transition-colors',
+          // Call vs put is a rank difference, not a hue difference.
           leg.type === 'call'
-            ? 'bg-blue-900/40 text-blue-400'
-            : 'bg-orange-900/40 text-orange-400',
+            ? 'bg-[var(--secondary)] text-[var(--foreground)]'
+            : 'bg-[var(--muted)] text-[var(--muted-foreground)]',
         )}
         onClick={() => update({ type: leg.type === 'call' ? 'put' : 'call' })}
       >

package/src/switch.tsx

@@ -1,5 +1,4 @@
-import * as RadixSwitch from '@radix-ui/react-switch';
-// chakra() HOC removed — pure Radix + Tailwind
+import { Switch as GuiSwitch } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -7,20 +6,23 @@ import { cn } from './utils';
 const NOOP = () => { /* noop */ };
 
 // ─── Size mappings ────────────────────────────────────────────────────
+// Paint and box size only. Thumb travel is NOT a hardcoded translate any more:
+// gui measures the track and the knob and moves the knob by the difference, so
+// the switch stays correct at any size and on native.
 const SIZE_CLASSES = {
   sm: {
     root: 'h-4 w-7',
-    thumb: 'h-3 w-3 data-[state=checked]:translate-x-3',
+    thumb: 'h-3 w-3',
     label: 'text-xs',
   },
   md: {
     root: 'h-5 w-9',
-    thumb: 'h-4 w-4 data-[state=checked]:translate-x-4',
+    thumb: 'h-4 w-4',
     label: 'text-sm',
   },
   lg: {
     root: 'h-6 w-11',
-    thumb: 'h-5 w-5 data-[state=checked]:translate-x-5',
+    thumb: 'h-5 w-5',
     label: 'text-base',
   },
 } as const;
@@ -72,11 +74,8 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
           setInternalChecked(nextChecked);
         }
 
-        if (onCheckedChange) {
-          // Support both Chakra-style ({ checked }) and Radix-style (checked) signatures.
-          // We call with a single object arg; if the consumer ignores it, that's fine.
-          (onCheckedChange as (details: { checked: boolean }) => void)({ checked: nextChecked });
-        }
+        // Chakra-shaped callback ({ checked }) — the contract consumers already use.
+        onCheckedChange?.({ checked: nextChecked });
       },
       [ isControlled, onCheckedChange ],
     );
@@ -97,7 +96,8 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
         data-disabled={ disabled || undefined }
         { ...rest }
       >
-        <RadixSwitch.Root
+        <GuiSwitch
+          unstyled
           checked={ checkedState }
           onCheckedChange={ handleCheckedChange }
           disabled={ disabled }
@@ -115,11 +115,12 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
               { checkedState ? trackLabel.on : trackLabel.off }
             </span>
           ) }
-          <RadixSwitch.Thumb
+          <GuiSwitch.Thumb
+            unstyled
+            data-thumb
+            transition="quicker"
             className={ cn(
               'block rounded-full bg-white shadow-sm',
-              'transition-transform duration-200',
-              'translate-x-0.5',
               sizeClasses.thumb,
             ) }
           >
@@ -128,8 +129,8 @@ const SwitchBase = React.forwardRef<HTMLInputElement, SwitchProps>(
                 { checkedState ? thumbLabel.on : thumbLabel.off }
               </span>
             ) }
-          </RadixSwitch.Thumb>
-        </RadixSwitch.Root>
+          </GuiSwitch.Thumb>
+        </GuiSwitch>
         { /* Hidden native input for form compat and ref forwarding */ }
         <input
           ref={ ref }

package/src/textarea.tsx

@@ -1,3 +1,4 @@
+import { TextArea as GuiTextArea } from '@hanzo/gui';
 import React from 'react';
 
 import { cn } from './utils';
@@ -34,15 +35,28 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 export interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, 'size'> {
   readonly size?: TextareaSize;
   readonly variant?: TextareaVariant;
+  /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
+  readonly onChangeText?: (text: string) => void;
 }
 
+// gui's TextArea — multiline TextInput on native, `<textarea>` on web — wearing
+// the Lux size/variant classes.
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ size = 'md', variant = 'outline', className, ...rest }, ref) => {
+  ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [ onChange, onChangeText ],
+    );
     return (
-      <textarea
-        ref={ ref }
+      <GuiTextArea
+        ref={ ref as never }
+        unstyled
         className={ cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className) }
-        { ...rest }
+        { ...(rest as object) }
+        onChange={ handleChange as never }
       />
     );
   },

package/src/tooltip.tsx

@@ -1,36 +1,17 @@
 import {
   Tooltip as GuiTooltip,
   TooltipGroup as GuiTooltipGroup,
-} from '@hanzogui/tooltip';
+} from '@hanzo/gui';
 import { useClickAway } from '@uidotdev/usehooks';
 import * as React from 'react';
 
+import { useIsTouch } from './use-narrow';
 import { cn } from './utils';
 
-// Inline useIsMobile hook (matches lg breakpoint = 1024px)
-const LG_BREAKPOINT = 1024;
-
-function useIsMobile(): boolean {
-  const [ isMobile, setIsMobile ] = React.useState(() => {
-    if (typeof window === 'undefined') return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${ LG_BREAKPOINT - 1 }px)`);
-    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener('change', handler);
-    return () => mql.removeEventListener('change', handler);
-  }, []);
-
-  return isMobile;
-}
-
 /** Map placement string to @hanzogui Popper placement prop. */
 function mapPlacement(p: string | undefined): string | undefined {
   if (!p) return undefined;
-  // @hanzogui/popper uses same placement strings as floating-ui
+  // @hanzo/gui uses same placement strings as floating-ui
   return p;
 }
 
@@ -86,7 +67,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     const [ open, setOpen ] = React.useState<boolean>(defaultOpen);
     const timeoutRef = React.useRef<number | null>(null);
 
-    const isMobile = useIsMobile();
+    const isMobile = useIsTouch();
 
     const handleOpenChange = React.useCallback((nextOpen: boolean) => {
       setOpen(nextOpen);

package/src/use-narrow.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+
+// ONE viewport hook for the whole design system.
+//
+// Three components used to carry their own copy of the same `matchMedia`
+// dance at three different breakpoints, so "is this phone-sized?" had three
+// answers. It has one now, and the breakpoints are named values rather than
+// magic numbers buried in a component.
+//
+// SSR-safe by construction: the first render is always `false` on both the
+// server and the client (there is no viewport during prerender, and guessing
+// one produces a hydration mismatch), then the real answer arrives in an
+// effect before paint.
+
+/** Below this the UI is a phone: menus become sheets, drawers drag. */
+export const NARROW_PX = 640;
+
+/** Below this the pointer is a finger: hover-only affordances are suppressed. */
+export const TOUCH_PX = 1024;
+
+/** True while the viewport is narrower than `px`. */
+export function useBelow(px: number): boolean {
+  const [ below, setBelow ] = React.useState(false);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${ px - 1 }px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener('change', apply);
+    return () => mql.removeEventListener('change', apply);
+  }, [ px ]);
+  return below;
+}
+
+/** Phone-sized: present menus as sheets. */
+export const useIsNarrow = (): boolean => useBelow(NARROW_PX);
+
+/** Touch-sized: no hover, so hover-only affordances must not be the only path. */
+export const useIsTouch = (): boolean => useBelow(TOUCH_PX);

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 };