[codex] Polish npm package structure

.changeset/polished-codex-js-package.md

@@ -1,5 +1,6 @@
 ---
-"@jrkropp/codex-js": patch
+"@jrkropp/codex-js": minor
+"@jrkropp/codex-js-react": minor
 ---
 
-Polish the npm package contract by limiting stable exports to the root, client, server, react, shadcn, testing, and styles surfaces; moving upstream Codex and T3 mirrors under explicit unstable subpaths; splitting browser and runtime build targets; documenting npm consumer setup; and adding packed consumer checks for server and Vite React usage.
+Restructure codex-js into a standard two-package workspace. `@jrkropp/codex-js` now owns the non-React runtime, client, server, and testing surfaces, while `@jrkropp/codex-js-react` owns the React components, shadcn-compatible exports, and generated stylesheet.

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+	"useTabs": true
+}

README.md

@@ -3,9 +3,13 @@
 `codex-js` is an unofficial TypeScript port of the Codex runtime for building
 Codex-backed web apps and interfaces.
 
-It provides a Codex-style app-server client, server/runtime primitives, React
-chat components, optional shadcn layout primitives, and examples that show how a
-host application supplies credentials, storage, prompts, tools, and routes.
+The workspace publishes two npm packages:
+
+- `@jrkropp/codex-js`: core client, server, runtime, and testing utilities.
+- `@jrkropp/codex-js-react`: React chat UI, shadcn-compatible primitives, and CSS.
+
+Examples show how a host application supplies credentials, storage, prompts,
+tools, and routes.
 
 This project is not affiliated with, endorsed by, or sponsored by OpenAI.
 
@@ -15,9 +19,16 @@ This project is not affiliated with, endorsed by, or sponsored by OpenAI.
 pnpm add @jrkropp/codex-js
 ```
 
+For React UI:
+
+```bash
+pnpm add @jrkropp/codex-js @jrkropp/codex-js-react react react-dom
+```
+
 ```tsx
 import { createCodexAppServerClient } from "@jrkropp/codex-js/client";
