@octanejs/rainbowkit 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# @octanejs/rainbowkit
+
+An Octane-native wallet connection UI preserving RainbowKit's defining provider,
+connect-control, modal-hook, and theme contracts.
+
+```bash
+pnpm add @octanejs/rainbowkit @octanejs/wagmi @octanejs/tanstack-query viem
+```
+
+```tsrx
+import { QueryClient, QueryClientProvider } from '@octanejs/tanstack-query';
+import { WagmiProvider, createConfig, http } from '@octanejs/wagmi';
+import { injected } from '@octanejs/wagmi/connectors';
+import { mainnet } from '@octanejs/wagmi/chains';
+import {
+	ConnectButton,
+	RainbowKitProvider,
+	lightTheme,
+} from '@octanejs/rainbowkit';
+import '@octanejs/rainbowkit/styles.css';
+
+const config = createConfig({
+	chains: [mainnet],
+	connectors: [injected()],
+	transports: { [mainnet.id]: http() },
+});
+const queryClient = new QueryClient();
+
+function App() @{
+	<WagmiProvider config={config}>
+		<QueryClientProvider client={queryClient}>
+			<RainbowKitProvider theme={lightTheme()}>
+				<ConnectButton />
+			</RainbowKitProvider>
+		</QueryClientProvider>
+	</WagmiProvider>
+}
+```
+
+## Important Wagmi divergence
+
+This package is a compatibility adapter for RainbowKit 2.2.11's public UI
+contracts, not a repackaging of its React implementation. Upstream RainbowKit
+2.2.11 declares `wagmi ^2.9.0`; this package intentionally targets
+`@octanejs/wagmi` v3. It does not satisfy upstream RainbowKit's peer range and
+must not be presented as drop-in dependency parity.
+
+The adapter derives the familiar disconnected, connecting, connected, wrong
+network, and modal-open states directly from Wagmi v3. The supported cohort is
+`RainbowKitProvider`, `ConnectButton`, `ConnectButton.Custom`, `WalletButton`,
+`useConnectModal`, `useAccountModal`, `useChainModal`, and the familiar light,
+dark, and midnight theme factories. `rainbowTheme` is an explicitly documented
+Octane-only purple/rounded preset.
+
+## Wallet catalogue and accessibility
+
+Wallet choices come from the connectors configured on the enclosing
+`WagmiProvider`. Applications configure injected/EIP-6963 and WalletConnect
+connectors themselves, including a WalletConnect project id. Pass `wallets` to
+`RainbowKitProvider` to order named entries or explain a configured wallet that
+is unavailable:
+
+```tsrx
+<RainbowKitProvider
+	wallets={[
+		{ id: 'injected', name: 'Browser wallet' },
+		{
+			id: 'walletConnect',
+			name: 'WalletConnect',
+			unavailableReason: 'WalletConnect projectId is required.',
+		},
+	]}
+>
+	<ConnectButton />
+</RainbowKitProvider>
+```
+
+Entries match the canonical connector `uid` when `connectorUid` is supplied,
+with explicit id/name matching as the convenience fallback. They are
+deduplicated by that canonical identity while preserving configured/discovery
+order.
+
+The native dialog has an accessible name and description, initial focus, tab
+containment, Escape and outside dismissal, opener focus restoration, live
+status messages, and document-scoped scroll/background containment. The
+included stylesheet provides the baseline responsive, touch-target, and
+reduced-motion presentation; applications remain responsible for validating
+their final composed CSS.
+
+## Deliberately unsupported
+
+The first cohort omits RainbowKit's wallet factory catalogue, authentication
+adapter, recent transactions, ENS/avatar resolution, cool mode, locale
+translations, pixel-identical themes, account avatars/balances, and React-only
+internals. Unsupported upstream props are not accepted by the public types.
+Supply vendor connector SDKs directly through Wagmi.
+
+SSR emits the deterministic disconnected control. Live connector state remains
+authoritative after hydration; persisted state never authorizes wallet actions.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@octanejs/rainbowkit",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "octane": {
+    "hookSlots": {
+      "manual": [
+        "src"
+      ]
+    }
+  },
+  "description": "Octane-native RainbowKit connection UI contracts over @octanejs/wagmi v3.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/rainbowkit"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "status.json"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "dependencies": {
+    "@wagmi/core": "3.6.4",
+    "@octanejs/wagmi": "0.0.1"
+  },
+  "peerDependencies": {
+    "@octanejs/tanstack-query": "0.1.20",
+    "octane": "0.1.21"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@tsrx/react": "^0.2.56",
+    "@wagmi/connectors": "8.0.25",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "viem": "2.55.10",
+    "vitest": "^4.1.10",
+    "octane": "0.1.21",
+    "@octanejs/tanstack-query": "0.1.20"
+  },
+  "scripts": {
+    "test": "vitest run --root ../.. --project rainbowkit --project rainbowkit-ssr"
+  }
+}

