@memberjunction/react-runtime 2.92.0 → 2.94.0

package/.turbo/turbo-build.log

@@ -1,32 +1,30 @@
 
-> @memberjunction/react-runtime@2.92.0 build
+> @memberjunction/react-runtime@2.94.0 build
 > npm run build:node && npm run build:umd
 
 
-> @memberjunction/react-runtime@2.92.0 build:node
+> @memberjunction/react-runtime@2.94.0 build:node
 > tsc
 
 
-> @memberjunction/react-runtime@2.92.0 build:umd
+> @memberjunction/react-runtime@2.94.0 build:umd
 > webpack --config webpack.umd.config.js
 
-Browserslist: caniuse-lite is outdated. Please run:
-  npx update-browserslist-db@latest
-  Why you should do it regularly: https://github.com/browserslist/update-db#readme
-asset runtime.umd.js 694 KiB [emitted] [minimized] [big] (name: main) 1 related asset
+[BABEL] Note: The code generator has deoptimised the styling of /home/runner/work/MJ/MJ/packages/MJCoreEntities/dist/generated/entity_subclasses.js as it exceeds the max of 500KB.
+asset runtime.umd.js 1.91 MiB [emitted] [minimized] [big] (name: main) 1 related asset
 runtime modules 344 bytes 2 modules
