@hai3/react 0.2.0-alpha.0

package/dist/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/dist/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["/**\n * @hai3/react - Type Definitions\n *\n * Core types for HAI3 React bindings.\n * Provides type-safe hooks and components.\n *\n * Now using real imports from @hai3/framework since packages are built together.\n */\n\nimport type { ReactNode } from 'react';\nimport type {\n  HAI3Config,\n  HAI3App,\n  RootState,\n  Language,\n  LanguageMetadata,\n  MenuItemConfig,\n  ScreensetDefinition,\n  ScreensetCategory,\n} from '@hai3/framework';\n\n// Re-export imported types for convenience\nexport type { HAI3Config, HAI3App, MenuItemConfig, ScreensetDefinition, ScreensetCategory };\n\n// ============================================================================\n// Type Aliases\n// ============================================================================\n\n// From @hai3/store\ntype Selector<TResult, TState = RootState> = (state: TState) => TResult;\n\n// From @hai3/i18n (Language is now imported from @hai3/framework)\ntype TranslationParams = Record<string, string | number | boolean>;\n\n// ============================================================================\n// HAI3 Provider Props\n// ============================================================================\n\n/**\n * HAI3 Provider Props\n * Props for the main HAI3Provider component.\n *\n * @example\n * ```tsx\n * <HAI3Provider config={{ devMode: true }}>\n *   <App />\n * </HAI3Provider>\n * ```\n */\nexport interface HAI3ProviderProps {\n  /** Child components */\n  children: ReactNode;\n  /** HAI3 configuration */\n  config?: HAI3Config;\n  /** Pre-built HAI3 app instance (optional) */\n  app?: HAI3App;\n}\n\n// ============================================================================\n// Hook Return Types\n// ============================================================================\n\n/**\n * useHAI3 Hook Return Type\n * Returns the HAI3 app instance from context.\n */\nexport type UseHAI3Return = HAI3App;\n\n/**\n * useAppSelector Hook\n * Type-safe selector hook for Redux state.\n *\n * @template TResult - The result type of the selector\n */\nexport type UseAppSelector = <TResult>(selector: Selector<TResult>) => TResult;\n\n/**\n * useAppDispatch Hook Return Type\n * Returns the typed dispatch function.\n */\nexport type UseAppDispatchReturn = (action: unknown) => unknown;\n\n/**\n * useTranslation Hook Return Type\n * Translation utilities.\n */\nexport interface UseTranslationReturn {\n  /** Translate a key */\n  t: (key: string, params?: TranslationParams) => string;\n  /** Current language */\n  language: Language | null;\n  /** Change language */\n  setLanguage: (language: Language) => Promise<void>;\n  /** Check if current language is RTL */\n  isRTL: boolean;\n}\n\n/**\n * useScreenTranslations Hook Return Type\n * Screen-level translation loading state.\n */\nexport interface UseScreenTranslationsReturn {\n  /** Whether translations are loaded */\n  isLoaded: boolean;\n  /** Loading error (if any) */\n  error: Error | null;\n}\n\n/**\n * useLanguage Hook Return Type\n * Language selection utilities.\n */\nexport interface UseLanguageReturn {\n  /** Current language */\n  current: Language | null;\n  /** All supported languages */\n  supported: LanguageMetadata[];\n  /** Change language */\n  setLanguage: (language: Language) => Promise<void>;\n  /** Check if current language is RTL */\n  isRTL: boolean;\n}\n\n/**\n * useTheme Hook Return Type\n * Theme utilities.\n */\nexport interface UseThemeReturn {\n  /** Current theme ID */\n  currentTheme: string | undefined;\n  /** All available themes */\n  themes: Array<{ id: string; name: string }>;\n  /** Change theme */\n  setTheme: (themeId: string) => void;\n}\n\n/**\n * useMenu Hook Return Type\n * Menu state and actions.\n */\nexport interface UseMenuReturn {\n  /** Menu items */\n  items: MenuItemConfig[];\n  /** Whether menu is collapsed */\n  collapsed: boolean;\n  /** Whether menu is visible */\n  visible: boolean;\n  /** Toggle menu collapse */\n  toggle: () => void;\n  /** Set collapsed state */\n  setCollapsed: (collapsed: boolean) => void;\n}\n\n/**\n * useScreen Hook Return Type\n * Current screen state.\n */\nexport interface UseScreenReturn {\n  /** Active screen ID */\n  activeScreen: string | null;\n  /** Whether screen is loading */\n  isLoading: boolean;\n}\n\n/**\n * useNavigation Hook Return Type\n * Navigation utilities.\n */\nexport interface UseNavigationReturn {\n  /** Navigate to a screen */\n  navigateToScreen: (screensetId: string, screenId: string) => void;\n  /** Navigate to a screenset (uses default screen) */\n  navigateToScreenset: (screensetId: string) => void;\n  /** Current screenset ID */\n  currentScreenset: string | null;\n  /** Current screen ID */\n  currentScreen: string | null;\n}\n\n/**\n * useScreenset Hook Return Type\n * Current screenset state.\n */\nexport interface UseScreensetReturn {\n  /** Current screenset */\n  screenset: ScreensetDefinition | undefined;\n  /** Current screenset ID */\n  screensetId: string | null;\n  /** Current category */\n  category: ScreensetCategory | null;\n}\n\n/**\n * usePopup Hook Return Type\n * Popup utilities.\n */\nexport interface UsePopupReturn {\n  /** Show a popup */\n  show: (config: { id: string; title?: string; content?: () => Promise<{ default: React.ComponentType }> }) => void;\n  /** Hide current popup */\n  hide: () => void;\n  /** Hide all popups */\n  hideAll: () => void;\n  /** Whether any popup is open */\n  isOpen: boolean;\n  /** Current popup stack */\n  stack: Array<{ id: string; title?: string }>;\n}\n\n/**\n * useOverlay Hook Return Type\n * Overlay utilities.\n */\nexport interface UseOverlayReturn {\n  /** Show an overlay */\n  show: (config: { id: string; content?: () => Promise<{ default: React.ComponentType }> }) => void;\n  /** Hide current overlay */\n  hide: () => void;\n  /** Whether any overlay is open */\n  isOpen: boolean;\n}\n\n// ============================================================================\n// App Router Props\n// ============================================================================\n\n/**\n * App Router Props\n * Props for the AppRouter component.\n */\nexport interface AppRouterProps {\n  /** Fallback component while loading */\n  fallback?: ReactNode;\n  /** Error boundary fallback */\n  errorFallback?: ReactNode | ((error: Error) => ReactNode);\n}\n\n// ============================================================================\n// Text Loader Props\n// ============================================================================\n\n/**\n * Text Loader Props\n * Props for TextLoader component that prevents flash of untranslated content.\n */\nexport interface TextLoaderProps {\n  /** Child content to render when translations are loaded */\n  children: ReactNode;\n  /** Fallback while loading (alternative to skeleton) */\n  fallback?: ReactNode;\n  /**\n   * Optional className for the skeleton loader\n   * Use this to match the expected size of the text\n   * @example \"h-8 w-48\" for a heading\n   * @example \"h-4 w-32\" for a button label\n   */\n  skeletonClassName?: string;\n  /** Optional className for the wrapper div */\n  className?: string;\n  /**\n   * If true, skeleton inherits the text color instead of using bg-muted\n   * Use this for buttons, menu items, and colored text\n   * @default false\n   */\n  inheritColor?: boolean;\n}\n\n// ============================================================================\n// Component Types\n// ============================================================================\n\n/**\n * HAI3Provider Component Type\n */\nexport type HAI3ProviderComponent = React.FC<HAI3ProviderProps>;\n\n/**\n * AppRouter Component Type\n */\nexport type AppRouterComponent = React.FC<AppRouterProps>;\n\n/**\n * TextLoader Component Type\n */\nexport type TextLoaderComponent = React.FC<TextLoaderProps>;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/types.d.cts

@@ -0,0 +1,247 @@
+import { ReactNode } from 'react';
+import { HAI3Config, HAI3App, Language, RootState, LanguageMetadata, MenuItemConfig, ScreensetDefinition, ScreensetCategory } from '@hai3/framework';
+export { HAI3App, HAI3Config, MenuItemConfig, ScreensetCategory, ScreensetDefinition } from '@hai3/framework';
+
+/**
+ * @hai3/react - Type Definitions
+ *
+ * Core types for HAI3 React bindings.
+ * Provides type-safe hooks and components.
+ *
+ * Now using real imports from @hai3/framework since packages are built together.
+ */
+
+type Selector<TResult, TState = RootState> = (state: TState) => TResult;
+type TranslationParams = Record<string, string | number | boolean>;
+/**
+ * HAI3 Provider Props
+ * Props for the main HAI3Provider component.
+ *
+ * @example
+ * ```tsx
+ * <HAI3Provider config={{ devMode: true }}>
+ *   <App />
+ * </HAI3Provider>
+ * ```
+ */
+interface HAI3ProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** HAI3 configuration */
+    config?: HAI3Config;
+    /** Pre-built HAI3 app instance (optional) */
+    app?: HAI3App;
+}
+/**
+ * useHAI3 Hook Return Type
+ * Returns the HAI3 app instance from context.
+ */
+type UseHAI3Return = HAI3App;
+/**
+ * useAppSelector Hook
+ * Type-safe selector hook for Redux state.
+ *
+ * @template TResult - The result type of the selector
+ */
+type UseAppSelector = <TResult>(selector: Selector<TResult>) => TResult;
+/**
+ * useAppDispatch Hook Return Type
+ * Returns the typed dispatch function.
+ */
+type UseAppDispatchReturn = (action: unknown) => unknown;
+/**
+ * useTranslation Hook Return Type
+ * Translation utilities.
+ */
+interface UseTranslationReturn {
+    /** Translate a key */
+    t: (key: string, params?: TranslationParams) => string;
+    /** Current language */
+    language: Language | null;
+    /** Change language */
+    setLanguage: (language: Language) => Promise<void>;
+    /** Check if current language is RTL */
+    isRTL: boolean;
+}
+/**
+ * useScreenTranslations Hook Return Type
+ * Screen-level translation loading state.
+ */
+interface UseScreenTranslationsReturn {
+    /** Whether translations are loaded */
+    isLoaded: boolean;
+    /** Loading error (if any) */
+    error: Error | null;
+}
+/**
+ * useLanguage Hook Return Type
+ * Language selection utilities.
+ */
+interface UseLanguageReturn {
+    /** Current language */
+    current: Language | null;
+    /** All supported languages */
+    supported: LanguageMetadata[];
+    /** Change language */
+    setLanguage: (language: Language) => Promise<void>;
+    /** Check if current language is RTL */
+    isRTL: boolean;
+}
+/**
+ * useTheme Hook Return Type
+ * Theme utilities.
+ */
+interface UseThemeReturn {
+    /** Current theme ID */
+    currentTheme: string | undefined;
+    /** All available themes */
+    themes: Array<{
+        id: string;
+        name: string;
+    }>;
+    /** Change theme */
+    setTheme: (themeId: string) => void;
+}
+/**
+ * useMenu Hook Return Type
+ * Menu state and actions.
+ */
+interface UseMenuReturn {
+    /** Menu items */
+    items: MenuItemConfig[];
+    /** Whether menu is collapsed */
+    collapsed: boolean;
+    /** Whether menu is visible */
+    visible: boolean;
+    /** Toggle menu collapse */
+    toggle: () => void;
+    /** Set collapsed state */
+    setCollapsed: (collapsed: boolean) => void;
+}
+/**
+ * useScreen Hook Return Type
+ * Current screen state.
+ */
+interface UseScreenReturn {
+    /** Active screen ID */
+    activeScreen: string | null;
+    /** Whether screen is loading */
+    isLoading: boolean;
+}
+/**
+ * useNavigation Hook Return Type
+ * Navigation utilities.
+ */
+interface UseNavigationReturn {
+    /** Navigate to a screen */
+    navigateToScreen: (screensetId: string, screenId: string) => void;
+    /** Navigate to a screenset (uses default screen) */
+    navigateToScreenset: (screensetId: string) => void;
+    /** Current screenset ID */
+    currentScreenset: string | null;
+    /** Current screen ID */
+    currentScreen: string | null;
+}
+/**
+ * useScreenset Hook Return Type
+ * Current screenset state.
+ */
+interface UseScreensetReturn {
+    /** Current screenset */
+    screenset: ScreensetDefinition | undefined;
+    /** Current screenset ID */
+    screensetId: string | null;
+    /** Current category */
+    category: ScreensetCategory | null;
+}
+/**
+ * usePopup Hook Return Type
+ * Popup utilities.
+ */
+interface UsePopupReturn {
+    /** Show a popup */
+    show: (config: {
+        id: string;
+        title?: string;
+        content?: () => Promise<{
+            default: React.ComponentType;
+        }>;
+    }) => void;
+    /** Hide current popup */
+    hide: () => void;
+    /** Hide all popups */
+    hideAll: () => void;
+    /** Whether any popup is open */
+    isOpen: boolean;
+    /** Current popup stack */
+    stack: Array<{
+        id: string;
+        title?: string;
+    }>;
+}
+/**
+ * useOverlay Hook Return Type
+ * Overlay utilities.
+ */
+interface UseOverlayReturn {
+    /** Show an overlay */
+    show: (config: {
+        id: string;
+        content?: () => Promise<{
+            default: React.ComponentType;
+        }>;
+    }) => void;
+    /** Hide current overlay */
+    hide: () => void;
+    /** Whether any overlay is open */
+    isOpen: boolean;
+}
+/**
+ * App Router Props
+ * Props for the AppRouter component.
+ */
+interface AppRouterProps {
+    /** Fallback component while loading */
+    fallback?: ReactNode;
+    /** Error boundary fallback */
+    errorFallback?: ReactNode | ((error: Error) => ReactNode);
+}
+/**
+ * Text Loader Props
+ * Props for TextLoader component that prevents flash of untranslated content.
+ */
+interface TextLoaderProps {
+    /** Child content to render when translations are loaded */
+    children: ReactNode;
+    /** Fallback while loading (alternative to skeleton) */
+    fallback?: ReactNode;
+    /**
+     * Optional className for the skeleton loader
+     * Use this to match the expected size of the text
+     * @example "h-8 w-48" for a heading
+     * @example "h-4 w-32" for a button label
+     */
+    skeletonClassName?: string;
+    /** Optional className for the wrapper div */
+    className?: string;
+    /**
+     * If true, skeleton inherits the text color instead of using bg-muted
+     * Use this for buttons, menu items, and colored text
+     * @default false
+     */
+    inheritColor?: boolean;
+}
+/**
+ * HAI3Provider Component Type
+ */
+type HAI3ProviderComponent = React.FC<HAI3ProviderProps>;
+/**
+ * AppRouter Component Type
+ */
+type AppRouterComponent = React.FC<AppRouterProps>;
+/**
+ * TextLoader Component Type
+ */
+type TextLoaderComponent = React.FC<TextLoaderProps>;
+
+export type { AppRouterComponent, AppRouterProps, HAI3ProviderComponent, HAI3ProviderProps, TextLoaderComponent, TextLoaderProps, UseAppDispatchReturn, UseAppSelector, UseHAI3Return, UseLanguageReturn, UseMenuReturn, UseNavigationReturn, UseOverlayReturn, UsePopupReturn, UseScreenReturn, UseScreenTranslationsReturn, UseScreensetReturn, UseThemeReturn, UseTranslationReturn };

