@trade-it/react 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to `@trade-it/react` will be documented in this file.
+
+## 0.1.0 - 2026-02-25
+
+Initial public SDK release (v1 foundation).
+
+### Added
+
+- Responsive iframe modal for embedded Trade It connect and trade experiences
+- Declarative `<TradeItModal />` API
+- Imperative `useTradeIt()` hook
+- `postMessage` event forwarding for embedded lifecycle and trade events
+- Trade URL template support (`[ticker]`) with SDK-side query serialization
+- ESM + CommonJS builds with bundled runtime dependencies (excluding peers)
+
+### Notes
+
+- `@trade-it/react` depends on `@trade-it/core`
+- Trade It session URLs should be created by your backend via `POST /api/session/url`

package/README.md

@@ -0,0 +1,35 @@
+# `@trade-it/react`
+
+React SDK for embedding Trade It connect and trade experiences directly inside your app.
+
+Use this package when you want to:
+
+- open the Trade It connect flow in a modal
+- open prefilled trade flows in a modal
+- keep users on your site while they connect brokerages and place trades
+
+## Install
+
+```bash
+npm i @trade-it/react
+```
+
+Peer dependencies:
+
+- `react` (`^18 || ^19`)
+- `react-dom` (`^18 || ^19`)
+
+## Documentation
+
+Full integration guides, examples, and API references:
+
+- [React SDK Overview](https://docs.tradeit.app/sdk)
+- [Authentication](https://docs.tradeit.app/sdk/authentication)
+- [Connect a Brokerage](https://docs.tradeit.app/sdk/connect)
+- [Place Trades](https://docs.tradeit.app/sdk/trades)
+- [SDK Enums Reference](https://docs.tradeit.app/sdk/enums)
+
+## Notes
+
+- Request Trade It session URLs from your server, not from the browser.
+- `@trade-it/react` depends on `@trade-it/core`.

package/dist/index.cjs

@@ -0,0 +1,454 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const __trade_it_core = __toESM(require("@trade-it/core"));
+const react = __toESM(require("react"));
+const react_dom = __toESM(require("react-dom"));
+const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
+
+//#region src/LoaderCircleSpinner.tsx
+const SPINNER_WRAPPER_SIZE = 44;
+const SPINNER_ICON_SIZE = 32;
+const SPINNER_WRAPPER_STYLE = {
+	width: SPINNER_WRAPPER_SIZE,
+	height: SPINNER_WRAPPER_SIZE,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	animation: "tradeItSdkSpin 0.9s linear infinite",
+	transformOrigin: "50% 50%"
+};
+const SPINNER_SVG_STYLE = {
+	display: "block",
+	width: SPINNER_ICON_SIZE,
+	height: SPINNER_ICON_SIZE,
+	color: "#111827"
+};
+const SPINNER_KEYFRAMES_CSS = `
+@keyframes tradeItSdkSpin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tradeit-sdk-spinner {
+    animation: none !important;
+  }
+}
+`;
+function LoaderCircleSpinner() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: SPINNER_KEYFRAMES_CSS }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "tradeit-sdk-spinner",
+		style: SPINNER_WRAPPER_STYLE,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: SPINNER_ICON_SIZE,
+			height: SPINNER_ICON_SIZE,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			style: SPINNER_SVG_STYLE,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+		})
+	})] });
+}
+
+//#endregion
+//#region src/TradeItModalLoader.tsx
+const LOADING_STYLE = {
+	position: "absolute",
+	inset: 0,
+	background: "#ffffff"
+};
+const LOADING_CONTENT_STYLE = {
+	position: "relative",
+	zIndex: 1,
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "100%",
+	height: "100%"
+};
+function TradeItModalLoader() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: LOADING_STYLE,
+		"aria-live": "polite",
+		"aria-busy": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: LOADING_CONTENT_STYLE,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircleSpinner, {})
+		})
+	});
+}
+
+//#endregion
+//#region src/TradeItModal.tsx
+const OVERLAY_STYLE = {
+	position: "fixed",
+	inset: 0,
+	background: "rgba(15, 23, 42, 0.55)",
+	backdropFilter: "blur(4px)",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: 12
+};
+const DIALOG_DESKTOP_STYLE = {
+	position: "relative",
+	width: "min(960px, calc(100vw - 24px))",
+	height: "min(760px, calc(100vh - 24px))",
+	background: "#fff",
+	borderRadius: 18,
+	boxShadow: "0 24px 80px rgba(2, 6, 23, 0.28)",
+	border: "1px solid rgba(148, 163, 184, 0.35)",
+	overflow: "hidden"
+};
+const DIALOG_MOBILE_STYLE = {
+	...DIALOG_DESKTOP_STYLE,
+	width: "100vw",
+	height: "100vh",
+	borderRadius: 0,
+	border: 0
+};
+const CLOSE_BUTTON_STYLE = {
+	position: "absolute",
+	top: 10,
+	right: 10,
+	zIndex: 2,
+	width: 34,
+	height: 34,
+	borderRadius: 999,
+	border: "1px solid rgba(148,163,184,0.45)",
+	background: "rgba(255,255,255,0.92)",
+	color: "#0f172a",
+	cursor: "pointer",
+	fontSize: 18,
+	lineHeight: "32px",
+	textAlign: "center",
+	padding: 0
+};
+const IFRAME_STYLE = {
+	width: "100%",
+	height: "100%",
+	border: 0,
+	background: "#fff"
+};
+function useIsMobile(maxWidth = 640) {
+	const [isMobile, setIsMobile] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined") return;
+		const mediaQuery = window.matchMedia(`(max-width: ${maxWidth}px)`);
+		const onChange = () => setIsMobile(mediaQuery.matches);
+		onChange();
+		if (typeof mediaQuery.addEventListener === "function") {
+			mediaQuery.addEventListener("change", onChange);
+			return () => mediaQuery.removeEventListener("change", onChange);
+		}
+		mediaQuery.addListener(onChange);
+		return () => mediaQuery.removeListener(onChange);
+	}, [maxWidth]);
+	return isMobile;
+}
+function TradeItModal(props) {
+	const { open, onOpenChange, onEvent, onError, iframeTitle, keepMounted = false, closeOnEscape = true, closeOnOverlayClick = true, closeOnCloseRequestedEvent = true, showCloseButton = true, zIndex = 9999, title, className } = props;
+	const isMobile = useIsMobile();
+	const [isMounted, setIsMounted] = (0, react.useState)(false);
+	const [iframeLoaded, setIframeLoaded] = (0, react.useState)(false);
+	const resolved = (0, react.useMemo)(() => {
+		try {
+			return {
+				url: (0, __trade_it_core.resolveLaunchUrl)(props.launch),
+				error: null
+			};
+		} catch (error) {
+			return {
+				url: null,
+				error: error instanceof Error ? error : new Error("Failed to build Trade It iframe URL")
+			};
+		}
+	}, [props.launch]);
+	(0, react.useEffect)(() => {
+		setIsMounted(true);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!resolved.error) return;
+		onError?.(resolved.error);
+	}, [resolved.error, onError]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		setIframeLoaded(false);
+	}, [open, resolved.url]);
+	(0, react.useEffect)(() => {
+		if (!open || !closeOnEscape) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") onOpenChange?.(false);
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		closeOnEscape,
+		onOpenChange
+	]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = originalOverflow;
+		};
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open || !resolved.url) return;
+		const expectedOrigin = (0, __trade_it_core.getUrlOrigin)(resolved.url);
+		if (!expectedOrigin) return;
+		const handleMessage = (event) => {
+			if (event.origin !== expectedOrigin) return;
+			if (!(0, __trade_it_core.isTradeItEvent)(event.data)) return;
+			onEvent?.(event.data);
+			if (event.data.type === "tradeit.error") onError?.(new Error((0, __trade_it_core.getTradeItErrorMessage)(event.data)));
+			if (event.data.type === "tradeit.close_requested" && closeOnCloseRequestedEvent) onOpenChange?.(false);
+		};
+		window.addEventListener("message", handleMessage);
+		return () => window.removeEventListener("message", handleMessage);
+	}, [
+		open,
+		resolved.url,
+		onEvent,
+		onError,
+		closeOnCloseRequestedEvent,
+		onOpenChange
+	]);
+	if (!isMounted) return null;
+	if (!open && !keepMounted) return null;
+	if (!resolved.url) return null;
+	const dialogStyle = isMobile ? DIALOG_MOBILE_STYLE : DIALOG_DESKTOP_STYLE;
+	const overlayStyle = {
+		...OVERLAY_STYLE,
+		zIndex
+	};
+	const dialogLabel = title ?? iframeTitle ?? "Trade It";
+	const modal = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": !open,
+		style: {
+			...overlayStyle,
+			visibility: open ? "visible" : "hidden",
+			pointerEvents: open ? "auto" : "none"
+		},
+		onMouseDown: (event) => {
+			if (!closeOnOverlayClick) return;
+			if (event.target === event.currentTarget) onOpenChange?.(false);
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": dialogLabel,
+			className,
+			style: dialogStyle,
+			children: [
+				showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": "Close",
+					onClick: () => onOpenChange?.(false),
+					style: CLOSE_BUTTON_STYLE,
+					children: "×"
+				}),
+				!iframeLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TradeItModalLoader, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+					title: dialogLabel,
+					src: resolved.url,
+					style: IFRAME_STYLE,
+					allow: "fullscreen",
+					onLoad: () => setIframeLoaded(true)
+				})
+			]
+		})
+	});
+	return (0, react_dom.createPortal)(modal, document.body);
+}
+
+//#endregion
+//#region src/useTradeIt.ts
+function useTradeIt(defaults = {}) {
+	const [modalState, setModalState] = (0, react.useState)(null);
+	const close = (0, react.useCallback)(() => {
+		setModalState((prev) => prev ? {
+			...prev,
+			open: false
+		} : prev);
+	}, []);
+	const destroy = (0, react.useCallback)(() => {
+		setModalState(null);
+	}, []);
+	const openConnect = (0, react.useCallback)((options) => {
+		setModalState({
+			...defaults,
+			...options,
+			open: true,
+			launch: {
+				...options.launch,
+				mode: "connect"
+			}
+		});
+	}, [defaults]);
+	const openTrade = (0, react.useCallback)((options) => {
+		setModalState({
+			...defaults,
+			...options,
+			open: true,
+			launch: {
+				...options.launch,
+				mode: "trade"
+			}
+		});
+	}, [defaults]);
+	const modalProps = (0, react.useMemo)(() => {
+		if (!modalState) return null;
+		const handleOpenChange = (open) => {
+			setModalState((prev) => prev ? {
+				...prev,
+				open
+			} : prev);
+			modalState.onOpenChange?.(open);
+		};
+		return {
+			...modalState,
+			onOpenChange: handleOpenChange
+		};
+	}, [modalState]);
+	return {
+		isOpen: modalState?.open ?? false,
+		modalProps,
+		openConnect,
+		openTrade,
+		close,
+		destroy
+	};
+}
+
+//#endregion
+//#region ../../lib/types/src/enums/trading.enums.ts
+let TradeAction = /* @__PURE__ */ function(TradeAction$1) {
+	TradeAction$1["Buy"] = "buy";
+	TradeAction$1["Sell"] = "sell";
+	return TradeAction$1;
+}({});
+let PositionEffect = /* @__PURE__ */ function(PositionEffect$1) {
+	PositionEffect$1["Open"] = "open";
+	PositionEffect$1["Close"] = "close";
+	return PositionEffect$1;
+}({});
+let OrderType = /* @__PURE__ */ function(OrderType$1) {
+	OrderType$1["Market"] = "market";
+	OrderType$1["Limit"] = "limit";
+	OrderType$1["Stop"] = "stop";
+	OrderType$1["StopLimit"] = "stop_limit";
+	return OrderType$1;
+}({});
+let OrderDirection = /* @__PURE__ */ function(OrderDirection$1) {
+	OrderDirection$1["Debit"] = "debit";
+	OrderDirection$1["Credit"] = "credit";
+	return OrderDirection$1;
+}({});
+let TimeInForce = /* @__PURE__ */ function(TimeInForce$1) {
+	TimeInForce$1["Day"] = "day";
+	TimeInForce$1["GoodTillCanceled"] = "gtc";
+	TimeInForce$1["ImmediateOrCancel"] = "ioc";
+	TimeInForce$1["FillOrKill"] = "fok";
+	return TimeInForce$1;
+}({});
+let TradeUnit = /* @__PURE__ */ function(TradeUnit$1) {
+	TradeUnit$1["Dollars"] = "dollars";
+	TradeUnit$1["Shares"] = "shares";
+	return TradeUnit$1;
+}({});
+let LegType = /* @__PURE__ */ function(LegType$1) {
+	LegType$1["Option"] = "option";
+	LegType$1["Equity"] = "equity";
+	return LegType$1;
+}({});
+let TradeType = /* @__PURE__ */ function(TradeType$1) {
+	TradeType$1[TradeType$1["Simple"] = 0] = "Simple";
+	TradeType$1[TradeType$1["MultiLeg"] = 1] = "MultiLeg";
+	return TradeType$1;
+}({});
+
+//#endregion
+//#region ../../lib/types/src/types/trade-link.types.ts
+/**
+* Short query parameter keys for trade link URLs
+*/
+let TradeLinkParam = /* @__PURE__ */ function(TradeLinkParam$1) {
+	TradeLinkParam$1["TradeType"] = "tt";
+	TradeLinkParam$1["Action"] = "t";
+	TradeLinkParam$1["OrderType"] = "ot";
+	TradeLinkParam$1["Amount"] = "a";
+	TradeLinkParam$1["Unit"] = "u";
+	TradeLinkParam$1["LimitPrice"] = "lp";
+	TradeLinkParam$1["StopPrice"] = "sp";
+	TradeLinkParam$1["TimeInForce"] = "tif";
+	TradeLinkParam$1["UtmReferred"] = "ref";
+	TradeLinkParam$1["Legs"] = "legs";
+	return TradeLinkParam$1;
+}({});
+
+//#endregion
+exports.LegType = LegType;
+exports.OrderDirection = OrderDirection;
+exports.OrderType = OrderType;
+exports.PositionEffect = PositionEffect;
+exports.TimeInForce = TimeInForce;
+exports.TradeAction = TradeAction;
+exports.TradeItModal = TradeItModal;
+exports.TradeLinkParam = TradeLinkParam;
+exports.TradeType = TradeType;
+exports.TradeUnit = TradeUnit;
+Object.defineProperty(exports, 'getTradeItErrorMessage', {
+  enumerable: true,
+  get: function () {
+    return __trade_it_core.getTradeItErrorMessage;
+  }
+});
+Object.defineProperty(exports, 'getUrlOrigin', {
+  enumerable: true,
+  get: function () {
+    return __trade_it_core.getUrlOrigin;
+  }
+});
+Object.defineProperty(exports, 'isTradeItEvent', {
+  enumerable: true,
+  get: function () {
+    return __trade_it_core.isTradeItEvent;
+  }
+});
+Object.defineProperty(exports, 'resolveLaunchUrl', {
+  enumerable: true,
+  get: function () {
+    return __trade_it_core.resolveLaunchUrl;
+  }
+});
+exports.useTradeIt = useTradeIt;

