@hai3/react 0.2.0-alpha.4 → 0.4.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,11 +1,10 @@
1
1
  import * as React from 'react';
2
- import React__default, { ReactNode } from 'react';
3
- import { HAI3ProviderProps, UseTranslationReturn, UseScreenTranslationsReturn, UseNavigationReturn, UseThemeReturn, AppRouterProps } from './types.cjs';
4
- export { AppRouterComponent, HAI3ProviderComponent, RouterConfig, RouterType, UseAppDispatchReturn, UseAppSelector, UseHAI3Return, UseLanguageReturn, UseMenuReturn, UseOverlayReturn, UsePopupReturn, UseScreenReturn, UseScreensetReturn } from './types.cjs';
5
- import { HAI3App, AppDispatch, RootState, TranslationMap, TranslationLoader, RouteParams as RouteParams$1, EventPayloadMap as EventPayloadMap$1 } from '@hai3/framework';
6
- export { ACCOUNTS_DOMAIN, ApiPlugin, ApiPluginBase, ApiPluginErrorContext, ApiProtocol, ApiRequestContext, ApiResponseContext, ApiServiceConfig, AppDispatch, BaseApiService, BasePluginHooks, ChangeThemePayload, EventHandler, EventSourceLike, FooterConfig, FooterState, HAI3App, HAI3AppBuilder, HAI3Config, HAI3Plugin, HAI3Store, HeaderConfig, HeaderState, HeaderUser, I18nConfig, I18nRegistry, I18nRegistryImpl, I18nRegistryType, JsonCompatible, JsonObject, JsonPrimitive, JsonValue, LAYOUT_SLICE_NAME, Language, LanguageDisplayMode, LanguageMetadata, LayoutDomain, LayoutDomainReducers, LayoutDomainState, LayoutState, MOCK_PLUGIN, MenuItem, MenuItemConfig, MenuScreenItem, MenuState, MockEventSource, MockEvents, MockMap, MockState, MockTogglePayload, NavigateToScreenPayload, NavigateToScreensetPayload, OverlayConfig, OverlayState, PluginClass, PluginFactory, PluginLifecycle, PluginProvides, PopupConfig, PopupSliceState, PopupState, Preset, Presets, ProtocolClass, ProtocolPluginType, RestMockConfig, RestMockPlugin, RestPlugin, RestPluginHooks, RestPluginWithConfig, RestProtocol, RestProtocolConfig, RestRequestContext, RestResponseContext, RestShortCircuitResponse, RootState, RootStateWithLayout, RouteRegistry, SUPPORTED_LANGUAGES, ScreenConfig, ScreenId, ScreenLoader, ScreenState, ScreensetCategory, ScreensetConfig, ScreensetDefinition, ScreensetId, ScreensetRegistry, ScreensetsConfig, SetLanguagePayload, ShortCircuitResponse, ShowPopupPayload, SidebarPosition, SidebarState, SliceObject, SseConnectContext, SseMockConfig, SseMockEvent, SseMockPlugin, SsePlugin, SsePluginHooks, SsePluginWithConfig, SseProtocol, SseProtocolConfig, SseShortCircuitResponse, Subscription, TENANT_SLICE_NAME, Tenant, TenantChangedPayload, TenantClearedPayload, TenantEvents, TenantState, TextDirection, ThemeApplyFn, ThemeConfig, ThemeRegistry, TranslationDictionary, TranslationLoader, TranslationMap, UikitTheme, apiRegistry, changeTenant, clearActiveScreen, clearTenant, clearTenantAction, clearUser, closeAllPopups, closePopup, closeTopPopup, createHAI3, createHAI3App, createI18nRegistry, createRouteRegistry, createScreensetRegistry, createSlice, createStore, createThemeRegistry, effects, footerActions, footerSlice, getLanguageMetadata, getStore, hasSlice, headerActions, headerSlice, hideOverlay, i18n, i18nRegistry, initMockEffects, initTenantEffects, isMockPlugin, isRestShortCircuit, isShortCircuit, isSseShortCircuit, layout, layoutDomainReducers, layoutReducer, menuActions, menuSlice, mockActions, mockSlice, navigateTo, navigation, openPopup, overlayActions, overlaySlice, popupActions, popupSlice, presets, registerSlice, routing, screenActions, screenSlice, screensetRegistry, screensets, setActiveScreen, setFooterConfig, setFooterVisible, setHeaderLoading, setMenuCollapsed, setMenuConfig, setMenuItems, setMenuVisible, setMockEnabled, setOverlayVisible, setScreenLoading, setSidebarCollapsed, setSidebarConfig, setSidebarContent, setSidebarPosition, setSidebarTitle, setSidebarVisible, setSidebarWidth, setTenant, setTenantLoading, setTenantLoadingState, setUser, showOverlay, sidebarActions, sidebarSlice, tenantActions, tenantReducer, tenantSlice, themes, toggleMenu, toggleMockMode, toggleSidebar } from '@hai3/framework';
2
+ import React__default, { RefObject } from 'react';
3
+ import { H as HAI3ProviderProps, U as UseTranslationReturn, a as UseScreenTranslationsReturn, b as UseFormattersReturn, c as UseThemeReturn, M as MfeContextValue } from './types-CcLYaLwF.cjs';
4
+ export { d as MfeContext, e as UseAppDispatchReturn, f as UseAppSelector, g as UseHAI3Return, u as useMfeContext } from './types-CcLYaLwF.cjs';
5
+ import { HAI3App, AppDispatch, RootState, TranslationMap, TranslationLoader, ChildMfeBridge, Extension, ContainerProvider, ScreensetsRegistry, ParentMfeBridge, EventPayloadMap as EventPayloadMap$1, EventBus } from '@hai3/framework';
6
+ export { ACCOUNTS_DOMAIN, Action, ActionsChain, ApiPlugin, ApiPluginBase, ApiPluginErrorContext, ApiProtocol, ApiRequestContext, ApiResponseContext, ApiServiceConfig, AppDispatch, BaseApiService, BasePluginHooks, ChangeThemePayload, ChildMfeBridge, ContainerProvider, EventHandler, EventSourceLike, Extension, ExtensionDomain, ExtensionPresentation, ExtensionRegistrationState, FooterConfig, FooterState, HAI3App, HAI3AppBuilder, HAI3Config, HAI3Plugin, HAI3Store, HAI3_ACTION_LOAD_EXT, HAI3_ACTION_MOUNT_EXT, HAI3_ACTION_UNMOUNT_EXT, HAI3_OVERLAY_DOMAIN, HAI3_POPUP_DOMAIN, HAI3_SCREEN_DOMAIN, HAI3_SCREEN_EXTENSION_TYPE, HAI3_SHARED_PROPERTY_LANGUAGE, HAI3_SHARED_PROPERTY_THEME, HAI3_SIDEBAR_DOMAIN, HeaderConfig, HeaderState, HeaderUser, I18nConfig, I18nRegistry, I18nRegistryImpl, I18nRegistryType, JSONSchema, JsonCompatible, JsonObject, JsonPrimitive, JsonValue, LAYOUT_SLICE_NAME, Language, LanguageDisplayMode, LanguageMetadata, LayoutDomain, LayoutDomainReducers, LayoutDomainState, LayoutState, LifecycleHook, LifecycleStage, LoadExtPayload, MOCK_PLUGIN, MenuItem, MenuState, MfeBridgeFactory, MfeEntry, MfeEntryLifecycle, MfeEntryMF, MfeHandler, MfeHandlerMF, MfeState, MockEventSource, MockEvents, MockMap, MockState, MockTogglePayload, MountExtPayload, OverlayConfig, OverlayState, ParentMfeBridge, PluginClass, PluginFactory, PluginLifecycle, PluginProvides, PopupConfig, PopupSliceState, PopupState, Preset, Presets, ProtocolClass, ProtocolPluginType, ReducerPayload, RegisterExtensionPayload, RestMockConfig, RestMockPlugin, RestPlugin, RestPluginHooks, RestPluginWithConfig, RestProtocol, RestProtocolConfig, RestRequestContext, RestResponseContext, RestShortCircuitResponse, RootState, RootStateWithLayout, SUPPORTED_LANGUAGES, ScreenExtension, ScreenState, ScreensetsConfig, ScreensetsRegistry, ScreensetsRegistryConfig, ScreensetsRegistryFactory, SetLanguagePayload, SharedProperty, ShortCircuitResponse, ShowPopupPayload, SidebarPosition, SidebarState, SliceObject, SseConnectContext, SseMockConfig, SseMockEvent, SseMockPlugin, SsePlugin, SsePluginHooks, SsePluginWithConfig, SseProtocol, SseProtocolConfig, SseShortCircuitResponse, Subscription, TENANT_SLICE_NAME, Tenant, TenantChangedPayload, TenantClearedPayload, TenantEvents, TenantState, TextDirection, ThemeApplyFn, ThemeConfig, ThemeRegistry, TranslationDictionary, TranslationLoader, TranslationMap, TypeSystemPlugin, UikitTheme, UnmountExtPayload, UnregisterExtensionPayload, ValidationError, ValidationResult, apiRegistry, changeTenant, clearActiveScreen, clearTenant, clearTenantAction, clearUser, closeAllPopups, closePopup, closeTopPopup, createHAI3, createHAI3App, createI18nRegistry, createShadowRoot, createSlice, createStore, createThemeRegistry, effects, extractGtsPackage, footerActions, footerSlice, getLanguageMetadata, getStore, gtsPlugin, hasSlice, headerActions, headerSlice, hideOverlay, i18n, i18nRegistry, initMockEffects, initTenantEffects, injectCssVariables, isMockPlugin, isRestShortCircuit, isShortCircuit, isSseShortCircuit, layout, layoutDomainReducers, layoutReducer, loadExtension, menuActions, menuSlice, microfrontends, mock, mockActions, mockSlice, mountExtension, navigateTo, openPopup, overlayActions, overlayDomain, overlaySlice, popupActions, popupDomain, popupSlice, presets, registerExtension, registerSlice, screenActions, screenDomain, screenSlice, screensets, screensetsRegistryFactory, selectExtensionError, selectExtensionState, selectRegisteredExtensions, setActiveScreen, setFooterConfig, setFooterVisible, setHeaderLoading, setMenuCollapsed, setMenuConfig, setMenuItems, setMenuVisible, setMockEnabled, setOverlayVisible, setScreenLoading, setSidebarCollapsed, setSidebarConfig, setSidebarContent, setSidebarPosition, setSidebarTitle, setSidebarVisible, setSidebarWidth, setTenant, setTenantLoading, setTenantLoadingState, setUser, showOverlay, sidebarActions, sidebarDomain, sidebarSlice, tenantActions, tenantReducer, tenantSlice, themes, toggleMenu, toggleMockMode, toggleSidebar, unmountExtension, unregisterExtension } from '@hai3/framework';
7
7
  import { TypedUseSelectorHook } from 'react-redux';
