@luxfi/ui 7.3.2 → 7.4.2

package/dist/provider.d.cts

@@ -1,12 +1,25 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { QueryClient } from '@tanstack/react-query';
 export { QueryClient, useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import React__default from 'react';
+import { WhiteLabel } from './white-label.cjs';
 
+/** The white-label identity for the host this page is being served under. */
+declare const useWhiteLabel: () => WhiteLabel;
 interface AppProviderProps {
     children: React__default.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;
 }
-declare const AppProvider: ({ children, queryClient }: AppProviderProps) => react_jsx_runtime.JSX.Element;
+declare const AppProvider: ({ children, queryClient, host, defaultTheme, }: AppProviderProps) => React__default.ReactElement;
 
-export { AppProvider };
+export { AppProvider, useWhiteLabel };

package/dist/provider.d.ts

@@ -1,12 +1,25 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { QueryClient } from '@tanstack/react-query';
 export { QueryClient, useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import React__default from 'react';
+import { WhiteLabel } from './white-label.js';
 
+/** The white-label identity for the host this page is being served under. */
+declare const useWhiteLabel: () => WhiteLabel;
 interface AppProviderProps {
     children: React__default.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;
 }
-declare const AppProvider: ({ children, queryClient }: AppProviderProps) => react_jsx_runtime.JSX.Element;
+declare const AppProvider: ({ children, queryClient, host, defaultTheme, }: AppProviderProps) => React__default.ReactElement;
 
-export { AppProvider };
+export { AppProvider, useWhiteLabel };

package/dist/provider.js

@@ -1,17 +1,206 @@
 "use client";
-import { createGui } from '@hanzogui/core';
+import { createGui, GuiProvider } from '@hanzo/gui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 export { QueryClient, useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+import { defaultConfig } from '@hanzogui/config/v5';
+import { animations } from '@hanzogui/config/v5-css';
 import { jsx } from 'react/jsx-runtime';
 
-if (typeof window !== "undefined") {
-  createGui({ settings: { autocompleteSpecificTokens: "except-special" } });
+// src/white-label.ts
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879",
+  // bootno.de is its own white label with its own IdP (id.bootno.de) — accent
+  // taken from the bootnode console's own brand default, not invented here.
+  bootnode: "#3B82F6"
+};
+var PARS_GOLD = "#C8A45C";
+var ORGS = {
+  lux: {
+    org: "lux",
+    name: "Lux",
+    domain: "lux.network",
+    iamDomain: "lux.id",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  zoo: {
+    org: "zoo",
+    name: "Zoo",
+    domain: "zoo.ngo",
+    // Zoo's IdP is `id.zoo.network`, not a `zoo.id` apex — the one row in this
+    // table where the issuer is not `<org>.id`, and the one every hand-rolled
+    // per-app branding map got wrong.
+    iamDomain: "id.zoo.network",
+    accent: LUX_BRAND.zoo,
+    accentForeground: "#FFFFFF"
+  },
+  bootnode: {
+    org: "bootnode",
+    name: "Bootnode",
+    domain: "bootno.de",
+    iamDomain: "id.bootno.de",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  hanzo: {
+    org: "hanzo",
+    name: "Hanzo",
+    domain: "hanzo.ai",
+    iamDomain: "hanzo.id",
+    accent: LUX_BRAND.hanzo,
+    accentForeground: "#FFFFFF"
+  },
+  pars: {
+    org: "pars",
+    name: "Pars",
+    domain: "pars.id",
+    iamDomain: "pars.id",
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD
+  }
+};
+var DOMAIN_ORG = [
+  ["lux.network", "lux"],
+  ["lux.cloud", "lux"],
+  ["lux.id", "lux"],
+  ["lux.finance", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoo.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars"],
+  ["parsdao.org", "pars"],
+  ["bootno.de", "bootnode", "platform"]
+];
+var DEFAULT_ORG = "lux";
+function normalizeHost(host) {
+  const noPort = host.trim().toLowerCase().split(":")[0] ?? "";
+  return noPort.replace(/\.$/, "");
+}
+function isUnder(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function matchDomain(host) {
+  let best;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+function appSlug(host, domain, apexApp) {
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  if (apexApp) return apexApp;
+  const label = domain.split(".")[0] ?? "";
+  const tld = domain.split(".").slice(1).join(".");
+  return tld.split(".")[0] || label;
+}
+function isLocal(host) {
+  return host === "localhost" || host.endsWith(".localhost") || host === "127.0.0.1" || host === "0.0.0.0" || host === "[::1]" || host.endsWith(".local");
+}
+function resolveWhiteLabel(host) {
+  const h = normalizeHost(host ?? "");
+  const match = h ? matchDomain(h) : void 0;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : h && isLocal(h) ? "local" : "app";
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${org}`,
+    issuer: `https://${identity.iamDomain}`,
+    clientId: `${org}-${app}`
+  };
+}
+function currentHost() {
+  return typeof window === "undefined" ? "" : window.location.host;
 }
+
+// src/lux.config.ts
+var TRUE_BLACK = "#000000";
+var darkBase = {
+  ...defaultConfig.themes.dark,
+  background: TRUE_BLACK,
+  backgroundHover: "#0A0A0A",
+  backgroundPress: "#141414",
+  backgroundFocus: "#0A0A0A"
+};
+var brandTheme = (accent, extra = {}) => ({
+  ...darkBase,
+  accentBackground: accent,
+  accentColor: "#FFFFFF",
+  borderColorHover: accent,
+  colorHover: accent,
+  ...extra
+});
+var 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)
+};
+var config = createGui({
+  ...defaultConfig,
+  animations,
+  settings: {
+    ...defaultConfig.settings,
+    onlyAllowShorthands: false
+  },
+  themes: {
+    ...defaultConfig.themes,
+    ...luxThemes
+  }
+});
+var lux_config_default = config;
 var defaultQueryClient = new QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
 });
-var AppProvider = ({ children, queryClient }) => {
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children });
+var FONT_BODY_RESET_ID = "lux-ui-font-body-reset";
+var FONT_BODY_RESET_CSS = "body .font_body{line-height:1.5}";
+var useFontBodyReset = () => {
+  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);
+  }, []);
+};
+var WhiteLabelContext = React.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React.useContext(WhiteLabelContext);
+var useHostWhiteLabel = (host) => {
+  const [resolvedHost, setResolvedHost] = React.useState(host ?? "");
+  React.useEffect(() => {
+    if (host !== void 0) return;
+    const browserHost = currentHost();
+    if (browserHost) setResolvedHost(browserHost);
+  }, [host]);
+  return React.useMemo(() => resolveWhiteLabel(resolvedHost), [resolvedHost]);
+};
+var AppProvider = ({
+  children,
+  queryClient,
+  host,
+  defaultTheme
+}) => {
+  useFontBodyReset();
+  const whiteLabel = useHostWhiteLabel(host);
+  const theme = defaultTheme ?? whiteLabel.theme;
+  return /* @__PURE__ */ jsx(WhiteLabelContext.Provider, { value: whiteLabel, children: /* @__PURE__ */ jsx(GuiProvider, { config: lux_config_default, defaultTheme: theme, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children }) }) });
 };
 