package/dist/index.d.cts

@@ -0,0 +1,222 @@
+import * as react0 from "react";
+import { z } from "zod";
+
+//#region ../../lib/types/src/enums/trading.enums.d.ts
+declare enum TradeAction {
+  Buy = "buy",
+  Sell = "sell",
+}
+declare enum PositionEffect {
+  Open = "open",
+  Close = "close",
+}
+declare enum OrderType {
+  Market = "market",
+  Limit = "limit",
+  Stop = "stop",
+  StopLimit = "stop_limit",
+}
+declare enum OrderDirection {
+  Debit = "debit",
+  Credit = "credit",
+}
+declare enum TimeInForce {
+  Day = "day",
+  GoodTillCanceled = "gtc",
+  ImmediateOrCancel = "ioc",
+  FillOrKill = "fok",
+}
+declare enum TradeUnit {
+  Dollars = "dollars",
+  Shares = "shares",
+}
+declare enum LegType {
+  Option = "option",
+  Equity = "equity",
+}
+declare enum TradeType {
+  Simple = 0,
+  MultiLeg = 1,
+}
+//#endregion
+//#region ../../lib/types/src/schemas/trade-link.schemas.d.ts
+/**
+ * Trade Link Leg Config - derived from TradeLeg without execution_price
+ */
+declare const zTradeLinkLegConfig: z.ZodObject<Omit<{
+  type: z.ZodNativeEnum<typeof LegType>;
+  action: z.ZodNativeEnum<typeof TradeAction>;
+  position_effect: z.ZodNullable<z.ZodNativeEnum<typeof PositionEffect>>;
+  occ: z.ZodNullable<z.ZodString>;
+  quantity: z.ZodNumber;
+  execution_price: z.ZodNullable<z.ZodObject<{
+    amount: z.ZodNumber;
+    currency: z.ZodString;
+  }, "strip", z.ZodTypeAny, {
+    amount: number;
+    currency: string;
+  }, {
+    amount: number;
+    currency: string;
+  }>>;
+}, "execution_price">, "strip", z.ZodTypeAny, {
+  type: LegType;
+  action: TradeAction;
+  position_effect: PositionEffect | null;
+  occ: string | null;
+  quantity: number;
+}, {
+  type: LegType;
+  action: TradeAction;
+  position_effect: PositionEffect | null;
+  occ: string | null;
+  quantity: number;
+}>;
+/**
+ * Full Trade Link Config - stored in database as JSONB
+ * Supports both simple trades and multi-leg options trades
+ */
+//#endregion
+//#region ../../lib/types/src/types/misc.types.d.ts
+type SnakeToCamelCase<S extends string> = S extends `${infer P1}_${infer P2}` ? `${P1}${Capitalize<SnakeToCamelCase<P2>>}` : S;
+/** Converts a type's snake_case keys to camelCase keys */
+type Camelize<T> = T extends object ? { [K in keyof T as K extends string ? SnakeToCamelCase<K> : K]: Camelize<T[K]> } : T;
+//#endregion
+//#region ../../lib/types/src/types/trade-link.types.d.ts
+/** Configuration for a leg in a multi-leg trade link */
+type TradeLinkLegConfig = z.infer<typeof zTradeLinkLegConfig>;
+/** Full configuration stored in the trade link */
+
+/**
+ * Short query parameter keys for trade link URLs
+ */
+declare enum TradeLinkParam {
+  TradeType = "tt",
+  // s (simple), m (multi_leg)
+  Action = "t",
+  // b, s, bto, btc, sto, stc
+  OrderType = "ot",
+  // m, l, st, sl
+  Amount = "a",
+  // number
+  Unit = "u",
+  // d, s
+  LimitPrice = "lp",
+  // number
+  StopPrice = "sp",
+  // number
+  TimeInForce = "tif",
+  // d, gtc, ioc, fok
+  UtmReferred = "ref",
+  // string
+  Legs = "legs",
+}
+//#endregion
+//#region ../trade-it-core/src/types.d.ts
+type TradeItEventType = 'tradeit.ready' | 'tradeit.close_requested' | 'tradeit.brokerage_connected' | 'tradeit.trade_submitted' | 'tradeit.trade_executed' | 'tradeit.error' | 'tradeit.login_required';
+interface TradeItEvent<TPayload = Record<string, unknown>> {
+  source: 'tradeit';
+  version: 1;
+  type: TradeItEventType;
+  payload?: TPayload;
+}
+type TradeItMode = 'connect' | 'trade';
+type TradeItMultiLegTradeLegConfig = Partial<Camelize<TradeLinkLegConfig>>;
+/**
+ * Query params accepted by Trade It's /t/[ticker] page.
+ * User-facing config uses descriptive keys; core converts them to the short-key
+ * query format used by the page parser (tt, t, ot, a, u, lp, sp, tif, ref, legs).
+ */
+interface TradeItTradeConfigBase {
+  ticker: string;
+  orderType?: OrderType;
+  limitPrice?: number;
+  stopPrice?: number;
+  timeInForce?: TimeInForce;
+  referral?: string;
+}
+interface TradeItSimpleTradeConfig extends TradeItTradeConfigBase {
+  tradeType?: TradeType.Simple;
+  action?: TradeAction;
+  amount?: number;
+  unit?: TradeUnit;
+}
+interface TradeItMultiLegTradeConfig extends TradeItTradeConfigBase {
+  tradeType: TradeType.MultiLeg;
+  direction?: OrderDirection;
+  legs: TradeItMultiLegTradeLegConfig[];
+}
+type TradeItTradeConfig = TradeItSimpleTradeConfig | TradeItMultiLegTradeConfig;
+interface TradeItLaunchConfigMap {
+  connect: undefined;
+  trade: TradeItTradeConfig;
+}
+type TradeItLaunchShape<TMode extends TradeItMode> = {
+  mode: TMode;
+  url: string;
+} & (TMode extends 'connect' ? {
+  config?: undefined;
+} : {
+  config: TradeItLaunchConfigMap[TMode];
+});
+type TradeItLaunch<TMode extends TradeItMode = TradeItMode> = TMode extends TradeItMode ? TradeItLaunchShape<TMode> : never;
+type TradeItConnectLaunch = TradeItLaunch<'connect'>;
+type TradeItTradeLaunch = TradeItLaunch<'trade'>;
+//#endregion
+//#region ../trade-it-core/src/events.d.ts
+declare function isTradeItEvent(data: unknown): data is TradeItEvent;
+declare function getTradeItErrorMessage(event: TradeItEvent): string;
+//#endregion
+//#region ../trade-it-core/src/url.d.ts
+declare function resolveLaunchUrl(launch: TradeItLaunch): string;
+declare function getUrlOrigin(url: string): string | null;
+//#endregion
+//#region src/types.d.ts
+interface TradeItModalAppearance {
+  closeOnEscape?: boolean;
+  closeOnOverlayClick?: boolean;
+  closeOnCloseRequestedEvent?: boolean;
+  showCloseButton?: boolean;
+  zIndex?: number;
+  title?: string;
+}
+interface TradeItModalCallbacks {
+  onOpenChange?: (open: boolean) => void;
+  onEvent?: (event: TradeItEvent) => void;
+  onError?: (error: Error) => void;
+}
+interface TradeItModalProps extends TradeItModalAppearance, TradeItModalCallbacks {
+  launch: TradeItLaunch;
+  open: boolean;
+  iframeTitle?: string;
+  keepMounted?: boolean;
+  className?: string;
+}
+interface UseTradeItOptions extends TradeItModalAppearance, TradeItModalCallbacks {
+  iframeTitle?: string;
+  keepMounted?: boolean;
+}
+interface OpenConnectOptions extends Partial<TradeItModalAppearance>, Partial<TradeItModalCallbacks> {
+  launch: TradeItConnectLaunch;
+  iframeTitle?: string;
+}
+interface OpenTradeOptions extends Partial<TradeItModalAppearance>, Partial<TradeItModalCallbacks> {
+  launch: TradeItTradeLaunch;
+  iframeTitle?: string;
+}
+//#endregion
+//#region src/TradeItModal.d.ts
+declare function TradeItModal(props: TradeItModalProps): react0.ReactPortal | null;
+//#endregion
+//#region src/useTradeIt.d.ts
+interface UseTradeItReturn {
+  isOpen: boolean;
+  modalProps: TradeItModalProps | null;
+  openConnect: (options: OpenConnectOptions) => void;
+  openTrade: (options: OpenTradeOptions) => void;
+  close: () => void;
+  destroy: () => void;
+}
+declare function useTradeIt(defaults?: UseTradeItOptions): UseTradeItReturn;
+//#endregion
+export { LegType, type OpenConnectOptions, type OpenTradeOptions, OrderDirection, OrderType, PositionEffect, TimeInForce, TradeAction, type TradeItConnectLaunch, type TradeItEvent, type TradeItEventType, type TradeItLaunch, TradeItModal, type TradeItModalAppearance, type TradeItModalProps, type TradeItMultiLegTradeConfig, type TradeItMultiLegTradeLegConfig, type TradeItSimpleTradeConfig, type TradeItTradeConfig, type TradeItTradeLaunch, type TradeLinkLegConfig, TradeLinkParam, TradeType, TradeUnit, type UseTradeItOptions, getTradeItErrorMessage, getUrlOrigin, isTradeItEvent, resolveLaunchUrl, useTradeIt };