8
- import { EventBus } from '@hai3/state';
9
8
 
10
9
  /**
11
10
  * HAI3 Provider - Main provider component for HAI3 applications
@@ -32,10 +31,15 @@ import { EventBus } from '@hai3/state';
32
31
  * </HAI3Provider>
33
32
  *
34
33
  * // With pre-built app
35
- * const app = createHAI3().use(screensets()).build();
34
+ * const app = createHAI3().use(screensets()).use(microfrontends()).build();
36
35
  * <HAI3Provider app={app}>
37
36
  * <App />
38
37
  * </HAI3Provider>
38
+ *
39
+ * // With MFE bridge (for MFE components)
40
+ * <HAI3Provider mfeBridge={{ bridge, extensionId, domainId }}>
41
+ * <MyMfeApp />
42
+ * </HAI3Provider>
39
43
  * ```
40
44
  */
41
45
  declare const HAI3Provider: React__default.FC<HAI3ProviderProps>;
@@ -162,158 +166,406 @@ declare function useTranslation(): UseTranslationReturn;
162
166
  declare function useScreenTranslations(screensetId: string, screenId: string, translations: TranslationMap | TranslationLoader): UseScreenTranslationsReturn;
163
167
 
164
168
  /**
165
- * useNavigation Hook - Navigation utilities
169
+ * useFormatters Hook - Locale-aware formatters
170
+ *
171
+ * Returns formatters that use i18nRegistry.getLanguage() internally.
172
+ * Calls useTranslation() so the component re-renders when language changes.
166
173
  *
167
174
  * React Layer: L3
168
175
  */
