@luxfi/ui 7.4.0 → 7.4.2

package/src/drawer.tsx

@@ -1,10 +1,19 @@
+import { Sheet as GuiSheet } from '@hanzo/gui';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as React from 'react';
 
+import { useIsNarrow } from './use-narrow';
 import { cn } from './utils';
 
 import { CloseButton } from './close-button';
 
+// A drawer is a side panel on a wide screen and a bottom sheet on a phone. Below
+// `NARROW_PX` the content is presented by gui's Sheet — draggable, with
+// snap-to-dismiss and momentum — which is what a native app does and what a
+// `position: fixed` panel with a slide-in keyframe cannot fake. Same components,
+// same props, at every call site. The breakpoint itself lives in ./use-narrow,
+// so "is this phone-sized?" has one answer across the package.
+
 // ─── DrawerRoot ─────────────────────────────────────────────────
 
 export interface DrawerRootProps {
@@ -23,6 +32,18 @@ export interface DrawerRootProps {
 const DrawerPlacementContext = React.createContext<string>('right');
 const DrawerSizeContext = React.createContext<string>('md');
 
+interface DrawerStateValue {
+  readonly open: boolean;
+  readonly setOpen: (next: boolean) => void;
+  readonly modal: boolean;
+}
+
+const DrawerStateContext = React.createContext<DrawerStateValue>({
+  open: false,
+  setOpen: () => { /* noop */ },
+  modal: true,
+});
+
 export const DrawerRoot = (props: DrawerRootProps) => {
   const {
     children,
@@ -34,21 +55,35 @@ export const DrawerRoot = (props: DrawerRootProps) => {
     size = 'md',
   } = props;
 
-  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+  // The root owns the open state (controllable) rather than leaving it inside
+  // Radix, because the phone presentation is a gui Sheet that lives outside the
+  // dialog tree and needs the same state.
+  const [ uncontrolled, setUncontrolled ] = React.useState(defaultOpen ?? false);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : uncontrolled;
+
+  const setOpen = React.useCallback((nextOpen: boolean) => {
+    if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
-  }, [ onOpenChange ]);
+  }, [ isControlled, onOpenChange ]);
+
+  const state = React.useMemo(
+    () => ({ open: isOpen, setOpen, modal }),
+    [ isOpen, setOpen, modal ],
+  );
 
   return (
     <DrawerPlacementContext.Provider value={ placement }>
       <DrawerSizeContext.Provider value={ size }>
-        <RadixDialog.Root
-          open={ open }
-          defaultOpen={ defaultOpen }
-          onOpenChange={ handleOpenChange }
-          modal={ modal }
-        >
-          { children }
-        </RadixDialog.Root>
+        <DrawerStateContext.Provider value={ state }>
+          <RadixDialog.Root
+            open={ isOpen }
+            onOpenChange={ setOpen }
+            modal={ modal }
+          >
+            { children }
+          </RadixDialog.Root>
+        </DrawerStateContext.Provider>
       </DrawerSizeContext.Provider>
     </DrawerPlacementContext.Provider>
   );
@@ -98,6 +133,44 @@ export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps
     const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
     const placement = React.useContext(DrawerPlacementContext);
     const size = React.useContext(DrawerSizeContext);
+    const { open, setOpen, modal } = React.useContext(DrawerStateContext);
+    const isNarrow = useIsNarrow();
+
+    if (isNarrow) {
+      return (
+        <GuiSheet
+          open={ open }
+          onOpenChange={ setOpen }
+          modal={ modal }
+          dismissOnSnapToBottom
+          snapPointsMode="percent"
+          snapPoints={ [ 88 ] }
+          transition="medium"
+        >
+          { backdrop && (
+            <GuiSheet.Overlay
+              transition="lazy"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+              className="bg-black/50"
+            />
+          ) }
+          <GuiSheet.Handle/>
+          { /* Sheet.Frame is a gui component, not a DOM node — the DOM ref the
+               Chakra contract hands us has nothing to attach to here. */ }
+          <GuiSheet.Frame
+            unstyled
+            className={ cn(
+              'flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]',
+              className,
+            ) }
+            { ...(rest as object) }
+          >
+            { children }
+          </GuiSheet.Frame>
+        </GuiSheet>
+      );
+    }
 
     const content = (
       <>

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