@luxfi/ui 7.4.0 → 7.4.2

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>

package/src/progress.tsx

@@ -1,4 +1,4 @@
-import * as RadixProgress from '@radix-ui/react-progress';
+import { Progress as GuiProgress } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -81,28 +81,35 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         style={ rootStyle }
         { ...rest }
       >
-        <RadixProgress.Root
+        <GuiProgress
           value={ percent }
           max={ 100 }
+          unstyled
           className={ cn(
             'w-full overflow-hidden rounded-full',
             'bg-[var(--color-progress-track)]',
             SIZE_CLASSES[size],
             trackProps?.className,
           ) }
-          style={ trackStyle }
+          style={ trackStyle as never }
         >
-          <RadixProgress.Indicator
+          { /* gui drives the fill off `value` — it sizes the indicator to 200%
+               and translates it — and eases it with the config's transition
+               driver. Geometry from the primitive, paint from the Lux classes,
+               so the bar is a consequence of state rather than a hand-written
+               width + CSS transition. */ }
+          <GuiProgress.Indicator
+            unstyled
+            transition="slow"
             className={ cn(
-              'h-full rounded-full transition-transform duration-500 ease-out',
+              'h-full rounded-full',
               !color && 'bg-[var(--color-progress-indicator)]',
             ) }
             style={{
-              width: `${ percent }%`,
               ...(color && { backgroundColor: `var(--color-${ color.replace('.', '-') }, ${ color })` }),
-            }}
+            } as never}
           />
-        </RadixProgress.Root>
+        </GuiProgress>
       </div>
     );
   },

package/src/provider.tsx

@@ -12,6 +12,7 @@ import {
 import React from 'react';
 
 import config from './lux.config';
+import { currentHost, resolveWhiteLabel, type WhiteLabel } from './white-label';
 
 const defaultQueryClient = new QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 30_000 } },
@@ -43,10 +44,45 @@ const useFontBodyReset = (): void => {
   }, []);
 };
 
+// --- White-label context ---------------------------------------------------
+// Resolved once at the root and read anywhere below. Brand, theme, IAM client
+// and issuer all come from the Host header — see ./white-label.
+const WhiteLabelContext = React.createContext<WhiteLabel>(resolveWhiteLabel(''));
+
+/** The white-label identity for the host this page is being served under. */
+export const useWhiteLabel = (): WhiteLabel => React.useContext(WhiteLabelContext);
+
+/**
+ * Host used for the FIRST render, then upgraded to the browser's real host.
+ *
+ * Server-rendered surfaces pass `req.headers.host` in, so first paint is already
+ * correct and hydration matches. Surfaces that do not pass one render the
+ * default row on the server and swap to the host-resolved row in an effect —
+ * deterministic on both sides, so there is no hydration mismatch either way.
+ */
+const useHostWhiteLabel = (host: string | undefined): WhiteLabel => {
+  const [ resolvedHost, setResolvedHost ] = React.useState(host ?? '');
+  React.useEffect(() => {
+    if (host !== undefined) return;
+    const browserHost = currentHost();
+    if (browserHost) setResolvedHost(browserHost);
+  }, [ host ]);
+  return React.useMemo(() => resolveWhiteLabel(resolvedHost), [ resolvedHost ]);
+};
+
 interface AppProviderProps {
   children: React.ReactNode;
   queryClient?: QueryClient;
-  /** Lux brand child-theme row: dark_lux | dark_zoo | dark_hanzo | dark_pars */
+  /**
+   * Host header value, for server rendering. Omit in the browser and the host
+   * is read from `location`. Never bake a brand into a deployment — pass the
+   * request's host and the same image serves every org.
+   */
+  host?: string;
+  /**
+   * Escape hatch: pin the gui child-theme row (`dark_lux` | `dark_zoo` |
+   * `dark_hanzo` | `dark_pars`). Leave unset so the theme follows the host.
+   */
   defaultTheme?: string;
 }
 