169
176
 
170
177
  /**
171
- * Hook for navigation utilities.
178
+ * Hook for accessing locale-aware formatters (date, number, currency, sort).
172
179
  *
173
- * @returns Navigation utilities
180
+ * Formatters use the current app language from i18nRegistry.getLanguage().
181
+ * Re-renders when language changes via useTranslation() subscription.
182
+ *
183
+ * @returns Object with formatDate, formatTime, formatDateTime, formatRelative,
184
+ * formatNumber, formatPercent, formatCompact, formatCurrency, compareStrings, createCollator
174
185
  *
175
186
  * @example
176
187
  * ```tsx
177
- * const { navigateToScreen, navigateToScreenset, currentScreen } = useNavigation();
178
- *
179
- * // Navigate to a simple screen
188
+ * const { formatDate, formatCurrency } = useFormatters();
180
189
  * return (
181
- * <button onClick={() => navigateToScreen('demo', 'home')}>
182
- * Go to Home
183
- * </button>
190
+ * <span>{formatDate(new Date(), 'short')}</span>
191
+ * <span>{formatCurrency(99.99, 'USD')}</span>
184
192
  * );
193
+ * ```
194
+ */
195
+ declare function useFormatters(): UseFormattersReturn;
196
+
197
+ /**
198
+ * useTheme Hook - Theme utilities
199
+ *
200
+ * React Layer: L3
201
+ */
202
+
203
+ /**
204
+ * Hook for theme utilities.
205
+ *
206
+ * @returns Theme utilities
207
+ *
208
+ * @example
209
+ * ```tsx
210
+ * const { currentTheme, themes, setTheme } = useTheme();
185
211
  *
186
- * // Navigate to a parameterized screen
187
212
  * return (
188
- * <button onClick={() => navigateToScreen('demo', 'user-detail', { id: '123' })}>
189
- * View User 123
190
- * </button>
213
+ * <select
214
+ * value={currentTheme}
215
+ * onChange={(e) => setTheme(e.target.value)}
216
+ * >
217
+ * {themes.map((theme) => (
218
+ * <option key={theme.id} value={theme.id}>
219
+ * {theme.name}
220
+ * </option>
221
+ * ))}
222
+ * </select>
191
223
  * );
192
224
  * ```
193
225
  */