package/src/connect-button.tsrx

@@ -0,0 +1,117 @@
+import { useChains, useConnect, useConnection, useDisconnect } from '@octanejs/wagmi';
+import { isChildrenBlock, useContext, type OctaneNode } from 'octane';
+import { useAccountModal, useChainModal, useConnectModal } from './hooks';
+import { RainbowKitContext } from './internal';
+
+export type ConnectButtonRendererProps = {
+	account?: { address: string; displayName: string };
+	accountModalOpen: boolean;
+	authenticationStatus?: undefined;
+	chain?: { id: number; name?: string; unsupported: boolean };
+	chainModalOpen: boolean;
+	connectModalOpen: boolean;
+	connectionStatus: 'connected' | 'connecting' | 'disconnected';
+	mounted: boolean;
+	openAccountModal?: (event?: Event) => void;
+	openChainModal?: (event?: Event) => void;
+	openConnectModal?: (event?: Event) => void;
+};
+
+export type ConnectButtonProps = {
+	chainStatus?: 'name' | 'none';
+	label?: string;
+};
+
+function formatAddress(address: string): string {
+	return `${address.slice(0, 6)}…${address.slice(-4)}`;
+}
+
+function useConnectButtonState(): ConnectButtonRendererProps {
+	const connection = useConnection();
+	const connect = useConnect();
+	const rainbowKit = useContext(RainbowKitContext);
+	const chains = useChains();
+	const accountModal = useAccountModal();
+	const chainModal = useChainModal();
+	const connectModal = useConnectModal();
+	const chain = chains.find((candidate) => candidate.id === connection.chainId);
+	const connected = connection.status === 'connected' && Boolean(connection.address);
+	const mounted = rainbowKit?.mounted ?? false;
+	return {
+		account: mounted && connected
+			? {
+					address: connection.address!,
+					displayName: formatAddress(connection.address!),
+				}
+			: undefined,
+		accountModalOpen: accountModal.accountModalOpen,
+		authenticationStatus: undefined,
+		chain: mounted && connected
+			? { id: connection.chainId!, name: chain?.name, unsupported: chain === undefined }
+			: undefined,
+		chainModalOpen: chainModal.chainModalOpen,
+		connectModalOpen: connectModal.connectModalOpen,
+		connectionStatus: !mounted
+			? 'disconnected'
+			: connected
+				? 'connected'
+				: connect.isPending || rainbowKit?.connecting
+					? 'connecting'
+					: 'disconnected',
+		mounted,
+		openAccountModal: mounted ? accountModal.openAccountModal : undefined,
+		openChainModal: mounted ? chainModal.openChainModal : undefined,
+		openConnectModal: mounted ? connectModal.openConnectModal : undefined,
+	};
+}
+
+export function ConnectButton(props: ConnectButtonProps = {}) @{
+	const state = useConnectButtonState();
+	const disconnect = useDisconnect();
+	@if (!state.account) {
+		<button
+			type="button"
+			className="rk-connect-button"
+			disabled={!state.mounted || state.connectionStatus === 'connecting'}
+			onClick={state.openConnectModal}
+		>
+			{props.label ?? 'Connect Wallet'}
+		</button>
+	} @else {
+		<div>
+			@if (state.chain?.unsupported) {
+				<button type="button" className="rk-connect-button" onClick={state.openChainModal}>
+					Wrong network
+				</button>
+			} @else {
+				@if (props.chainStatus !== 'none') {
+					<button type="button" className="rk-connect-button" onClick={state.openChainModal}>
+						{state.chain?.name ?? `Chain ${state.chain?.id}`}
+					</button>
+				}
+			}
+			<button
+				type="button"
+				className="rk-connect-button"
+				onClick={state.openAccountModal}
+			>{state.account.displayName}</button>
+			<button
+				type="button"
+				className="rk-connect-button"
+				disabled={disconnect.isPending}
+				onClick={() => disconnect.mutate(undefined)}
+			>
+				Disconnect
+			</button>
+		</div>
+	}
+}
+
+ConnectButton.Custom = function ConnectButtonCustom(props: {
+	children: OctaneNode | ((state: ConnectButtonRendererProps) => OctaneNode);
+}) {
+	const state = useConnectButtonState();
+	return typeof props.children === 'function' && !isChildrenBlock(props.children)
+		? props.children(state)
+		: props.children;
+};

package/src/hooks.ts

