@object-ui/react 3.1.5 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @object-ui/react
 
+## 3.3.1
+
+### Patch Changes
+
+- @object-ui/types@3.3.1
+- @object-ui/core@3.3.1
+- @object-ui/i18n@3.3.1
+- @object-ui/data-objectstack@3.3.1
+
+## 3.3.0
+
+### Patch Changes
+
+- @object-ui/types@3.3.0
+- @object-ui/core@3.3.0
+- @object-ui/i18n@3.3.0
+
+## 3.2.0
+
+### Patch Changes
+
+- @object-ui/types@3.2.0
+- @object-ui/core@3.2.0
+- @object-ui/i18n@3.2.0
+
 ## 3.1.5
 
 ### Patch Changes

package/README.md

@@ -120,13 +120,18 @@ Access server discovery information including preview mode detection:
 import { useDiscovery } from '@object-ui/react'
 
 function MyComponent() {
-  const { discovery, isLoading, isAuthEnabled } = useDiscovery()
+  const { discovery, isLoading, isAuthEnabled, isAiEnabled } = useDiscovery()
   
   // Check if the server is in preview mode
   if (discovery?.mode === 'preview') {
     console.log('Preview mode active:', discovery.previewMode)
   }
 
+  // Check if AI service is available
+  if (isAiEnabled) {
+    console.log('AI service route:', discovery?.services?.ai?.route)
+  }
+
   return <div>Server: {discovery?.name}</div>
 }
 ```
@@ -139,7 +144,7 @@ function MyComponent() {
 | `version` | `string` | Server version |
 | `mode` | `string` | Runtime mode (e.g. `'development'`, `'production'`, `'preview'`) |
 | `previewMode` | `object` | Preview mode configuration (present when mode is `'preview'`) |
-| `services` | `object` | Service availability status (auth, data, metadata) |
+| `services` | `object` | Service availability status (auth, data, metadata, ai) |
 | `capabilities` | `string[]` | API capabilities |
 
 The `previewMode` object contains:
@@ -157,6 +162,26 @@ The `previewMode` object contains:
 
 See [full documentation](https://objectui.org/api/react) for detailed API reference.
 
+<!-- release-metadata:v3.3.0 -->
+
+## Compatibility
+
+- **React:** 18.x or 19.x
+- **Node.js:** ≥ 18
+- **TypeScript:** ≥ 5.0 (strict mode)
+- **`@objectstack/spec`:** ^3.3.0
+- **`@objectstack/client`:** ^3.3.0
+- **Tailwind CSS:** ≥ 3.4 (for packages with UI)
+
+## Links
+
+- 📚 [Documentation](https://www.objectui.org/docs/packages/react)
+- 📦 [npm package](https://www.npmjs.com/package/@object-ui/react)
+- 📝 [Changelog](./CHANGELOG.md)
+- 🐛 [Report an issue](https://github.com/objectstack-ai/objectui/issues)
+- 🤝 [Contributing Guide](https://github.com/objectstack-ai/objectui/blob/main/CONTRIBUTING.md)
+- 🗺️ [Roadmap](https://github.com/objectstack-ai/objectui/blob/main/ROADMAP.md)
+
 ## License
 
-MIT
+MIT — see [LICENSE](./LICENSE).

package/dist/SchemaRenderer.js

@@ -56,7 +56,7 @@ export class SchemaErrorBoundary extends Component {
     render() {
         if (this.state.hasError && this.state.error) {
             const error = this.state.error;
-            const isDev = process.env.NODE_ENV !== 'production';
+            const isDev = globalThis.process?.env?.NODE_ENV !== 'production';
             const objuiError = isObjectUIError(error) ? error : null;
             return (_jsxs("div", { className: "p-4 border border-orange-400 rounded bg-orange-50 text-orange-700 my-2", role: "alert", children: [_jsxs("p", { className: "font-medium", children: ["Component", this.props.componentType ? ` "${this.props.componentType}"` : '', " failed to render"] }), _jsx("p", { className: "text-sm mt-1", children: error.message }), isDev && objuiError?.code && (_jsxs("p", { className: "text-xs mt-1 text-orange-500", children: ["Error code: ", objuiError.code, objuiError.details?.suggestion ? (_jsxs("span", { className: "block mt-0.5", children: ["\uD83D\uDCA1 ", String(objuiError.details.suggestion)] })) : null] })), _jsx("button", { onClick: this.handleRetry, className: "mt-2 text-sm underline hover:no-underline", children: "Retry" })] }));
         }
@@ -137,7 +137,7 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     if (!Component) {
         debugLog('schema', 'Component not found in registry', { type: evaluatedSchema.type });
         const errorInfo = ERROR_CODES['OBJUI-001'];
-        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", role: "alert", children: [_jsxs("p", { className: "font-medium", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type })] }), process.env.NODE_ENV !== 'production' && (_jsxs("p", { className: "text-xs mt-1", children: ["\uD83D\uDCA1 ", errorInfo.suggestion, " (OBJUI-001)"] })), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
+        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", role: "alert", children: [_jsxs("p", { className: "font-medium", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type })] }), globalThis.process?.env?.NODE_ENV !== 'production' && (_jsxs("p", { className: "text-xs mt-1", children: ["\uD83D\uDCA1 ", errorInfo.suggestion, " (OBJUI-001)"] })), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
     }
     // Note: We don't forward the ref to the Component because components in the registry
     // may not support refs. The SchemaRenderer itself can still receive refs for its own use.

package/dist/components/form/FieldFactory.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveI18nLabel } from '../../utils/i18n';
+import { createSafeTranslation } from '@object-ui/i18n';
+const useSafeTranslation = createSafeTranslation({ 'common.selectOption': 'Select an option' }, 'common.selectOption');
 /**
  * FieldFactory component that renders different input types based on
  * the widget property or field type
  */
 export const FieldFactory = ({ field, methods, disabled = false, }) => {
     const { register, formState: { errors } } = methods;
+    const { t } = useSafeTranslation();
     // Cast to extended field for properties not in base schema
     const extendedField = field;
     // Determine the widget type
@@ -61,7 +64,7 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
                     required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || t('common.selectOption') }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'date':
             return renderField(_jsx("input", { id: fieldName, type: "date", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
                     required: field.required ? `${fieldLabel || fieldName} is required` : false,
@@ -118,7 +121,7 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
                     required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || t('common.selectOption') }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'user':
         case 'owner':
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {

package/dist/context/AppShellContext.d.ts

@@ -0,0 +1,26 @@
+import type { ObjectStackAdapter } from '@object-ui/data-objectstack';
+export declare const AdapterCtx: import("react").Context<ObjectStackAdapter<unknown> | null>;
+export declare function useAdapter(): ObjectStackAdapter | null;
+export interface MetadataState {
+    apps: any[];
+    objects: any[];
+    dashboards: any[];
+    reports: any[];
+    pages: any[];
+    loading: boolean;
+    error: Error | null;
+}
+export interface MetadataContextValue extends MetadataState {
+    refresh: (type?: string) => Promise<void>;
+    invalidate: (type: string, name?: string) => void;
+    ensureType: (type: string) => Promise<any[]>;
+    getItem: (type: string, name: string) => Promise<any | null>;
+    getItemsByType: (type: string) => any[];
+}
+export declare const MetadataCtx: import("react").Context<MetadataContextValue | null>;
+export declare function useMetadata(): MetadataContextValue;
+export declare function useMetadataItem(type: string, name: string | undefined | null): {
+    item: any | null;
+    loading: boolean;
+    error: Error | null;
+};

package/dist/context/AppShellContext.js

@@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+// ---------------------------------------------------------------------------
+// AdapterContext
+// ---------------------------------------------------------------------------
+export const AdapterCtx = createContext(null);
+export function useAdapter() {
+    return useContext(AdapterCtx);
+}
+export const MetadataCtx = createContext(null);
+export function useMetadata() {
+    const ctx = useContext(MetadataCtx);
+    if (!ctx) {
+        // Graceful fallback: when a consumer is rendered outside a MetadataProvider
+        // (common in unit tests that only need to assert on rendering), return an
+        // empty no-op implementation rather than crash. Production code paths
+        // should always wrap in <MetadataProvider>.
+        return {
+            apps: [],
+            objects: [],
+            dashboards: [],
+            reports: [],
+            pages: [],
+            loading: false,
+            error: null,
+            refresh: async () => { },
+            invalidate: () => { },
+            ensureType: async () => [],
+            getItem: async () => null,
+            getItemsByType: () => [],
+        };
+    }
+    return ctx;
+}
+export function useMetadataItem(type, name) {
+    const { getItem } = useMetadata();
+    const [state, setState] = useState({
+        item: null,
+        loading: !!name,
+        error: null,
+    });
+    useEffect(() => {
+        if (!name) {
+            setState({ item: null, loading: false, error: null });
+            return;
+        }
+        let cancelled = false;
+        setState(s => ({ ...s, loading: true, error: null }));
+        getItem(type, name)
+            .then(item => {
+            if (!cancelled)
+                setState({ item, loading: false, error: null });
+        })
+            .catch(err => {
+            if (!cancelled) {
+                setState({
+                    item: null,
+                    loading: false,
+                    error: err instanceof Error ? err : new Error(String(err)),
+                });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [type, name, getItem]);
+    return state;
+}

package/dist/context/index.d.ts

@@ -1,12 +1,6 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 export * from './SchemaRendererContext';
 export * from './ActionContext';
 export * from './ThemeContext';
 export * from './NotificationContext';
 export * from './DndContext';
+export * from './AppShellContext';

package/dist/context/index.js

@@ -1,12 +1,6 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 export * from './SchemaRendererContext';
 export * from './ActionContext';
 export * from './ThemeContext';
 export * from './NotificationContext';
 export * from './DndContext';
+export * from './AppShellContext';

package/dist/hooks/index.d.ts

@@ -32,3 +32,4 @@ export * from './useSchemaPersistence';
 export * from './useGlobalUndo';
 export * from './useDebugMode';
 export * from './useActionEngine';
+export * from './useDataRefresh';

package/dist/hooks/index.js

@@ -32,3 +32,4 @@ export * from './useSchemaPersistence';
 export * from './useGlobalUndo';
 export * from './useDebugMode';
 export * from './useActionEngine';
+export * from './useDataRefresh';

package/dist/hooks/useDataRefresh.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { DataSource } from '@object-ui/types';
+/**
+ * Reusable hook that encapsulates the data-refresh pattern:
+ *  1. A numeric `refreshKey` that triggers React effect re-runs when incremented.
+ *  2. An imperative `refresh()` function to trigger a re-fetch on demand.
+ *  3. Auto-subscription to `DataSource.onMutation()` — if the DataSource
+ *     implements the optional mutation event bus, the hook auto-refreshes
+ *     whenever a mutation occurs on the matching `objectName`.
+ *
+ * @param dataSource - The DataSource instance (may be undefined during initial render)
+ * @param objectName - The resource/object name to watch for mutations
+ * @returns `{ refreshKey, refresh }` — include `refreshKey` in your effect deps
+ *
+ * @example
+ * ```tsx
+ * const { refreshKey, refresh } = useDataRefresh(dataSource, schema.objectName);
+ *
+ * useEffect(() => {
+ *   dataSource.find(objectName, params).then(setData);
+ * }, [objectName, refreshKey]);
+ *
+ * // Or trigger manually:
+ * <button onClick={refresh}>Refresh</button>
+ * ```
+ */
+export declare function useDataRefresh(dataSource: DataSource | undefined, objectName: string | undefined): {
+    refreshKey: number;
+    refresh: () => void;
+};

package/dist/hooks/useDataRefresh.js

@@ -0,0 +1,50 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useState, useCallback, useEffect } from 'react';
+/**
+ * Reusable hook that encapsulates the data-refresh pattern:
+ *  1. A numeric `refreshKey` that triggers React effect re-runs when incremented.
+ *  2. An imperative `refresh()` function to trigger a re-fetch on demand.
+ *  3. Auto-subscription to `DataSource.onMutation()` — if the DataSource
+ *     implements the optional mutation event bus, the hook auto-refreshes
+ *     whenever a mutation occurs on the matching `objectName`.
+ *
+ * @param dataSource - The DataSource instance (may be undefined during initial render)
+ * @param objectName - The resource/object name to watch for mutations
+ * @returns `{ refreshKey, refresh }` — include `refreshKey` in your effect deps
+ *
+ * @example
+ * ```tsx
+ * const { refreshKey, refresh } = useDataRefresh(dataSource, schema.objectName);
+ *
+ * useEffect(() => {
+ *   dataSource.find(objectName, params).then(setData);
+ * }, [objectName, refreshKey]);
+ *
+ * // Or trigger manually:
+ * <button onClick={refresh}>Refresh</button>
+ * ```
+ */
+export function useDataRefresh(dataSource, objectName) {
+    const [refreshKey, setRefreshKey] = useState(0);
+    const refresh = useCallback(() => {
+        setRefreshKey(k => k + 1);
+    }, []);
+    // Auto-subscribe to DataSource mutation events
+    useEffect(() => {
+        if (!dataSource?.onMutation || !objectName)
+            return;
+        const unsub = dataSource.onMutation((event) => {
+            if (event.resource === objectName) {
+                setRefreshKey(k => k + 1);
+            }
+        });
+        return unsub;
+    }, [dataSource, objectName]);
+    return { refreshKey, refresh };
+}

package/dist/hooks/useDiscovery.d.ts

@@ -42,6 +42,13 @@ export interface DiscoveryInfo {
             enabled: boolean;
             status?: 'available' | 'unavailable';
         };
+        /** AI service configuration */
+        ai?: {
+            enabled: boolean;
+            status?: 'available' | 'unavailable';
+            /** AI service endpoint route (e.g. '/api/v1/ai') */
+            route?: string;
+        };
         [key: string]: any;
     };
     /** API capabilities */
@@ -86,4 +93,9 @@ export declare function useDiscovery(): {
      * Defaults to true if discovery data is not available.
      */
     isAuthEnabled: boolean;
+    /**
+     * Check if AI service is enabled and available on the server.
+     * Defaults to false if discovery data is not available.
+     */
+    isAiEnabled: boolean;
 };

package/dist/hooks/useDiscovery.js

@@ -92,5 +92,11 @@ export function useDiscovery() {
          * Defaults to true if discovery data is not available.
          */
         isAuthEnabled: discovery?.services?.auth?.enabled ?? true,
+        /**
+         * Check if AI service is enabled and available on the server.
+         * Defaults to false if discovery data is not available.
+         */
+        isAiEnabled: discovery?.services?.ai?.enabled === true &&
+            discovery?.services?.ai?.status === 'available',
     };
 }

package/dist/hooks/usePerformanceBudget.js

@@ -122,7 +122,7 @@ export function usePerformanceBudget(userBudget = {}) {
             timestamp: Date.now(),
         };
         setViolations((prev) => [...prev, violation]);
-        if (budget.warnOnViolation && process.env.NODE_ENV !== 'production') {
+        if (budget.warnOnViolation && globalThis.process?.env?.NODE_ENV !== 'production') {
             console.warn(`[ObjectUI] Performance budget violated: ${metric} = ${violation.actual} (budget: ${budgetValue})`);
         }
         onViolationRef.current?.(violation);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@object-ui/react",
-  "version": "3.1.5",
+  "version": "3.3.1",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
-  "homepage": "https://www.objectui.org",
+  "homepage": "https://www.objectui.org/docs/packages/react",
   "repository": {
     "type": "git",
-    "url": "https://github.com/objectstack-ai/objectui.git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
     "directory": "packages/react"
   },
   "bugs": {
@@ -24,11 +24,12 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^3.3.0",
-    "react-hook-form": "^7.72.0",
-    "@object-ui/core": "3.1.5",
-    "@object-ui/i18n": "3.1.5",
-    "@object-ui/types": "3.1.5"
+    "@objectstack/spec": "^4.0.4",
+    "react-hook-form": "^7.75.0",
+    "@object-ui/core": "3.3.1",
+    "@object-ui/data-objectstack": "3.3.1",
+    "@object-ui/i18n": "3.3.1",
+    "@object-ui/types": "3.3.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -37,8 +38,30 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "renderer",
+    "schema-renderer",
+    "hooks"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "tsc",
     "test": "vitest run",

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @object-ui/react@3.1.5 build /home/runner/work/objectui/objectui/packages/react
-> tsc
-

package/src/LazyPluginLoader.tsx

@@ -1,174 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { lazy, Suspense, Component } from 'react';
-
-export interface LazyPluginOptions {
-  /**
-   * Fallback component to show while loading
-   */
-  fallback?: React.ReactNode;
-  /**
-   * Number of retry attempts on load failure (default: 2)
-   */
-  retries?: number;
-  /**
-   * Delay in ms between retries (default: 1000)
-   */
-  retryDelay?: number;
-  /**
-   * Custom error fallback component
-   */
-  errorFallback?: React.ComponentType<{ error: Error; retry: () => void }>;
-}
-
-/**
- * Error boundary for lazy-loaded plugins
- */
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-class PluginErrorBoundary extends Component<
-  { fallback?: React.ComponentType<{ error: Error; retry: () => void }>; children: React.ReactNode },
-  ErrorBoundaryState
-> {
-  state: ErrorBoundaryState = { hasError: false, error: null };
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  handleRetry = () => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  render() {
-    if (this.state.hasError && this.state.error) {
-      const FallbackComponent = this.props.fallback;
-      if (FallbackComponent) {
-        return <FallbackComponent error={this.state.error} retry={this.handleRetry} />;
-      }
-      return null;
-    }
-    return this.props.children;
-  }
-}
-
-/**
- * Create a lazy-loaded import function with retry support
- */
-function createRetryImport<P extends object>(
-  importFn: () => Promise<{ default: React.ComponentType<P> }>,
-  retries: number,
-  retryDelay: number,
-): () => Promise<{ default: React.ComponentType<P> }> {
-  return () => {
-    let attempt = 0;
-    const tryImport = (): Promise<{ default: React.ComponentType<P> }> =>
-      importFn().catch((err) => {
-        attempt++;
-        if (attempt <= retries) {
-          return new Promise((resolve) =>
-            setTimeout(() => resolve(tryImport()), retryDelay),
-          );
-        }
-        throw err;
-      });
-    return tryImport();
-  };
-}
-
-/**
- * Create a lazy-loaded plugin component with Suspense wrapper
- * 
- * @param importFn - Dynamic import function that returns a module with default export
- * @param options - Configuration options for the lazy plugin
- * @returns A component that lazy loads the plugin
- * 
- * @example
- * ```tsx
- * // Basic usage
- * const ObjectGrid = createLazyPlugin(
- *   () => import('@object-ui/plugin-grid')
- * );
- * 
- * // With custom fallback
- * const ObjectGrid = createLazyPlugin(
- *   () => import('@object-ui/plugin-grid'),
- *   { fallback: <div>Loading grid...</div> }
- * );
- * 
- * // With retry and error handling
- * const ObjectGrid = createLazyPlugin(
- *   () => import('@object-ui/plugin-grid'),
- *   {
- *     retries: 3,
- *     errorFallback: ({ error, retry }) => (
- *       <div>
- *         <p>Failed to load: {error.message}</p>
- *         <button onClick={retry}>Retry</button>
- *       </div>
- *     ),
- *   }
- * );
- * ```
- */
-export function createLazyPlugin<P extends object = any>(
-  importFn: () => Promise<{ default: React.ComponentType<P> }>,
-  options?: LazyPluginOptions
-): React.ComponentType<P> {
-  const { retries = 2, retryDelay = 1000, errorFallback } = options || {};
-
-  const retryImport = retries > 0
-    ? createRetryImport(importFn, retries, retryDelay)
-    : importFn;
-
-  const LazyComponent = lazy(retryImport);
-  
-  const PluginWrapper: React.FC<P> = (props) => {
-    const content = (
-      <Suspense fallback={options?.fallback || null}>
-        <LazyComponent {...props} />
-      </Suspense>
-    );
-
-    if (errorFallback) {
-      return (
-        <PluginErrorBoundary fallback={errorFallback}>
-          {content}
-        </PluginErrorBoundary>
-      );
-    }
-
-    return content;
-  };
-  
-  return PluginWrapper;
-}
-
-/**
- * Preload a plugin module without rendering it.
- * Useful for preloading plugins that will be needed soon.
- *
- * @param importFn - Dynamic import function
- * @returns Promise that resolves when the module is loaded
- *
- * @example
- * ```tsx
- * // Preload on hover
- * const loadGrid = () => import('@object-ui/plugin-grid');
- * <button onMouseEnter={() => preloadPlugin(loadGrid)}>Show Grid</button>
- * ```
- */
-export function preloadPlugin<T = unknown>(
-  importFn: () => Promise<T>,
-): Promise<T> {
-  return importFn();
-}