194
- declare function useNavigation(): UseNavigationReturn;
226
+ declare function useTheme(): UseThemeReturn;
227
+
228
+ /**
229
+ * MFE Provider - Provides MFE context to child components
230
+ *
231
+ * Wraps MFE components with bridge and metadata.
232
+ * Used by the MFE mounting system.
233
+ *
234
+ * React Layer: L3 (Depends on @hai3/framework)
235
+ */
236
+
237
+ /**
238
+ * MFE Provider Props
239
+ */
240
+ interface MfeProviderProps {
241
+ /** MFE context value */
242
+ value: MfeContextValue;
243
+ /** Child components */
244
+ children: React__default.ReactNode;
245
+ }
246
+ /**
247
+ * MFE Provider Component
248
+ *
249
+ * Provides MFE bridge and metadata to child components.
250
+ * Used by the MFE mounting system to wrap MFE components.
251
+ *
252
+ * @example
253
+ * ```tsx
254
+ * <MfeProvider value={{ bridge, extensionId, domainId }}>
255
+ * <MyMfeComponent />
256
+ * </MfeProvider>
257
+ * ```
258
+ */
259
+ declare const MfeProvider: React__default.FC<MfeProviderProps>;
195
260
 
196
261
  /**
197
- * useRouteParams Hook
262
+ * useMfeBridge Hook - MFE bridge access
198
263
  *
199
- * Provides access to route parameters from the current URL.
200
- * Supports type-safe route params via module augmentation.
264
+ * Returns the ChildMfeBridge from context for communication with host.
201
265
  *
202
266
  * React Layer: L3
267
+ */
268
+
269
+ /**
270
+ * Hook for accessing the MFE bridge.
271
+ *
272
+ * Returns the ChildMfeBridge instance for communication with the host.
273
+ * Must be used within a MfeProvider (i.e., inside an MFE component).
274
+ *
275
+ * @returns Child MFE bridge
203
276
  *
204
277
  * @example
205
278
  * ```tsx
206
- * import { useRouteParams } from '@hai3/react';
279
+ * function MyMfeComponent() {
280
+ * const bridge = useMfeBridge();
207
281
  *
208
- * // Basic usage (no type safety)
209
- * const UserDetailScreen: React.FC = () => {
210
- * const params = useRouteParams();
211
- * // params: Record<string, string>
282
+ * // Bridge methods:
283
+ * // bridge.executeActionsChain(chain);
284
+ * // bridge.subscribeToProperty(propertyTypeId, callback);
212
285
  *
213
- * return <div>User ID: {params.id}</div>;
214
- * };
286
+ * return <div>Domain: {bridge.domainId}</div>;
287
+ * }
288
+ * ```
289
+ */
290
+ declare function useMfeBridge(): ChildMfeBridge;
291
+
292
+ /**
293
+ * useSharedProperty Hook - Shared property subscription
294
+ *
295
+ * Subscribes to shared property updates from the host.
296
+ *
297
+ * React Layer: L3
298
+ */
299
+ /**
300
+ * Hook for subscribing to a shared property.
215
301
  *
216
- * // Type-safe usage with module augmentation
217
- * // First, declare the route params in your app:
218
- * // declare module '@hai3/framework' {
219
- * // interface RouteParams {
220
- * // 'user-detail': { userId: string };
221
- * // }
222
- * // }
302
+ * Subscribes to property updates from the host and returns the current value.
303
+ * Must be used within a MfeProvider (i.e., inside an MFE component).
223
304
  *
224
- * const UserDetailScreen: React.FC = () => {
225
- * const params = useRouteParams<'user-detail'>();
226
- * // params: { userId: string } - fully typed!
305
+ * NOTE: This hook provides the interface and uses useSyncExternalStore with a stub subscription.
306
+ * Full bridge subscription should be implemented when bridge methods are available.
227
307
  *
228
- * return <div>User ID: {params.userId}</div>;
229
- * };
308
+ * @param _propertyTypeId - Type ID of the shared property to subscribe to (currently unused)
309
+ * @returns Current property value
310
+ *
311
+ * @example
312
+ * ```tsx
313
+ * function MyMfeComponent() {
314
+ * const userData = useSharedProperty('gts.hai3.mfes.comm.shared_property.v1~myapp.user_data.v1');
315
+ *
316
+ * return <div>User: {userData?.name}</div>;
317
+ * }
230
318
  * ```
231
319
  */
