@luxfi/ui 6.1.3 → 7.1.0

package/dist/slider.cjs

@@ -0,0 +1,138 @@
+"use client";
+'use strict';
+
+var RadixSlider = require('@radix-ui/react-slider');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = 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 {
+      marks: marksProp,
+      label,
+      showValue,
+      value,
+      defaultValue,
+      min = 0,
+      max = 100,
+      step,
+      disabled,
+      orientation,
+      name,
+      onValueChange,
+      onValueCommit,
+      className
+    } = props;
+    const resolvedValue = defaultValue ?? value;
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === "number") return { value: mark, label: void 0 };
+      return mark;
+    });
+    const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
+    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: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        RadixSlider__namespace.Root,
+        {
+          ref,
+          className: cn(
+            "relative flex w-full touch-none select-none items-center",
+            hasMarkLabel && "mb-6"
+          ),
+          value,
+          defaultValue,
+          min,
+          max,
+          step,
+          disabled,
+          orientation,
+          name,
+          onValueChange,
+          onValueCommit,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RadixSlider__namespace.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" })
+              }
+            ),
+            resolvedValue?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              RadixSlider__namespace.Thumb,
+              {
+                className: cn(
+                  `block h-[${THUMB_SIZE}px] w-[${THUMB_SIZE}px]`,
+                  "rounded-full border-2 border-link-primary bg-white",
+                  "shadow-sm transition-colors",
+                  "hover:border-link-primary-hover",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
+                  "disabled:pointer-events-none disabled:opacity-50"
+                )
+              },
+              index
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderMarks, { marks, min, max })
+    ] });
+  }
+);
+function SliderMarks(props) {
+  const { marks, min, max } = props;
+  if (!marks?.length) return null;
+  const range = max - min;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+    const percent = (mark.value - min) / range * 100;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "absolute flex flex-col items-center -translate-x-1/2",
+        style: { left: `${percent}%` },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
+          mark.label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
+        ]
+      },
+      index
+    );
+  }) });
+}
+
+exports.Slider = Slider;

package/dist/slider.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface SliderProps {
+    readonly marks?: Array<number | {
+        readonly value: number;
+        readonly label: React.ReactNode;
+    }>;
+    readonly label?: React.ReactNode;
+    readonly showValue?: boolean;
+    readonly value?: Array<number>;
+    readonly defaultValue?: Array<number>;
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+    readonly disabled?: boolean;
+    readonly orientation?: 'horizontal' | 'vertical';
+    readonly name?: string;
+    readonly onValueChange?: (value: Array<number>) => void;
+    readonly onValueCommit?: (value: Array<number>) => void;
+    readonly className?: string;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Slider, type SliderProps };

package/dist/slider.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface SliderProps {
+    readonly marks?: Array<number | {
+        readonly value: number;
+        readonly label: React.ReactNode;
+    }>;
+    readonly label?: React.ReactNode;
+    readonly showValue?: boolean;
+    readonly value?: Array<number>;
+    readonly defaultValue?: Array<number>;
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+    readonly disabled?: boolean;
+    readonly orientation?: 'horizontal' | 'vertical';
+    readonly name?: string;
+    readonly onValueChange?: (value: Array<number>) => void;
+    readonly onValueCommit?: (value: Array<number>) => void;
+    readonly className?: string;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Slider, type SliderProps };

package/dist/slider.js

@@ -0,0 +1,115 @@
+"use client";
+import * as RadixSlider from '@radix-ui/react-slider';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/slider.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var THUMB_SIZE = 20;
+var TRACK_HEIGHT = 6;
+var Slider = React.forwardRef(
+  function Slider2(props, ref) {
+    const {
+      marks: marksProp,
+      label,
+      showValue,
+      value,
+      defaultValue,
+      min = 0,
+      max = 100,
+      step,
+      disabled,
+      orientation,
+      name,
+      onValueChange,
+      onValueCommit,
+      className
+    } = props;
+    const resolvedValue = defaultValue ?? value;
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === "number") return { value: mark, label: void 0 };
+      return mark;
+    });
+    const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
+    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: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        RadixSlider.Root,
+        {
+          ref,
+          className: cn(
+            "relative flex w-full touch-none select-none items-center",
+            hasMarkLabel && "mb-6"
+          ),
+          value,
+          defaultValue,
+          min,
+          max,
+          step,
+          disabled,
+          orientation,
+          name,
+          onValueChange,
+          onValueCommit,
+          children: [
+            /* @__PURE__ */ jsx(
+              RadixSlider.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" })
+              }
+            ),
+            resolvedValue?.map((_, index) => /* @__PURE__ */ jsx(
+              RadixSlider.Thumb,
+              {
+                className: cn(
+                  `block h-[${THUMB_SIZE}px] w-[${THUMB_SIZE}px]`,
+                  "rounded-full border-2 border-link-primary bg-white",
+                  "shadow-sm transition-colors",
+                  "hover:border-link-primary-hover",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
+                  "disabled:pointer-events-none disabled:opacity-50"
+                )
+              },
+              index
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(SliderMarks, { marks, min, max })
+    ] });
+  }
+);
+function SliderMarks(props) {
+  const { marks, min, max } = props;
+  if (!marks?.length) return null;
+  const range = max - min;
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+    const percent = (mark.value - min) / range * 100;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute flex flex-col items-center -translate-x-1/2",
+        style: { left: `${percent}%` },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
+          mark.label != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
+        ]
+      },
+      index
+    );
+  }) });
+}
+
+export { Slider };