-modules by path ../../../node_modules/ 869 KiB 227 modules
+modules by path ../../../node_modules/ 1.01 MiB 237 modules
 modules by path ../../MJGlobal/ 174 KiB
   modules by path ../../MJGlobal/node_modules/uuid/dist/commonjs-browser/*.js 35 KiB 21 modules
   modules by path ../../MJGlobal/dist/ 139 KiB 14 modules
-modules by path ../../MJCore/ 643 KiB
-  modules by path ../../MJCore/dist/generic/*.js 607 KiB 26 modules
-  modules by path ../../MJCore/node_modules/ 15.6 KiB 3 modules
-  + 2 modules
-modules by path ./dist/ 230 KiB 22 modules
+modules by path ../../MJCore/ 643 KiB 31 modules
+modules by path ./dist/ 336 KiB 25 modules
+modules by path ../../MJCoreEntities/dist/ 2.04 MiB
+  modules by path ../../MJCoreEntities/dist/custom/*.js 241 KiB 15 modules
+  modules by path ../../MJCoreEntities/dist/custom/ResourcePermissions/*.js 46.9 KiB 3 modules
+  + 3 modules
 modules by path ../../InteractiveComponents/dist/*.js 36.8 KiB
   ../../InteractiveComponents/dist/index.js 1.21 KiB [built] [code generated]
   ../../InteractiveComponents/dist/data-requirements.js 79 bytes [built] [code generated]
-  ../../InteractiveComponents/dist/component-option.js 79 bytes [built] [code generated]
-  + 7 modules
-webpack 5.92.1 compiled successfully in 65451 ms
+  + 8 modules
+webpack 5.92.1 compiled successfully in 109563 ms

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @memberjunction/react-runtime
 
+## 2.94.0
+
+### Minor Changes
+
+- 455654e: migration (unrelated) to bump to minor
+- 7c27b04: migration
+- 98afc80: migrations
+
+### Patch Changes
+
+- Updated dependencies [eed16e0]
+  - @memberjunction/interactive-component-types@2.94.0
+  - @memberjunction/core-entities@2.94.0
+  - @memberjunction/core@2.94.0
+  - @memberjunction/global@2.94.0
+
+## 2.93.0
+
+### Patch Changes
+
+- bfcd737: Refactoring and new AI functionality
+- Updated dependencies [f8757aa]
+- Updated dependencies [bfcd737]
+- Updated dependencies [103e4a9]
+- Updated dependencies [7f465b5]
+- Updated dependencies [1461a44]
+  - @memberjunction/core@2.93.0
+  - @memberjunction/interactive-component-types@2.93.0
+  - @memberjunction/core-entities@2.93.0
+  - @memberjunction/global@2.93.0
+
 ## 2.92.0
 
 ### Minor Changes

package/README.md

@@ -165,20 +165,198 @@ const context = {
 const MyComponent = runtime.registry.get('MyComponent', 'MyNamespace');
 
 // Execute the component factory
-const { component } = MyComponent(context);
+const componentObject = MyComponent(context);
+
+// The componentObject contains the React component and method accessors
+const { component, print, refresh, getCurrentDataState, isDirty } = componentObject;
 
 // Render with props
 const props = {
   data: { name: 'World' },
   userState: {},
   callbacks: {
-    RefreshData: () => console.log('Refresh clicked!')
+    OpenEntityRecord: (entityName, key) => console.log('Open entity:', entityName),
+    RegisterMethod: (methodName, handler) => {
+      // Component will register its methods here
+    }
   }
 };
 
 React.createElement(component, props);
 ```
 
+## Component Methods System
+
+### Overview
+
+Components can expose methods that allow containers to interact with them beyond just passing props. This enables scenarios like:
+- AI agents introspecting component state
+- Containers checking if components have unsaved changes
+- Programmatic validation and reset operations
+- Custom business logic exposed by components
+
+### How Components Register Methods
+
+Components register their methods during initialization using the `RegisterMethod` callback:
+
+```typescript
+function MyComponent({ callbacks, data, userState }) {
+  const [currentData, setCurrentData] = React.useState(data);
+  const [isDirty, setIsDirty] = React.useState(false);
+  
+  // Register methods on mount
+  React.useEffect(() => {
+    if (callbacks?.RegisterMethod) {
+      // Register standard methods
+      callbacks.RegisterMethod('getCurrentDataState', () => {
+        return currentData;
+      });
+      
+      callbacks.RegisterMethod('isDirty', () => {
+        return isDirty;
+      });
+      
+      callbacks.RegisterMethod('reset', () => {
+        setCurrentData(data);
+        setIsDirty(false);
+      });
+      
+      callbacks.RegisterMethod('validate', () => {
+        // Custom validation logic
+        if (!currentData.name) {
+          return { valid: false, errors: ['Name is required'] };
+        }
+        return true;
+      });
+      
+      // Register custom methods
+      callbacks.RegisterMethod('exportToCSV', () => {
+        // Custom export logic
+        return convertToCSV(currentData);
+      });
+    }
+  }, [callbacks, currentData, isDirty]);
+  
+  return (
+    <div>
+      {/* Component UI */}
+    </div>
+  );
+}
+```
+
+### Standard Methods
+
+The ComponentObject interface defines standard methods that components can optionally implement:
+
+- **`getCurrentDataState()`**: Returns the current data being displayed
+- **`getDataStateHistory()`**: Returns an array of timestamped state changes
+- **`validate()`**: Validates the component state
+- **`isDirty()`**: Checks if there are unsaved changes
+- **`reset()`**: Resets the component to initial state
+- **`scrollTo(target)`**: Scrolls to a specific element
+- **`focus(target)`**: Sets focus to an element
+- **`print()`**: Prints the component content
+- **`refresh()`**: Refreshes the component data
+
+### Using Component Methods
+
+After compilation, the ComponentObject provides typed access to standard methods:
+
+```typescript
+// Compile the component
+const result = await compiler.compile({
+  componentName: 'MyComponent',
+  componentCode: componentCode
+});
+
+// Get the component object
+const componentObject = result.component.component(context);
+
+// Call standard methods directly (type-safe)
+const currentData = componentObject.getCurrentDataState();
+const isDirty = componentObject.isDirty();
+const validationResult = componentObject.validate();
+
+if (isDirty) {
+  componentObject.reset();
+}
+
+// Call custom methods via invokeMethod
+if (componentObject.hasMethod('exportToCSV')) {
+  const csvData = componentObject.invokeMethod('exportToCSV');
+}
+```
+
+### Method Availability
+
+All methods are optional. The runtime provides sensible defaults when methods aren't registered:
+
+- `getCurrentDataState()` returns `undefined`
+- `getDataStateHistory()` returns `[]`
+- `isDirty()` returns `false`
+- `validate()` returns `true`
+- Other methods perform no operation if not implemented
+
+### Integration with Angular
+
+The Angular wrapper (`@memberjunction/ng-react`) provides strongly-typed access to all standard methods:
+
+```typescript
+export class MyDashboard {
+  @ViewChild(MJReactComponent) reactComponent!: MJReactComponent;
+  
+  checkComponentState() {
+    // Standard methods have full TypeScript support
+    if (this.reactComponent.isDirty()) {
+      const data = this.reactComponent.getCurrentDataState();
+      console.log('Component has unsaved changes:', data);
+    }
+    
+    // Validate before saving
+    const validation = this.reactComponent.validate();
+    if (validation === true || validation.valid) {
+      // Save data...
+    }
+    
+    // Custom methods
+    if (this.reactComponent.hasMethod('generateReport')) {
+      const report = this.reactComponent.invokeMethod('generateReport', options);
+    }
+  }
+}
+```
+
+### Method Declaration in Component Spec
+
+Components can declare their supported methods in the ComponentSpec for discovery:
+
+```typescript
+const componentSpec = {
+  name: 'MyComponent',
+  code: '...',
+  methods: [
+    {
+      name: 'getCurrentDataState',
+      category: 'standard',
+      description: 'Returns current component data',
+      returnType: 'DataState | undefined'
+    },
+    {
+      name: 'exportToExcel',
+      category: 'custom',
+      description: 'Exports data to Excel format',
+      parameters: [{
+        name: 'options',
+        type: '{includeHeaders?: boolean, sheetName?: string}',
+        required: false
+      }],
+      returnType: 'Promise<Blob>'
+    }
+  ]
+};
+```
+
 ## Advanced Features
 
 ### Component Hierarchies

package/dist/compiler/babel-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"babel-config.js","sourceRoot":"","sources":["../../src/compiler/babel-config.ts"],"names":[],"mappings":";;;AASa,QAAA,eAAe,GAAG;IAC7B,OAAO;CACR,CAAC;AAKW,QAAA,eAAe,GAAa,EAGxC,CAAC;AAKW,QAAA,iBAAiB,GAAG;IAC/B,OAAO,EAAE,uBAAe;IACxB,OAAO,EAAE;QACP,GAAG,uBAAe;KAEnB;IACD,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;CAChB,CAAC;AAKW,QAAA,kBAAkB,GAAG;IAChC,OAAO,EAAE,uBAAe;IACxB,OAAO,EAAE;QACP,GAAG,uBAAe;KAEnB;IACD,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,IAAI;CACf,CAAC;AAOF,SAAgB,cAAc,CAAC,aAAsB,KAAK;IACxD,OAAO,UAAU,CAAC,CAAC,CAAC,yBAAiB,CAAC,CAAC,CAAC,0BAAkB,CAAC;AAC7D,CAAC;AAFD,wCAEC;AAOD,SAAgB,oBAAoB,CAAC,KAAU;IAC7C,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;QACtC,OAAO,KAAK,CAAC;IACf,CAAC;IAGD,OAAO,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC;AAC3C,CAAC;AAPD,oDAOC;AAKY,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE;QACP,MAAM,EAAE,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB;KAC7B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,OAAO;KACtB;CACF,CAAC;AAOF,SAAgB,YAAY,CAAC,YAAqB;IAEhD,IAAI,YAAY,IAAI,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;QAC/D,OAAO,mBAAW,CAAC,SAAS,CAAC;IAC/B,CAAC;IACD,OAAO,mBAAW,CAAC,OAAO,CAAC;AAC7B,CAAC;AAND,oCAMC"}
+{"version":3,"file":"babel-config.js","sourceRoot":"","sources":["../../src/compiler/babel-config.ts"],"names":[],"mappings":";;;AASa,QAAA,eAAe,GAAG;IAC7B,OAAO;CACR,CAAC;AAKW,QAAA,eAAe,GAAa,EAGxC,CAAC;AAKW,QAAA,iBAAiB,GAAG;IAC/B,OAAO,EAAE,uBAAe;IACxB,OAAO,EAAE;QACP,GAAG,uBAAe;KAEnB;IACD,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;CAChB,CAAC;AAKW,QAAA,kBAAkB,GAAG;IAChC,OAAO,EAAE,uBAAe;IACxB,OAAO,EAAE;QACP,GAAG,uBAAe;KAEnB;IACD,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,IAAI;CACf,CAAC;AAOF,SAAgB,cAAc,CAAC,aAAsB,KAAK;IACxD,OAAO,UAAU,CAAC,CAAC,CAAC,yBAAiB,CAAC,CAAC,CAAC,0BAAkB,CAAC;AAC7D,CAAC;AAFD,wCAEC;AAOD,SAAgB,oBAAoB,CAAC,KAAU;IAC7C,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;QACtC,OAAO,KAAK,CAAC;IACf,CAAC;IAGD,OAAO,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC;AAC3C,CAAC;AAPD,oDAOC;AAKY,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE;QACP,MAAM,EAAE,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB;KAC7B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,OAAO;KACtB;CACF,CAAC;AAOF,SAAgB,YAAY,CAAC,YAAqB;IAEhD,IAAI,YAAY,IAAI,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;QAC/D,OAAO,mBAAW,CAAC,SAAS,CAAC;IAC/B,CAAC;IACD,OAAO,mBAAW,CAAC,OAAO,CAAC;AAC7B,CAAC;AAND,oCAMC","sourcesContent":["/**\n * @fileoverview Babel configuration for React component compilation.\n * Provides default presets and plugins for transforming JSX and modern JavaScript.\n * @module @memberjunction/react-runtime/compiler\n */\n\n/**\n * Default Babel presets for React compilation\n */\nexport const DEFAULT_PRESETS = [\n  'react', // Transforms JSX\n];\n\n/**\n * Default Babel plugins for enhanced functionality\n */\nexport const DEFAULT_PLUGINS: string[] = [\n  // Add plugins as needed for specific transformations\n  // e.g., 'transform-class-properties', 'transform-optional-chaining'\n];\n\n/**\n * Production-specific Babel configuration\n */\nexport const PRODUCTION_CONFIG = {\n  presets: DEFAULT_PRESETS,\n  plugins: [\n    ...DEFAULT_PLUGINS,\n    // Production optimizations could go here\n  ],\n  minified: true,\n  comments: false\n};\n\n/**\n * Development-specific Babel configuration\n */\nexport const DEVELOPMENT_CONFIG = {\n  presets: DEFAULT_PRESETS,\n  plugins: [\n    ...DEFAULT_PLUGINS,\n    // Development helpers could go here\n  ],\n  sourceMaps: 'inline',\n  minified: false,\n  comments: true\n};\n\n/**\n * Get Babel configuration based on environment\n * @param production - Whether to use production configuration\n * @returns Babel configuration object\n */\nexport function getBabelConfig(production: boolean = false) {\n  return production ? PRODUCTION_CONFIG : DEVELOPMENT_CONFIG;\n}\n\n/**\n * Validates that required Babel presets are available\n * @param babel - Babel instance to check\n * @returns true if all required presets are available\n */\nexport function validateBabelPresets(babel: any): boolean {\n  if (!babel || !babel.availablePresets) {\n    return false;\n  }\n\n  // Check that React preset is available\n  return 'react' in babel.availablePresets;\n}\n\n/**\n * Common JSX pragma options for different React versions\n */\nexport const JSX_PRAGMAS = {\n  classic: {\n    pragma: 'React.createElement',\n    pragmaFrag: 'React.Fragment'\n  },\n  automatic: {\n    runtime: 'automatic',\n    importSource: 'react'\n  }\n};\n\n/**\n * Get appropriate JSX configuration based on React version\n * @param reactVersion - React version (e.g., \"18.2.0\")\n * @returns JSX configuration options\n */\nexport function getJSXConfig(reactVersion?: string) {\n  // React 17+ supports the new JSX transform\n  if (reactVersion && parseInt(reactVersion.split('.')[0]) >= 17) {\n    return JSX_PRAGMAS.automatic;\n  }\n  return JSX_PRAGMAS.classic;\n}"]}

package/dist/compiler/component-compiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-compiler.d.ts","sourceRoot":"","sources":["../../src/compiler/component-compiler.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,cAAc,EAEd,iBAAiB,EACjB,cAAc,EAGf,MAAM,UAAU,CAAC;AAsBlB,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,gBAAgB,CAAW;IACnC,OAAO,CAAC,aAAa,CAAM;gBAMf,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IAS5C,gBAAgB,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAS5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,iBAAiB,CAAC;IAyElE,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,iBAAiB;YAmDX,qBAAqB;YAwGrB,UAAU;IA+BxB,OAAO,CAAC,UAAU;IAmElB,OAAO,CAAC,sBAAsB;IA0E9B,OAAO,CAAC,sBAAsB;IAiE9B,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,sBAAsB;IAa9B,UAAU,IAAI,IAAI;IAQlB,YAAY,IAAI,MAAM;IAQtB,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;CAGpD"}
+{"version":3,"file":"component-compiler.d.ts","sourceRoot":"","sources":["../../src/compiler/component-compiler.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,cAAc,EAEd,iBAAiB,EACjB,cAAc,EAGf,MAAM,UAAU,CAAC;AAyBlB,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,gBAAgB,CAAW;IACnC,OAAO,CAAC,aAAa,CAAM;gBAMf,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC;IAS5C,gBAAgB,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAS5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,iBAAiB,CAAC;IAyElE,OAAO,CAAC,kBAAkB;IAkC1B,OAAO,CAAC,iBAAiB;YA6KX,qBAAqB;YA2HrB,UAAU;IA+BxB,OAAO,CAAC,UAAU;IAyElB,OAAO,CAAC,sBAAsB;IA0E9B,OAAO,CAAC,sBAAsB;IAiE9B,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,sBAAsB;IAa9B,UAAU,IAAI,IAAI;IAQlB,YAAY,IAAI,MAAM;IAQtB,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;CAGpD"}

package/dist/compiler/component-compiler.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentCompiler = void 0;
 const library_registry_1 = require("../utilities/library-registry");
+const library_loader_1 = require("../utilities/library-loader");
 const DEFAULT_COMPILER_CONFIG = {
     babel: {
         presets: ['react'],
@@ -10,7 +11,8 @@ const DEFAULT_COMPILER_CONFIG = {
     minify: false,
     sourceMaps: false,
     cache: true,
-    maxCacheSize: 100
+    maxCacheSize: 100,
+    debug: false
 };
 class ComponentCompiler {
     constructor(config) {
@@ -38,7 +40,7 @@ class ComponentCompiler {
             const transpiledCode = this.transpileComponent(options.componentCode, options.componentName, options);
             const componentFactory = this.createComponentFactory(transpiledCode, options.componentName, loadedLibraries);
             const compiledComponent = {
-                component: componentFactory,
+                factory: componentFactory,
                 id: this.generateComponentId(options.componentName),
                 name: options.componentName,
                 compiledAt: new Date(),
@@ -99,6 +101,7 @@ class ComponentCompiler {
         useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
         libraries, styles, console, components
       ) {
+        // Parse the component code once to get the component definition
         ${libraryDeclarations ? libraryDeclarations + '\n        ' : ''}${componentDeclarations ? componentDeclarations + '\n        ' : ''}${componentCode}
         
         // Ensure the component exists
@@ -106,16 +109,137 @@ class ComponentCompiler {
           throw new Error('Component "${componentName}" is not defined in the provided code');
         }
         
-        // Return the component with utilities
+        // Store the component in a variable so we don't lose it
+        const UserComponent = ${componentName};
+        
+        // Debug logging to understand what we're getting
+        console.log('Component ${componentName} type:', typeof UserComponent);
+        if (typeof UserComponent === 'object' && UserComponent !== null) {
+          console.log('Component ${componentName} keys:', Object.keys(UserComponent));
+          console.log('Component ${componentName} has .component:', 'component' in UserComponent);
+          if ('component' in UserComponent) {
+            console.log('Component ${componentName}.component type:', typeof UserComponent.component);
+          }
+        }
+        
+        // Check if the component is already a ComponentObject (has a .component property)
+        // If so, extract the actual React component
+        const ActualComponent = (typeof UserComponent === 'object' && UserComponent !== null && 'component' in UserComponent)
+          ? UserComponent.component
+          : UserComponent;
+        
+        // Validate that we have a function (React component)
+        if (typeof ActualComponent !== 'function') {
+          console.error('Invalid component type for ${componentName}:', typeof ActualComponent);
+          console.error('ActualComponent value:', ActualComponent);
+          console.error('Original UserComponent value:', UserComponent);
+          throw new Error('Component "${componentName}" must be a function (React component) or an object with a .component property that is a function. Got: ' + typeof ActualComponent);
+        }
+        
+        // Create a fresh method registry for each factory call
+        const methodRegistry = new Map();
+        
+        // Create a wrapper component that provides RegisterMethod in callbacks
+        const ComponentWithMethodRegistry = React.forwardRef((props, ref) => {
+          // Register methods on mount
+          React.useEffect(() => {
+            // Clear previous methods
+            methodRegistry.clear();
+            
+            // Provide RegisterMethod callback if callbacks exist
+            if (props.callbacks && typeof props.callbacks.RegisterMethod === 'function') {
+              // Component can now register its methods
+              // This will be called from within the component
+            }
+          }, [props.callbacks]);
+          
+          // Create enhanced callbacks with RegisterMethod
+          const enhancedCallbacks = React.useMemo(() => {
+            if (!props.callbacks) return {};
+            
+            return {
+              ...props.callbacks,
+              RegisterMethod: (methodName, handler) => {
+                if (methodName && handler) {
+                  methodRegistry.set(methodName, handler);
+                }
+              }
+            };
+          }, [props.callbacks]);
+          
+          // Render the original component with enhanced callbacks
+          return React.createElement(ActualComponent, {
+            ...props,
+            callbacks: enhancedCallbacks
+          });
+        });
+        
+        ComponentWithMethodRegistry.displayName = '${componentName}WithMethods';
+        
+        // Return the component object with method access
         return {
-          component: ${componentName},
+          component: ComponentWithMethodRegistry,
+          
+          // Legacy methods for backward compatibility
           print: function() { 
-            if (typeof window !== 'undefined' && window.print) {
+            const printMethod = methodRegistry.get('print');
+            if (printMethod) {
+              printMethod();
+            } else if (typeof window !== 'undefined' && window.print) {
               window.print(); 
             }
           },
           refresh: function(data) { 
+            const refreshMethod = methodRegistry.get('refresh');
+            if (refreshMethod) {
+              refreshMethod(data);
+            }
             // Refresh functionality is handled by the host environment
+          },
+          
+          // Standard method accessors with type safety
+          getCurrentDataState: function() {
+            const method = methodRegistry.get('getCurrentDataState');
+            return method ? method() : undefined;
+          },
+          getDataStateHistory: function() {
+            const method = methodRegistry.get('getDataStateHistory');
+            return method ? method() : [];
+          },
+          validate: function() {
+            const method = methodRegistry.get('validate');
+            return method ? method() : true;
+          },
+          isDirty: function() {
+            const method = methodRegistry.get('isDirty');
+            return method ? method() : false;
+          },
+          reset: function() {
+            const method = methodRegistry.get('reset');
+            if (method) method();
+          },
+          scrollTo: function(target) {
+            const method = methodRegistry.get('scrollTo');
+            if (method) method(target);
+          },
+          focus: function(target) {
+            const method = methodRegistry.get('focus');
+            if (method) method(target);
+          },
+          
+          // Generic method invoker for custom methods
+          invokeMethod: function(methodName, ...args) {
+            const method = methodRegistry.get(methodName);
+            if (method) {
+              return method(...args);
+            }
+            console.warn(\`Method '\${methodName}' is not registered on component ${componentName}\`);
+            return undefined;
+          },
+          
+          // Check if a method exists
+          hasMethod: function(methodName) {
+            return methodRegistry.has(methodName);
           }
         };
       }
@@ -123,12 +247,16 @@ class ComponentCompiler {
     }
     async loadRequiredLibraries(libraries, componentLibraries) {
         const loadedLibraries = new Map();
-        console.log('🔍 loadRequiredLibraries called with:', {
-            librariesCount: libraries?.length || 0,
-            libraries: libraries?.map(l => ({ name: l.name, version: l.version, globalVariable: l.globalVariable }))
-        });
+        if (this.config.debug) {
+            console.log('🔍 loadRequiredLibraries called with:', {
+                librariesCount: libraries?.length || 0,
+                libraries: libraries?.map(l => ({ name: l.name, version: l.version, globalVariable: l.globalVariable }))
+            });
+        }
         if (!libraries || libraries.length === 0) {
-            console.log('📚 No libraries to load, returning empty map');
+            if (this.config.debug) {
+                console.log('📚 No libraries to load, returning empty map');
+            }
             return loadedLibraries;
         }
         if (typeof window === 'undefined') {
@@ -141,53 +269,69 @@ class ComponentCompiler {
         else {
             console.warn('⚠️ No componentLibraries provided for LibraryRegistry initialization');
         }
-        const loadPromises = libraries.map(async (lib) => {
-            console.log(`📦 Processing library: ${lib.name}`);
-            const isApproved = library_registry_1.LibraryRegistry.isApproved(lib.name);
-            console.log(`  ✓ Approved check for ${lib.name}: ${isApproved}`);
-            if (!isApproved) {
-                console.error(`  ❌ Library '${lib.name}' is not approved`);
-                throw new Error(`Library '${lib.name}' is not approved. Only approved libraries can be used.`);
-            }
-            const libraryDef = library_registry_1.LibraryRegistry.getLibrary(lib.name);
-            console.log(`  ✓ Library definition found for ${lib.name}: ${!!libraryDef}`);
-            if (!libraryDef) {
-                console.error(`  ❌ Library '${lib.name}' not found in registry`);
-                throw new Error(`Library '${lib.name}' not found in registry`);
-            }
-            const resolvedVersion = library_registry_1.LibraryRegistry.resolveVersion(lib.name, lib.version);
-            console.log(`  ✓ Resolved version for ${lib.name}: ${resolvedVersion}`);
-            const cdnUrl = library_registry_1.LibraryRegistry.getCdnUrl(lib.name, resolvedVersion);
-            console.log(`  ✓ CDN URL for ${lib.name}: ${cdnUrl}`);
-            if (!cdnUrl) {
-                console.error(`  ❌ No CDN URL found for library '${lib.name}' version '${lib.version || 'default'}'`);
-                throw new Error(`No CDN URL found for library '${lib.name}' version '${lib.version || 'default'}'`);
-            }
-            if (window[lib.globalVariable]) {
-                console.log(`  ℹ️ Library ${lib.name} already loaded globally as ${lib.globalVariable}`);
-                loadedLibraries.set(lib.globalVariable, window[lib.globalVariable]);
-                return;
-            }
-            const versionInfo = libraryDef.versions[resolvedVersion || libraryDef.defaultVersion];
-            if (versionInfo?.cssUrls) {
-                await this.loadStyles(versionInfo.cssUrls);
+        const libraryNames = libraries.map(lib => lib.name);
+        if (this.config.debug) {
+            console.log('📦 Using dependency-aware loading for libraries:', libraryNames);
+        }
+        try {
+            const loadedLibraryMap = await library_loader_1.LibraryLoader.loadLibrariesWithDependencies(libraryNames, componentLibraries, 'component-compiler', { debug: this.config.debug });
+            for (const lib of libraries) {
+                const isApproved = library_registry_1.LibraryRegistry.isApproved(lib.name);
+                if (!isApproved) {
+                    console.error(`❌ Library '${lib.name}' is not approved`);
+                    throw new Error(`Library '${lib.name}' is not approved. Only approved libraries can be used.`);
+                }
+                const loadedValue = loadedLibraryMap.get(lib.name);
+                if (loadedValue) {
+                    loadedLibraries.set(lib.globalVariable, loadedValue);
+                    if (this.config.debug) {
+                        console.log(`✅ Mapped ${lib.name} to global variable ${lib.globalVariable}`);
+                    }
+                }
+                else {
+                    const globalValue = window[lib.globalVariable];
+                    if (globalValue) {
+                        loadedLibraries.set(lib.globalVariable, globalValue);
+                        if (this.config.debug) {
+                            console.log(`✅ Found ${lib.name} already loaded as ${lib.globalVariable}`);
+                        }
+                    }
+                    else {
+                        console.error(`❌ Library '${lib.name}' failed to load`);
+                        throw new Error(`Library '${lib.name}' failed to load or did not expose '${lib.globalVariable}'`);
+                    }
+                }
             }
-            console.log(`  📥 Loading script from CDN for ${lib.name}...`);
-            await this.loadScript(cdnUrl, lib.globalVariable);
-            const libraryValue = window[lib.globalVariable];
-            console.log(`  ✓ Library ${lib.name} loaded successfully, global variable ${lib.globalVariable} is:`, typeof libraryValue);
-            if (libraryValue) {
-                loadedLibraries.set(lib.globalVariable, libraryValue);
-                console.log(`  ✅ Added ${lib.name} to loaded libraries map`);
+        }
+        catch (error) {
+            console.error('Failed to load libraries with dependencies:', error);
+            if (this.config.debug) {
+                console.warn('⚠️ Falling back to non-dependency-aware loading due to error');
             }
-            else {
-                console.error(`  ❌ Library '${lib.name}' failed to expose global variable '${lib.globalVariable}'`);
-                throw new Error(`Library '${lib.name}' failed to load or did not expose '${lib.globalVariable}'`);
+            for (const lib of libraries) {
+                if (window[lib.globalVariable]) {
+                    loadedLibraries.set(lib.globalVariable, window[lib.globalVariable]);
+                }
+                else {
+                    const libraryDef = library_registry_1.LibraryRegistry.getLibrary(lib.name);
+                    if (libraryDef) {
+                        const resolvedVersion = library_registry_1.LibraryRegistry.resolveVersion(lib.name, lib.version);
+                        const cdnUrl = library_registry_1.LibraryRegistry.getCdnUrl(lib.name, resolvedVersion);
+                        if (cdnUrl) {
+                            await this.loadScript(cdnUrl, lib.globalVariable);
+                            const libraryValue = window[lib.globalVariable];
+                            if (libraryValue) {
+                                loadedLibraries.set(lib.globalVariable, libraryValue);
+                            }
+                        }
+                    }
+                }
             }
-        });
-        await Promise.all(loadPromises);
-        console.log(`✅ All libraries loaded successfully. Total: ${loadedLibraries.size}`);
-        console.log('📚 Loaded libraries map:', Array.from(loadedLibraries.keys()));
+        }
+        if (this.config.debug) {
+            console.log(`✅ All libraries loaded successfully. Total: ${loadedLibraries.size}`);
+            console.log('📚 Loaded libraries map:', Array.from(loadedLibraries.keys()));
+        }
         return loadedLibraries;
     }
     async loadStyles(urls) {
@@ -237,12 +381,17 @@ class ComponentCompiler {
                 const checkInterval = 100;
                 const checkGlobal = () => {
                     if (window[globalName]) {
-                        console.log(`  ✓ Global variable ${globalName} found after ${attempts * checkInterval}ms`);
+                        if (this.config.debug) {
+                            console.log(`  ✓ Global variable ${globalName} found after ${attempts * checkInterval}ms`);
+                        }
                         resolve();
                     }
                     else if (attempts >= maxAttempts) {
-                        console.error(`  ❌ ${globalName} not found after ${attempts * checkInterval}ms`);
-                        console.log(`  ℹ️ Window properties:`, Object.keys(window).filter(k => k.toLowerCase().includes(globalName.toLowerCase())));
+                        if (this.config.debug) {
+                            console.error(`  ❌ ${globalName} not found after ${attempts * checkInterval}ms`);
+                            const matchingKeys = Object.keys(window).filter(k => k.toLowerCase().includes(globalName.toLowerCase()));
+                            console.log(`  ℹ️ Matching window properties: ${matchingKeys.join(', ') || 'none'}`);
+                        }
                         reject(new Error(`${globalName} not found after loading script from ${url}`));
                     }
                     else {