-import { CodexChat } from "@jrkropp/codex-js/react";
+import { CodexChat } from "@jrkropp/codex-js-react";
+import "@jrkropp/codex-js-react/styles.css";
 
 const appServer = createCodexAppServerClient({
 	url: async () => getCodexAppServerWebSocketUrl(),
@@ -30,12 +41,13 @@ export function Chat({ threadId }: { threadId: string }) {
 
 ## Public Surfaces
 
+- `@jrkropp/codex-js`: small root client conveniences.
 - `@jrkropp/codex-js/client`: browser app-server WebSocket client and protocol event helpers.
 - `@jrkropp/codex-js/server`: Codex runtime, app-server processors, stores, model transport, and server helpers.
-- `@jrkropp/codex-js/react`: React chat components, hooks, render state, and composer helpers.
-- `@jrkropp/codex-js/shadcn`: optional shadcn primitives for chat layout composition.
 - `@jrkropp/codex-js/testing`: test stores and package test helpers.
-- `@jrkropp/codex-js/styles.css`: Tailwind source hint for package classes.
+- `@jrkropp/codex-js-react`: React chat components, hooks, render state, and composer helpers.
+- `@jrkropp/codex-js-react/shadcn`: optional shadcn primitives for chat layout composition.
+- `@jrkropp/codex-js-react/styles.css`: generated package CSS.
 
 ## Development
 
@@ -44,17 +56,17 @@ pnpm install
 pnpm external:sync --codex /path/to/codex --t3 /path/to/t3-chat
 pnpm typecheck
 pnpm test
+pnpm test:pack
 pnpm build
 pnpm publint
 pnpm pack:dry-run
 pnpm dev:minimal
 ```
 
 Upstream reference source should stay local and unchecked-in under
-`external/`. The recommended setup is to sync local Codex and T3 source
-trees into `external/codex` and `external/t3code` with
-`pnpm external:sync`, then keep all actual product code and ports inside the
-tracked `packages/codex-js/src` tree.
+`external/`. The recommended setup is to sync local Codex and T3 source trees
+into `external/codex` and `external/t3code` with `pnpm external:sync`, then keep
+publishable package code inside the tracked `packages/*/src` trees.
 
 ## Releases
 

examples/codex-js-vite-aliases.ts

@@ -0,0 +1,51 @@
+import type { AliasOptions } from "vite";
+
+export const codexJsAliases = [
+	{
+		find: "@jrkropp/codex-js/client",
+		replacement: new URL(
+			"../packages/codex-js/src/client/index.ts",
+			import.meta.url,
+		).pathname,
+	},
+	{
+		find: "@jrkropp/codex-js/server",
+		replacement: new URL(
+			"../packages/codex-js/src/server/index.ts",
+			import.meta.url,
+		).pathname,
+	},
+	{
+		find: "@jrkropp/codex-js/testing",
+		replacement: new URL(
+			"../packages/codex-js/src/testing/index.ts",
+			import.meta.url,
+		).pathname,
+	},
+	{
+		find: "@jrkropp/codex-js-react/shadcn",
+		replacement: new URL(
+			"../packages/codex-js-react/src/shadcn/index.ts",
+			import.meta.url,
+		).pathname,
+	},
+	{
+		find: "@jrkropp/codex-js-react/styles.css",
+		replacement: new URL(
+			"../packages/codex-js-react/src/styles.css",
+			import.meta.url,
+		).pathname,
+	},
+	{
+		find: /^@jrkropp\/codex-js$/,
+		replacement: new URL("../packages/codex-js/src/index.ts", import.meta.url)
+			.pathname,
+	},
+	{
+		find: /^@jrkropp\/codex-js-react$/,
+		replacement: new URL(
+			"../packages/codex-js-react/src/index.ts",
+			import.meta.url,
+		).pathname,
+	},
+] satisfies AliasOptions;

examples/minimal-app-server/package.json

@@ -9,13 +9,13 @@
 	},
 	"dependencies": {
 		"@jrkropp/codex-js": "workspace:*",
+		"@jrkropp/codex-js-react": "workspace:*",
 		"@fontsource-variable/geist": "^5.2.8",
 		"@tailwindcss/vite": "^4.1.17",
 		"vite": "^6.4.2",
 		"typescript": "5.8.3",
 		"react": "19.2.1",
 		"react-dom": "19.2.1",
-		"shadcn": "^4.5.0",
 		"tailwindcss": "^4.1.17",
 		"tw-animate-css": "^1.4.0"
 	},

examples/minimal-app-server/src/main.tsx

@@ -13,8 +13,8 @@ import {
 	type CodexChatComposerSkill,
 	type CodexChatInteractionMode,
 	type CodexChatPendingRequestRenderContext,
-} from "@jrkropp/codex-js/react";
-import { createDefaultTurnStartParams } from "@jrkropp/codex-js/react";
+} from "@jrkropp/codex-js-react";
+import { createDefaultTurnStartParams } from "@jrkropp/codex-js-react";
 import {
 	billingInvoiceById,
 	billingSuggestedPrompts,

examples/minimal-app-server/src/styles.css

@@ -1,14 +1,6 @@
-@import "tailwindcss" source(".");
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
+@import "@jrkropp/codex-js-react/styles.css";
 @import "@fontsource-variable/geist";
 
-@custom-variant dark (&:is(.dark *));
-@source "../../../packages/codex-js/src/components";
-@source "../../../packages/codex-js/src/hooks";
-@source "../../../packages/codex-js/src/shadcn";
-@source "../../../packages/codex-js/src/upstream/t3code";
-
 :root {
 	--background: oklch(0.976 0.003 240);
 	--foreground: oklch(0.18 0.012 235);