@@ -0,0 +1,47 @@
+import { useContext } from 'octane';
+import { RainbowKitContext } from './internal';
+
+export function useConnectModal(): {
+	connectModalOpen: boolean;
+	openConnectModal?: (event?: Event) => void;
+} {
+	const context = useContext(RainbowKitContext);
+	return {
+		connectModalOpen: context?.activeModal?.kind === 'connect',
+		openConnectModal:
+			context?.mounted && !context.connected
+				? (event) =>
+						context.openModal('connect', event?.currentTarget as HTMLElement | null | undefined)
+				: undefined,
+	};
+}
+
+export function useAccountModal(): {
+	accountModalOpen: boolean;
+	openAccountModal?: (event?: Event) => void;
+} {
+	const context = useContext(RainbowKitContext);
+	return {
+		accountModalOpen: context?.activeModal?.kind === 'account',
+		openAccountModal:
+			context?.mounted && context.connected
+				? (event) =>
+						context.openModal('account', event?.currentTarget as HTMLElement | null | undefined)
+				: undefined,
+	};
+}
+
+export function useChainModal(): {
+	chainModalOpen: boolean;
+	openChainModal?: (event?: Event) => void;
+} {
+	const context = useContext(RainbowKitContext);
+	return {
+		chainModalOpen: context?.activeModal?.kind === 'chain',
+		openChainModal:
+			context?.mounted && context.connected
+				? (event) =>
+						context.openModal('chain', event?.currentTarget as HTMLElement | null | undefined)
+				: undefined,
+	};
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { RainbowKitProvider, type RainbowKitProviderProps } from './provider.tsrx';
+export {
+	ConnectButton,
+	type ConnectButtonProps,
+	type ConnectButtonRendererProps,
+} from './connect-button.tsrx';
+export { WalletButton, type WalletButtonProps } from './wallet-button.tsrx';
+export { useAccountModal, useChainModal, useConnectModal } from './hooks';
+export { darkTheme, lightTheme, midnightTheme, rainbowTheme, type Theme } from './theme';
+export type { WalletDescriptor } from './internal';

package/src/internal.ts

@@ -0,0 +1,158 @@
+import { createContext } from 'octane';
+import type { Connector } from '@wagmi/core';
+
+export type ModalKind = 'account' | 'chain' | 'connect';
+export type ModalToken = string;
+
+export type WalletDescriptor = {
+	id: string;
+	name: string;
+	connectorUid?: string;
+	unavailableReason?: string;
+};
+
+export type WalletEntry = WalletDescriptor & {
+	connector?: Connector;
+	identity: string;
+};
+
+export type RainbowKitContextValue = {
+	activeModal: { kind: ModalKind; token: ModalToken } | null;
+	beginConnecting: () => symbol;
+	closeModal: (token?: ModalToken) => void;
+	connected: boolean;
+	connecting: boolean;
+	endConnecting: (token: symbol) => void;
+	mounted: boolean;
+	openModal: (kind: ModalKind, opener?: HTMLElement | null) => void;
+	wallets: readonly WalletEntry[];
+};
+
+export const RainbowKitContext = createContext<RainbowKitContextValue | null>(null);
+
+type DocumentModalState = {
+	stack: ModalToken[];
+	elements: Map<ModalToken, HTMLElement>;
+	originalIsolation: Map<HTMLElement, { ariaHidden: string | null; inert: boolean }>;
+	bodyLockCount: number;
+	originalBodyOverflow: string;
+};
+
+const documentStates = new WeakMap<Document, DocumentModalState>();
+const tokenDocuments = new Map<ModalToken, Document>();
+
+function stateFor(document: Document): DocumentModalState {
+	let state = documentStates.get(document);
+	if (!state) {
+		state = {
+			stack: [],
+			elements: new Map(),
+			originalIsolation: new Map(),
+			bodyLockCount: 0,
+			originalBodyOverflow: '',
+		};
+		documentStates.set(document, state);
+	}
+	return state;
+}
+
+function rememberIsolation(state: DocumentModalState, element: HTMLElement): void {
+	if (!state.originalIsolation.has(element)) {
+		state.originalIsolation.set(element, {
+			ariaHidden: element.getAttribute('aria-hidden'),
+			inert: element.inert,
+		});
+	}
+}
+
+function restoreIsolation(state: DocumentModalState): void {
+	for (const [element, original] of state.originalIsolation) {
+		element.inert = original.inert;
+		if (original.ariaHidden === null) element.removeAttribute('aria-hidden');
+		else element.setAttribute('aria-hidden', original.ariaHidden);
+	}
+}
+
+function syncModalIsolation(document: Document): void {
+	const state = stateFor(document);
+	restoreIsolation(state);
+	const topToken = state.stack.at(-1);
+	const dialog = topToken ? state.elements.get(topToken) : undefined;
+	if (!dialog) {
+		if (state.stack.length === 0) state.originalIsolation.clear();
+		return;
+	}
+
+	let child: HTMLElement = dialog;
+	let parent = child.parentElement;
+	while (parent) {
+		rememberIsolation(state, child);
+		child.inert = false;
+		child.removeAttribute('aria-hidden');
+		for (const sibling of Array.from(parent.children)) {
+			if (sibling === child) continue;
+			const element = sibling as HTMLElement;
+			rememberIsolation(state, element);
+			element.inert = true;
+			element.setAttribute('aria-hidden', 'true');
+		}
+		if (parent === document.body) break;
+		child = parent;
+		parent = parent.parentElement;
+	}
+}
+
+export function connectorIdentity(connector: Connector): string {
+	return connector.uid || `${connector.id}:${connector.name}`;
+}
+
+export function pushModal(token: ModalToken, document: Document): void {
+	removeModal(token);
+	tokenDocuments.set(token, document);
+	stateFor(document).stack.push(token);
+}
+
+export function removeModal(token: ModalToken): void {
+	const document = tokenDocuments.get(token);
+	if (!document) return;
+	const state = stateFor(document);
+	const index = state.stack.indexOf(token);
+	if (index >= 0) state.stack.splice(index, 1);
+	state.elements.delete(token);
+	tokenDocuments.delete(token);
+	syncModalIsolation(document);
+}
+
+export function isTopModal(token: ModalToken): boolean {
+	const document = tokenDocuments.get(token);
+	return document ? stateFor(document).stack.at(-1) === token : false;
+}
+
+export function registerModal(token: ModalToken, element: HTMLElement): void {
+	const document = element.ownerDocument;
+	tokenDocuments.set(token, document);
+	stateFor(document).elements.set(token, element);
+	syncModalIsolation(document);
+}
+
+export function focusTopModal(document: Document): boolean {
+	const state = stateFor(document);
+	const token = state.stack.at(-1);
+	const element = token ? state.elements.get(token) : undefined;
+	if (element && !element.contains(document.activeElement)) element.focus();
+	return Boolean(element);
+}
+
+export function lockBody(document: Document): void {
+	const state = stateFor(document);
+	if (state.bodyLockCount++ === 0) {
+		state.originalBodyOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+	}
+}
+
+export function unlockBody(document: Document): void {
+	const state = stateFor(document);
+	if (state.bodyLockCount === 0) return;
+	if (--state.bodyLockCount === 0) document.body.style.overflow = state.originalBodyOverflow;
+}

package/src/provider.tsrx

@@ -0,0 +1,406 @@
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'octane';
+import { useConnect, useConnection, useDisconnect, useSwitchChain } from '@octanejs/wagmi';
+import type { OctaneNode } from 'octane';
+import type { Connector } from '@wagmi/core';
+import {
+	RainbowKitContext,
+	connectorIdentity,
+	focusTopModal,
+	isTopModal,
+	lockBody,
+	pushModal,
+	registerModal,
+	removeModal,
+	unlockBody,
+	type ModalKind,
+	type ModalToken,
+	type WalletDescriptor,
+	type WalletEntry,
+} from './internal';
+import { lightTheme, type Theme } from './theme';
+import './styles.css';
+
+export type RainbowKitProviderProps = {
+	children?: OctaneNode;
+	theme?: Theme;
+	wallets?: readonly WalletDescriptor[];
+};
+
+function themeStyle(theme: Theme): Record<string, string> {
+	return {
+		'--rk-accent': theme.colors.accentColor,
+		'--rk-accent-foreground': theme.colors.accentColorForeground,
+		'--rk-connect-background': theme.colors.connectButtonBackground,
+		'--rk-connect-text': theme.colors.connectButtonText,
+		'--rk-modal-background': theme.colors.modalBackground,
+		'--rk-modal-text': theme.colors.modalText,
+		'--rk-font-body': theme.fonts.body,
+		'--rk-action-radius': theme.radii.actionButton,
+		'--rk-connect-radius': theme.radii.connectButton,
+		'--rk-modal-radius': theme.radii.modal,
+	};
+}
+
+function walletEntries(
+	connectors: readonly Connector[],
+	descriptors: readonly WalletDescriptor[],
+): readonly WalletEntry[] {
+	const byIdentity = new Map(connectors.map(
+		(connector) => [connectorIdentity(connector), connector],
+	));
+	const consumed = new Set<string>();
+	const entries: WalletEntry[] = [];
+	for (const descriptor of descriptors) {
+		const fallback = connectors.find(
+			(connector) => connector.id === descriptor.id || connector.name === descriptor.name,
+		);
+		const connector = descriptor.connectorUid
+			? byIdentity.get(descriptor.connectorUid) ?? fallback
+			: fallback;
+		const identity =
+			connector ? connectorIdentity(connector) : descriptor.connectorUid || descriptor.id;
+		if (consumed.has(identity)) continue;
+		consumed.add(identity);
+		entries.push({ ...descriptor, connector, identity });
+	}
+	for (const connector of connectors) {
+		const identity = connectorIdentity(connector);
+		if (consumed.has(identity)) continue;
+		consumed.add(identity);
+		entries.push({ id: connector.id, name: connector.name, connector, identity });
+	}
+	return entries;
+}
+
+function errorMessage(error: unknown): string {
+	return error instanceof Error ? error.message : 'The wallet request failed.';
+}
+
+function Modal(props: {
+	kind: ModalKind;
+	token: ModalToken;
+	wallets: readonly WalletEntry[];
+	close: (token: ModalToken) => void;
+	titleId: string;
+	descriptionId: string;
+	beginConnecting: () => symbol;
+	endConnecting: (token: symbol) => void;
+	opener: HTMLElement | null;
+}) @{
+	const connection = useConnection();
+	const connect = useConnect();
+	const disconnect = useDisconnect();
+	const switchChain = useSwitchChain();
+	const [pendingWalletIdentity, setPendingWalletIdentity] = useState<string | null>(null);
+	const dialogRef = useRef<HTMLElement | null>(null);
+	const focusScope = props.opener?.closest<HTMLElement>('[data-rk]');
+	const restoreFocus = () => {
+		const ownerDocument = props.opener?.ownerDocument ?? dialogRef.current?.ownerDocument;
+		if (!ownerDocument) return;
+		queueMicrotask(() => {
+			if (focusTopModal(ownerDocument)) return;
+			const fallback = focusScope?.querySelector<HTMLElement>(
+				'.rk-connect-button:not([disabled]), .rk-wallet-button:not([disabled])',
+			);
+			((props.opener?.isConnected ? props.opener : fallback))?.focus();
+		});
+	};
+	const title =
+		props.kind === 'connect'
+			? 'Connect a wallet'
+			: props.kind === 'chain'
+				? 'Switch network'
+				: 'Account';
+	const description =
+		props.kind === 'connect'
+			? 'Choose an available wallet.'
+			: props.kind === 'chain'
+				? 'Choose a network for the connected wallet.'
+				: 'Manage the connected wallet.';
+
+	useLayoutEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		const ownerDocument = dialog.ownerDocument;
+		pushModal(props.token, ownerDocument);
+		lockBody(ownerDocument);
+		registerModal(props.token, dialog);
+		const focusable = () => Array.from(
+			dialog.querySelectorAll<HTMLElement>(
+				'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])',
+			),
+		);
+		focusable()[0]?.focus();
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (!isTopModal(props.token)) return;
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				props.close(props.token);
+				return;
+			}
+			if (event.key !== 'Tab') return;
+			const items = focusable();
+			if (items.length === 0) {
+				event.preventDefault();
+				dialog.focus();
+				return;
+			}
+			const first = items[0]!;
+			const last = items.at(-1)!;
+			if (
+				!dialog.contains(ownerDocument.activeElement) ||
+					!items.includes(ownerDocument.activeElement as HTMLElement)
+			) {
+				event.preventDefault();
+				((event.shiftKey ? last : first)).focus();
+			} else if (event.shiftKey && ownerDocument.activeElement === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && ownerDocument.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		ownerDocument.addEventListener('keydown', onKeyDown);
+		return () => {
+			ownerDocument.removeEventListener('keydown', onKeyDown);
+			removeModal(props.token);
+			unlockBody(ownerDocument);
+			restoreFocus();
+		};
+	}, [props.token]);
+
+	const connectWallet = (entry: WalletEntry) => {
+		if (!entry.connector) return;
+		const pendingToken = props.beginConnecting();
+		setPendingWalletIdentity(entry.identity);
+		void connect.connectAsync({ connector: entry.connector }).then(() => {
+			props.close(props.token);
+			restoreFocus();
+		}).catch(() => {}).finally(() => {
+			setPendingWalletIdentity(null);
+			props.endConnecting(pendingToken);
+		});
+	};
+
+	<div
+		className="rk-overlay"
+		data-rk-overlay=""
+		onClick={(event) => {
+			if (event.target === event.currentTarget && isTopModal(props.token)) props.close(props.token);
+		}}
+	>
+		<section
+			className="rk-dialog"
+			ref={dialogRef}
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby={props.titleId}
+			aria-describedby={props.descriptionId}
+			tabIndex={-1}
+		>
+			<header className="rk-dialog-header">
+				<h2 id={props.titleId}>{title}</h2>
+				<button
+					type="button"
+					className="rk-close"
+					aria-label="Close"
+					onClick={() => props.close(props.token)}
+				>
+					×
+				</button>
+			</header>
+			<p id={props.descriptionId}>{description}</p>
+			<div role="status" aria-live="polite">
+				{connect.isPending
+					? 'Waiting for wallet approval'
+					: switchChain.isPending
+						? 'Switching network'
+						: disconnect.isPending
+							? 'Disconnecting wallet'
+							: ''}
+			</div>
+			@if (props.kind === 'connect') {
+				<>
+					@if (props.wallets.length === 0) {
+						<p>No compatible wallets are available.</p>
+					} @else {
+						<ul className="rk-list">
+							@for (const wallet of props.wallets; key wallet.identity) {
+								<li>
+									<button
+										type="button"
+										className="rk-action"
+										disabled={connect.isPending || !wallet.connector}
+										onClick={() => connectWallet(wallet)}
+									>
+										{connect.isPending && pendingWalletIdentity === wallet.identity
+											? `Waiting for ${wallet.name}`
+											: wallet.name}
+									</button>
+									@if (!wallet.connector) {
+										<p>{wallet.unavailableReason ?? 'Wallet is unavailable in this browser.'}</p>
+									}
+								</li>
+							}
+						</ul>
+					}
+					@if (connect.error) {
+						<p role="alert">{errorMessage(connect.error)}</p>
+					}
+				</>
+			} @else {
+				@if (props.kind === 'chain') {
+					<>
+						<ul className="rk-list">
+							@for (const chain of switchChain.chains; key chain.id) {
+								<li>
+									<button
+										type="button"
+										className="rk-action"
+										disabled={switchChain.isPending || connection.chainId === chain.id}
+										onClick={() => switchChain.mutate({ chainId: chain.id }, {
+											onSuccess: () => props.close(props.token),
+										})}
+									>{chain.name}</button>
+								</li>
+							}
+						</ul>
+						@if (switchChain.error) {
+							<p role="alert">{errorMessage(switchChain.error)}</p>
+						}
+					</>
+				} @else {
+					<>
+						<p>{connection.address ?? 'No connected account'}</p>
+						<button
+							type="button"
+							className="rk-action"
+							disabled={disconnect.isPending || connection.status !== 'connected'}
+							onClick={() => disconnect.mutate(undefined, {
+								onSuccess: () => props.close(props.token),
+							})}
+						>
+							Disconnect
+						</button>
+						@if (disconnect.error) {
+							<p role="alert">{errorMessage(disconnect.error)}</p>
+						}
+					</>
+				}
+			}
+		</section>
+	</div>
+}
+
+export function RainbowKitProvider(props: RainbowKitProviderProps) @{
+	const [activeModal, setActiveModal] = useState<
+		| {
+				kind: ModalKind;
+				token: ModalToken;
+				chainId: number | undefined;
+				opener: HTMLElement | null;
+				ownerDocument: Document | null;
+		  }
+		| null
+	>(null);
+	const connection = useConnection();
+	const [mounted, setMounted] = useState(false);
+	const connectingTokens = useRef(new Set<symbol>());
+	const modalGeneration = useRef(0);
+	const [connectingCount, setConnectingCount] = useState(0);
+	const rootRef = useRef<HTMLDivElement | null>(null);
+	useEffect(() => setMounted(true), []);
+	const beginConnecting = useCallback(() => {
+		const token = Symbol('rainbowkit-connect');
+		connectingTokens.current.add(token);
+		setConnectingCount(connectingTokens.current.size);
+		return token;
+	}, []);
+	const endConnecting = useCallback((token: symbol) => {
+		if (connectingTokens.current.delete(token)) {
+			setConnectingCount(connectingTokens.current.size);
+		}
+	}, []);
+	const connectors = useConnect().connectors;
+	const wallets = useMemo(() => walletEntries(connectors, props.wallets ?? []), [
+		connectors,
+		props.wallets,
+	]);
+	const selectedTheme = props.theme ?? lightTheme();
+	const providerId = useId();
+	const closeModal = useCallback((token?: ModalToken) => {
+		setActiveModal((current) => {
+			if (!current || token && current.token !== token) return current;
+			return null;
+		});
+	}, []);
+	useEffect(() => {
+		if (!activeModal) return;
+		const modalNoLongerApplies =
+			activeModal.kind === 'connect'
+				? connection.status === 'connected'
+				: connection.status !== 'connected' ||
+					activeModal.kind === 'chain' && activeModal.chainId !== connection.chainId;
+		if (modalNoLongerApplies) closeModal(activeModal.token);
+	}, [activeModal, closeModal, connection.chainId, connection.status]);
+	const openModal = useCallback((kind: ModalKind, nextOpener?: HTMLElement | null) => {
+		const token = `${providerId}:${++modalGeneration.current}`;
+		const fallbackDocument = rootRef.current?.ownerDocument;
+		const ownerDocument =
+			nextOpener?.ownerDocument ?? fallbackDocument ??
+				(typeof document === 'undefined' ? null : document);
+		setActiveModal({
+			kind,
+			token,
+			chainId: connection.chainId,
+			opener: nextOpener ?? ownerDocument?.activeElement as HTMLElement | null | undefined ?? null,
+			ownerDocument,
+		});
+	}, [connection.chainId, providerId]);
+	const context = useMemo(
+		() => ({
+			activeModal,
+			beginConnecting,
+			closeModal,
+			connected: connection.status === 'connected',
+			connecting: connectingCount > 0 || connection.status === 'connecting' ||
+				connection.status === 'reconnecting',
+			endConnecting,
+			mounted,
+			openModal,
+			wallets,
+		}),
+		[
+			activeModal,
+			beginConnecting,
+			closeModal,
+			connectingCount,
+			connection.status,
+			endConnecting,
+			mounted,
+			openModal,
+			wallets,
+		],
+	);
+
+	<div data-rk="" ref={rootRef} style={themeStyle(selectedTheme)}>
+		<RainbowKitContext.Provider value={context}>
+			{props.children}
+			@if (activeModal) {
+				<Modal
+					key={activeModal.token}
+					kind={activeModal.kind}
+					token={activeModal.token}
+					wallets={wallets}
+					close={closeModal}
+					titleId={`${providerId}-title`}
+					descriptionId={`${providerId}-description`}
+					beginConnecting={beginConnecting}
+					endConnecting={endConnecting}
+					opener={activeModal.opener}
+				/>
+			}
+		</RainbowKitContext.Provider>
+	</div>
+}