package/dist/index.d.ts

@@ -0,0 +1,222 @@
+import * as react0 from "react";
+import { z } from "zod";
+
+//#region ../../lib/types/src/enums/trading.enums.d.ts
+declare enum TradeAction {
+  Buy = "buy",
+  Sell = "sell",
+}
+declare enum PositionEffect {
+  Open = "open",
+  Close = "close",
+}
+declare enum OrderType {
+  Market = "market",
+  Limit = "limit",
+  Stop = "stop",
+  StopLimit = "stop_limit",
+}
+declare enum OrderDirection {
+  Debit = "debit",
+  Credit = "credit",
+}
+declare enum TimeInForce {
+  Day = "day",
+  GoodTillCanceled = "gtc",
+  ImmediateOrCancel = "ioc",
+  FillOrKill = "fok",
+}
+declare enum TradeUnit {
+  Dollars = "dollars",
+  Shares = "shares",
+}
+declare enum LegType {
+  Option = "option",
+  Equity = "equity",
+}
+declare enum TradeType {
+  Simple = 0,
+  MultiLeg = 1,
+}
+//#endregion
+//#region ../../lib/types/src/schemas/trade-link.schemas.d.ts
+/**
+ * Trade Link Leg Config - derived from TradeLeg without execution_price
+ */
+declare const zTradeLinkLegConfig: z.ZodObject<Omit<{
+  type: z.ZodNativeEnum<typeof LegType>;
+  action: z.ZodNativeEnum<typeof TradeAction>;
+  position_effect: z.ZodNullable<z.ZodNativeEnum<typeof PositionEffect>>;
+  occ: z.ZodNullable<z.ZodString>;
+  quantity: z.ZodNumber;
+  execution_price: z.ZodNullable<z.ZodObject<{
+    amount: z.ZodNumber;
+    currency: z.ZodString;
+  }, "strip", z.ZodTypeAny, {
+    amount: number;
+    currency: string;
+  }, {
+    amount: number;
+    currency: string;
+  }>>;
+}, "execution_price">, "strip", z.ZodTypeAny, {
+  type: LegType;
+  action: TradeAction;
+  position_effect: PositionEffect | null;
+  occ: string | null;
+  quantity: number;
+}, {
+  type: LegType;
+  action: TradeAction;
+  position_effect: PositionEffect | null;
+  occ: string | null;
+  quantity: number;
+}>;
+/**
+ * Full Trade Link Config - stored in database as JSONB
+ * Supports both simple trades and multi-leg options trades
+ */
+//#endregion
+//#region ../../lib/types/src/types/misc.types.d.ts
+type SnakeToCamelCase<S extends string> = S extends `${infer P1}_${infer P2}` ? `${P1}${Capitalize<SnakeToCamelCase<P2>>}` : S;
+/** Converts a type's snake_case keys to camelCase keys */
+type Camelize<T> = T extends object ? { [K in keyof T as K extends string ? SnakeToCamelCase<K> : K]: Camelize<T[K]> } : T;
+//#endregion
+//#region ../../lib/types/src/types/trade-link.types.d.ts
+/** Configuration for a leg in a multi-leg trade link */
+type TradeLinkLegConfig = z.infer<typeof zTradeLinkLegConfig>;
+/** Full configuration stored in the trade link */
+
+/**
+ * Short query parameter keys for trade link URLs
+ */
+declare enum TradeLinkParam {
+  TradeType = "tt",
+  // s (simple), m (multi_leg)
+  Action = "t",
+  // b, s, bto, btc, sto, stc
+  OrderType = "ot",
+  // m, l, st, sl
+  Amount = "a",
+  // number
+  Unit = "u",
+  // d, s
+  LimitPrice = "lp",
+  // number
+  StopPrice = "sp",
+  // number
+  TimeInForce = "tif",
+  // d, gtc, ioc, fok
+  UtmReferred = "ref",
+  // string
+  Legs = "legs",
+}
+//#endregion
+//#region ../trade-it-core/src/types.d.ts
+type TradeItEventType = 'tradeit.ready' | 'tradeit.close_requested' | 'tradeit.brokerage_connected' | 'tradeit.trade_submitted' | 'tradeit.trade_executed' | 'tradeit.error' | 'tradeit.login_required';
+interface TradeItEvent<TPayload = Record<string, unknown>> {
+  source: 'tradeit';
+  version: 1;
+  type: TradeItEventType;
+  payload?: TPayload;
+}
+type TradeItMode = 'connect' | 'trade';
+type TradeItMultiLegTradeLegConfig = Partial<Camelize<TradeLinkLegConfig>>;
+/**
+ * Query params accepted by Trade It's /t/[ticker] page.
+ * User-facing config uses descriptive keys; core converts them to the short-key
+ * query format used by the page parser (tt, t, ot, a, u, lp, sp, tif, ref, legs).
+ */
+interface TradeItTradeConfigBase {
+  ticker: string;
+  orderType?: OrderType;
+  limitPrice?: number;
+  stopPrice?: number;
+  timeInForce?: TimeInForce;
+  referral?: string;
+}
+interface TradeItSimpleTradeConfig extends TradeItTradeConfigBase {
+  tradeType?: TradeType.Simple;
+  action?: TradeAction;
+  amount?: number;
+  unit?: TradeUnit;
+}
+interface TradeItMultiLegTradeConfig extends TradeItTradeConfigBase {
+  tradeType: TradeType.MultiLeg;
+  direction?: OrderDirection;
+  legs: TradeItMultiLegTradeLegConfig[];
+}
+type TradeItTradeConfig = TradeItSimpleTradeConfig | TradeItMultiLegTradeConfig;
+interface TradeItLaunchConfigMap {
+  connect: undefined;
+  trade: TradeItTradeConfig;
+}
+type TradeItLaunchShape<TMode extends TradeItMode> = {
+  mode: TMode;
+  url: string;
+} & (TMode extends 'connect' ? {
+  config?: undefined;
+} : {
+  config: TradeItLaunchConfigMap[TMode];
+});
+type TradeItLaunch<TMode extends TradeItMode = TradeItMode> = TMode extends TradeItMode ? TradeItLaunchShape<TMode> : never;
+type TradeItConnectLaunch = TradeItLaunch<'connect'>;
+type TradeItTradeLaunch = TradeItLaunch<'trade'>;
+//#endregion
+//#region ../trade-it-core/src/events.d.ts
+declare function isTradeItEvent(data: unknown): data is TradeItEvent;
+declare function getTradeItErrorMessage(event: TradeItEvent): string;
+//#endregion
+//#region ../trade-it-core/src/url.d.ts
+declare function resolveLaunchUrl(launch: TradeItLaunch): string;
+declare function getUrlOrigin(url: string): string | null;
+//#endregion
+//#region src/types.d.ts
+interface TradeItModalAppearance {
+  closeOnEscape?: boolean;
+  closeOnOverlayClick?: boolean;
+  closeOnCloseRequestedEvent?: boolean;
+  showCloseButton?: boolean;
+  zIndex?: number;
+  title?: string;
+}
+interface TradeItModalCallbacks {
+  onOpenChange?: (open: boolean) => void;
+  onEvent?: (event: TradeItEvent) => void;
+  onError?: (error: Error) => void;
+}
+interface TradeItModalProps extends TradeItModalAppearance, TradeItModalCallbacks {
+  launch: TradeItLaunch;
+  open: boolean;
+  iframeTitle?: string;
+  keepMounted?: boolean;
+  className?: string;
+}
+interface UseTradeItOptions extends TradeItModalAppearance, TradeItModalCallbacks {
+  iframeTitle?: string;
+  keepMounted?: boolean;
+}
+interface OpenConnectOptions extends Partial<TradeItModalAppearance>, Partial<TradeItModalCallbacks> {
+  launch: TradeItConnectLaunch;
+  iframeTitle?: string;
+}
+interface OpenTradeOptions extends Partial<TradeItModalAppearance>, Partial<TradeItModalCallbacks> {
+  launch: TradeItTradeLaunch;
+  iframeTitle?: string;
+}
+//#endregion
+//#region src/TradeItModal.d.ts
+declare function TradeItModal(props: TradeItModalProps): react0.ReactPortal | null;
+//#endregion
+//#region src/useTradeIt.d.ts
+interface UseTradeItReturn {
+  isOpen: boolean;
+  modalProps: TradeItModalProps | null;
+  openConnect: (options: OpenConnectOptions) => void;
+  openTrade: (options: OpenTradeOptions) => void;
+  close: () => void;
+  destroy: () => void;
+}
+declare function useTradeIt(defaults?: UseTradeItOptions): UseTradeItReturn;
+//#endregion
+export { LegType, type OpenConnectOptions, type OpenTradeOptions, OrderDirection, OrderType, PositionEffect, TimeInForce, TradeAction, type TradeItConnectLaunch, type TradeItEvent, type TradeItEventType, type TradeItLaunch, TradeItModal, type TradeItModalAppearance, type TradeItModalProps, type TradeItMultiLegTradeConfig, type TradeItMultiLegTradeLegConfig, type TradeItSimpleTradeConfig, type TradeItTradeConfig, type TradeItTradeLaunch, type TradeLinkLegConfig, TradeLinkParam, TradeType, TradeUnit, type UseTradeItOptions, getTradeItErrorMessage, getUrlOrigin, isTradeItEvent, resolveLaunchUrl, useTradeIt };