@@ -55,15 +91,20 @@ interface AppProviderProps {
 export const AppProvider = ({
   children,
   queryClient,
-  defaultTheme = 'dark_lux',
+  host,
+  defaultTheme,
 }: AppProviderProps): React.ReactElement => {
   useFontBodyReset();
+  const whiteLabel = useHostWhiteLabel(host);
+  const theme = defaultTheme ?? whiteLabel.theme;
   return (
-    <GuiProvider config={config} defaultTheme={defaultTheme as never}>
-      <QueryClientProvider client={queryClient ?? defaultQueryClient}>
-        {children}
-      </QueryClientProvider>
-    </GuiProvider>
+    <WhiteLabelContext.Provider value={whiteLabel}>
+      <GuiProvider config={config} defaultTheme={theme as never}>
+        <QueryClientProvider client={queryClient ?? defaultQueryClient}>
+          {children}
+        </QueryClientProvider>
+      </GuiProvider>
+    </WhiteLabelContext.Provider>
   );
 };
 

package/src/radio.tsx

@@ -1,5 +1,4 @@
-import * as RadixRadioGroup from '@radix-ui/react-radio-group';
-// chakra() HOC removed — pure Radix + Tailwind
+import { RadioGroup as GuiRadioGroup } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -60,7 +59,8 @@ const RadioGroupBase = React.forwardRef<HTMLDivElement, RadioGroupProps>(
       disabled = false,
       readOnly = false,
       orientation = 'vertical',
-      loop = true,
+      // `loop` was a Radix-only knob; gui's roving focus always wraps.
+      loop: _loop = true,
       defaultValue,
       value,
       onValueChange,
@@ -79,13 +79,15 @@ const RadioGroupBase = React.forwardRef<HTMLDivElement, RadioGroupProps>(
 
     return (
       <RadioSizeContext.Provider value={ size }>
-        <RadixRadioGroup.Root
-          ref={ ref }
+        { /* gui's RadioGroup — role=radiogroup / role=radio and roving focus
+             from its headless core, real Pressables on native. */ }
+        <GuiRadioGroup
+          ref={ ref as never }
+          unstyled
           name={ name }
           required={ required }
           disabled={ disabled || readOnly }
           orientation={ orientation }
-          loop={ loop }
           defaultValue={ defaultValue }
           value={ value ?? undefined }
           onValueChange={ handleValueChange }
@@ -94,10 +96,10 @@ const RadioGroupBase = React.forwardRef<HTMLDivElement, RadioGroupProps>(
             orientation === 'vertical' ? 'flex-col gap-3' : 'flex-row gap-6',
             className,
           ) }
-          { ...rest }
+          { ...(rest as object) }
         >
           { children }
-        </RadixRadioGroup.Root>
+        </GuiRadioGroup>
       </RadioSizeContext.Provider>
     );
   },
@@ -133,7 +135,8 @@ const RadioBase = React.forwardRef<HTMLInputElement, RadioProps>(
         data-disabled={ disabled || undefined }
         { ...rest }
       >
-        <RadixRadioGroup.Item
+        <GuiRadioGroup.Item
+          unstyled
           value={ value }
           disabled={ disabled }
           className={ cn(
@@ -145,13 +148,14 @@ const RadioBase = React.forwardRef<HTMLInputElement, RadioProps>(
             sizeClasses.control,
           ) }
         >
-          <RadixRadioGroup.Indicator
+          <GuiRadioGroup.Indicator
+            unstyled
             className={ cn(
               'block rounded-full bg-gray-800 dark:bg-white',
               sizeClasses.indicator,
             ) }
           />
-        </RadixRadioGroup.Item>
+        </GuiRadioGroup.Item>
         { /* Hidden native input for form compatibility and ref forwarding */ }
         <input
           ref={ ref }

package/src/separator.tsx

@@ -1,3 +1,4 @@
+import { Separator as GuiSeparator } from '@hanzo/gui';
 import React from 'react';
 
 import { cn } from './utils';
@@ -32,6 +33,9 @@ const VERTICAL_SIZE_CLASSES: Record<Size, string> = {
   lg: 'border-l-[3px]',
 };
 
+// gui's Separator wearing the Lux border scale. `vertical` is the primitive's
+// own orientation variant, so it lays out correctly on native too; the Tailwind
+// classes only carry border weight and dash pattern.
 export const Separator = React.forwardRef<HTMLHRElement, SeparatorProps>(
   function Separator(
     { orientation = 'horizontal', variant = 'solid', size = 'sm', className, ...rest },
@@ -40,8 +44,9 @@ export const Separator = React.forwardRef<HTMLHRElement, SeparatorProps>(
     const isVertical = orientation === 'vertical';
 
     return (
-      <hr
-        ref={ ref }
+      <GuiSeparator
+        ref={ ref as never }
+        vertical={ isVertical }
         role="separator"
         aria-orientation={ orientation }
         className={ cn(
@@ -52,7 +57,7 @@ export const Separator = React.forwardRef<HTMLHRElement, SeparatorProps>(
           isVertical ? 'self-stretch h-auto w-0' : 'w-full',
           className,
         ) }
-        { ...rest }
+        { ...(rest as object) }
       />
     );
   },

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';
@@ -38,6 +39,8 @@ export interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textare
   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, onChange, onChangeText, ...rest }, ref) => {
     const handleChange = React.useCallback(
@@ -48,11 +51,12 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       [ 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 }
-        onChange={ handleChange }
+        { ...(rest as object) }
+        onChange={ handleChange as never }
       />
     );
   },

package/src/tooltip.tsx

@@ -5,28 +5,9 @@ import {
 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;
@@ -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);