package/src/styles.css

@@ -0,0 +1,92 @@
+[data-rk] {
+	font-family: var(--rk-font-body);
+}
+
+.rk-connect-button,
+.rk-wallet-button,
+.rk-action {
+	min-height: 44px;
+	border: 0;
+	padding: 0 16px;
+	font: inherit;
+	cursor: pointer;
+}
+
+.rk-connect-button,
+.rk-wallet-button {
+	border-radius: var(--rk-connect-radius);
+	background: var(--rk-connect-background);
+	color: var(--rk-connect-text);
+}
+
+.rk-action {
+	border-radius: var(--rk-action-radius);
+	background: var(--rk-accent);
+	color: var(--rk-accent-foreground);
+}
+
+.rk-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 2147483647;
+	display: grid;
+	place-items: center;
+	background: rgb(0 0 0 / 55%);
+	padding: 16px;
+}
+
+.rk-dialog {
+	width: min(420px, 100%);
+	max-height: min(640px, calc(100vh - 32px));
+	overflow: auto;
+	border-radius: var(--rk-modal-radius);
+	background: var(--rk-modal-background);
+	color: var(--rk-modal-text);
+	padding: 20px;
+	box-shadow: 0 16px 64px rgb(0 0 0 / 30%);
+}
+
+.rk-dialog-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.rk-close {
+	min-width: 44px;
+	min-height: 44px;
+	border: 0;
+	border-radius: 999px;
+	background: transparent;
+	color: inherit;
+	font-size: 20px;
+	cursor: pointer;
+}
+
+.rk-list {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 8px;
+	padding: 0;
+	list-style: none;
+}
+
+.rk-list button {
+	width: 100%;
+	min-height: 44px;
+	text-align: left;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.rk-dialog {
+		animation: rk-enter 120ms ease-out;
+	}
+}
+
+@keyframes rk-enter {
+	from {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+}

package/src/theme/index.ts

@@ -0,0 +1,68 @@
+export type Theme = {
+	colors: {
+		accentColor: string;
+		accentColorForeground: string;
+		connectButtonBackground: string;
+		connectButtonText: string;
+		modalBackground: string;
+		modalText: string;
+	};
+	fonts: { body: string };
+	radii: { actionButton: string; connectButton: string; modal: string };
+};
+
+type ThemeOptions = {
+	accentColor?: string;
+	accentColorForeground?: string;
+	borderRadius?: 'large' | 'medium' | 'none' | 'small';
+	fontStack?: 'rounded' | 'system';
+};
+
+const radii = {
+	large: '20px',
+	medium: '12px',
+	none: '0',
+	small: '8px',
+} as const;
+
+function createTheme(dark: boolean, options: ThemeOptions = {}): Theme {
+	const radius = radii[options.borderRadius ?? 'large'];
+	return {
+		colors: {
+			accentColor: options.accentColor ?? '#0e76fd',
+			accentColorForeground: options.accentColorForeground ?? '#fff',
+			connectButtonBackground: dark ? '#1a1b1f' : '#fff',
+			connectButtonText: dark ? '#fff' : '#1a1b1f',
+			modalBackground: dark ? '#1a1b1f' : '#fff',
+			modalText: dark ? '#fff' : '#1a1b1f',
+		},
+		fonts: {
+			body:
+				options.fontStack === 'rounded'
+					? 'ui-rounded, "SF Pro Rounded", system-ui, sans-serif'
+					: 'system-ui, sans-serif',
+		},
+		radii: { actionButton: radius, connectButton: radius, modal: radius },
+	};
+}
+
+export function lightTheme(options?: ThemeOptions): Theme {
+	return createTheme(false, options);
+}
+
+export function darkTheme(options?: ThemeOptions): Theme {
+	return createTheme(true, options);
+}
+
+export function midnightTheme(options?: ThemeOptions): Theme {
+	return createTheme(true, {
+		accentColor: '#fff',
+		accentColorForeground: '#1a1b1f',
+		...options,
+	});
+}
+
+/** Octane extension with a purple rounded preset; not an upstream RainbowKit export. */
+export function rainbowTheme(options?: ThemeOptions): Theme {
+	return lightTheme({ accentColor: '#7b3fe4', fontStack: 'rounded', ...options });
+}

package/src/wallet-button.tsrx

@@ -0,0 +1,57 @@
+import { useConnect } from '@octanejs/wagmi';
+import { createElement, isChildrenBlock, useContext } from 'octane';
+import type { OctaneNode } from 'octane';
+import { RainbowKitContext } from './internal';
+
+export type WalletButtonProps = {
+	children?: | OctaneNode
+	| ((props: {
+			ready: boolean;
+			connect: () => void;
+			error: unknown | null;
+	  }) => OctaneNode);
+	wallet: string;
+};
+
+export function WalletButton(props: WalletButtonProps) {
+	const context = useContext(RainbowKitContext);
+	const mutation = useConnect();
+	const entry = context?.wallets.find(
+		(candidate) =>
+			candidate.identity === props.wallet || candidate.id === props.wallet ||
+				candidate.name === props.wallet,
+	);
+	const connector = entry?.connector;
+	const ready = Boolean(context?.mounted && connector);
+	const connect = () => {
+		if (!context?.mounted || !connector) return;
+		const token = context.beginConnecting();
+		void mutation.connectAsync({ connector }).catch(() => {}).finally(
+			() => context.endConnecting(token),
+		);
+	};
+	if (props.children != null) {
+		return typeof props.children === 'function' && !isChildrenBlock(props.children)
+			? props.children({ ready, connect, error: mutation.error })
+			: props.children;
+	}
+	return [
+		createElement(
+			'button',
+			{
+				type: 'button',
+				className: 'rk-wallet-button',
+				disabled: !ready || context?.connecting || mutation.isPending,
+				onClick: connect,
+			},
+			entry?.name ?? props.wallet,
+		),
+		mutation.error
+			? createElement(
+					'p',
+					{ role: 'alert', className: 'rk-wallet-error' },
+					mutation.error instanceof Error ? mutation.error.message : 'The wallet request failed.',
+				)
+			: null,
+	];
+}

package/status.json

@@ -0,0 +1,45 @@
+{
+  "upstream": {
+    "package": "@rainbow-me/rainbowkit",
+    "version": "2.2.11"
+  },
+  "surface": "Octane-native RainbowKitProvider, ConnectButton and ConnectButton.Custom, WalletButton, connect/account/chain modal hooks, connector selection, account/chain actions, native accessible dialogs, and light/dark/midnight themes.",
+  "divergences": [
+    "IMPORTANT: upstream RainbowKit 2.2.11 declares wagmi ^2.9.0. This adapter intentionally consumes @octanejs/wagmi v3 and is not drop-in dependency or peer-range parity.",
+    "The React DOM and vanilla-extract implementation is replaced by native Octane TSRX, DOM events, focus/scroll containment, and CSS custom properties.",
+    "The wallet list merges optional configured descriptors with the enclosing Wagmi v3 connector list, deduplicated by canonical connector uid with explicit id/name fallback. Unavailable configured entries remain visible with a reason. RainbowKit wallet factories, vendor SDKs, and WalletConnect project configuration remain application-owned.",
+    "Authentication, recent transactions, ENS/avatar resolution, localization, cool mode, account avatars/balances, chain icons, and pixel-identical upstream themes are unsupported and their upstream props are not accepted.",
+    "rainbowTheme is an explicitly documented Octane-only purple/rounded preset; it is not an upstream RainbowKit export."
+  ],
+  "ssr": "The provider and controls emit deterministic disconnected markup without browser wallet access. Connector discovery and live Wagmi state become authoritative after hydration; no hydrated UI state authorizes wallet actions.",
+  "verified": "2026-07-29",
+  "provenance": {
+    "source": "https://github.com/rainbow-me/rainbowkit",
+    "license": "MIT"
+  },
+  "supportedExports": [
+    "RainbowKitProvider",
+    "ConnectButton",
+    "ConnectButton.Custom",
+    "WalletButton",
+    "useConnectModal",
+    "useAccountModal",
+    "useChainModal",
+    "lightTheme",
+    "darkTheme",
+    "midnightTheme",
+    "rainbowTheme"
+  ],
+  "unsupported": [
+    "wallet factory catalogue",
+    "authentication adapter",
+    "recent transactions",
+    "ENS and avatar resolution",
+    "localization",
+    "cool mode",
+    "pixel-identical themes",
+    "account avatars and balances",
+    "chain icons",
+    "React DOM internals"
+  ]
+}