320
+ declare function useSharedProperty<T = unknown>(propertyTypeId: string): T | undefined;
232
321
 
233
322
  /**
234
- * Hook to access route parameters from the current URL.
323
+ * useHostAction Hook - Host action requests
324
+ *
325
+ * Returns a callback to request host actions via the bridge.
326
+ *
327
+ * React Layer: L3
328
+ */
329
+ /**
330
+ * Hook for requesting host actions.
331
+ *
332
+ * Returns a callback function that sends an actions chain to the host.
333
+ * Must be used within a MfeProvider (i.e., inside an MFE component).
334
+ *
335
+ * NOTE: This hook provides the interface. Bridge executeActionsChain() delegates to the registry.
336
+ *
337
+ * @param actionTypeId - Type ID of the action to request
338
+ * @returns Callback function to request the action with payload
339
+ *
340
+ * @example
341
+ * ```tsx
342
+ * function MyMfeComponent() {
343
+ * const requestNavigation = useHostAction('gts.hai3.mfes.comm.action.v1~myapp.navigate.v1');
235
344
  *
236
- * @template TScreenId - Optional screen ID for type-safe route params
237
- * @returns Route parameters, optionally typed based on screen ID
345
+ * const handleClick = () => {
346
+ * requestNavigation({ path: '/dashboard' });
347
+ * };
348
+ *
349
+ * return <button onClick={handleClick}>Navigate</button>;
350
+ * }
351
+ * ```
238
352
  */
