@luxfi/ui 7.4.0 → 7.4.3

package/src/engine.ts

@@ -0,0 +1,130 @@
+// The gui engine, named once.
+//
+// @hanzo/gui is a facade over ~55 `@hanzogui/*` packages, and several of them
+// (`popper`, `popover`, `core`, `floating`) publish React contexts at MODULE
+// scope. Two physical copies of such a package are two different context
+// objects, so a provider from copy A is invisible to a consumer from copy B and
+// the consumer silently falls back to the context's default value.
+//
+// That is not a theoretical hazard, it is the shape of the loudest bug this
+// package has shipped: `PopperAnchor` reads `refs` off the Popper context and
+// calls `refs.setReference(node)` from a ref callback with no guard, so when the
+// context is the empty default the browser logs
+//
+//     Cannot read properties of undefined (reading 'setReference')
+//
+// once per tooltip trigger, uncaught (it runs inside `startTransition`, so no
+// error boundary sees it). A page with a tooltip per table row logs it hundreds
+// of times. The gui engine itself diagnoses the same root cause out loud when
+// the duplication reaches its config lookup: "Can't find Hanzo GUI
+// configuration … due to having mis-matched versions of Hanzo GUI dependencies,
+// or bundlers somehow duplicating them."
+//
+// So the engine list is a VALUE, declared once here, and both bundler wrappers
+// (`@luxfi/ui/vite`, `@luxfi/ui/next`) dedupe against it. A consumer that uses
+// the wrapper cannot end up with two copies, and does not have to hand-write a
+// per-app `pnpm.overrides` block pinning three dozen packages to stop it.
+
+/** Every package `@hanzo/gui` re-exports — the engine, in full. */
+export const GUI_PACKAGES: ReadonlyArray<string> = [
+  '@hanzo/gui',
+  '@hanzogui/accordion',
+  '@hanzogui/adapt',
+  '@hanzogui/alert-dialog',
+  '@hanzogui/animate',
+  '@hanzogui/animate-presence',
+  '@hanzogui/avatar',
+  '@hanzogui/button',
+  '@hanzogui/card',
+  '@hanzogui/checkbox',
+  '@hanzogui/collapsible',
+  '@hanzogui/component-helpers',
+  '@hanzogui/compose-refs',
+  '@hanzogui/config',
+  '@hanzogui/context-menu',
+  '@hanzogui/core',
+  '@hanzogui/create-context',
+  '@hanzogui/create-menu',
+  '@hanzogui/dialog',
+  '@hanzogui/dismissable',
+  '@hanzogui/element',
+  '@hanzogui/elements',
+  '@hanzogui/floating',
+  '@hanzogui/focus-scope',
+  '@hanzogui/font-size',
+  '@hanzogui/form',
+  '@hanzogui/get-token',
+  '@hanzogui/group',
+  '@hanzogui/helpers',
+  '@hanzogui/image',
+  '@hanzogui/input',
+  '@hanzogui/label',
+  '@hanzogui/list-item',
+  '@hanzogui/menu',
+  '@hanzogui/popover',
+  '@hanzogui/popper',
+  '@hanzogui/portal',
+  '@hanzogui/progress',
+  '@hanzogui/radio-group',
+  '@hanzogui/react-native-media-driver',
+  '@hanzogui/remove-scroll',
+  '@hanzogui/scroll-view',
+  '@hanzogui/select',
+  '@hanzogui/separator',
+  '@hanzogui/shapes',
+  '@hanzogui/sheet',
+  '@hanzogui/slider',
+  '@hanzogui/spacer',
+  '@hanzogui/spinner',
+  '@hanzogui/stacks',
+  '@hanzogui/switch',
+  '@hanzogui/tabs',
+  '@hanzogui/text',
+  '@hanzogui/theme',
+  '@hanzogui/toast',
+  '@hanzogui/toggle-group',
+  '@hanzogui/tooltip',
+  '@hanzogui/use-controllable-state',
+  '@hanzogui/use-debounce',
+  '@hanzogui/use-force-update',
+  '@hanzogui/use-presence',
+  '@hanzogui/use-window-dimensions',
+  '@hanzogui/visually-hidden',
+  '@hanzogui/web',
+  '@hanzogui/z-index-stack',
+  '@luxfi/ui',
+];
+
+/**
+ * The engine branches on these at module scope; without them a browser bundle
+ * takes the native path.
+ */
+export const GUI_DEFINES: Readonly<Record<string, string>> = {
+  'process.env.EXPO_OS': JSON.stringify('web'),
+  'process.env.IS_WEB': JSON.stringify('true'),
+};
+
+/**
+ * Exact-match aliases pinning every engine package to ONE entry file, for
+ * bundlers that have no `dedupe` of their own (webpack).
+ *
+ * Keys carry webpack's `$` exact-match suffix so only the bare specifier is
+ * redirected — a deep import keeps resolving normally. Packages that are not
+ * physically installed are skipped rather than throwing: the list is the
+ * engine's full surface and no single app pulls all of it.
+ */
+export function guiAliases(from: string): Record<string, string> {
+  // Deferred so this module stays importable from a browser bundle (the
+  // wrappers are build-time only, but `engine.ts` is plain values).
+  const { createRequire } = require('node:module') as typeof import('node:module');
+  const require_ = createRequire(`${ from.replace(/\/?$/, '/') }noop.js`);
+  const alias: Record<string, string> = {};
+  for (const pkg of GUI_PACKAGES) {
+    try {
+      alias[`${ pkg }$`] = require_.resolve(pkg);
+    } catch {
+      // Not installed in this app — nothing to dedupe.
+    }
+  }
+  return alias;
+}

