@hai3/react 0.3.0-alpha.0 → 0.4.0-alpha.1

package/dist/types.cjs.map

@@ -1 +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// Language is imported from @hai3/framework\ntype TranslationParams = Record<string, string | number | boolean>;\n\n// ============================================================================\n// HAI3 Provider Props\n// ============================================================================\n\n/**\n * Router configuration type\n */\nexport type RouterType = 'browser' | 'hash' | 'memory';\n\n/**\n * Router configuration\n */\nexport interface RouterConfig {\n  /** Router type - browser (default), hash, or memory */\n  type?: RouterType;\n  /** Auto-navigate to first screen on load (default: true) */\n  autoNavigate?: boolean;\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 * // With router configuration\n * <HAI3Provider router={{ type: 'hash' }}>\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  /** Router configuration */\n  router?: RouterConfig;\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, optionally with route params */\n  navigateToScreen: (screensetId: string, screenId: string, params?: Record<string, 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// 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"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"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  Formatters,\n} from '@hai3/framework';\nimport type { MfeContextValue } from './mfe/MfeContext';\n\n// Re-export imported types for convenience\nexport type { HAI3Config, HAI3App };\n\n// ============================================================================\n// Type Aliases\n// ============================================================================\n\n// From @hai3/store\ntype Selector<TResult, TState = RootState> = (state: TState) => TResult;\n\n// Language is 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 * // With pre-built app\n * const app = createHAI3().use(screensets()).use(microfrontends()).build();\n * <HAI3Provider app={app}>\n *   <App />\n * </HAI3Provider>\n *\n * // With MFE bridge (for MFE components)\n * <HAI3Provider mfeBridge={{ bridge, extensionId, domainId }}>\n *   <MyMfeApp />\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  /** MFE bridge context (for MFE components) */\n  mfeBridge?: MfeContextValue;\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) => 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 * 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 * useFormatters Hook Return Type\n * Locale-aware formatters (locale from i18nRegistry.getLanguage()).\n * References @hai3/i18n Formatters so signatures stay in sync.\n */\nexport type UseFormattersReturn = Formatters;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/types.d.cts

@@ -1,238 +1,3 @@
-import { ReactNode } from 'react';
-import { HAI3Config, HAI3App, RootState, Language, 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>;
-/**
- * Router configuration type
- */
-type RouterType = 'browser' | 'hash' | 'memory';
-/**
- * Router configuration
- */
-interface RouterConfig {
-    /** Router type - browser (default), hash, or memory */
-    type?: RouterType;
-    /** Auto-navigate to first screen on load (default: true) */
-    autoNavigate?: boolean;
-}
-/**
- * HAI3 Provider Props
- * Props for the main HAI3Provider component.
- *
- * @example
- * ```tsx
- * <HAI3Provider config={{ devMode: true }}>
- *   <App />
- * </HAI3Provider>
- *
- * // With router configuration
- * <HAI3Provider router={{ type: 'hash' }}>
- *   <App />
- * </HAI3Provider>
- * ```
- */
-interface HAI3ProviderProps {
-    /** Child components */
-    children: ReactNode;
-    /** HAI3 configuration */
-    config?: HAI3Config;
-    /** Pre-built HAI3 app instance (optional) */
-    app?: HAI3App;
-    /** Router configuration */
-    router?: RouterConfig;
-}
-/**
- * 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, optionally with route params */
-    navigateToScreen: (screensetId: string, screenId: string, params?: Record<string, 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);
-}
-/**
- * HAI3Provider Component Type
- */
-type HAI3ProviderComponent = React.FC<HAI3ProviderProps>;
-/**
- * AppRouter Component Type
- */
-type AppRouterComponent = React.FC<AppRouterProps>;
-
-export type { AppRouterComponent, AppRouterProps, HAI3ProviderComponent, HAI3ProviderProps, RouterConfig, RouterType, UseAppDispatchReturn, UseAppSelector, UseHAI3Return, UseLanguageReturn, UseMenuReturn, UseNavigationReturn, UseOverlayReturn, UsePopupReturn, UseScreenReturn, UseScreenTranslationsReturn, UseScreensetReturn, UseThemeReturn, UseTranslationReturn };
+import 'react';
+export { HAI3App, HAI3Config } from '@hai3/framework';
+export { H as HAI3ProviderProps, e as UseAppDispatchReturn, f as UseAppSelector, b as UseFormattersReturn, g as UseHAI3Return, a as UseScreenTranslationsReturn, c as UseThemeReturn, U as UseTranslationReturn } from './types-CcLYaLwF.cjs';

package/dist/types.d.ts