239
- declare function useRouteParams<TScreenId extends keyof RouteParams$1 = string>(): TScreenId extends keyof RouteParams$1 ? RouteParams$1[TScreenId] : Record<string, string>;
353
+ declare function useHostAction<TPayload extends Record<string, unknown> = Record<string, unknown>>(actionTypeId: string): (payload?: TPayload) => void;
240
354
 
241
355
  /**
242
- * useTheme Hook - Theme utilities
356
+ * useDomainExtensions Hook - Domain extension list subscription
357
+ *
358
+ * Subscribes to store changes to detect when extensions are registered or unregistered,
359
+ * and returns the current list of extensions for a domain.
243
360
  *
244
361
  * React Layer: L3
245
362
  */
246
363
 
247
364
  /**
248
- * Hook for theme utilities.
365
+ * Hook for observing extensions registered for a domain.
249
366
  *
250
- * @returns Theme utilities
367
+ * Subscribes to the HAI3 store to detect registration state changes,
368
+ * and returns the current list of extensions for the specified domain.
369
+ *
370
+ * @param domainId - Domain ID to query extensions for
371
+ * @returns Array of extensions currently registered for the domain
251
372
  *
252
373
  * @example
253
374
  * ```tsx
254
- * const { currentTheme, themes, setTheme } = useTheme();
255
- *
256
- * return (
257
- * <select
258
- * value={currentTheme}
259
- * onChange={(e) => setTheme(e.target.value)}
260
- * >
261
- * {themes.map((theme) => (
262
- * <option key={theme.id} value={theme.id}>
263
- * {theme.name}
264
- * </option>
265
- * ))}
266
- * </select>
267
- * );
375
+ * function SidebarExtensions() {
376
+ * const extensions = useDomainExtensions('gts.hai3.mfes.ext.domain.v1~hai3.screensets.layout.sidebar.v1');
377
+ *
378
+ * return (
379
+ * <div>
380
+ * {extensions.map(ext => (
381
+ * <div key={ext.id}>{ext.id}</div>
382
+ * ))}
383
+ * </div>
384
+ * );
385
+ * }
268
386
  * ```
269
387
  */
270
- declare function useTheme(): UseThemeReturn;
388
+ declare function useDomainExtensions(domainId: string): Extension[];
271
389
 
272
390
  /**
273
- * AppRouter Component - Renders the active screen
391
+ * useRegisteredPackages Hook - Registered GTS packages subscription
392
+ *
393
+ * Subscribes to store changes to detect when extensions are registered or unregistered,
394
+ * and returns the current list of registered GTS packages.
274
395
  *
275
396
  * React Layer: L3
276
397
  */
398
+ /**
399
+ * Hook for observing registered GTS packages.
400
+ *
401
+ * Subscribes to the HAI3 store to detect registration state changes,
402
+ * and returns the current list of GTS packages extracted from registered
403
+ * extensions.
404
+ *
405
+ * ARCHITECTURAL NOTE ON STORE SUBSCRIPTION COUPLING:
406
+ * This hook uses `useSyncExternalStore` with `app.store.subscribe`, which
407
+ * fires on any Redux dispatch. Since `registerExtension()` dispatches to
408
+ * the mfe store slice, the subscription WILL trigger when packages change.
409
+ * The `getSnapshot` function calls `screensetsRegistry.getRegisteredPackages()`
410
+ * which reads the private `packages` Map. This works because every package
411
+ * map mutation (in registerExtension/unregisterExtension) is always
412
+ * accompanied by a store dispatch in the same serializer callback.
413
+ *
414
+ * IMPORTANT: If a future change mutates the packages map WITHOUT a store
415
+ * dispatch, this hook would fail to re-render. Keep this coupling documented.
416
+ *
417
+ * @returns Array of GTS package strings currently registered
418
+ *
419
+ * @example
420
+ * ```tsx
421
+ * function PackageList() {
422
+ * const packages = useRegisteredPackages();
423
+ *
424
+ * return (
425
+ * <div>
426
+ * {packages.map(pkg => (
427
+ * <div key={pkg}>{pkg}</div>
428
+ * ))}
429
+ * </div>
430
+ * );
431
+ * }
432
+ * ```
433
+ */
434
+ declare function useRegisteredPackages(): string[];
277
435
 
