@luxfi/ui 7.4.0 → 7.4.3

package/src/identity.tsx

@@ -0,0 +1,318 @@
+'use client';
+
+import * as React from 'react';
+
+import {
+  iam,
+  iamBase,
+  IamError,
+  type IamAccount,
+  type IamOrg,
+  type IamProject,
+} from './iam';
+import { useWhiteLabel } from './provider';
+import type { WhiteLabel } from './white-label';
+
+// Who is signed in, and what are they acting as.
+//
+// One context, read by every piece of chrome. Identity and org membership come
+// from IAM (see ./iam); brand, theme, issuer and IAM client come from the host
+// (see ./white-label). Nothing here is configured per deployment.
+//
+// The state is FOUR values, not a boolean, because a switcher renders each of
+// them differently and conflating them is how an app ends up showing an empty
+// account menu to a signed-out visitor:
+//
+//   loading    — the answer is on its way
+//   anonymous  — nobody is signed in; offer sign-in, never an empty list
+//   ready      — signed in; the lists are the real lists (possibly empty)
+//   error      — IAM could not be read; say so, never render "no organizations"
+
+export type IdentityStatus = 'loading' | 'anonymous' | 'ready' | 'error';
+
+/**
+ * How the chrome gets a bearer and moves the user in and out of a session.
+ *
+ * Credentials are `@hanzo/iam`'s job, not the design system's — so this is the
+ * seam, and a surface using the SDK supplies only the two verbs:
+ *
+ *   auth={{ signIn: () => void startLogin(), signOut: () => void logout() }}
+ *
+ * The bearer itself needs no wiring: the default reads the SDK's own token
+ * store, so there is exactly one token and one refresh timer per surface.
+ */
+export interface IdentityAuth {
+  /** The IAM access token. Defaults to the `@hanzo/iam` SDK's token store. */
+  readonly token?: () => string | null | Promise<string | null>;
+  /** Start a sign-in. */
+  readonly signIn?: () => void;
+  /** End the session. */
+  readonly signOut?: () => void;
+}
+
+export interface Identity {
+  readonly status: IdentityStatus;
+  /** The signed-in principal, or null. */
+  readonly account: IamAccount | null;
+  /** Organizations the principal can act in. */
+  readonly orgs: ReadonlyArray<IamOrg>;
+  /** The organization the surface is currently scoped to, or null. */
+  readonly org: IamOrg | null;
+  /** Projects in the current organization. */
+  readonly projects: ReadonlyArray<IamProject>;
+  /** The project the surface is currently scoped to, or null. */
+  readonly project: IamProject | null;
+  /** Why the reads failed, when status is 'error'. */
+  readonly error: string | null;
+  /** Host-resolved brand, theme, issuer and IAM client. */
+  readonly whiteLabel: WhiteLabel;
+  readonly setOrg: (name: string) => void;
+  readonly setProject: (name: string) => void;
+  readonly signIn: () => void;
+  readonly signOut: () => void;
+  readonly reload: () => void;
+}
+
+// --- The default auth: the @hanzo/iam SDK's own token store -----------------
+// `@hanzo/iam/browser` keeps its PKCE tokens under `hanzo_iam_*`. Reading that
+// key IS the integration — no second SDK instance, no duplicated refresh
+// timer, and a surface already using @hanzo/iam needs no wiring at all.
+const IAM_TOKEN_KEY = 'hanzo_iam_access_token';
+
+function storedToken(): string | null {
+  if (typeof window === 'undefined') return null;
+  for (const store of [ window.sessionStorage, window.localStorage ]) {
+    try {
+      const t = store.getItem(IAM_TOKEN_KEY);
+      if (t) return t;
+    } catch {
+      // Storage disabled (private mode / sandboxed frame) — treat as signed out.
+    }
+  }
+  return null;
+}
+
+function clearStoredTokens(): void {
+  if (typeof window === 'undefined') return;
+  for (const store of [ window.sessionStorage, window.localStorage ]) {
+    try {
+      for (const k of [ 'access_token', 'refresh_token', 'id_token', 'expires_at' ]) {
+        store.removeItem(`hanzo_iam_${ k }`);
+      }
+    } catch {
+      // Nothing to clear.
+    }
+  }
+}
+
+const defaultAuth: IdentityAuth = {};
+
+// --- Scope persistence ------------------------------------------------------
+// Which org/project the user last acted in, per host, so a reload does not
+// silently move them somewhere else.
+const scopeKey = (host: string, kind: string) => `lux-ui:${ kind }:${ host }`;
+
+function readScope(host: string, kind: string): string | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    return window.localStorage.getItem(scopeKey(host, kind));
+  } catch {
+    return null;
+  }
+}
+
+function writeScope(host: string, kind: string, value: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(scopeKey(host, kind), value);
+  } catch {
+    // Selection stays live in-session; it just will not survive a reload.
+  }
+}
+
+const IdentityContext = React.createContext<Identity | null>(null);
+
+export interface IdentityProviderProps {
+  readonly children: React.ReactNode;
+  /** Bearer + sign-in/out. Defaults to the `@hanzo/iam` token store. */
+  readonly auth?: IdentityAuth;
+  /** Where sign-in goes when `auth.signIn` is not supplied. */
+  readonly loginPath?: string;
+}
+
+export const IdentityProvider = ({
+  children,
+  auth = defaultAuth,
+  loginPath = '/login',
+}: IdentityProviderProps): React.ReactElement => {
+  const whiteLabel = useWhiteLabel();
+  const base = React.useMemo(() => iamBase(whiteLabel), [ whiteLabel ]);
+
+  const [ status, setStatus ] = React.useState<IdentityStatus>('loading');
+  const [ account, setAccount ] = React.useState<IamAccount | null>(null);
+  const [ orgs, setOrgs ] = React.useState<ReadonlyArray<IamOrg>>([]);
+  const [ projects, setProjects ] = React.useState<ReadonlyArray<IamProject>>([]);
+  const [ error, setError ] = React.useState<string | null>(null);
+  const [ orgName, setOrgName ] = React.useState<string | null>(null);
+  const [ projectName, setProjectName ] = React.useState<string | null>(null);
+  const [ epoch, setEpoch ] = React.useState(0);
+
+  // Identity + org membership.
+  React.useEffect(() => {
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live) return;
+      if (!token) {
+        setStatus('anonymous');
+        setAccount(null);
+        setOrgs([]);
+        return;
+      }
+      const call = { base, token, signal: ac.signal };
+      try {
+        const me = await iam.account(call);
+        if (!live) return;
+        if (!me) {
+          setStatus('anonymous');
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setAccount(me);
+        // A member who cannot list the tenant table still has their OWN org:
+        // fall back to the one the account names rather than showing nothing.
+        const rows = await iam.organizations(call).catch((e: unknown) => {
+          if (e instanceof IamError && !e.unauthenticated) return [ { owner: 'admin', name: me.owner } ];
+          throw e;
+        });
+        if (!live) return;
+        setOrgs(rows);
+        setStatus('ready');
+        setError(null);
+      } catch (e) {
+        if (!live || ac.signal.aborted) return;
+        if (e instanceof IamError && e.unauthenticated) {
+          setStatus('anonymous');
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setStatus('error');
+        setError(e instanceof Error ? e.message : 'Could not reach IAM.');
+      }
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [ base, auth, epoch ]);
+
+  // The org the surface is scoped to: the persisted choice when it is still
+  // one the user has, else the account's own org, else the first row.
+  const org = React.useMemo<IamOrg | null>(() => {
+    if (orgs.length === 0) return null;
+    const saved = orgName ?? readScope(whiteLabel.host, 'org');
+    return (
+      orgs.find((o) => o.name === saved) ??
+      orgs.find((o) => o.name === account?.owner) ??
+      orgs[0]
+    );
+  }, [ orgs, orgName, account, whiteLabel.host ]);
+
+  // Projects follow the org. A project read is allowed to fail without
+  // downgrading the whole identity — the org switcher still works.
+  React.useEffect(() => {
+    if (!org) {
+      setProjects([]);
+      return;
+    }
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live || !token) return;
+      const rows = await iam
+        .projects({ base, token, signal: ac.signal }, org.name)
+        .catch(() => [] as Array<IamProject>);
+      if (live) setProjects(rows);
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [ base, auth, org, epoch ]);
+
+  const project = React.useMemo<IamProject | null>(() => {
+    if (projects.length === 0) return null;
+    const saved = projectName ?? readScope(whiteLabel.host, 'project');
+    return (
+      projects.find((p) => p.name === saved) ??
+      projects.find((p) => p.isDefault) ??
+      projects[0]
+    );
+  }, [ projects, projectName, whiteLabel.host ]);
+
+  const value = React.useMemo<Identity>(() => ({
+    status,
+    account,
+    orgs,
+    org,
+    projects,
+    project,
+    error,
+    whiteLabel,
+    setOrg: (name: string) => {
+      writeScope(whiteLabel.host, 'org', name);
+      setOrgName(name);
+      setProjectName(null);
+    },
+    setProject: (name: string) => {
+      writeScope(whiteLabel.host, 'project', name);
+      setProjectName(name);
+    },
+    signIn: () => {
+      if (auth.signIn) return auth.signIn();
+      if (typeof window !== 'undefined') window.location.assign(loginPath);
+    },
+    signOut: () => {
+      if (auth.signOut) return auth.signOut();
+      clearStoredTokens();
+      if (typeof window !== 'undefined') window.location.assign(loginPath);
+    },
+    reload: () => setEpoch((n) => n + 1),
+  }), [ status, account, orgs, org, projects, project, error, whiteLabel, auth, loginPath ]);
+
+  return <IdentityContext.Provider value={ value }>{ children }</IdentityContext.Provider>;
+};
+
+/**
+ * The current identity.
+ *
+ * Outside an `<IdentityProvider>` this reports `anonymous` rather than
+ * throwing: chrome that renders before a surface has wired identity should
+ * offer sign-in, not crash the page.
+ */
+export function useIdentity(): Identity {
+  const ctx = React.useContext(IdentityContext);
+  const whiteLabel = useWhiteLabel();
+  const fallback = React.useMemo<Identity>(() => ({
+    status: 'anonymous',
+    account: null,
+    orgs: [],
+    org: null,
+    projects: [],
+    project: null,
+    error: null,
+    whiteLabel,
+    setOrg: () => undefined,
+    setProject: () => undefined,
+    signIn: () => {
+      if (typeof window !== 'undefined') window.location.assign('/login');
+    },
+    signOut: () => undefined,
+    reload: () => undefined,
+  }), [ whiteLabel ]);
+  return ctx ?? fallback;
+}

package/src/index.ts

@@ -1,5 +1,48 @@
-export { AppProvider } from './provider';
+export { AppProvider, useWhiteLabel } from './provider';
 export { cn } from './utils';
+export { useBelow, useIsNarrow, useIsTouch, NARROW_PX, TOUCH_PX } from './use-narrow';
+
+// Identity = IAM, never a per-app copy. `useIdentity()` is the ONE answer to
+// "who is signed in, which orgs, which projects", and the chrome below renders
+// it. See ./iam for the endpoints and ./identity for the four honest states.
+export { iam, iamBase, IamError, IAM_PAGE_SIZE } from './iam';
+export type { IamAccount, IamOrg, IamProject, IamCall } from './iam';
+export { IdentityProvider, useIdentity } from './identity';
+export type { Identity, IdentityAuth, IdentityStatus, IdentityProviderProps } from './identity';
+
+// The application chrome — ONE user switcher, ONE org switcher, ONE project
+// switcher, ONE settings menu, ONE nav. All four switchers are the same
+// `Switcher` mechanism over different values.
+export {
+  Switcher,
+  OrgSwitcher,
+  ProjectSwitcher,
+  UserMenu,
+  SettingsMenu,
+  AppNav,
+  initials,
+} from './chrome';
+export type {
+  ChromeItem,
+  SwitcherProps,
+  UserMenuProps,
+  SettingsMenuProps,
+  NavLink,
+  AppNavProps,
+} from './chrome';
+
+// White-label = a function of the Host header, never of the deployment. Brand,
+// gui theme row, OIDC issuer and IAM client id all come from here.
+// (The engine itself is at '@luxfi/ui/gui'; it is a separate entry because the
+// skin and the engine both define Button, Input, Switch, Select and friends.)
+export {
+  resolveWhiteLabel,
+  currentHost,
+  orgIdentity,
+  orgs,
+  DEFAULT_ORG,
+} from './white-label';
+export type { Org, OrgIdentity, WhiteLabel } from './white-label';
 
 // Lux gui config — the createGui() result (fed to GuiProvider) + the brand
 // child-theme rows. Exposed so app bundlers (Vite/Next SSR extraction) and

package/src/input.tsx

@@ -1,3 +1,4 @@
+import { Input as GuiInput } from '@hanzo/gui';
 import React from 'react';
 
 import { cn } from './utils';
@@ -35,15 +36,17 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, '
   readonly size?: InputSize;
   readonly variant?: InputVariant;
   /**
-   * Tamagui / React-Native convention: called with the text value on every
-   * change. Bridged to the native `onChange`, so callers using EITHER the web
-   * `onChange(e)` API OR the `onChangeText(text)` API get updates. Without this
-   * bridge, RN/Tamagui-style code (e.g. seed-phrase / PIN entry ported from a
-   * gui-based surface) passes `onChangeText` and the field silently no-ops.
+   * React-Native convention: called with the text value on every change. The gui
+   * Input raises it natively; on web we bridge it off `onChange`, so callers
+   * using EITHER API get updates on either platform.
    */
   readonly onChangeText?: (text: string) => void;
 }
 
+// gui's Input — a real `<input>` on web, a real TextInput on native (soft
+// keyboard, `returnKeyType`, autofill, IME) — wearing the Lux size/variant
+// classes. `size` stays the Lux scale and never reaches the primitive, whose
+// `size` is a gui SizeToken.
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ size = 'md', variant = 'outline', className, onChange, onChangeText, ...rest }, ref) => {
     const handleChange = React.useCallback(
@@ -54,11 +57,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       [ onChange, onChangeText ],
     );
     return (
-      <input
-        ref={ ref }
+      <GuiInput
+        ref={ ref as never }
+        unstyled
         className={ cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className) }
-        { ...rest }
-        onChange={ handleChange }
+        { ...(rest as object) }
+        onChange={ handleChange as never }
       />
     );
   },

