@trade-it/react 0.3.0 → 1.0.0

package/CHANGELOG.md

@@ -4,10 +4,18 @@ All notable changes to `@trade-it/react` will be documented in this file.
 
 ## Unreleased
 
+## 1.0.0 - 2026-10-15
+
+### Added
+
+- Portal onboarding with email OTP or social sign-in, a typed async `onAuthorization` callback, and exchange acknowledgments
+- Exact iframe-source checks and automatic closure deferred until authorization is saved
+
 ### Changed
 
-- Size the desktop Connect modal around the embedded connect flow while preserving the wider Trade modal
+- Size the desktop Connection portal around the embedded connect flow while preserving the wider Trade modal
 - Keep Connect full-screen on mobile and tall enough for the connected-account continuation state and embedded footer
+- Use a dark loading screen and animate the Trade It logo from its recognizable shape
 
 ## 0.2.0 - 2026-07-27
 

package/README.md

@@ -21,10 +21,45 @@ 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)
+- [Portal · Connection mode](https://docs.tradeit.app/sdk/connect)
 - [Place Trades](https://docs.tradeit.app/sdk/trades)
 - [SDK Enums Reference](https://docs.tradeit.app/sdk/enums)
 
 ## Notes
 
-- Use the Trade It React skill to have your AI agent integrate Trade It: `npx skills add trade-it-inc/react-sdk-skill`
+- Use the Trade It skill to have your AI agent integrate Trade It: `npx skills add trade-it-inc/skills --skill trade-it-skill`
+
+## Trade It Portal
+
+Your backend calls `POST /api/portal`: use Basic client credentials with `oauth_options` to select Onboarding mode, or the user’s Bearer access token without `oauth_options` to select Connection mode. Pass the returned URL to `openConnect`. Your backend supplies a registered `redirect_uri` on the embedding website’s origin. Include `oauth_options.email_hint` to start with an email code, or omit it to offer Google, Apple, X, Discord, and email sign-in. Users can switch methods; social sign-in opens a popup and returns to the same portal. Trade It explains access, authenticates the user, and opens brokerage connection inside the same iframe. Your backend can optionally supply `connect_options.brokerage_code` or `connect_options.brokerage_filter` when creating the portal URL, using the same behavior as a connect session.
+
+```tsx
+const tradeIt = useTradeIt({
+  onAuthorization: async authorization => {
+    const response = await fetch('/api/tradeit/complete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(authorization),
+    });
+    if (!response.ok) throw new Error('Could not save Trade It access');
+  },
+});
+
+tradeIt.openConnect({ launch: { mode: 'connect', url: onboardingUrl } });
+```
+
+`onAuthorization` receives `{ code, state, issuer }`; resolve it only after your authenticated backend validates the attempt and saves the OAuth tokens. Rejection is reported inside the iframe. Brokerage connection starts immediately, and automatic closure waits for the callback. Credential events do not go to the generic `onEvent` callback.
+
+See the [Onboarding mode guide](https://docs.tradeit.app/sdk/onboarding) for the server endpoints, PKCE/state validation, and account ownership rules. The same SDK method opens subsequent connections without another authorization event. Standard redirect OAuth remains available for custom sign-in experiences.
+
+## Releasing
+
+Add notes under **Unreleased** in `CHANGELOG.md` and commit your changes first. From the repository root, prepare a release with:
+
+```bash
+npm run release:minor --workspace=@trade-it/react
+```
+
+Use `release:major` or `release:patch` for other increments. The script versions the changelog, bumps the package and lockfile, then creates a commit and a package-specific tag. When releasing core too, prepare core first so React includes its updated dependency.
+
+To release both SDK packages together, use `npm run release:sdk:minor` (or `major` / `patch`) from the root. Push the commits and tags, then use the existing SDK publish workflow or `npm run publish:sdk`. Release preparation does not build, publish, or push.

package/dist/index.cjs

@@ -58,7 +58,7 @@ function makeProj(yaw, tilt, cx, cy, scale) {
 function paint(ctx, dots) {
 	for (const dot of dots) {
 		const alpha = dot.a ?? 1;
-		ctx.fillStyle = `rgba(11,12,14,${alpha})`;
+		ctx.fillStyle = `rgba(240,240,242,${alpha})`;
 		ctx.beginPath();
 		ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
 		ctx.fill();
@@ -67,7 +67,7 @@ function paint(ctx, dots) {
 function paintLines(ctx, lines) {
 	for (const line of lines) {
 		const alpha = line.a ?? 1;
-		ctx.strokeStyle = `rgba(11,12,14,${alpha})`;
+		ctx.strokeStyle = `rgba(240,240,242,${alpha})`;
 		ctx.lineWidth = line.w;
 		ctx.beginPath();
 		ctx.moveTo(line.x1, line.y1);
@@ -171,7 +171,7 @@ const frameLogoWait = (size, t, o, logo) => {
 	const R = size / 2 * .82;
 	const rs = radiusScale(size, o.rsPow ?? .6);
 	const b = beatAt(t, o.dwell ?? 5.5, o.morph ?? 1.9, o.turns ?? 0, o.settle ?? .1, o.expo ?? .3);
-	const m = b.m;
+	const m = 1 - b.m;
 	const c = 1 - m;
 	const pt = makeProj((o.yawAmp ?? .22) * Math.sin(t * (o.yawRate ?? .3)) * c, (o.tilt ?? .42) * c, cx, cx, R);
 	const rings = Math.max(3, Math.round(o.rings ?? 9));
@@ -1240,7 +1240,7 @@ function TradeItLogoLoader({ size = 120 }) {
 			paintFrame(ctx, frame);
 		};
 		if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
-			render(2.7);
+			render(0);
 			return;
 		}
 		let raf = 0;
@@ -1294,7 +1294,7 @@ function TradeItLogoLoader({ size = 120 }) {
 const LOADING_STYLE = {
 	position: "absolute",
 	inset: 0,
-	background: "#ffffff"
+	background: "#0e1011"
 };
 const LOADING_CONTENT_STYLE = {
 	position: "relative",
@@ -1335,10 +1335,11 @@ const DIALOG_DESKTOP_STYLE = {
 	width: "min(960px, calc(100vw - 24px))",
 	height: "min(760px, calc(100vh - 24px))",
 	boxSizing: "border-box",
-	background: "#fff",
+	background: "#0e1011",
+	colorScheme: "dark",
 	borderRadius: 18,
 	boxShadow: "0 24px 80px rgba(2, 6, 23, 0.28)",
-	border: "1px solid rgba(148, 163, 184, 0.35)",
+	border: "1px solid rgba(255, 255, 255, 0.14)",
 	overflow: "hidden"
 };
 const CONNECT_DIALOG_DESKTOP_STYLE = {
@@ -1377,7 +1378,8 @@ const IFRAME_STYLE = {
 	width: "100%",
 	height: "100%",
 	border: 0,
-	background: "#fff"
+	background: "#0e1011",
+	colorScheme: "dark"
 };
 function useIsMobile(maxWidth = 640) {
 	const [isMobile, setIsMobile] = (0, react.useState)(false);
@@ -1386,20 +1388,23 @@ function useIsMobile(maxWidth = 640) {
 		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);
+		mediaQuery.addEventListener("change", onChange);
+		return () => mediaQuery.removeEventListener("change", 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 { open, onOpenChange, onEvent, onAuthorization, 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 iframeRef = (0, react.useRef)(null);
+	const authorizationRef = (0, react.useRef)({
+		code: "",
+		pending: false,
+		failed: false,
+		closeRequested: false
+	});
 	const resolved = (0, react.useMemo)(() => {
 		try {
 			return {
@@ -1423,6 +1428,12 @@ function TradeItModal(props) {
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		setIframeLoaded(false);
+		authorizationRef.current = {
+			code: "",
+			pending: false,
+			failed: false,
+			closeRequested: false
+		};
 	}, [open, resolved.url]);
 	(0, react.useEffect)(() => {
 		if (!open || !closeOnEscape) return;
@@ -1450,10 +1461,54 @@ function TradeItModal(props) {
 		if (!expectedOrigin) return;
 		const handleMessage = (event) => {
 			if (event.origin !== expectedOrigin) return;
+			if (event.source !== iframeRef.current?.contentWindow) return;
 			if (!(0, __trade_it_core.isTradeItEvent)(event.data)) return;
+			if (event.data.type === __trade_it_core.EmbedEventType.Authorization) {
+				if (!(0, __trade_it_core.isTradeItAuthorization)(event.data.payload)) return;
+				const authorization = event.data.payload;
+				if (authorizationRef.current.code === authorization.code) return;
+				const delivery = {
+					code: authorization.code,
+					pending: true,
+					failed: false,
+					closeRequested: false
+				};
+				authorizationRef.current = delivery;
+				const frameWindow = iframeRef.current?.contentWindow;
+				const reply = (success) => {
+					if (authorizationRef.current !== delivery || iframeRef.current?.contentWindow !== frameWindow) return;
+					delivery.pending = false;
+					delivery.failed = !success;
+					frameWindow?.postMessage({
+						source: "tradeit",
+						version: 1,
+						type: __trade_it_core.EmbedEventType.AuthorizationResult,
+						payload: {
+							state: authorization.state,
+							success
+						}
+					}, expectedOrigin);
+					if (success && delivery.closeRequested) onOpenChange?.(false);
+				};
+				Promise.resolve().then(() => {
+					if (!onAuthorization) throw new Error("Configure onAuthorization to save the user's OAuth grant.");
+					return onAuthorization(authorization);
+				}).then(() => reply(true), (error) => {
+					reply(false);
+					onError?.(error instanceof Error ? error : new Error("Could not save the OAuth grant."));
+				});
+				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);
+			if (event.data.type === __trade_it_core.EmbedEventType.Error) onError?.(new Error((0, __trade_it_core.getTradeItErrorMessage)(event.data)));
+			if (event.data.type === __trade_it_core.EmbedEventType.CloseRequested && closeOnCloseRequestedEvent) {
+				if (authorizationRef.current.failed) return;
+				if (authorizationRef.current.pending) {
+					authorizationRef.current.closeRequested = true;
+					return;
+				}
+				onOpenChange?.(false);
+			}
 		};
 		window.addEventListener("message", handleMessage);
 		return () => window.removeEventListener("message", handleMessage);
@@ -1461,6 +1516,7 @@ function TradeItModal(props) {
 		open,
 		resolved.url,
 		onEvent,
+		onAuthorization,
 		onError,
 		closeOnCloseRequestedEvent,
 		onOpenChange
@@ -1508,6 +1564,7 @@ function TradeItModal(props) {
 				}),
 				!iframeLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TradeItModalLoader, {}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+					ref: iframeRef,
 					title: dialogLabel,
 					src: resolved.url,
 					style: IFRAME_STYLE,
@@ -1636,6 +1693,12 @@ let TradeType = /* @__PURE__ */ function(TradeType$1) {
 }({});
 
 //#endregion
+Object.defineProperty(exports, 'EmbedEventType', {
+  enumerable: true,
+  get: function () {
+    return __trade_it_core.EmbedEventType;
+  }
+});
 exports.LegType = LegType;
 exports.OrderDirection = OrderDirection;
 exports.OrderType = OrderType;
@@ -1664,6 +1727,12 @@ Object.defineProperty(exports, 'getUrlOrigin', {
     return __trade_it_core.getUrlOrigin;
   }
 });
+Object.defineProperty(exports, 'isTradeItAuthorization', {
+  enumerable: true,
+  get: function () {
+    return __trade_it_core.isTradeItAuthorization;
+  }
+});
 Object.defineProperty(exports, 'isTradeItEvent', {
   enumerable: true,
   get: function () {

package/dist/index.d.cts

@@ -52,8 +52,28 @@ declare enum TradeType {
  * what happened to a contract, so `action` is not meaningful on them.
  */
 //#endregion
+//#region ../../lib/types/src/enums/embedding.enums.d.ts
+/** Version-one messages exchanged between a Trade It frame and its host. */
+declare enum EmbedEventType {
+  Ready = "tradeit.ready",
+  CloseRequested = "tradeit.close_requested",
+  BrokerageConnected = "tradeit.brokerage_connected",
+  TradeSubmitted = "tradeit.trade_submitted",
+  TradeExecuted = "tradeit.trade_executed",
+  Error = "tradeit.error",
+  LoginRequired = "tradeit.login_required",
+  Authorization = "tradeit.authorization",
+  AuthorizationResult = "tradeit.authorization_result",
+}
+//#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';
+type TradeItEventType = `${EmbedEventType}`;
+/** OAuth artifacts forwarded to the partner's authenticated backend. */
+interface TradeItAuthorization {
+  code: string;
+  state: string;
+  issuer: string;
+}
 interface TradeItEvent<TPayload = Record<string, unknown>> {
   source: 'tradeit';
   version: 1;
@@ -98,11 +118,7 @@ interface TradeItExitTrigger {
   value: number;
   unit: '$' | '%';
 }
-/**
- * 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, dir, ot, a, u, lp, sp, tif, tp, sl, ref, legs).
- */
+/** Descriptive trade configuration serialized into the page's compact query parameters. */
 interface TradeItTradeConfigBase {
   ticker: string;
   orderType?: OrderType;
@@ -142,7 +158,10 @@ type TradeItConnectLaunch = TradeItLaunch<'connect'>;
 type TradeItTradeLaunch = TradeItLaunch<'trade'>;
 //#endregion
 //#region ../trade-it-core/src/events.d.ts
+/** Validates supported embedded messages before dispatch. */
 declare function isTradeItEvent(data: unknown): data is TradeItEvent;
+/** Narrows credential events before they can reach an integration callback. */
+declare function isTradeItAuthorization(data: unknown): data is TradeItAuthorization;
 declare function getTradeItErrorMessage(event: TradeItEvent): string;
 //#endregion
 //#region ../trade-it-core/src/url.d.ts
@@ -159,6 +178,8 @@ interface TradeItModalAppearance {
   title?: string;
 }
 interface TradeItModalCallbacks {
+  /** Resolve only once your backend has validated the attempt and saved the OAuth tokens. */
+  onAuthorization?: (authorization: TradeItAuthorization) => Promise<void>;
   onOpenChange?: (open: boolean) => void;
   onEvent?: (event: TradeItEvent) => void;
   onError?: (error: Error) => void;
@@ -197,4 +218,4 @@ interface UseTradeItReturn {
 }
 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 TradeItExitTrigger, type TradeItLaunch, TradeItModal, type TradeItModalAppearance, type TradeItModalProps, type TradeItMultiLegTradeConfig, type TradeItMultiLegTradeLegConfig, type TradeItSimpleTradeConfig, type TradeItTradeConfig, type TradeItTradeLaunch, type TradeLinkLegConfig, TradeLinkParam, TradeType, TradeUnit, TriggerUnit, type UseTradeItOptions, getTradeItErrorMessage, getUrlOrigin, isTradeItEvent, resolveLaunchUrl, useTradeIt };
+export { EmbedEventType, LegType, type OpenConnectOptions, type OpenTradeOptions, OrderDirection, OrderType, PositionEffect, TimeInForce, TradeAction, type TradeItAuthorization, type TradeItConnectLaunch, type TradeItEvent, type TradeItEventType, type TradeItExitTrigger, type TradeItLaunch, TradeItModal, type TradeItModalAppearance, type TradeItModalProps, type TradeItMultiLegTradeConfig, type TradeItMultiLegTradeLegConfig, type TradeItSimpleTradeConfig, type TradeItTradeConfig, type TradeItTradeLaunch, type TradeLinkLegConfig, TradeLinkParam, TradeType, TradeUnit, TriggerUnit, type UseTradeItOptions, getTradeItErrorMessage, getUrlOrigin, isTradeItAuthorization, isTradeItEvent, resolveLaunchUrl, useTradeIt };

package/dist/index.d.ts

@@ -52,8 +52,28 @@ declare enum TradeType {
  * what happened to a contract, so `action` is not meaningful on them.
  */
 //#endregion
+//#region ../../lib/types/src/enums/embedding.enums.d.ts
+/** Version-one messages exchanged between a Trade It frame and its host. */
+declare enum EmbedEventType {
+  Ready = "tradeit.ready",
+  CloseRequested = "tradeit.close_requested",
+  BrokerageConnected = "tradeit.brokerage_connected",
+  TradeSubmitted = "tradeit.trade_submitted",
+  TradeExecuted = "tradeit.trade_executed",
+  Error = "tradeit.error",
+  LoginRequired = "tradeit.login_required",
+  Authorization = "tradeit.authorization",
+  AuthorizationResult = "tradeit.authorization_result",
+}
+//#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';
+type TradeItEventType = `${EmbedEventType}`;
+/** OAuth artifacts forwarded to the partner's authenticated backend. */
+interface TradeItAuthorization {
+  code: string;
+  state: string;
+  issuer: string;
+}
 interface TradeItEvent<TPayload = Record<string, unknown>> {
   source: 'tradeit';
   version: 1;
@@ -98,11 +118,7 @@ interface TradeItExitTrigger {
   value: number;
   unit: '$' | '%';
 }
-/**
- * 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, dir, ot, a, u, lp, sp, tif, tp, sl, ref, legs).
- */
+/** Descriptive trade configuration serialized into the page's compact query parameters. */
 interface TradeItTradeConfigBase {
   ticker: string;
   orderType?: OrderType;
@@ -142,7 +158,10 @@ type TradeItConnectLaunch = TradeItLaunch<'connect'>;
 type TradeItTradeLaunch = TradeItLaunch<'trade'>;
 //#endregion
 //#region ../trade-it-core/src/events.d.ts
+/** Validates supported embedded messages before dispatch. */
 declare function isTradeItEvent(data: unknown): data is TradeItEvent;
+/** Narrows credential events before they can reach an integration callback. */
+declare function isTradeItAuthorization(data: unknown): data is TradeItAuthorization;
 declare function getTradeItErrorMessage(event: TradeItEvent): string;
 //#endregion
 //#region ../trade-it-core/src/url.d.ts
@@ -159,6 +178,8 @@ interface TradeItModalAppearance {
   title?: string;
 }
 interface TradeItModalCallbacks {
+  /** Resolve only once your backend has validated the attempt and saved the OAuth tokens. */
+  onAuthorization?: (authorization: TradeItAuthorization) => Promise<void>;
   onOpenChange?: (open: boolean) => void;
   onEvent?: (event: TradeItEvent) => void;
   onError?: (error: Error) => void;
@@ -197,4 +218,4 @@ interface UseTradeItReturn {
 }
 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 TradeItExitTrigger, type TradeItLaunch, TradeItModal, type TradeItModalAppearance, type TradeItModalProps, type TradeItMultiLegTradeConfig, type TradeItMultiLegTradeLegConfig, type TradeItSimpleTradeConfig, type TradeItTradeConfig, type TradeItTradeLaunch, type TradeLinkLegConfig, TradeLinkParam, TradeType, TradeUnit, TriggerUnit, type UseTradeItOptions, getTradeItErrorMessage, getUrlOrigin, isTradeItEvent, resolveLaunchUrl, useTradeIt };
+export { EmbedEventType, LegType, type OpenConnectOptions, type OpenTradeOptions, OrderDirection, OrderType, PositionEffect, TimeInForce, TradeAction, type TradeItAuthorization, type TradeItConnectLaunch, type TradeItEvent, type TradeItEventType, type TradeItExitTrigger, type TradeItLaunch, TradeItModal, type TradeItModalAppearance, type TradeItModalProps, type TradeItMultiLegTradeConfig, type TradeItMultiLegTradeLegConfig, type TradeItSimpleTradeConfig, type TradeItTradeConfig, type TradeItTradeLaunch, type TradeLinkLegConfig, TradeLinkParam, TradeType, TradeUnit, TriggerUnit, type UseTradeItOptions, getTradeItErrorMessage, getUrlOrigin, isTradeItAuthorization, isTradeItEvent, resolveLaunchUrl, useTradeIt };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { TradeLinkParam, 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 { EmbedEventType, EmbedEventType as EmbedEventType$1, TradeLinkParam, getTradeItErrorMessage, getTradeItErrorMessage as getTradeItErrorMessage$1, getUrlOrigin, getUrlOrigin as getUrlOrigin$1, isTradeItAuthorization, isTradeItAuthorization as isTradeItAuthorization$1, isTradeItEvent, isTradeItEvent as isTradeItEvent$1, resolveLaunchUrl, resolveLaunchUrl as resolveLaunchUrl$1 } from "@trade-it/core";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -35,7 +35,7 @@ function makeProj(yaw, tilt, cx, cy, scale) {
 function paint(ctx, dots) {
 	for (const dot of dots) {
 		const alpha = dot.a ?? 1;
-		ctx.fillStyle = `rgba(11,12,14,${alpha})`;
+		ctx.fillStyle = `rgba(240,240,242,${alpha})`;
 		ctx.beginPath();
 		ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
 		ctx.fill();
@@ -44,7 +44,7 @@ function paint(ctx, dots) {
 function paintLines(ctx, lines) {
 	for (const line of lines) {
 		const alpha = line.a ?? 1;
-		ctx.strokeStyle = `rgba(11,12,14,${alpha})`;
+		ctx.strokeStyle = `rgba(240,240,242,${alpha})`;
 		ctx.lineWidth = line.w;
 		ctx.beginPath();
 		ctx.moveTo(line.x1, line.y1);
@@ -148,7 +148,7 @@ const frameLogoWait = (size, t, o, logo) => {
 	const R = size / 2 * .82;
 	const rs = radiusScale(size, o.rsPow ?? .6);
 	const b = beatAt(t, o.dwell ?? 5.5, o.morph ?? 1.9, o.turns ?? 0, o.settle ?? .1, o.expo ?? .3);
-	const m = b.m;
+	const m = 1 - b.m;
 	const c = 1 - m;
 	const pt = makeProj((o.yawAmp ?? .22) * Math.sin(t * (o.yawRate ?? .3)) * c, (o.tilt ?? .42) * c, cx, cx, R);
 	const rings = Math.max(3, Math.round(o.rings ?? 9));
@@ -1217,7 +1217,7 @@ function TradeItLogoLoader({ size = 120 }) {
 			paintFrame(ctx, frame);
 		};
 		if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
-			render(2.7);
+			render(0);
 			return;
 		}
 		let raf = 0;
@@ -1271,7 +1271,7 @@ function TradeItLogoLoader({ size = 120 }) {
 const LOADING_STYLE = {
 	position: "absolute",
 	inset: 0,
-	background: "#ffffff"
+	background: "#0e1011"
 };
 const LOADING_CONTENT_STYLE = {
 	position: "relative",
@@ -1312,10 +1312,11 @@ const DIALOG_DESKTOP_STYLE = {
 	width: "min(960px, calc(100vw - 24px))",
 	height: "min(760px, calc(100vh - 24px))",
 	boxSizing: "border-box",
-	background: "#fff",
+	background: "#0e1011",
+	colorScheme: "dark",
 	borderRadius: 18,
 	boxShadow: "0 24px 80px rgba(2, 6, 23, 0.28)",
-	border: "1px solid rgba(148, 163, 184, 0.35)",
+	border: "1px solid rgba(255, 255, 255, 0.14)",
 	overflow: "hidden"
 };
 const CONNECT_DIALOG_DESKTOP_STYLE = {
@@ -1354,7 +1355,8 @@ const IFRAME_STYLE = {
 	width: "100%",
 	height: "100%",
 	border: 0,
-	background: "#fff"
+	background: "#0e1011",
+	colorScheme: "dark"
 };
 function useIsMobile(maxWidth = 640) {
 	const [isMobile, setIsMobile] = useState(false);
@@ -1363,20 +1365,23 @@ function useIsMobile(maxWidth = 640) {
 		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);
+		mediaQuery.addEventListener("change", onChange);
+		return () => mediaQuery.removeEventListener("change", 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 { open, onOpenChange, onEvent, onAuthorization, 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 iframeRef = useRef(null);
+	const authorizationRef = useRef({
+		code: "",
+		pending: false,
+		failed: false,
+		closeRequested: false
+	});
 	const resolved = useMemo(() => {
 		try {
 			return {
@@ -1400,6 +1405,12 @@ function TradeItModal(props) {
 	useEffect(() => {
 		if (!open) return;
 		setIframeLoaded(false);
+		authorizationRef.current = {
+			code: "",
+			pending: false,
+			failed: false,
+			closeRequested: false
+		};
 	}, [open, resolved.url]);
 	useEffect(() => {
 		if (!open || !closeOnEscape) return;
@@ -1427,10 +1438,54 @@ function TradeItModal(props) {
 		if (!expectedOrigin) return;
 		const handleMessage = (event) => {
 			if (event.origin !== expectedOrigin) return;
+			if (event.source !== iframeRef.current?.contentWindow) return;
 			if (!isTradeItEvent$1(event.data)) return;
+			if (event.data.type === EmbedEventType$1.Authorization) {
+				if (!isTradeItAuthorization$1(event.data.payload)) return;
+				const authorization = event.data.payload;
+				if (authorizationRef.current.code === authorization.code) return;
+				const delivery = {
+					code: authorization.code,
+					pending: true,
+					failed: false,
+					closeRequested: false
+				};
+				authorizationRef.current = delivery;
+				const frameWindow = iframeRef.current?.contentWindow;
+				const reply = (success) => {
+					if (authorizationRef.current !== delivery || iframeRef.current?.contentWindow !== frameWindow) return;
+					delivery.pending = false;
+					delivery.failed = !success;
+					frameWindow?.postMessage({
+						source: "tradeit",
+						version: 1,
+						type: EmbedEventType$1.AuthorizationResult,
+						payload: {
+							state: authorization.state,
+							success
+						}
+					}, expectedOrigin);
+					if (success && delivery.closeRequested) onOpenChange?.(false);
+				};
+				Promise.resolve().then(() => {
+					if (!onAuthorization) throw new Error("Configure onAuthorization to save the user's OAuth grant.");
+					return onAuthorization(authorization);
+				}).then(() => reply(true), (error) => {
+					reply(false);
+					onError?.(error instanceof Error ? error : new Error("Could not save the OAuth grant."));
+				});
+				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);
+			if (event.data.type === EmbedEventType$1.Error) onError?.(new Error(getTradeItErrorMessage$1(event.data)));
+			if (event.data.type === EmbedEventType$1.CloseRequested && closeOnCloseRequestedEvent) {
+				if (authorizationRef.current.failed) return;
+				if (authorizationRef.current.pending) {
+					authorizationRef.current.closeRequested = true;
+					return;
+				}
+				onOpenChange?.(false);
+			}
 		};
 		window.addEventListener("message", handleMessage);
 		return () => window.removeEventListener("message", handleMessage);
@@ -1438,6 +1493,7 @@ function TradeItModal(props) {
 		open,
 		resolved.url,
 		onEvent,
+		onAuthorization,
 		onError,
 		closeOnCloseRequestedEvent,
 		onOpenChange
@@ -1485,6 +1541,7 @@ function TradeItModal(props) {
 				}),
 				!iframeLoaded && /* @__PURE__ */ jsx(TradeItModalLoader, {}),
 				/* @__PURE__ */ jsx("iframe", {
+					ref: iframeRef,
 					title: dialogLabel,
 					src: resolved.url,
 					style: IFRAME_STYLE,
@@ -1613,4 +1670,4 @@ let TradeType = /* @__PURE__ */ function(TradeType$1) {
 }({});
 
 //#endregion
-export { LegType, OrderDirection, OrderType, PositionEffect, TimeInForce, TradeAction, TradeItModal, TradeLinkParam, TradeType, TradeUnit, TriggerUnit, getTradeItErrorMessage, getUrlOrigin, isTradeItEvent, resolveLaunchUrl, useTradeIt };
+export { EmbedEventType, LegType, OrderDirection, OrderType, PositionEffect, TimeInForce, TradeAction, TradeItModal, TradeLinkParam, TradeType, TradeUnit, TriggerUnit, getTradeItErrorMessage, getUrlOrigin, isTradeItAuthorization, isTradeItEvent, resolveLaunchUrl, useTradeIt };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trade-it/react",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "React SDK for embedding Trade It connect and trade experiences into a web app.",
   "author": "Trade It, Inc.",
   "license": "MIT",
@@ -37,10 +37,13 @@
   "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",
+    "release:major": "node ../../scripts/release-trade-it-sdk.mjs react major",
+    "release:minor": "node ../../scripts/release-trade-it-sdk.mjs react minor",
+    "release:patch": "node ../../scripts/release-trade-it-sdk.mjs react patch",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@trade-it/core": "^0.3.0"
+    "@trade-it/core": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",