fix(cli): dynamic import @inquirer modules to resolve CJS/ESM conflict

examples/openui-chat/package.json

@@ -10,17 +10,17 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@openuidev/cli": "workspace:*",
-    "@openuidev/react-ui": "workspace:*",
     "@openuidev/react-headless": "workspace:*",
     "@openuidev/react-lang": "workspace:*",
+    "@openuidev/react-ui": "workspace:*",
     "lucide-react": "^0.575.0",
     "next": "16.1.6",
     "openai": "^6.22.0",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
   "devDependencies": {
+    "@openuidev/cli": "workspace:*",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",

examples/openui-chat/src/generated/system-prompt.txt

@@ -61,7 +61,7 @@ TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?:
 Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string})
 SelectItem(value: string, label: string) — Option for Select
 DatePicker(name: string, mode: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string})
-Slider(name: string, variant: "continuous" | "discrete", min: number, max: number, step?: number, defaultValue?: number[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}) — Numeric slider input; supports continuous and discrete (stepped) variants
+Slider(name: string, variant: "continuous" | "discrete", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}) — Numeric slider input; supports continuous and discrete (stepped) variants
 CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string})
 CheckBoxItem(label: string, description: string, name: string, defaultChecked?: boolean)
 RadioGroup(name: string, items: RadioItem[], defaultValue?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string})

examples/openui-chat/src/hooks/use-system-theme.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useLayoutEffect, useState } from "react";
 
 type ThemeMode = "light" | "dark";
 
@@ -18,14 +18,14 @@ function getSystemMode(): ThemeMode {
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [mode, setMode] = useState<ThemeMode>(getSystemMode);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e: MediaQueryListEvent) => setMode(e.matches ? "dark" : "light");
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     document.body.setAttribute("data-theme", mode);
   }, [mode]);
 

packages/openui-cli/src/lib/resolve-args.ts

@@ -1,6 +1,3 @@
-import { ExitPromptError } from "@inquirer/core";
-import { input, select } from "@inquirer/prompts";
-
 type InputPromptConfig = {
   type: "input";
   message: string;
@@ -22,6 +19,7 @@ type ResolvedArgs<T extends Record<string, ArgDef<unknown>>> = {
 };
 
 async function resolveOne(prompt: PromptConfig): Promise<string> {
+  const { input, select } = await import("@inquirer/prompts");
   if (prompt.type === "select") {
     return select({ message: prompt.message, choices: prompt.choices });
   }
@@ -48,6 +46,7 @@ export async function resolveArgs<T extends Record<string, ArgDef<unknown>>>(
     try {
       result[key] = await resolveOne(def.prompt);
     } catch (err) {
+      const { ExitPromptError } = await import("@inquirer/core");
       if (err instanceof ExitPromptError) {
         process.exit(0);
       }

packages/openui-cli/tsconfig.json

@@ -6,8 +6,8 @@
   "compilerOptions": {
     "target": "es2022",
     "lib": ["es2022"],
-    "module": "commonjs",
-    "moduleResolution": "node",
+    "module": "node16",
+    "moduleResolution": "node16",
     "outDir": "./dist",
     "rootDir": "./src",
     "types": ["node"]