package/src/lux.config.ts

@@ -2,22 +2,14 @@
 
 import { createGui } from '@hanzo/gui';
 import { defaultConfig } from '@hanzogui/config/v5';
+import { animations } from '@hanzogui/config/v5-css';
 
-// ---------------------------------------------------------------------------
-// Branding = VALUE, not place.
-// The ONE spot brand hex is allowed to live (project rule: never hardcode hex
-// in components). Accents sourced from the work-board brand palette.
-// ---------------------------------------------------------------------------
-export const LUX_BRAND = {
-  lux: '#7000FF',
-  zoo: '#6C5EFB',
-  hanzo: '#EA580C',
-  pars: '#1C3879',
-} as const;
-
-export const PARS_GOLD = '#C8A45C';
-
-export type LuxBrand = keyof typeof LUX_BRAND;
+// Branding = VALUE, not place: the brand hex table lives in ./white-label,
+// beside the identity rows it colours, so reading a brand never drags the gui
+// engine along. Re-exported here because this module is where the themes are
+// built from it.
+export { LUX_BRAND, PARS_GOLD, type LuxBrand } from './white-label';
+import { LUX_BRAND, PARS_GOLD } from './white-label';
 
 // Shared true-black neutral base: take @hanzogui's resolved dark theme and
 // force a pure-black canvas so every Lux surface sits on the same ground.