278
436
  /**
279
- * AppRouter Component
437
+ * useActivePackage Hook - Active GTS package subscription
438
+ *
439
+ * Subscribes to store changes and returns the GTS package of the currently
440
+ * mounted screen extension.
441
+ *
442
+ * React Layer: L3
443
+ */
444
+ /**
445
+ * Hook for observing the active GTS package (the package of the currently
446
+ * mounted screen extension).
447
+ *
448
+ * Subscribes to the HAI3 store to detect mount state changes, and returns
449
+ * the GTS package extracted from the currently mounted screen extension's ID.
280
450
  *
281
- * Renders the currently active screen based on navigation state.
282
- * Handles lazy loading and error boundaries.
451
+ * Returns `undefined` if no screen extension is currently mounted.
452
+ *
453
+ * @returns GTS package string of the active screen extension, or undefined
283
454
  *
284
455
  * @example
285
456
  * ```tsx
286
- * <HAI3Provider>
287
- * <Layout>
288
- * <AppRouter
289
- * fallback={<LoadingSpinner />}
290
- * errorFallback={(error) => <ErrorPage error={error} />}
291
- * />
292
- * </Layout>
293
- * </HAI3Provider>
457
+ * function ActivePackageIndicator() {
458
+ * const activePackage = useActivePackage();
459
+ *
460
+ * if (!activePackage) {
461
+ * return <div>No active screen</div>;
462
+ * }
463
+ *
464
+ * return <div>Active package: {activePackage}</div>;
465
+ * }
294
466
  * ```
295
467
  */
296
- declare const AppRouter: React__default.FC<AppRouterProps>;
468
+ declare function useActivePackage(): string | undefined;
297
469
 
298
470
  /**
299
- * Route params type
471
+ * Ref Container Provider
472
+ *
473
+ * Concrete ContainerProvider that wraps a React ref.
474
+ * Created by React components (like ExtensionDomainSlot) for use
475
+ * by framework-level domain registration code.
476
+ *
477
+ * @packageDocumentation
300
478
  */
301
- type RouteParams = Record<string, string>;
479
+
480
+ /**
481
+ * Concrete ContainerProvider that wraps a React ref.
482
+ *
483
+ * This provider reads the container element from a React ref at mount time.
484
+ * It is designed to be created by React components but passed to domain
485
+ * registration code (framework-level).
486
+ *
487
+ * Usage pattern:
488
+ * 1. React component creates a ref via `useRef<HTMLDivElement>(null)`
489
+ * 2. Framework-level code creates `RefContainerProvider` wrapping the ref
490
+ * 3. Framework-level code passes the provider to `registerDomain(domain, provider)`
491
+ * 4. When mount_ext is dispatched, the provider returns `ref.current`
492
+ */
493
+ declare class RefContainerProvider extends ContainerProvider {
494
+ private readonly containerRef;
495
+ constructor(containerRef: RefObject<HTMLDivElement>);
496
+ getContainer(_extensionId: string): Element;
497
+ releaseContainer(_extensionId: string): void;
498
+ }
499
+
302
500
  /**
303
- * Route params context
501
+ * Extension Domain Slot Component
502
+ *
503
+ * React component that renders extensions within a domain slot.
504
+ * Manages extension lifecycle (mount/unmount) and provides rendering context.
505
+ *
506
+ * @packageDocumentation
304
507
  */
305
- declare const RouteParamsContext: React.Context<RouteParams>;
508
+
306
509
  /**
307
- * Route params provider props
510
+ * Props for ExtensionDomainSlot component
308
511
  */