package/src/expiration-selector.tsx

@@ -66,8 +66,9 @@ function ExpirationPill({ exp, isSelected, onClick }: ExpirationPillProps) {
       </span>
       <span className={cn(
         'font-mono tabular-nums text-[10px]',
-        isSelected ? 'text-blue-400/70' : 'text-zinc-600',
-        exp.dte <= 7 && !isSelected && 'text-amber-600',
+        isSelected ? 'text-[var(--foreground)]' : 'text-[var(--muted-foreground)]',
+        // Near expiry is a notice, and a notice in Lux is the loudest neutral.
+        exp.dte <= 7 && !isSelected && 'text-[var(--color-status-warn)]',
       )}>
         {exp.dte}d
       </span>

package/src/greeks-display.tsx

@@ -32,13 +32,16 @@ interface GreekDef {
   maxMagnitude: number;
 }
 
+// A greek is identified by its symbol and its label, never by a hue. Six series
+// on one achromatic ramp (tokens.css --chart-*, plus --foreground for the sixth),
+// so the panel obeys the brand atom and reskins with the host.
 const GREEKS: GreekDef[] = [
-  { key: 'delta', label: 'Delta', symbol: '\u0394', color: 'text-blue-400', barColor: 'bg-blue-500', decimals: 4, maxMagnitude: 1 },
-  { key: 'gamma', label: 'Gamma', symbol: '\u0393', color: 'text-purple-400', barColor: 'bg-purple-500', decimals: 4, maxMagnitude: 0.1 },
-  { key: 'theta', label: 'Theta', symbol: '\u0398', color: 'text-red-400', barColor: 'bg-red-500', decimals: 4, maxMagnitude: 1 },
-  { key: 'vega', label: 'Vega', symbol: '\u03BD', color: 'text-emerald-400', barColor: 'bg-emerald-500', decimals: 4, maxMagnitude: 1 },
-  { key: 'rho', label: 'Rho', symbol: '\u03C1', color: 'text-orange-400', barColor: 'bg-orange-500', decimals: 4, maxMagnitude: 1 },
-  { key: 'iv', label: 'IV', symbol: '\u03C3', color: 'text-amber-400', barColor: 'bg-amber-500', decimals: 1, maxMagnitude: 100 },
+  { key: 'delta', label: 'Delta', symbol: '\u0394', color: 'text-[var(--foreground)]', barColor: 'bg-[var(--foreground)]', decimals: 4, maxMagnitude: 1 },
+  { key: 'gamma', label: 'Gamma', symbol: '\u0393', color: 'text-[var(--chart-1)]', barColor: 'bg-[var(--chart-1)]', decimals: 4, maxMagnitude: 0.1 },
+  { key: 'theta', label: 'Theta', symbol: '\u0398', color: 'text-[var(--chart-4)]', barColor: 'bg-[var(--chart-4)]', decimals: 4, maxMagnitude: 1 },
+  { key: 'vega', label: 'Vega', symbol: '\u03BD', color: 'text-[var(--chart-2)]', barColor: 'bg-[var(--chart-2)]', decimals: 4, maxMagnitude: 1 },
+  { key: 'rho', label: 'Rho', symbol: '\u03C1', color: 'text-[var(--chart-3)]', barColor: 'bg-[var(--chart-3)]', decimals: 4, maxMagnitude: 1 },
+  { key: 'iv', label: 'IV', symbol: '\u03C3', color: 'text-[var(--chart-5)]', barColor: 'bg-[var(--chart-5)]', decimals: 1, maxMagnitude: 100 },
 ];
 
 // ---------------------------------------------------------------------------

package/src/gui.ts

@@ -0,0 +1,17 @@
+// The engine, re-exported.
+//
+// `@luxfi/ui/*` is the Lux SKIN; `@luxfi/ui/gui` is the @hanzo/gui ENGINE it is
+// built on. Both ship from one package so a Lux surface never has to reach past
+// its design system to lay out a screen: `styled`, `View`, `Text`, `XStack`,
+// `Sheet`, `Theme`, `useMedia` and the rest are all one import away.
+//
+// It is a separate subpath rather than part of the root barrel on purpose. The
+// engine and the skin both define `Button`, `Input`, `Image`, `Switch`,
+// `Separator`, `Select`, `Tabs`, `Avatar`, `Checkbox`, `Slider` and `Progress`;
+// merging them would collide. Two paths, two clear meanings, no ambiguity:
+//
+//   import { Button } from '@luxfi/ui/button'   // the Lux-skinned Button
+//   import { XStack, Sheet } from '@luxfi/ui/gui'  // the raw gui primitive
+//
+// Anything the engine gains, Lux surfaces gain — no wrapper to write first.
+export * from '@hanzo/gui';

package/src/heading.tsx

@@ -1,3 +1,4 @@
+import { H1, H2, H3 } from '@hanzo/gui';
 import React from 'react';
 
 import { cn } from './utils';
@@ -9,7 +10,9 @@ export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
   size?: string;
 }
 