package/dist/index.js

@@ -0,0 +1,397 @@
+import { getTradeItErrorMessage, getTradeItErrorMessage as getTradeItErrorMessage$1, getUrlOrigin, getUrlOrigin as getUrlOrigin$1, isTradeItEvent, isTradeItEvent as isTradeItEvent$1, resolveLaunchUrl, resolveLaunchUrl as resolveLaunchUrl$1 } from "@trade-it/core";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LoaderCircleSpinner.tsx
+const SPINNER_WRAPPER_SIZE = 44;
+const SPINNER_ICON_SIZE = 32;
+const SPINNER_WRAPPER_STYLE = {
+	width: SPINNER_WRAPPER_SIZE,
+	height: SPINNER_WRAPPER_SIZE,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	animation: "tradeItSdkSpin 0.9s linear infinite",
+	transformOrigin: "50% 50%"
+};
+const SPINNER_SVG_STYLE = {
+	display: "block",
+	width: SPINNER_ICON_SIZE,
+	height: SPINNER_ICON_SIZE,
+	color: "#111827"
+};
+const SPINNER_KEYFRAMES_CSS = `
+@keyframes tradeItSdkSpin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tradeit-sdk-spinner {
+    animation: none !important;
+  }
+}
+`;
+function LoaderCircleSpinner() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: SPINNER_KEYFRAMES_CSS }), /* @__PURE__ */ jsx("div", {
+		className: "tradeit-sdk-spinner",
+		style: SPINNER_WRAPPER_STYLE,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			width: SPINNER_ICON_SIZE,
+			height: SPINNER_ICON_SIZE,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			style: SPINNER_SVG_STYLE,
+			children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+		})
+	})] });
+}
+
+//#endregion
+//#region src/TradeItModalLoader.tsx
+const LOADING_STYLE = {
+	position: "absolute",
+	inset: 0,
+	background: "#ffffff"
+};
+const LOADING_CONTENT_STYLE = {
+	position: "relative",
+	zIndex: 1,
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "100%",
+	height: "100%"
+};
+function TradeItModalLoader() {
+	return /* @__PURE__ */ jsx("div", {
+		style: LOADING_STYLE,
+		"aria-live": "polite",
+		"aria-busy": "true",
+		children: /* @__PURE__ */ jsx("div", {
+			style: LOADING_CONTENT_STYLE,
+			children: /* @__PURE__ */ jsx(LoaderCircleSpinner, {})
+		})
+	});
+}
+
+//#endregion
+//#region src/TradeItModal.tsx
+const OVERLAY_STYLE = {
+	position: "fixed",
+	inset: 0,
+	background: "rgba(15, 23, 42, 0.55)",
+	backdropFilter: "blur(4px)",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	padding: 12
+};
+const DIALOG_DESKTOP_STYLE = {
+	position: "relative",
+	width: "min(960px, calc(100vw - 24px))",
+	height: "min(760px, calc(100vh - 24px))",
+	background: "#fff",
+	borderRadius: 18,
+	boxShadow: "0 24px 80px rgba(2, 6, 23, 0.28)",
+	border: "1px solid rgba(148, 163, 184, 0.35)",
+	overflow: "hidden"
+};
+const DIALOG_MOBILE_STYLE = {
+	...DIALOG_DESKTOP_STYLE,
+	width: "100vw",
+	height: "100vh",
+	borderRadius: 0,
+	border: 0
+};
+const CLOSE_BUTTON_STYLE = {
+	position: "absolute",
+	top: 10,
+	right: 10,
+	zIndex: 2,
+	width: 34,
+	height: 34,
+	borderRadius: 999,
+	border: "1px solid rgba(148,163,184,0.45)",
+	background: "rgba(255,255,255,0.92)",
+	color: "#0f172a",
+	cursor: "pointer",
+	fontSize: 18,
+	lineHeight: "32px",
+	textAlign: "center",
+	padding: 0
+};
+const IFRAME_STYLE = {
+	width: "100%",
+	height: "100%",
+	border: 0,
+	background: "#fff"
+};
+function useIsMobile(maxWidth = 640) {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const mediaQuery = window.matchMedia(`(max-width: ${maxWidth}px)`);
+		const onChange = () => setIsMobile(mediaQuery.matches);
+		onChange();
+		if (typeof mediaQuery.addEventListener === "function") {
+			mediaQuery.addEventListener("change", onChange);
+			return () => mediaQuery.removeEventListener("change", onChange);
+		}
+		mediaQuery.addListener(onChange);
+		return () => mediaQuery.removeListener(onChange);
+	}, [maxWidth]);
+	return isMobile;
+}
+function TradeItModal(props) {
+	const { open, onOpenChange, onEvent, onError, iframeTitle, keepMounted = false, closeOnEscape = true, closeOnOverlayClick = true, closeOnCloseRequestedEvent = true, showCloseButton = true, zIndex = 9999, title, className } = props;
+	const isMobile = useIsMobile();
+	const [isMounted, setIsMounted] = useState(false);
+	const [iframeLoaded, setIframeLoaded] = useState(false);
+	const resolved = useMemo(() => {
+		try {
+			return {
+				url: resolveLaunchUrl$1(props.launch),
+				error: null
+			};
+		} catch (error) {
+			return {
+				url: null,
+				error: error instanceof Error ? error : new Error("Failed to build Trade It iframe URL")
+			};
+		}
+	}, [props.launch]);
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	useEffect(() => {
+		if (!resolved.error) return;
+		onError?.(resolved.error);
+	}, [resolved.error, onError]);
+	useEffect(() => {
+		if (!open) return;
+		setIframeLoaded(false);
+	}, [open, resolved.url]);
+	useEffect(() => {
+		if (!open || !closeOnEscape) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") onOpenChange?.(false);
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		closeOnEscape,
+		onOpenChange
+	]);
+	useEffect(() => {
+		if (!open) return;
+		const originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = originalOverflow;
+		};
+	}, [open]);
+	useEffect(() => {
+		if (!open || !resolved.url) return;
+		const expectedOrigin = getUrlOrigin$1(resolved.url);
+		if (!expectedOrigin) return;
+		const handleMessage = (event) => {
+			if (event.origin !== expectedOrigin) return;
+			if (!isTradeItEvent$1(event.data)) return;
+			onEvent?.(event.data);
+			if (event.data.type === "tradeit.error") onError?.(new Error(getTradeItErrorMessage$1(event.data)));
+			if (event.data.type === "tradeit.close_requested" && closeOnCloseRequestedEvent) onOpenChange?.(false);
+		};
+		window.addEventListener("message", handleMessage);
+		return () => window.removeEventListener("message", handleMessage);
+	}, [
+		open,
+		resolved.url,
+		onEvent,
+		onError,
+		closeOnCloseRequestedEvent,
+		onOpenChange
+	]);
+	if (!isMounted) return null;
+	if (!open && !keepMounted) return null;
+	if (!resolved.url) return null;
+	const dialogStyle = isMobile ? DIALOG_MOBILE_STYLE : DIALOG_DESKTOP_STYLE;
+	const overlayStyle = {
+		...OVERLAY_STYLE,
+		zIndex
+	};
+	const dialogLabel = title ?? iframeTitle ?? "Trade It";
+	const modal = /* @__PURE__ */ jsx("div", {
+		"aria-hidden": !open,
+		style: {
+			...overlayStyle,
+			visibility: open ? "visible" : "hidden",
+			pointerEvents: open ? "auto" : "none"
+		},
+		onMouseDown: (event) => {
+			if (!closeOnOverlayClick) return;
+			if (event.target === event.currentTarget) onOpenChange?.(false);
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": dialogLabel,
+			className,
+			style: dialogStyle,
+			children: [
+				showCloseButton && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close",
+					onClick: () => onOpenChange?.(false),
+					style: CLOSE_BUTTON_STYLE,
+					children: "×"
+				}),
+				!iframeLoaded && /* @__PURE__ */ jsx(TradeItModalLoader, {}),
+				/* @__PURE__ */ jsx("iframe", {
+					title: dialogLabel,
+					src: resolved.url,
+					style: IFRAME_STYLE,
+					allow: "fullscreen",
+					onLoad: () => setIframeLoaded(true)
+				})
+			]
+		})
+	});
+	return createPortal(modal, document.body);
+}
+
+//#endregion
+//#region src/useTradeIt.ts
+function useTradeIt(defaults = {}) {
+	const [modalState, setModalState] = useState(null);
+	const close = useCallback(() => {
+		setModalState((prev) => prev ? {
+			...prev,
+			open: false
+		} : prev);
+	}, []);
+	const destroy = useCallback(() => {
+		setModalState(null);
+	}, []);
+	const openConnect = useCallback((options) => {
+		setModalState({
+			...defaults,
+			...options,
+			open: true,
+			launch: {
+				...options.launch,
+				mode: "connect"
+			}
+		});
+	}, [defaults]);
+	const openTrade = useCallback((options) => {
+		setModalState({
+			...defaults,
+			...options,
+			open: true,
+			launch: {
+				...options.launch,
+				mode: "trade"
+			}
+		});
+	}, [defaults]);
+	const modalProps = useMemo(() => {
+		if (!modalState) return null;
+		const handleOpenChange = (open) => {
+			setModalState((prev) => prev ? {
+				...prev,
+				open
+			} : prev);
+			modalState.onOpenChange?.(open);
+		};
+		return {
+			...modalState,
+			onOpenChange: handleOpenChange
+		};
+	}, [modalState]);
+	return {
+		isOpen: modalState?.open ?? false,
+		modalProps,
+		openConnect,
+		openTrade,
+		close,
+		destroy
+	};
+}
+
+//#endregion
+//#region ../../lib/types/src/enums/trading.enums.ts
+let TradeAction = /* @__PURE__ */ function(TradeAction$1) {
+	TradeAction$1["Buy"] = "buy";
+	TradeAction$1["Sell"] = "sell";
+	return TradeAction$1;
+}({});
+let PositionEffect = /* @__PURE__ */ function(PositionEffect$1) {
+	PositionEffect$1["Open"] = "open";
+	PositionEffect$1["Close"] = "close";
+	return PositionEffect$1;
+}({});
+let OrderType = /* @__PURE__ */ function(OrderType$1) {
+	OrderType$1["Market"] = "market";
+	OrderType$1["Limit"] = "limit";
+	OrderType$1["Stop"] = "stop";
+	OrderType$1["StopLimit"] = "stop_limit";
+	return OrderType$1;
+}({});
+let OrderDirection = /* @__PURE__ */ function(OrderDirection$1) {
+	OrderDirection$1["Debit"] = "debit";
+	OrderDirection$1["Credit"] = "credit";
+	return OrderDirection$1;
+}({});
+let TimeInForce = /* @__PURE__ */ function(TimeInForce$1) {
+	TimeInForce$1["Day"] = "day";
+	TimeInForce$1["GoodTillCanceled"] = "gtc";
+	TimeInForce$1["ImmediateOrCancel"] = "ioc";
+	TimeInForce$1["FillOrKill"] = "fok";
+	return TimeInForce$1;
+}({});
+let TradeUnit = /* @__PURE__ */ function(TradeUnit$1) {
+	TradeUnit$1["Dollars"] = "dollars";
+	TradeUnit$1["Shares"] = "shares";
+	return TradeUnit$1;
+}({});
+let LegType = /* @__PURE__ */ function(LegType$1) {
+	LegType$1["Option"] = "option";
+	LegType$1["Equity"] = "equity";
+	return LegType$1;
+}({});
+let TradeType = /* @__PURE__ */ function(TradeType$1) {
+	TradeType$1[TradeType$1["Simple"] = 0] = "Simple";
+	TradeType$1[TradeType$1["MultiLeg"] = 1] = "MultiLeg";
+	return TradeType$1;
+}({});
+
+//#endregion
+//#region ../../lib/types/src/types/trade-link.types.ts
+/**
+* Short query parameter keys for trade link URLs
+*/
+let TradeLinkParam = /* @__PURE__ */ function(TradeLinkParam$1) {
+	TradeLinkParam$1["TradeType"] = "tt";
+	TradeLinkParam$1["Action"] = "t";
+	TradeLinkParam$1["OrderType"] = "ot";
+	TradeLinkParam$1["Amount"] = "a";
+	TradeLinkParam$1["Unit"] = "u";
+	TradeLinkParam$1["LimitPrice"] = "lp";
+	TradeLinkParam$1["StopPrice"] = "sp";
+	TradeLinkParam$1["TimeInForce"] = "tif";
+	TradeLinkParam$1["UtmReferred"] = "ref";
+	TradeLinkParam$1["Legs"] = "legs";
+	return TradeLinkParam$1;
+}({});
+
+//#endregion
+export { LegType, OrderDirection, OrderType, PositionEffect, TimeInForce, TradeAction, TradeItModal, TradeLinkParam, TradeType, TradeUnit, getTradeItErrorMessage, getUrlOrigin, isTradeItEvent, resolveLaunchUrl, useTradeIt };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@trade-it/react",
+  "version": "0.1.0",
+  "description": "React SDK for embedding Trade It connect and trade experiences in an iframe modal.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm,cjs --dts --out-dir dist && node ../../scripts/fix-trade-it-sdk-dts.mjs dist/index.d.ts dist/index.d.cts",
+    "dev": "tsdown src/index.ts --format esm,cjs --dts --out-dir dist --watch"
+  },
+  "dependencies": {
+    "@trade-it/core": "*",
+    "zod": "^3.25.67"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.1",
+    "tsdown": "^0.11.0",
+    "typescript": "^5.7.2"
+  }
+}