309
- interface RouteParamsProviderProps {
310
- params: RouteParams;
311
- children: ReactNode;
512
+ interface ExtensionDomainSlotProps {
513
+ /**
514
+ * The screensets registry instance
515
+ */
516
+ registry: ScreensetsRegistry;
517
+ /**
518
+ * The domain ID for this slot
519
+ */
520
+ domainId: string;
521
+ /**
522
+ * The extension ID to render in this slot
523
+ */
524
+ extensionId: string;
525
+ /**
526
+ * Optional CSS class name for the container
527
+ */
528
+ className?: string;
529
+ /**
530
+ * Optional callback when extension is mounted
531
+ */
532
+ onMounted?: (bridge: ParentMfeBridge) => void;
533
+ /**
534
+ * Optional callback when extension is unmounted
535
+ */
536
+ onUnmounted?: () => void;
537
+ /**
538
+ * Optional error callback
539
+ */
540
+ onError?: (error: Error) => void;
541
+ /**
542
+ * Optional loading component
543
+ */
544
+ loadingComponent?: React__default.ReactNode;
545
+ /**
546
+ * Optional error component renderer
547
+ */
548
+ errorComponent?: (error: Error) => React__default.ReactNode;
312
549
  }
313
550
  /**
314
- * Route params provider component
551
+ * Extension Domain Slot Component
552
+ *
553
+ * Renders an extension within a domain slot. Manages the extension lifecycle:
554
+ * - Mounts the extension on component mount
555
+ * - Unmounts the extension on component unmount
556
+ * - Handles loading and error states
557
+ *
558
+ * @example
559
+ * ```tsx
560
+ * <ExtensionDomainSlot
561
+ * registry={registry}
562
+ * domainId="gts.hai3.mfes.ext.domain.v1~hai3.screensets.layout.sidebar.v1"
563
+ * extensionId="gts.hai3.mfes.ext.extension.v1~myapp.sidebar.widget.v1"
564
+ * className="sidebar-slot"
565
+ * />
566
+ * ```
315
567
  */
316
- declare function RouteParamsProvider({ params, children }: RouteParamsProviderProps): JSX.Element;
568
+ declare function ExtensionDomainSlot(props: ExtensionDomainSlotProps): React__default.ReactElement;
317
569
 
318
570
  /**
319
571
  * @hai3/react - React Bindings
@@ -321,7 +573,7 @@ declare function RouteParamsProvider({ params, children }: RouteParamsProviderPr
321
573
  * This package provides:
322
574
  * - HAI3Provider context provider
323
575
  * - Type-safe hooks for state and actions
324
- * - AppRouter for screen rendering
576
+ * - MFE context, hooks, and components
325
577
  *
326
578
  * Layer: L3 (Depends on @hai3/framework)
327
579
  */
@@ -335,4 +587,4 @@ interface EventPayloadMap extends EventPayloadMap$1 {
335
587
  */
336
588
  declare const eventBus: EventBus<EventPayloadMap>;
337
589
 
338
- export { AppRouter, AppRouterProps, type EventPayloadMap, HAI3Context, HAI3Provider, HAI3ProviderProps, type RouteParams, RouteParamsContext, RouteParamsProvider, type RouteParamsProviderProps, UseNavigationReturn, UseScreenTranslationsReturn, UseThemeReturn, UseTranslationReturn, eventBus, useAppDispatch, useAppSelector, useHAI3, useNavigation, useRouteParams, useScreenTranslations, useTheme, useTranslation };
590
+ export { type EventPayloadMap, ExtensionDomainSlot, type ExtensionDomainSlotProps, HAI3Context, HAI3Provider, HAI3ProviderProps, MfeContextValue, MfeProvider, type MfeProviderProps, RefContainerProvider, UseFormattersReturn, UseScreenTranslationsReturn, UseThemeReturn, UseTranslationReturn, eventBus, useActivePackage, useAppDispatch, useAppSelector, useDomainExtensions, useFormatters, useHAI3, useHostAction, useMfeBridge, useRegisteredPackages, useScreenTranslations, useSharedProperty, useTheme, useTranslation };