package/dist/types.d.ts

@@ -0,0 +1,247 @@
+import { ReactNode } from 'react';
+import { HAI3Config, HAI3App, Language, RootState, LanguageMetadata, MenuItemConfig, ScreensetDefinition, ScreensetCategory } from '@hai3/framework';
+export { HAI3App, HAI3Config, MenuItemConfig, ScreensetCategory, ScreensetDefinition } from '@hai3/framework';
+
+/**
+ * @hai3/react - Type Definitions
+ *
+ * Core types for HAI3 React bindings.
+ * Provides type-safe hooks and components.
+ *
+ * Now using real imports from @hai3/framework since packages are built together.
+ */
+
+type Selector<TResult, TState = RootState> = (state: TState) => TResult;
+type TranslationParams = Record<string, string | number | boolean>;
+/**
+ * HAI3 Provider Props
+ * Props for the main HAI3Provider component.
+ *
+ * @example
+ * ```tsx
+ * <HAI3Provider config={{ devMode: true }}>
+ *   <App />
+ * </HAI3Provider>
+ * ```
+ */
+interface HAI3ProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** HAI3 configuration */
+    config?: HAI3Config;
+    /** Pre-built HAI3 app instance (optional) */
+    app?: HAI3App;
+}
+/**
+ * useHAI3 Hook Return Type
+ * Returns the HAI3 app instance from context.
+ */
+type UseHAI3Return = HAI3App;
+/**
+ * useAppSelector Hook
+ * Type-safe selector hook for Redux state.
+ *
+ * @template TResult - The result type of the selector
+ */
+type UseAppSelector = <TResult>(selector: Selector<TResult>) => TResult;
+/**
+ * useAppDispatch Hook Return Type
+ * Returns the typed dispatch function.
+ */
+type UseAppDispatchReturn = (action: unknown) => unknown;
+/**
+ * useTranslation Hook Return Type
+ * Translation utilities.
+ */
+interface UseTranslationReturn {
+    /** Translate a key */
+    t: (key: string, params?: TranslationParams) => string;
+    /** Current language */
+    language: Language | null;
+    /** Change language */
+    setLanguage: (language: Language) => Promise<void>;
+    /** Check if current language is RTL */
+    isRTL: boolean;
+}
+/**
+ * useScreenTranslations Hook Return Type
+ * Screen-level translation loading state.
+ */
+interface UseScreenTranslationsReturn {
+    /** Whether translations are loaded */
+    isLoaded: boolean;
+    /** Loading error (if any) */
+    error: Error | null;
+}
+/**
+ * useLanguage Hook Return Type
+ * Language selection utilities.
+ */
+interface UseLanguageReturn {
+    /** Current language */
+    current: Language | null;
+    /** All supported languages */
+    supported: LanguageMetadata[];
+    /** Change language */
+    setLanguage: (language: Language) => Promise<void>;
+    /** Check if current language is RTL */
+    isRTL: boolean;
+}
+/**
+ * useTheme Hook Return Type
+ * Theme utilities.
+ */
+interface UseThemeReturn {
+    /** Current theme ID */
+    currentTheme: string | undefined;
+    /** All available themes */
+    themes: Array<{
+        id: string;
+        name: string;
+    }>;
+    /** Change theme */
+    setTheme: (themeId: string) => void;
+}
+/**
+ * useMenu Hook Return Type
+ * Menu state and actions.
+ */
+interface UseMenuReturn {
+    /** Menu items */
+    items: MenuItemConfig[];
+    /** Whether menu is collapsed */
+    collapsed: boolean;
+    /** Whether menu is visible */
+    visible: boolean;
+    /** Toggle menu collapse */
+    toggle: () => void;
+    /** Set collapsed state */
+    setCollapsed: (collapsed: boolean) => void;
+}
+/**
+ * useScreen Hook Return Type
+ * Current screen state.
+ */
+interface UseScreenReturn {
+    /** Active screen ID */
+    activeScreen: string | null;
+    /** Whether screen is loading */
+    isLoading: boolean;
+}
+/**
+ * useNavigation Hook Return Type
+ * Navigation utilities.
+ */
+interface UseNavigationReturn {
+    /** Navigate to a screen */
+    navigateToScreen: (screensetId: string, screenId: string) => void;
+    /** Navigate to a screenset (uses default screen) */
+    navigateToScreenset: (screensetId: string) => void;
+    /** Current screenset ID */
+    currentScreenset: string | null;
+    /** Current screen ID */
+    currentScreen: string | null;
+}
+/**
+ * useScreenset Hook Return Type
+ * Current screenset state.
+ */
+interface UseScreensetReturn {
+    /** Current screenset */
+    screenset: ScreensetDefinition | undefined;
+    /** Current screenset ID */
+    screensetId: string | null;
+    /** Current category */
+    category: ScreensetCategory | null;
+}
+/**
+ * usePopup Hook Return Type
+ * Popup utilities.
+ */
+interface UsePopupReturn {
+    /** Show a popup */
+    show: (config: {
+        id: string;
+        title?: string;
+        content?: () => Promise<{
+            default: React.ComponentType;
+        }>;
+    }) => void;
+    /** Hide current popup */
+    hide: () => void;
+    /** Hide all popups */
+    hideAll: () => void;
+    /** Whether any popup is open */
+    isOpen: boolean;
+    /** Current popup stack */
+    stack: Array<{
+        id: string;
+        title?: string;
+    }>;
+}
+/**
+ * useOverlay Hook Return Type
+ * Overlay utilities.
+ */
+interface UseOverlayReturn {
+    /** Show an overlay */
+    show: (config: {
+        id: string;
+        content?: () => Promise<{
+            default: React.ComponentType;
+        }>;
+    }) => void;
+    /** Hide current overlay */
+    hide: () => void;
+    /** Whether any overlay is open */
+    isOpen: boolean;
+}
+/**
+ * App Router Props
+ * Props for the AppRouter component.
+ */
+interface AppRouterProps {
+    /** Fallback component while loading */
+    fallback?: ReactNode;
+    /** Error boundary fallback */
+    errorFallback?: ReactNode | ((error: Error) => ReactNode);
+}
+/**
+ * Text Loader Props
+ * Props for TextLoader component that prevents flash of untranslated content.
+ */
+interface TextLoaderProps {
+    /** Child content to render when translations are loaded */
+    children: ReactNode;
+    /** Fallback while loading (alternative to skeleton) */
+    fallback?: ReactNode;
+    /**
+     * Optional className for the skeleton loader
+     * Use this to match the expected size of the text
+     * @example "h-8 w-48" for a heading
+     * @example "h-4 w-32" for a button label
+     */
+    skeletonClassName?: string;
+    /** Optional className for the wrapper div */
+    className?: string;
+    /**
+     * If true, skeleton inherits the text color instead of using bg-muted
+     * Use this for buttons, menu items, and colored text
+     * @default false
+     */
+    inheritColor?: boolean;
+}
+/**
+ * HAI3Provider Component Type
+ */
+type HAI3ProviderComponent = React.FC<HAI3ProviderProps>;
+/**
+ * AppRouter Component Type
+ */
+type AppRouterComponent = React.FC<AppRouterProps>;
+/**
+ * TextLoader Component Type
+ */
+type TextLoaderComponent = React.FC<TextLoaderProps>;
+
+export type { AppRouterComponent, AppRouterProps, HAI3ProviderComponent, HAI3ProviderProps, TextLoaderComponent, TextLoaderProps, UseAppDispatchReturn, UseAppSelector, UseHAI3Return, UseLanguageReturn, UseMenuReturn, UseNavigationReturn, UseOverlayReturn, UsePopupReturn, UseScreenReturn, UseScreenTranslationsReturn, UseScreensetReturn, UseThemeReturn, UseTranslationReturn };