-export { AppProvider };
+export { AppProvider, useWhiteLabel };

package/dist/radio.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixRadioGroup = require('@radix-ui/react-radio-group');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,7 +25,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/radio.tsx
@@ -68,7 +67,8 @@ var RadioGroupBase = React__namespace.forwardRef(
       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,
@@ -84,14 +84,14 @@ var RadioGroupBase = React__namespace.forwardRef(
       [readOnly, onValueChange]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixRadioGroup__namespace.Root,
+      gui.RadioGroup,
       {
         ref,
+        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
         orientation,
-        loop,
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
@@ -128,8 +128,9 @@ var RadioBase = React__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RadixRadioGroup__namespace.Item,
+            gui.RadioGroup.Item,
             {
+              unstyled: true,
               value,
               disabled,
               className: cn(
@@ -141,8 +142,9 @@ var RadioBase = React__namespace.forwardRef(
                 sizeClasses.control
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                RadixRadioGroup__namespace.Indicator,
+                gui.RadioGroup.Indicator,
                 {
+                  unstyled: true,
                   className: cn(
                     "block rounded-full bg-gray-800 dark:bg-white",
                     sizeClasses.indicator

package/dist/radio.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { RadioGroup } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -37,7 +37,7 @@ var SIZE_CLASSES = {
 };
 var RadioSizeContext = React.createContext("md");
 var RadioGroupBase = React.forwardRef(
-  function RadioGroup(props, ref) {
+  function RadioGroup$1(props, ref) {
     const {
       children,
       name,
@@ -45,7 +45,8 @@ var RadioGroupBase = React.forwardRef(
       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,
@@ -61,14 +62,14 @@ var RadioGroupBase = React.forwardRef(
       [readOnly, onValueChange]
     );
     return /* @__PURE__ */ jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
-      RadixRadioGroup.Root,
+      RadioGroup,
       {
         ref,
+        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
         orientation,
-        loop,
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
@@ -105,8 +106,9 @@ var RadioBase = React.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
-            RadixRadioGroup.Item,
+            RadioGroup.Item,
             {
+              unstyled: true,
               value,
               disabled,
               className: cn(
@@ -118,8 +120,9 @@ var RadioBase = React.forwardRef(
                 sizeClasses.control
               ),
               children: /* @__PURE__ */ jsx(
-                RadixRadioGroup.Indicator,
+                RadioGroup.Indicator,
                 {
+                  unstyled: true,
                   className: cn(
                     "block rounded-full bg-gray-800 dark:bg-white",
                     sizeClasses.indicator

package/dist/separator.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -35,9 +36,10 @@ var Separator = React__default.default.forwardRef(
   function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
     const isVertical = orientation === "vertical";
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "hr",
+      gui.Separator,
       {
         ref,
+        vertical: isVertical,
         role: "separator",
         "aria-orientation": orientation,
         className: cn(

package/dist/separator.js

@@ -1,4 +1,5 @@
 "use client";
+import { Separator as Separator$1 } from '@hanzo/gui';
 import React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -29,9 +30,10 @@ var Separator = React.forwardRef(
   function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
     const isVertical = orientation === "vertical";
     return /* @__PURE__ */ jsx(
-      "hr",
+      Separator$1,
       {
         ref,
+        vertical: isVertical,
         role: "separator",
         "aria-orientation": orientation,
         className: cn(

package/dist/slider.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixSlider = require('@radix-ui/react-slider');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,15 +25,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixSlider__namespace = /*#__PURE__*/_interopNamespace(RadixSlider);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/slider.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var THUMB_SIZE = 20;
-var TRACK_HEIGHT = 6;
 var Slider = React__namespace.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -46,7 +43,7 @@ var Slider = React__namespace.forwardRef(
       max = 100,
       step,
       disabled,
-      orientation,
+      orientation = "horizontal",
       name,
       onValueChange,
       onValueCommit,
@@ -58,6 +55,14 @@ var Slider = React__namespace.forwardRef(
       return mark;
     });
     const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
+    const latest = React__namespace.useRef(value ?? defaultValue ?? []);
+    const handleValueChange = React__namespace.useCallback((next) => {
+      latest.current = next;
+      onValueChange?.(next);
+    }, [onValueChange]);
+    const handleSlideEnd = React__namespace.useCallback(() => {
+      onValueCommit?.(latest.current);
+    }, [onValueCommit]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
       label && !showValue && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
       label && showValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -65,9 +70,10 @@ var Slider = React__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        RadixSlider__namespace.Root,
+        gui.Slider,
         {
           ref,
+          unstyled: true,
           className: cn(
             "relative flex w-full touch-none select-none items-center",
             hasMarkLabel && "mb-6"
@@ -80,24 +86,30 @@ var Slider = React__namespace.forwardRef(
           disabled,
           orientation,
           name,
-          onValueChange,
-          onValueCommit,
+          onValueChange: handleValueChange,
+          onSlideEnd: handleSlideEnd,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              RadixSlider__namespace.Track,
+              gui.Slider.Track,
               {
-                className: cn(
-                  "relative grow rounded-full bg-border-divider",
-                  `h-[${TRACK_HEIGHT}px]`
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(RadixSlider__namespace.Range, { className: "absolute h-full rounded-full bg-link-primary" })
+                unstyled: true,
+                className: "relative grow h-1.5 rounded-full bg-border-divider",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  gui.Slider.TrackActive,
+                  {
+                    unstyled: true,
+                    className: "absolute h-full rounded-full bg-link-primary"
+                  }
+                )
               }
             ),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              RadixSlider__namespace.Thumb,
+              gui.Slider.Thumb,
               {
+                index,
+                unstyled: true,
                 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",

package/dist/slider.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixSlider from '@radix-ui/react-slider';
+import { Slider as Slider$1 } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -9,8 +9,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var THUMB_SIZE = 20;
-var TRACK_HEIGHT = 6;
 var Slider = React.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -23,7 +21,7 @@ var Slider = React.forwardRef(
       max = 100,
       step,
       disabled,
-      orientation,
+      orientation = "horizontal",
       name,
       onValueChange,
       onValueCommit,
@@ -35,6 +33,14 @@ var Slider = React.forwardRef(
       return mark;
     });
     const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
+    const latest = React.useRef(value ?? defaultValue ?? []);
+    const handleValueChange = React.useCallback((next) => {
+      latest.current = next;
+      onValueChange?.(next);
+    }, [onValueChange]);
+    const handleSlideEnd = React.useCallback(() => {
+      onValueCommit?.(latest.current);
+    }, [onValueCommit]);
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
       label && !showValue && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
       label && showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -42,9 +48,10 @@ var Slider = React.forwardRef(
         /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxs(
-        RadixSlider.Root,
+        Slider$1,
         {
           ref,
+          unstyled: true,
           className: cn(
             "relative flex w-full touch-none select-none items-center",
             hasMarkLabel && "mb-6"
@@ -57,24 +64,30 @@ var Slider = React.forwardRef(
           disabled,
           orientation,
           name,
-          onValueChange,
-          onValueCommit,
+          onValueChange: handleValueChange,
+          onSlideEnd: handleSlideEnd,
           children: [
             /* @__PURE__ */ jsx(
-              RadixSlider.Track,
+              Slider$1.Track,
               {
-                className: cn(
-                  "relative grow rounded-full bg-border-divider",
-                  `h-[${TRACK_HEIGHT}px]`
-                ),
-                children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "absolute h-full rounded-full bg-link-primary" })
+                unstyled: true,
+                className: "relative grow h-1.5 rounded-full bg-border-divider",
+                children: /* @__PURE__ */ jsx(
+                  Slider$1.TrackActive,
+                  {
+                    unstyled: true,
+                    className: "absolute h-full rounded-full bg-link-primary"
+                  }
+                )
               }
             ),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsx(
-              RadixSlider.Thumb,
+              Slider$1.Thumb,
               {
+                index,
+                unstyled: true,
                 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",

package/dist/strategy-builder.cjs

@@ -161,7 +161,8 @@ 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",
-          leg.type === "call" ? "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.
+          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
         ),
         onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
         children: leg.type === "call" ? "CALL" : "PUT"

package/dist/strategy-builder.js

@@ -139,7 +139,8 @@ 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",
-          leg.type === "call" ? "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.
+          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
         ),
         onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
         children: leg.type === "call" ? "CALL" : "PUT"