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

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.0",
   "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": "*",