package/dist/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/llms.txt

@@ -0,0 +1,60 @@
+# @hai3/react
+
+> React bindings, hooks, and components for HAI3 SDK. Provides type-safe integration with React applications.
+
+Part of the HAI3 React Layer (L3) - depends on @hai3/framework. Peer dependency on react and react-dom.
+
+## Core API
+
+- [HAI3Provider](https://hai3.dev/docs/react/provider): Root context provider
+- [AppRouter](https://hai3.dev/docs/react/router): Screen rendering with lazy loading
+- [TextLoader](https://hai3.dev/docs/react/textloader): Prevents flash of untranslated content
+
+## Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useHAI3()` | Access app instance |
+| `useAppDispatch()` | Type-safe dispatch |
+| `useAppSelector()` | Type-safe selector |
+| `useTranslation()` | Translation utilities (t, language, setLanguage, isRTL) |
+| `useScreenTranslations()` | Lazy load screen translations |
+| `useNavigation()` | Navigate between screens |
+| `useTheme()` | Theme utilities (currentTheme, themes, setTheme) |
+
+## Quick Start
+
+```tsx
+import { HAI3Provider, AppRouter, useTranslation, useNavigation } from '@hai3/react';
+
+// Wrap app with provider
+function App() {
+  return (
+    <HAI3Provider>
+      <Layout>
+        <AppRouter fallback={<Loading />} />
+      </Layout>
+    </HAI3Provider>
+  );
+}
+
+// Use hooks in components
+function MyComponent() {
+  const { t, isRTL } = useTranslation();
+  const { navigateToScreen } = useNavigation();
+
+  return (
+    <div dir={isRTL ? 'rtl' : 'ltr'}>
+      <h1>{t('common:title')}</h1>
+      <button onClick={() => navigateToScreen('demo', 'home')}>
+        Go Home
+      </button>
+    </div>
+  );
+}
+```
+
+## Optional
+
+- [Screen Translations](https://hai3.dev/docs/react/translations): Per-screen lazy loading
+- [Custom Hooks](https://hai3.dev/docs/react/hooks): Building on HAI3 hooks

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@hai3/react",
+  "version": "0.2.0-alpha.0",
+  "description": "React bindings and hooks for HAI3 framework",
+  "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"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "CLAUDE.md",
+    "llms.txt",
+    "commands"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.2",
+    "react": "^18.3.1",
+    "@types/react": "^18.3.3",
+    "react-redux": "^9.1.0",
+    "@types/react-redux": "^7.1.33"
+  },
+  "peerDependencies": {
+    "@hai3/framework": "*",
+    "react": ">=18.0.0",
+    "react-redux": ">=8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@hai3/framework": { "optional": false },
+    "react": { "optional": false },
+    "react-redux": { "optional": false }
+  },
+  "keywords": [
+    "hai3",
+    "react",
+    "hooks",
+    "provider",
+    "typescript"
+  ],
+  "author": "HAI3",
+  "license": "Apache-2.0"
+}