@@ -1,238 +1,3 @@
-import { ReactNode } from 'react';
-import { HAI3Config, HAI3App, RootState, Language, 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>;
-/**
- * Router configuration type
- */
-type RouterType = 'browser' | 'hash' | 'memory';
-/**
- * Router configuration
- */
-interface RouterConfig {
-    /** Router type - browser (default), hash, or memory */
-    type?: RouterType;
-    /** Auto-navigate to first screen on load (default: true) */
-    autoNavigate?: boolean;
-}
-/**
- * HAI3 Provider Props
- * Props for the main HAI3Provider component.
- *
- * @example
- * ```tsx
- * <HAI3Provider config={{ devMode: true }}>
- *   <App />
- * </HAI3Provider>
- *
- * // With router configuration
- * <HAI3Provider router={{ type: 'hash' }}>
- *   <App />
- * </HAI3Provider>
- * ```
- */
-interface HAI3ProviderProps {
-    /** Child components */
-    children: ReactNode;
-    /** HAI3 configuration */
-    config?: HAI3Config;
-    /** Pre-built HAI3 app instance (optional) */
-    app?: HAI3App;
-    /** Router configuration */
-    router?: RouterConfig;
-}
-/**
- * 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, optionally with route params */
-    navigateToScreen: (screensetId: string, screenId: string, params?: Record<string, 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);
-}
-/**
- * HAI3Provider Component Type
- */
-type HAI3ProviderComponent = React.FC<HAI3ProviderProps>;
-/**
- * AppRouter Component Type
- */
-type AppRouterComponent = React.FC<AppRouterProps>;
-
-export type { AppRouterComponent, AppRouterProps, HAI3ProviderComponent, HAI3ProviderProps, RouterConfig, RouterType, UseAppDispatchReturn, UseAppSelector, UseHAI3Return, UseLanguageReturn, UseMenuReturn, UseNavigationReturn, UseOverlayReturn, UsePopupReturn, UseScreenReturn, UseScreenTranslationsReturn, UseScreensetReturn, UseThemeReturn, UseTranslationReturn };
+import 'react';
+export { HAI3App, HAI3Config } from '@hai3/framework';
+export { H as HAI3ProviderProps, e as UseAppDispatchReturn, f as UseAppSelector, b as UseFormattersReturn, g as UseHAI3Return, a as UseScreenTranslationsReturn, c as UseThemeReturn, U as UseTranslationReturn } from './types-CcLYaLwF.js';

package/llms.txt

@@ -1,13 +1,13 @@
 # @hai3/react
 
-> React bindings, hooks, and components for HAI3 SDK. Provides type-safe integration with React applications.
+> React bindings, hooks, and components for HAI3 SDK. Provides type-safe integration with React applications including MFE (Microfrontend) support.
 
 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
+- [MFE Components](https://hai3.dev/docs/react/mfe): ExtensionDomainSlot, MfeProvider, RefContainerProvider
 
 ## Hooks
 
@@ -18,20 +18,28 @@ Part of the HAI3 React Layer (L3) - depends on @hai3/framework. Peer dependency
 | `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) |
 
+## MFE Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useMfeBridge()` | Access MFE bridge (child MFEs) |
+| `useSharedProperty()` | Subscribe to shared property changes |
+| `useHostAction()` | Invoke actions on host application |
+| `useDomainExtensions()` | Subscribe to extensions in a domain |
+
 ## Quick Start
 
 ```tsx
-import { HAI3Provider, AppRouter, useTranslation, useNavigation } from '@hai3/react';
+import { HAI3Provider, ExtensionDomainSlot, useTranslation, useHAI3 } from '@hai3/react';
 
 // Wrap app with provider
 function App() {
   return (
     <HAI3Provider>
       <Layout>
-        <AppRouter fallback={<Loading />} />
+        <ExtensionDomainSlot domainId="screen" fallback={<Loading />} />
       </Layout>
     </HAI3Provider>
   );
@@ -40,20 +48,75 @@ function App() {
 // Use hooks in components
 function MyComponent() {
   const { t, isRTL } = useTranslation();
-  const { navigateToScreen } = useNavigation();
+  const app = useHAI3();
 
   return (
     <div dir={isRTL ? 'rtl' : 'ltr'}>
       <h1>{t('common:title')}</h1>
-      <button onClick={() => navigateToScreen('demo', 'home')}>
-        Go Home
-      </button>
     </div>
   );
 }
 ```
 
+## MFE Patterns
+
+### Using ExtensionDomainSlot
+
+```tsx
+import { ExtensionDomainSlot } from '@hai3/react';
+
+function LayoutScreen() {
+  const screenContainerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <ExtensionDomainSlot
+      domainId="screen"
+      containerRef={screenContainerRef}
+      fallback={<Loading />}
+    />
+  );
+}
+```
+
+### Using MFE Bridge
+
+```tsx
+import { useMfeBridge, useSharedProperty, HAI3_ACTION_LOAD_EXT, HAI3_SHARED_PROPERTY_THEME } from '@hai3/react';
+
+function MyExtension() {
+  const bridge = useMfeBridge();
+  const theme = useSharedProperty(HAI3_SHARED_PROPERTY_THEME);
+
+  const handleAction = async () => {
+    await bridge.executeActionsChain({
+      action: { type: HAI3_ACTION_LOAD_EXT, target: 'screen', payload: { extensionId: 'other' } }
+    });
+  };
+
+  return <div style={{ backgroundColor: theme?.primaryColor }}>...</div>;
+}
+```
+
+### Subscribing to Domain Extensions
+
+```tsx
+import { useDomainExtensions } from '@hai3/react';
+
+function ScreenList() {
+  const screenExtensions = useDomainExtensions('screen');
+
+  return (
+    <ul>
+      {screenExtensions.map((ext) => (
+        <li key={ext.id}>{ext.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
 ## 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
+- [MFE Bridge Communication](https://hai3.dev/docs/react/mfe-bridge): Parent-child patterns

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hai3/react",
-  "version": "0.3.0-alpha.0",
+  "version": "0.4.0-alpha.1",
   "description": "React bindings and hooks for HAI3 framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -26,7 +26,9 @@
   ],
   "scripts": {
     "build": "tsup",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {},
   "devDependencies": {
@@ -35,7 +37,12 @@
     "react": "^19.2.4",
     "@types/react": "^19.0.8",
     "react-redux": "^9.1.0",
-    "@types/react-redux": "^7.1.33"
+    "@types/react-redux": "^7.1.33",
+    "vitest": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@testing-library/react": "^16.1.0",
+    "@reduxjs/toolkit": "^2.5.0",
+    "jsdom": "^25.0.1"
   },
   "peerDependencies": {
     "@hai3/framework": "*",