-const LEVEL_TAG = { '1': 'h1', '2': 'h2', '3': 'h3' } as const;
+// gui's heading primitives — real h1/h2/h3 on web, sized Text on native, both
+// inheriting the theme's heading font. The Lux type ramp stays in the classes.
+const LEVEL_TAG = { '1': H1, '2': H2, '3': H3 } as const;
 
 // base (mobile) + lg (desktop) responsive text styles per level
 //
@@ -26,18 +29,19 @@ const BASE_CLASSES = 'font-heading text-heading';
 
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   function Heading({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag = level ? LEVEL_TAG[level] : 'h2';
+    const Tag = level ? LEVEL_TAG[level] : H2;
     const levelClasses = level ? LEVEL_CLASSES[level] : undefined;
-    const mergedStyle = mb !== undefined
-      ? { ...styleProp, marginBottom: typeof mb === 'number' ? `${ mb * 4 }px` : mb }
-      : styleProp;
+    const mergedStyle = mb !== undefined ?
+      { ...styleProp, marginBottom: typeof mb === 'number' ? `${ mb * 4 }px` : mb } :
+      styleProp;
 
     return (
       <Tag
-        ref={ ref }
+        ref={ ref as never }
+        unstyled
         className={ cn(BASE_CLASSES, levelClasses, className) }
-        style={ mergedStyle }
-        { ...rest }
+        style={ mergedStyle as never }
+        { ...(rest as object) }
       />
     );
   },

package/src/iam.ts

@@ -0,0 +1,170 @@
+// Hanzo IAM read surface — the ONE identity source every Lux surface reads.
+//
+// Who am I, which orgs am I in, which projects does this org have. Every
+// surface needs those three answers and every surface had grown its own way to
+// get them (a hardcoded ORGS table here, a bespoke token store there, a
+// per-app `/branding` map somewhere else). They are IAM's answers, so they are
+// read from IAM.
+//
+// The endpoints are the Casdoor-compat verbs IAM opens to a registered browser
+// origin (see hanzoai/iam internal/cors: get-account, get-organizations,
+// get-organization, get-users, get-organization-projects). CORS decides which
+// ORIGIN may read; the bearer decides WHO — a caller only ever sees what its
+// own principal could already see, so there is nothing to gate here.
+//
+// VALUES ONLY: no React, no storage policy, no redirect. `fetch` is the single
+// effect, and the base URL comes from the host-resolved white-label, so this
+// module is identical on the server, in the browser and in a test.
+
+import { resolveWhiteLabel, type WhiteLabel } from './white-label';
+
+/** A signed-in principal, as IAM describes it. */
+export interface IamAccount {
+  readonly owner: string;
+  readonly name: string;
+  readonly displayName?: string;
+  readonly email?: string;
+  readonly avatar?: string;
+  readonly isAdmin?: boolean;
+}
+
+/** An organization the principal can see. */
+export interface IamOrg {
+  readonly owner: string;
+  readonly name: string;
+  readonly displayName?: string;
+  readonly logo?: string;
+}
+
+/** A project inside an organization (IAM's Org → Workspace → Project tier). */
+export interface IamProject {
+  readonly owner: string;
+  readonly name: string;
+  readonly displayName?: string;
+  readonly organization?: string;
+  readonly workspace?: string;
+  readonly isDefault?: boolean;
+}
+
+/** IAM's response envelope. `data2` carries the total for paged reads. */
+interface Envelope<T> {
+  readonly status?: string;
+  readonly msg?: string;
+  readonly data?: T;
+  readonly data2?: unknown;
+}
+
+/**
+ * A refusal from IAM, carrying enough to tell "not signed in" apart from
+ * "signed in, and the answer is genuinely empty" — the distinction a switcher
+ * has to render honestly.
+ */
+export class IamError extends Error {
+  readonly status: number;
+  readonly unauthenticated: boolean;
+  constructor(message: string, status: number, unauthenticated: boolean) {
+    super(message);
+    this.name = 'IamError';
+    this.status = status;
+    this.unauthenticated = unauthenticated;
+  }
+}
+
+/** IAM answers 401, or 200 with a sign-in message. Both mean "no session". */
+const SIGNED_OUT = /please sign in|authentication required|unauthorized/i;
+
+function isSignedOut(status: number, msg: string): boolean {
+  return status === 401 || status === 403 || SIGNED_OUT.test(msg);
+}
+
+/** The IAM API root for a host — `lux.cloud` → `https://lux.id/v1/iam`. */
+export function iamBase(host?: string | null | WhiteLabel): string {
+  const wl = typeof host === 'object' && host !== null ? host : resolveWhiteLabel(host as string | null | undefined);
+  return `${ wl.issuer }/v1/iam`;
+}
+
+/** How a read reaches IAM: where, and with whose bearer. */
+export interface IamCall {
+  readonly base: string;
+  readonly token?: string | null;
+  readonly signal?: AbortSignal;
+}
+
+async function read<T>(call: IamCall, verb: string, params: Record<string, string | number>): Promise<T> {
+  const url = new URL(`${ call.base }/${ verb }`);
+  for (const [ k, v ] of Object.entries(params)) url.searchParams.set(k, String(v));
+
+  let res: Response;
+  try {
+    res = await fetch(url.toString(), {
+      method: 'GET',
+      // The bearer is the whole credential. IAM does not allow credentialed
+      // CORS, so sending cookies would only get the response blocked.
+      headers: call.token ? { Authorization: `Bearer ${ call.token }` } : {},
+      signal: call.signal,
+    });
+  } catch (e) {
+    // A network/CORS failure is NOT "no orgs" — say so, so the caller can show
+    // an error instead of an empty switcher.
+    throw new IamError(e instanceof Error ? e.message : 'IAM unreachable', 0, false);
+  }
+
+  const body = (await res.json().catch(() => ({}))) as Envelope<T>;
+  const msg = typeof body.msg === 'string' ? body.msg : '';
+  if (!res.ok || body.status === 'error') {
+    throw new IamError(msg || `IAM ${ verb } failed (${ res.status })`, res.status, isSignedOut(res.status, msg));
+  }
+  return body.data as T;
+}
+
+/** Rows per page for the org list — small first paint, more on demand. */
+export const IAM_PAGE_SIZE = 20;
+
+export const iam = {
+  /** The signed-in principal, or null when there is no session. */
+  async account(call: IamCall): Promise<IamAccount | null> {
+    try {
+      const data = await read<IamAccount | null>(call, 'get-account', {});
+      return data && data.name ? data : null;
+    } catch (e) {
+      if (e instanceof IamError && e.unauthenticated) return null;
+      throw e;
+    }
+  },
+
+  /**
+   * One page of the orgs the principal can see. IAM scopes the read to the
+   * caller's authority, so a normal member gets their own org and a super
+   * admin gets the tenant list — the page never has to decide.
+   */
+  async organizations(call: IamCall, page = 0, query = '', pageSize = IAM_PAGE_SIZE): Promise<Array<IamOrg>> {
+    const params: Record<string, string | number> = {
+      owner: 'admin', // IAM orgs live under the reserved `admin` owner
+      p: page + 1, // the backend page is 1-based
+      pageSize,
+      sortField: 'name',
+      sortOrder: 'ascending',
+    };
+    const q = query.trim();
+    if (q) {
+      params.field = 'name';
+      params.value = q;
+    }
+    return (await read<Array<IamOrg> | null>(call, 'get-organizations', params)) ?? [];
+  },
+
+  /** One organization by name. */
+  async organization(call: IamCall, name: string): Promise<IamOrg | null> {
+    return (await read<IamOrg | null>(call, 'get-organization', { id: `admin/${ name }` })) ?? null;
+  },
+
+  /** Members of an organization. */
+  async users(call: IamCall, org: string): Promise<Array<IamAccount>> {
+    return (await read<Array<IamAccount> | null>(call, 'get-users', { owner: org })) ?? [];
+  },
+
+  /** The organization's projects — IAM keys this read by `organization`. */
+  async projects(call: IamCall, org: string): Promise<Array<IamProject>> {
+    return (await read<Array<IamProject> | null>(call, 'get-organization-projects', { organization: org })) ?? [];
+  },
+};

package/src/icons.ts

@@ -0,0 +1,18 @@
+// The Lux icon set — one set, one import path.
+//
+// Lucide, exactly as @hanzo/gui standardises on it. @hanzo/gui ships the same
+// drawings twice, once per runtime — `@hanzogui/lucide-icons-2` for React
+// Native, `lucide-react` for the DOM — and the geometry is identical
+// path-for-path, so this is one set and not two. Lux surfaces are DOM, so the
+// DOM delivery is what `@luxfi/ui/icons` hands them.
+//
+//   import { Box, Zap, Info } from '@luxfi/ui/icons';
+//
+// The theming is the set's own contract, and it is why nothing here wraps it:
+// every Lucide glyph is a 24x24, 2px, round-cap outline stroked in
+// `currentColor`, so it takes the colour of the text it sits next to and stays
+// monochrome by construction. Size it with `className="size-4"`, colour it by
+// colouring its container — never by reaching for a different drawing.
+//
+// A second icon package inside a Lux surface is a bug, not a preference.
+export * from 'lucide-react';