@@ -53,6 +45,7 @@ export const luxThemes = {
   dark_zoo: brandTheme(LUX_BRAND.zoo),
   dark_hanzo: brandTheme(LUX_BRAND.hanzo),
   dark_pars: brandTheme(LUX_BRAND.pars, { accentColor: PARS_GOLD }),
+  dark_bootnode: brandTheme(LUX_BRAND.bootnode),
 };
 
 // One engine, tokens-not-forks: reuse @hanzogui's v5 defaultConfig
@@ -60,8 +53,16 @@ export const luxThemes = {
 // over it. The lone settings override — `onlyAllowShorthands: false` — keeps the
 // harvested exchange primitives (which author with longhand style props like
 // `borderRadius` / `paddingHorizontal`) valid; v5 defaults to shorthands-only.
+// `@hanzogui/config/v5` ships WITHOUT an animation driver — "users must provide
+// their own". Sheet is not merely unanimated without one, it throws
+// (`Sheet requires an animation driver to be set`), and every `transition` prop
+// on every other primitive is inert. Feeding the CSS driver here is what earns
+// the motion — one wiring for the whole fleet, not one per app.
+// Native surfaces can swap `@hanzogui/config/v5-css` for `/v5-rn` without
+// touching a component: the transition token names are identical.
 export const config = createGui({
   ...defaultConfig,
+  animations,
   settings: {
     ...defaultConfig.settings,
     onlyAllowShorthands: false,

package/src/menu.tsx

@@ -2,7 +2,7 @@
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as React from 'react';
-import { LuCheck, LuChevronRight } from 'react-icons/lu';
+import { Check, ChevronRight } from 'lucide-react';
 
 import { cn } from './utils';
 
@@ -356,7 +356,7 @@ export const MenuCheckboxItem = React.forwardRef<
     >
       <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenu.ItemIndicator>
-          <LuCheck className="h-4 w-4"/>
+          <Check className="h-4 w-4"/>
         </DropdownMenu.ItemIndicator>
       </span>
       { children }
@@ -414,7 +414,7 @@ export const MenuRadioItem = React.forwardRef<
     >
       <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
         <DropdownMenu.ItemIndicator>
-          <LuCheck className="h-4 w-4"/>
+          <Check className="h-4 w-4"/>
         </DropdownMenu.ItemIndicator>
       </span>
       <span>{ children }</span>
@@ -464,7 +464,7 @@ export const MenuTriggerItem = React.forwardRef<
       >
         { startIcon }
         <span className="flex-1">{ children }</span>
-        <LuChevronRight className="h-4 w-4"/>
+        <ChevronRight className="h-4 w-4"/>
       </DropdownMenu.SubTrigger>
     </DropdownMenu.Sub>
   );

package/src/next.ts

@@ -0,0 +1,89 @@
+// The bundler wiring the gui engine needs on Next, as ONE wrapper.
+//
+// The Next twin of `@luxfi/ui/vite`. @hanzo/gui is authored against React
+// Native primitives, so a Next build has to transpile the engine (it ships
+// untranspiled ESM), alias `react-native` → `react-native-web` in BOTH
+// bundlers Next now uses, and define the platform flags the engine reads at
+// module scope.
+//
+//   const { withLuxUi } = require('@luxfi/ui/next')
+//   module.exports = withLuxUi({ /* your config */ })
+//
+// Every Next surface needed the identical incantation and every one that
+// hand-rolled it transpiled a DIFFERENT subset of the engine — which is how
+// one app renders a Sheet and the next throws `createContext of undefined` on
+// the same component. The list below is the umbrella's own export list, in one
+// place, so it cannot drift per app.
+//
+// Node-only (a build-time module) and dependency-free: it takes and returns a
+// plain object, so it does not force `next` into anyone's type graph.
+
+import { guiAliases, GUI_DEFINES, GUI_PACKAGES } from './engine';
+
+interface WebpackConfig {
+  resolve?: { alias?: Record<string, unknown> };
+  plugins?: Array<unknown>;
+  [key: string]: unknown;
+}
+
+/** The structural slice of a Next config this wrapper touches. */
+export interface LuxUiNextConfig {
+  /** App root, for resolving the engine's single copy. Defaults to `cwd`. */
+  dir?: string;
+  transpilePackages?: Array<string>;
+  turbopack?: { resolveAlias?: Record<string, string>; [key: string]: unknown };
+  env?: Record<string, string>;
+  webpack?: (config: WebpackConfig, context: unknown) => WebpackConfig;
+  [key: string]: unknown;
+}
+
+/**
+ * Wrap a Next config so `@luxfi/ui` and the gui engine build.
+ *
+ * Additive: an existing `transpilePackages`, `turbopack.resolveAlias`,
+ * `env` and `webpack()` are all preserved and extended, never replaced.
+ */
+export function withLuxUi(config: LuxUiNextConfig = {}): LuxUiNextConfig {
+  const userWebpack = config.webpack;
+  // ONE physical copy of every engine package. Webpack has no `resolve.dedupe`,
+  // so the equivalent is an exact-match alias per package, resolved from the app
+  // root — see ./engine for why two copies is a crash and not a size problem.
+  const engine = guiAliases(config.dir ?? process.cwd());
+  // `dir` is OURS, not Next's — leaving it on the returned object makes Next
+  // print `Unrecognized key(s) in object: 'dir'` on every boot of every surface
+  // that passes it. Consume it here.
+  const { dir: _dir, ...rest } = config;
+  return {
+    ...rest,
+    transpilePackages: [ ...new Set([ ...(config.transpilePackages ?? []), ...GUI_PACKAGES ]) ],
+    turbopack: {
+      ...config.turbopack,
+      resolveAlias: {
+        'react-native': 'react-native-web',
+        ...config.turbopack?.resolveAlias,
+      },
+    },
+    // Next inlines `env` into the client bundle, which is how the engine's
+    // module-scope platform checks get their answer under Turbopack too.
+    env: { EXPO_OS: 'web', IS_WEB: 'true', ...config.env },
+    webpack(webpackConfig: WebpackConfig, context: unknown) {
+      const next = userWebpack ? userWebpack(webpackConfig, context) : webpackConfig;
+      next.resolve = {
+        ...next.resolve,
+        // The app's own aliases win — an app pinning a package on purpose is not
+        // something the umbrella should override.
+        alias: { 'react-native$': 'react-native-web', ...engine, ...next.resolve?.alias },
+      };
+      // `context` is Next's `{ webpack }` bag — use ITS webpack instance so the
+      // DefinePlugin is the one running the build.
+      const webpackModule = (context as { webpack?: { DefinePlugin?: new (d: Record<string, string>) => unknown } })?.webpack;
+      if (webpackModule?.DefinePlugin) {
+        next.plugins = [ ...(next.plugins ?? []), new webpackModule.DefinePlugin({ ...GUI_DEFINES }) ];
+      }
+      return next;
+    },
+  };
+}
+
+export { GUI_PACKAGES };
+

package/src/option-chain.tsx

@@ -226,7 +226,7 @@ export const OptionChain = React.forwardRef<HTMLDivElement, OptionChainProps>(
                   <td
                     className={cn(
                       'px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold',
-                      isATM ? 'text-amber-400 bg-zinc-800/80' : 'text-zinc-300',
+                      isATM ? 'text-[var(--foreground)] bg-[var(--secondary)]' : 'text-[var(--muted-foreground)]',
                     )}
                   >
                     {fmt(row.strike)}

package/src/option-position.tsx

@@ -77,7 +77,8 @@ export const OptionPositionCard = React.forwardRef<HTMLDivElement, OptionPositio
             {/* Symbol badge */}
             <span className={cn(
               'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold',
-              isCall ? 'bg-blue-900/40 text-blue-400' : 'bg-orange-900/40 text-orange-400',
+              // Call vs put is a rank difference, not a hue difference.
+              isCall ? 'bg-[var(--secondary)] text-[var(--foreground)]' : 'bg-[var(--muted)] text-[var(--muted-foreground)]',
             )}>
               {position.underlying}
               <span className="font-mono tabular-nums">{position.strike}</span>

package/src/pnl-diagram.tsx

@@ -66,7 +66,12 @@ function buildPath(points: Array<{ x: number; y: number }>, vb: ViewBox, width:
 // Leg colors
 // ---------------------------------------------------------------------------
 
-const LEG_COLORS = ['#6366f1', '#f59e0b', '#ec4899', '#06b6d4'];
+// Legs are told apart by position on the achromatic chart ramp, not by hue —
+// and they resolve through tokens.css, so a host reskin moves them too.
+const LEG_COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)'];
+// Breakeven markers ride the same ramp; the ring is the page ground.
+const BREAKEVEN_COLOR = 'var(--chart-1)';
+const BREAKEVEN_RING = 'var(--background)';
 
 // ---------------------------------------------------------------------------
 // PnlDiagram
@@ -323,10 +328,10 @@ export const PnlDiagram = React.forwardRef<HTMLDivElement, PnlDiagramProps>(
             {/* Breakeven markers */}
             {breakevens.map((be, i) => (
               <g key={`be-${i}`}>
-                <circle cx={scaleX(be)} cy={zeroY} r="3" fill="#fbbf24" stroke="#18181b" strokeWidth="1" />
+                <circle cx={scaleX(be)} cy={zeroY} r="3" fill={BREAKEVEN_COLOR} stroke={BREAKEVEN_RING} strokeWidth="1" />
                 <text
                   x={scaleX(be)} y={PADDING.top + chartH + 14}
-                  fill="#fbbf24" fontSize="8" fontFamily="monospace" textAnchor="middle"
+                  fill={BREAKEVEN_COLOR} fontSize="8" fontFamily="monospace" textAnchor="middle"
                 >
                   {be.toFixed(1)}
                 </text>
@@ -366,7 +371,7 @@ export const PnlDiagram = React.forwardRef<HTMLDivElement, PnlDiagramProps>(
                   cy={scaleY(hoverPnl)}
                   r="3"
                   fill={hoverPnl >= 0 ? '#22c55e' : '#ef4444'}
-                  stroke="#18181b"
+                  stroke={BREAKEVEN_RING}
                   strokeWidth="1"
                 />
                 {/* Tooltip */}
@@ -376,7 +381,7 @@ export const PnlDiagram = React.forwardRef<HTMLDivElement, PnlDiagramProps>(
                   width="90"
                   height="28"
                   rx="3"
-                  fill="#18181b"
+                  fill={BREAKEVEN_RING}
                   stroke="#3f3f46"
                   strokeWidth="1"
                 />
@@ -445,7 +450,7 @@ export const PnlDiagram = React.forwardRef<HTMLDivElement, PnlDiagramProps>(
           ))}
           {breakevens.length > 0 && (
             <div className="flex items-center gap-1.5">
-              <div className="h-1.5 w-1.5 rounded-full bg-amber-400" />
+              <div className="h-1.5 w-1.5 rounded-full" style={{ background: BREAKEVEN_COLOR }} />
               <span className="text-[10px] text-zinc-500">
                 BE: {breakevens.map((b) => b.toFixed(1)).join(', ')}
               </span>