package/dist/strategy-builder.cjs

@@ -0,0 +1,373 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function findATM(strikes, spot) {
+  if (strikes.length === 0) return spot;
+  return strikes.reduce(
+    (prev, curr) => Math.abs(curr - spot) < Math.abs(prev - spot) ? curr : prev
+  );
+}
+function findOTM(strikes, spot, type, offset) {
+  const sorted = [...strikes].sort((a, b) => a - b);
+  const atm = findATM(strikes, spot);
+  const atIdx = sorted.indexOf(atm);
+  if (type === "call") {
+    return sorted[Math.min(atIdx + offset, sorted.length - 1)] ?? atm;
+  }
+  return sorted[Math.max(atIdx - offset, 0)] ?? atm;
+}
+var STRATEGY_PRESETS = [
+  {
+    label: "Bull Call Spread",
+    value: "bull_call_spread",
+    description: "Buy lower strike call, sell higher strike call",
+    buildLegs: (strikes, spot, exp) => {
+      const lower = findATM(strikes, spot);
+      const upper = findOTM(strikes, spot, "call", 2);
+      return [
+        { action: "buy", type: "call", strike: lower, expiration: exp, quantity: 1 },
+        { action: "sell", type: "call", strike: upper, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Bear Put Spread",
+    value: "bear_put_spread",
+    description: "Buy higher strike put, sell lower strike put",
+    buildLegs: (strikes, spot, exp) => {
+      const upper = findATM(strikes, spot);
+      const lower = findOTM(strikes, spot, "put", 2);
+      return [
+        { action: "buy", type: "put", strike: upper, expiration: exp, quantity: 1 },
+        { action: "sell", type: "put", strike: lower, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Iron Condor",
+    value: "iron_condor",
+    description: "Sell OTM put + call, buy further OTM put + call",
+    buildLegs: (strikes, spot, exp) => {
+      const sellPut = findOTM(strikes, spot, "put", 1);
+      const buyPut = findOTM(strikes, spot, "put", 3);
+      const sellCall = findOTM(strikes, spot, "call", 1);
+      const buyCall = findOTM(strikes, spot, "call", 3);
+      return [
+        { action: "buy", type: "put", strike: buyPut, expiration: exp, quantity: 1 },
+        { action: "sell", type: "put", strike: sellPut, expiration: exp, quantity: 1 },
+        { action: "sell", type: "call", strike: sellCall, expiration: exp, quantity: 1 },
+        { action: "buy", type: "call", strike: buyCall, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Butterfly",
+    value: "butterfly",
+    description: "Buy 1 low, sell 2 middle, buy 1 high",
+    buildLegs: (strikes, spot, exp) => {
+      const mid = findATM(strikes, spot);
+      const low = findOTM(strikes, spot, "put", 2);
+      const high = findOTM(strikes, spot, "call", 2);
+      return [
+        { action: "buy", type: "call", strike: low, expiration: exp, quantity: 1 },
+        { action: "sell", type: "call", strike: mid, expiration: exp, quantity: 2 },
+        { action: "buy", type: "call", strike: high, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Straddle",
+    value: "straddle",
+    description: "Buy call + put at same strike",
+    buildLegs: (strikes, spot, exp) => {
+      const atm = findATM(strikes, spot);
+      return [
+        { action: "buy", type: "call", strike: atm, expiration: exp, quantity: 1 },
+        { action: "buy", type: "put", strike: atm, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Strangle",
+    value: "strangle",
+    description: "Buy OTM call + OTM put",
+    buildLegs: (strikes, spot, exp) => {
+      const otmCall = findOTM(strikes, spot, "call", 2);
+      const otmPut = findOTM(strikes, spot, "put", 2);
+      return [
+        { action: "buy", type: "put", strike: otmPut, expiration: exp, quantity: 1 },
+        { action: "buy", type: "call", strike: otmCall, expiration: exp, quantity: 1 }
+      ];
+    }
+  },
+  {
+    label: "Custom",
+    value: "custom",
+    description: "Build your own multi-leg strategy",
+    buildLegs: (_strikes, spot, exp) => [
+      { action: "buy", type: "call", strike: spot, expiration: exp, quantity: 1 }
+    ]
+  }
+];
+function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemove }) {
+  const update = (patch) => {
+    onChange(index, { ...leg, ...patch });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "px-2 py-0.5 rounded text-xs font-semibold transition-colors",
+          leg.action === "buy" ? "bg-emerald-900/60 text-emerald-400" : "bg-red-900/60 text-red-400"
+        ),
+        onClick: () => update({ action: leg.action === "buy" ? "sell" : "buy" }),
+        children: leg.action === "buy" ? "BUY" : "SELL"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        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"
+        ),
+        onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
+        children: leg.type === "call" ? "CALL" : "PUT"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        value: leg.strike,
+        onChange: (e) => update({ strike: Number(e.target.value) }),
+        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]",
+        children: strikes.map((s) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: s, children: s.toFixed(2) }, s))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        value: leg.expiration,
+        onChange: (e) => update({ expiration: e.target.value }),
+        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]",
+        children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: exp, children: exp }, exp))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        min: 1,
+        max: 999,
+        value: leg.quantity,
+        onChange: (e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }),
+        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
+      }
+    ),
+    leg.premium !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+      "font-mono tabular-nums text-xs ml-auto",
+      leg.premium >= 0 ? "text-emerald-400" : "text-red-400"
+    ), children: [
+      leg.premium >= 0 ? "+" : "",
+      leg.premium.toFixed(2)
+    ] }),
+    removable && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onRemove(index),
+        className: "ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors",
+        "aria-label": "Remove leg",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
+}
+var StrategyBuilder = React__namespace.forwardRef(
+  function StrategyBuilder2(props, ref) {
+    const {
+      underlying,
+      expirations,
+      strikes,
+      spotPrice,
+      onSubmit,
+      className,
+      ...rest
+    } = props;
+    const defaultExp = expirations[0] ?? "";
+    const [strategyType, setStrategyType] = React__namespace.useState("bull_call_spread");
+    const [legs, setLegs] = React__namespace.useState(() => {
+      const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
+      return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
+    });
+    const handleStrategyChange = React__namespace.useCallback(
+      (e) => {
+        const type = e.target.value;
+        setStrategyType(type);
+        const preset = STRATEGY_PRESETS.find((p) => p.value === type);
+        if (preset) {
+          setLegs(preset.buildLegs(strikes, spotPrice, defaultExp));
+        }
+      },
+      [strikes, spotPrice, defaultExp]
+    );
+    const handleLegChange = React__namespace.useCallback(
+      (index, leg) => {
+        setLegs((prev) => {
+          const next = [...prev];
+          next[index] = leg;
+          return next;
+        });
+      },
+      []
+    );
+    const handleLegRemove = React__namespace.useCallback(
+      (index) => {
+        setLegs((prev) => prev.filter((_, i) => i !== index));
+      },
+      []
+    );
+    const handleAddLeg = React__namespace.useCallback(() => {
+      if (legs.length >= 4) return;
+      const atm = findATM(strikes, spotPrice);
+      setLegs((prev) => [
+        ...prev,
+        { action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
+      ]);
+    }, [legs.length, strikes, spotPrice, defaultExp]);
+    const netPremium = React__namespace.useMemo(() => {
+      return legs.reduce((sum, leg) => {
+        if (leg.premium === void 0) return sum;
+        const sign = leg.action === "buy" ? -1 : 1;
+        return sum + sign * leg.premium * leg.quantity;
+      }, 0);
+    }, [legs]);
+    const handleSubmit = React__namespace.useCallback(() => {
+      if (!onSubmit || legs.length === 0) return;
+      onSubmit({
+        type: strategyType,
+        legs,
+        netPremium
+      });
+    }, [onSubmit, strategyType, legs, netPremium]);
+    const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              "Spot: ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: strategyType,
+              onChange: handleStrategyChange,
+              className: "flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500",
+              children: STRATEGY_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: preset.value, children: preset.label }, preset.value))
+            }
+          ) }),
+          currentPreset && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            LegRow,
+            {
+              leg,
+              index: i,
+              strikes,
+              expirations,
+              removable: strategyType === "custom" && legs.length > 1,
+              onChange: handleLegChange,
+              onRemove: handleLegRemove
+            },
+            i
+          )) }),
+          strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleAddLeg,
+              className: "flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                "Add Leg"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                "font-mono tabular-nums text-sm font-semibold",
+                netPremium > 0 ? "text-emerald-400" : netPremium < 0 ? "text-red-400" : "text-zinc-400"
+              ), children: [
+                netPremium > 0 ? "Credit " : netPremium < 0 ? "Debit " : "",
+                netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : "-"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: legs.length === 0,
+                className: cn(
+                  "px-4 py-1.5 rounded-md text-xs font-semibold transition-colors",
+                  "bg-blue-600 text-white hover:bg-blue-500",
+                  "disabled:opacity-40 disabled:cursor-not-allowed"
+                ),
+                children: "Review Order"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+exports.StrategyBuilder = StrategyBuilder;