@luxfi/ui 7.3.2 → 7.4.2

package/src/lux.config.ts

@@ -0,0 +1,82 @@
+'use client';
+
+import { createGui } from '@hanzo/gui';
+import { defaultConfig } from '@hanzogui/config/v5';
+import { animations } from '@hanzogui/config/v5-css';
+
+// 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.
+const TRUE_BLACK = '#000000';
+
+const darkBase = {
+  ...defaultConfig.themes.dark,
+  background: TRUE_BLACK,
+  backgroundHover: '#0A0A0A',
+  backgroundPress: '#141414',
+  backgroundFocus: '#0A0A0A',
+} as typeof defaultConfig.themes.dark;
+
+// A brand child-theme row = the true-black base with the brand accent woven
+// into the accent-carrying keys. `<Theme name="lux">` under a dark parent
+// resolves to `dark_lux`.
+const brandTheme = (
+  accent: string,
+  extra: Record<string, string> = {},
+): typeof darkBase =>
+  ({
+    ...darkBase,
+    accentBackground: accent,
+    accentColor: '#FFFFFF',
+    borderColorHover: accent,
+    colorHover: accent,
+    ...extra,
+  }) as typeof darkBase;
+
+export const luxThemes = {
+  dark: darkBase,
+  dark_lux: brandTheme(LUX_BRAND.lux),
+  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
+// (tokens / fonts / media / shorthands) and only add the Lux child-theme rows
+// 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,
+  },
+  themes: {
+    ...defaultConfig.themes,
+    ...luxThemes,
+  },
+});
+
+export type Conf = typeof config;
+
+declare module '@hanzo/gui' {
+  interface GuiCustomConfig extends Conf {}
+}
+
+export default config;

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,142 @@
+// 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.
+
+/** Every package `@hanzo/gui` re-exports — the engine, in full. */
+const GUI_PACKAGES = [
+  '@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/element',
+  '@hanzogui/elements',
+  '@hanzogui/font-size',
+  '@hanzogui/form',
+  '@hanzogui/group',
+  '@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/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-window-dimensions',
+  '@hanzogui/visually-hidden',
+  '@hanzogui/web',
+  '@luxfi/ui',
+];
+
+/** The engine branches on these at module scope. */
+const DEFINES: Record<string, string> = {
+  'process.env.EXPO_OS': JSON.stringify('web'),
+  'process.env.IS_WEB': JSON.stringify('true'),
+};
+
+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 {
+  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;
+  return {
+    ...config,
+    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,
+        alias: { ...next.resolve?.alias, 'react-native$': 'react-native-web' },
+      };
+      // `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(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>

package/src/popover.tsx

@@ -1,4 +1,4 @@
-import { Popover as GuiPopover } from '@hanzogui/popover';
+import { Popover as GuiPopover } from '@hanzo/gui';
 import * as React from 'react';
 
 import { cn } from './utils';

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

@@ -1,30 +1,110 @@
 'use client';
 
-import { createGui } from '@hanzogui/core';
-import { QueryClient, QueryClientProvider, useQueryClient, useQuery, useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import { GuiProvider } from '@hanzo/gui';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+  useQuery,
+  useMutation,
+  useInfiniteQuery,
+} from '@tanstack/react-query';
 import React from 'react';
 
-// Initialize @hanzogui once at module scope — guarded for SSR (no window).
-// Must be synchronous: child components need config during first render,
-// before useEffect fires. 7.3.1 used useEffect which was too late (Err0).
-if (typeof window !== 'undefined') {
-  createGui({ settings: { autocompleteSpecificTokens: 'except-special' } });
-}
+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 } },
 });
 
+// --- Tailwind-Preflight baseline reset -------------------------------------
+// @hanzo/gui's GuiProvider scopes its subtree in a Tamagui `font_body` context
+// whose shared CSS rule pins an ABSOLUTE line-height (23px). That cascades into
+// consumer text authored at an arbitrary size with no line-height utility of its
+// own (e.g. `text-[11px]` labels), making each line too tall and reflowing dense
+// layouts. Restore Tailwind Preflight's `line-height: 1.5` baseline at
+// `body .font_body` specificity — proportional, so any element carrying its own
+// text-* / leading utility is unaffected. Shipping it from AppProvider means
+// every Lux surface inherits the fix with no per-app CSS pin. Web-only (there is
+// no `document` on native), injected once via useInsertionEffect (React's
+// primitive for style insertion — runs before the browser paints, so no reflow
+// flash), idempotent by element id.
+const FONT_BODY_RESET_ID = 'lux-ui-font-body-reset';
+const FONT_BODY_RESET_CSS = 'body .font_body{line-height:1.5}';
+
+const useFontBodyReset = (): void => {
+  React.useInsertionEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(FONT_BODY_RESET_ID)) return;
+    const style = document.createElement('style');
+    style.id = FONT_BODY_RESET_ID;
+    style.textContent = FONT_BODY_RESET_CSS;
+    document.head.appendChild(style);
+  }, []);
+};
+
+// --- 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;
+  /**
+   * 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;
 }
 
-export const AppProvider = ({ children, queryClient }: AppProviderProps) => {
+// AppProvider wraps GuiProvider (the @hanzogui engine, fed the Lux config) +
+// tanstack QueryClientProvider. One provider for every Lux surface.
+export const AppProvider = ({
+  children,
+  queryClient,
+  host,
+  defaultTheme,
+}: AppProviderProps): React.ReactElement => {
+  useFontBodyReset();
+  const whiteLabel = useHostWhiteLabel(host);
+  const theme = defaultTheme ?? whiteLabel.theme;
   return (
-    <QueryClientProvider client={ queryClient ?? defaultQueryClient }>
-      { children }
-    </QueryClientProvider>
+    <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) }
       />
     );
   },