@qwickapps/react-framework 1.4.9 → 1.5.0

package/src/__tests__/schemas/transformers/SerializationIntegration.test.tsx

@@ -12,11 +12,12 @@ import { ComponentTransformer } from '../ComponentTransformer';
 import { Serializable, SerializableConstructor } from '../../types/Serializable';
 
 // Mock ErrorBoundary for testing unknown component handling
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 class MockErrorBoundary extends React.Component<
   { children: React.ReactNode; onError?: (error: Error) => void },
   { hasError: boolean; error?: Error }
 > {
-  constructor(props: any) {
+  constructor(props: { children: React.ReactNode; onError?: (error: Error) => void }) {
     super(props);
     this.state = { hasError: false };
   }
@@ -42,15 +43,15 @@ class MockErrorBoundary extends React.Component<
 
 // Complex Mock Components for Integration Testing
 class MockButton implements Serializable {
-  constructor(public props: { 
-    label?: string; 
+  constructor(public props: {
+    label?: string;
     variant?: 'primary' | 'secondary' | 'danger';
     onClick?: () => void;
     disabled?: boolean;
-    children?: any;
+    children?: React.ReactNode;
   }) {}
 
-  static fromJson(jsonData: any): ReactElement {
+  static fromJson(jsonData: Record<string, unknown>): ReactElement {
     return React.createElement('button', {
       className: `btn btn-${jsonData.variant || 'primary'}`,
       disabled: jsonData.disabled,
@@ -59,7 +60,7 @@ class MockButton implements Serializable {
     }, jsonData.label || jsonData.children || 'Button');
   }
 
-  toJson(): any {
+  toJson(): unknown {
     return {
       label: this.props.label,
       variant: this.props.variant,
@@ -74,11 +75,11 @@ class MockSection implements Serializable {
   constructor(public props: { 
     title?: string;
     className?: string;
-    children?: any;
+    children?: unknown;
     background?: string;
   }) {}
 
-  static fromJson(jsonData: any): ReactElement {
+  static fromJson(jsonData: unknown): ReactElement {
     // Section components often need to deserialize their children
     const children = jsonData.children ? 
       ComponentTransformer.deserialize(jsonData.children) : null;
@@ -93,7 +94,7 @@ class MockSection implements Serializable {
     ].filter(Boolean));
   }
 
-  toJson(): any {
+  toJson(): unknown {
     return {
       title: this.props.title,
       className: this.props.className,
@@ -108,11 +109,11 @@ class MockCard implements Serializable {
     title?: string; 
     content?: string;
     image?: string;
-    actions?: any[];
-    metadata?: Record<string, any>;
+    actions?: unknown[];
+    metadata?: Record<string, unknown>;
   }) {}
 
-  static fromJson(jsonData: any): ReactElement {
+  static fromJson(jsonData: unknown): ReactElement {
     const actions = jsonData.actions ? 
       ComponentTransformer.deserialize(jsonData.actions) : null;
 
@@ -137,7 +138,7 @@ class MockCard implements Serializable {
     ].filter(Boolean));
   }
 
-  toJson(): any {
+  toJson(): unknown {
     return {
       title: this.props.title,
       content: this.props.content,
@@ -156,7 +157,7 @@ class MockCode implements Serializable {
     highlightLines?: number[];
   }) {}
 
-  static fromJson(jsonData: any): ReactElement {
+  static fromJson(jsonData: unknown): ReactElement {
     return React.createElement('pre', {
       className: `code-block language-${jsonData.language || 'text'}`,
       'data-testid': 'mock-code',
@@ -165,7 +166,7 @@ class MockCode implements Serializable {
     }, React.createElement('code', {}, jsonData.code || ''));
   }
 
-  toJson(): any {
+  toJson(): unknown {
     return {
       code: this.props.code,
       language: this.props.language,
@@ -256,7 +257,7 @@ describe('Component Serialization Integration Tests', () => {
       const result = ComponentTransformer.deserialize(mixedContent);
       expect(Array.isArray(result)).toBe(true);
       
-      const elements = result as any[];
+      const elements = result as unknown[];
       expect(elements).toHaveLength(6);
       expect(elements[0]).toBe('Plain text content');
       expect(React.isValidElement(elements[1])).toBe(true);
@@ -518,9 +519,6 @@ describe('Component Serialization Integration Tests', () => {
       };
 
       let capturedError: Error | null = null;
-      const onError = (error: Error) => {
-        capturedError = error;
-      };
 
       // Wrap in error boundary and attempt deserialization
       expect(() => {
@@ -542,7 +540,7 @@ describe('Component Serialization Integration Tests', () => {
         { tag: 'Button', version: '1.0.0', data: null }, // Null data
       ];
 
-      malformedComponents.forEach((malformed, index) => {
+      malformedComponents.forEach((malformed) => {
         expect(() => {
           ComponentTransformer.deserialize(malformed);
         }).toThrow(/Malformed component data/);
@@ -584,7 +582,7 @@ describe('Component Serialization Integration Tests', () => {
 
     it('should handle deeply nested structures without stack overflow', () => {
       // Create deeply nested structure (20 levels)
-      let nestedStructure: any = {
+      let nestedStructure: unknown = {
         tag: 'Button',
         version: '1.0.0',
         data: { label: 'Deep Button' }

package/src/__tests__/schemas/transformers/SerializationPerformance.test.ts

@@ -15,10 +15,10 @@ import { Serializable, SerializableConstructor } from '../../types/Serializable'
 class PerfMockButton implements Serializable {
   static readonly tagName = 'Button';
   static readonly version = '1.0.0';
-  
-  constructor(public props: { id?: string; label?: string; metadata?: any }) {}
 
-  static fromJson(jsonData: any): ReactElement {
+  constructor(public props: { id?: string; label?: string; metadata?: Record<string, unknown> }) {}
+
+  static fromJson(jsonData: Record<string, unknown>): ReactElement {
     return React.createElement('button', {
       id: jsonData.id,
       'data-label': jsonData.label,
@@ -26,7 +26,7 @@ class PerfMockButton implements Serializable {
     }, jsonData.label || 'Button');
   }
 
-  toJson(): any {
+  toJson(): Record<string, unknown> {
     return {
       id: this.props.id,
       label: this.props.label,
@@ -38,10 +38,10 @@ class PerfMockButton implements Serializable {
 class PerfMockSection implements Serializable {
   static readonly tagName = 'Section';
   static readonly version = '1.0.0';
-  
-  constructor(public props: { id?: string; children?: any }) {}
 
-  static fromJson(jsonData: any): ReactElement {
+  constructor(public props: { id?: string; children?: React.ReactNode }) {}
+
+  static fromJson(jsonData: Record<string, unknown>): ReactElement {
     const children = jsonData.children ? ComponentTransformer.deserialize(jsonData.children) : null;
     return React.createElement('section', {
       id: jsonData.id,
@@ -49,7 +49,7 @@ class PerfMockSection implements Serializable {
     }, children);
   }
 
-  toJson(): any {
+  toJson(): unknown {
     return {
       id: this.props.id,
       children: this.props.children ? ComponentTransformer.serialize(this.props.children) : null
@@ -70,8 +70,8 @@ function measurePerformance<T>(
   operationCount: number = 1
 ): { result: T; metrics: PerformanceMetrics } {
   // Force garbage collection if available (for more accurate memory measurements)
-  if ((global as any).gc) {
-    (global as any).gc();
+  if ((global as unknown).gc) {
+    (global as unknown).gc();
   }
 
   const startMemory = process.memoryUsage().heapUsed;
@@ -245,8 +245,8 @@ describe('Component Serialization Performance Tests', () => {
       }
 
       // Force garbage collection
-      if ((global as any).gc) {
-        (global as any).gc();
+      if ((global as unknown).gc) {
+        (global as unknown).gc();
         await new Promise(resolve => setTimeout(resolve, 100));
       }
 
@@ -303,7 +303,7 @@ describe('Component Serialization Performance Tests', () => {
 
       for (const depth of depths) {
         // Create nested structure
-        let nestedData: any = {
+        let nestedData: unknown = {
           tagName: 'Button',
           version: '1.0.0',
           data: { id: 'deep-button', label: `Button at depth ${depth}` }
@@ -408,9 +408,9 @@ describe('Component Serialization Performance Tests', () => {
       const totalDuration = endTime - startTime;
 
       // Verify all operations completed successfully
-      results.forEach((result, index) => {
+      results.forEach((result) => {
         expect(Array.isArray(result)).toBe(true);
-        expect((result as any[]).length).toBe(componentsPerOperation);
+        expect((result as unknown[]).length).toBe(componentsPerOperation);
       });
 
       console.log(`${concurrentOperations} concurrent operations completed in ${totalDuration.toFixed(2)}ms`);

package/src/__tests__/schemas/transformers/TestAutomation.test.ts

@@ -237,11 +237,11 @@ describe('QA Test Automation Integration', () => {
       ComponentTransformer.clearRegistry();
       
       const mockComponent = {
-        fromJson: (data: any) => ({ type: 'div', props: { children: data.text } }),
+        fromJson: (data: Record<string, unknown>) => ({ type: 'div', props: { children: data.text } }),
         prototype: { toJson: () => ({ text: 'test' }) }
       };
-      
-      ComponentTransformer.registerComponent('MockComponent', mockComponent as any);
+
+      ComponentTransformer.registerComponent('MockComponent', mockComponent as unknown as React.ComponentType);
       
       const testData = {
         tagName: 'MockComponent',

package/src/__tests__/schemas/transformers/nested-serialization.test.tsx

@@ -20,7 +20,7 @@ describe('Nested Component Serialization', () => {
           span={12}
           padding="large"
           background="primary.main"
-          onClick={(event) => { console.log("Parent clicked"); }}
+          onClick={() => { console.log("Parent clicked"); }}
         >
           <Container 
             span={6}

package/src/__tests__/schemas/transformers/round-trip-component-serialization.test.tsx

@@ -49,11 +49,11 @@ describe('Round-trip Component Serialization', () => {
 
     it('should perform perfect round-trip with event handlers', () => {
       const original = (
-        <Container 
-          span={8} 
+        <Container
+          span={8}
           padding="large"
-          onClick={(event) => { console.log("Container clicked"); }}
-          onMouseEnter={(event) => { console.log("Mouse entered"); }}
+          onClick={() => { console.log("Container clicked"); }}
+          onMouseEnter={() => { console.log("Mouse entered"); }}
         >
           Interactive container
         </Container>
@@ -171,9 +171,9 @@ describe('Round-trip Component Serialization', () => {
 
     it('should perform perfect round-trip with event handlers', () => {
       const original = (
-        <Text 
+        <Text
           variant="button"
-          onClick={(event) => { alert("Text clicked"); }}
+          onClick={() => { alert("Text clicked"); }}
           style={{ cursor: 'pointer' }}
         >
           Clickable text
@@ -385,11 +385,11 @@ describe('Round-trip Component Serialization', () => {
           role="main"
           aria-label="Comprehensive test container"
           data-testid="round-trip-test"
-          
+
           // Event handlers
-          onClick={(e) => console.log('clicked')}
-          onMouseEnter={(e) => console.log('mouse enter')}
-          onFocus={(e) => console.log('focused')}
+          onClick={() => console.log('clicked')}
+          onMouseEnter={() => console.log('mouse enter')}
+          onFocus={() => console.log('focused')}
         >
           Comprehensive test content
         </Container>

package/src/__tests__/utils/optional-logging.test.ts

@@ -15,12 +15,12 @@ describe('Optional logging dependency', () => {
 
   afterEach(() => {
     // Restore original require
-    (global as any).require = originalRequire;
+    (global as unknown as { require: typeof require }).require = originalRequire;
   });
 
   it('should use console fallback when @qwickapps/logging is not available', () => {
     // Mock require to throw an error (simulating missing package)
-    (global as any).require = jest.fn().mockImplementation((module: string) => {
+    (global as unknown as { require: jest.Mock }).require = jest.fn().mockImplementation((module: string) => {
       if (module === '@qwickapps/logging') {
         throw new Error('Cannot find module');
       }
@@ -63,7 +63,7 @@ describe('Optional logging dependency', () => {
     process.env.NODE_ENV = 'production';
 
     // Mock require to throw an error (use fallback)
-    (global as any).require = jest.fn().mockImplementation((module: string) => {
+    (global as unknown as { require: jest.Mock }).require = jest.fn().mockImplementation((module: string) => {
       if (module === '@qwickapps/logging') {
         throw new Error('Cannot find module');
       }

package/src/components/AccessibilityProvider.tsx

@@ -9,7 +9,7 @@ export interface AccessibilityState {
 	isKeyboardUser: boolean;
 	issues: AccessibilityIssue[];
 	lastAnnouncement: Announcement | null;
-	preferences: Record<string, any>;
+	preferences: Record<string, unknown>;
 }
 
 export interface AccessibilityIssue {
@@ -415,10 +415,12 @@ export const AccessibilityProvider: React.FC<AccessibilityProviderProps> = ({
 		if (typeof document === 'undefined') return;
 
 		const { highContrast, reducedMotion, largeText } = state;
-		
+
 		document.body.classList.toggle('high-contrast', highContrast);
 		document.body.classList.toggle('reduced-motion', reducedMotion);
 		document.body.classList.toggle('large-text', largeText);
+		// Using specific properties is more granular than using entire state object
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [state.highContrast, state.reducedMotion, state.largeText]);
 
 	return (

package/src/components/ErrorBoundary.tsx

@@ -68,7 +68,7 @@ export class ErrorBoundary extends Component<Props, State> {
 
 		// Send error to logging service if available
 		if (typeof window !== 'undefined') {
-			// @ts-ignore - Global error logging service
+			// @ts-expect-error - Global error logging service may not be defined
 			if (window.qwickapps?.logError) {
 				window.qwickapps.logError(error, errorInfo);
 			}

package/src/components/Html.tsx

@@ -26,16 +26,16 @@ import { Box } from '@mui/material';
 import React, { ReactElement } from 'react';
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 import HtmlModel from '../schemas/HtmlSchema';
+import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 import { ModelView } from './base/ModelView';
 import SafeSpan from './SafeSpan';
 
 // Legacy types for backward compatibility (now unused internally but maintained for API)
 export interface TransformConfig {
-  rules?: any[];
+  rules?: unknown[];
   sanitize?: boolean;
-  sanitizeOptions?: any;
+  sanitizeOptions?: Record<string, unknown>;
   fallbackComponent?: (element: Element, key: string) => React.ReactNode;
 }
 
@@ -45,20 +45,17 @@ type HtmlViewProps = SchemaProps<HtmlModel> & {
   /** Whether to sanitize HTML (legacy - now handled internally) */
   sanitize?: boolean;
   /** Custom sanitization options (legacy - now handled internally) */
-  sanitizeOptions?: any;
+  sanitizeOptions?: Record<string, unknown>;
   /** Container element type (React.ElementType for internal use, string in model for serialization) */
   component?: React.ElementType;
 };
 
-export interface HtmlProps extends HtmlViewProps, WithDataBinding { }
+export interface HtmlProps extends HtmlViewProps, WithDataBinding {}
 
 // View component - handles the actual rendering
 function HtmlView({
   children = '',
-  transformConfig,
   stripHeaders = false,
-  sanitize = true,
-  sanitizeOptions,
   placeholder,
   component = 'div',
   ...restProps
@@ -66,7 +63,7 @@ function HtmlView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (HtmlView as any)[QWICKAPP_COMPONENT] = true;
+  (HtmlView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Return placeholder if no HTML content
   if (!children || !children.trim()) {
@@ -186,7 +183,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   static readonly version = '1.0.0';
 
   // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
+  static fromJson(jsonData: Record<string, unknown>): ReactElement {
     const { tagName, version, data } = jsonData;
     if (tagName !== Html.tagName) {
       throw new Error(`Cannot deserialize: Expected tagName 'Html' but got '${tagName}'`);
@@ -200,7 +197,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): Record<string, unknown> {
     return {
       children: this.props.children,
       stripHeaders: this.props.stripHeaders,
@@ -210,7 +207,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
 
   // Html component renders traditional props view
   protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
+    const { ...restProps } = this.props;
     return <HtmlView {...restProps} />;
   }
 
@@ -220,7 +217,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Register HTML patterns that Html component can handle
-  static registerPatternHandlers(registry: any): void {
+  static registerPatternHandlers(registry: Record<string, unknown>): void {
     // Register div elements with specific classes for Html transformation
     if (!registry.hasPattern('div.html-content')) {
       registry.registerPattern('div.html-content', Html.transformHtmlDiv);
@@ -233,7 +230,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Transform div with html-content class to Html component
-  private static transformHtmlDiv(element: Element): any {
+  private static transformHtmlDiv(element: Element): Record<string, unknown> {
     const stripHeaders = element.getAttribute('data-strip-headers') === 'true';
     const placeholder = element.getAttribute('data-placeholder');
 
@@ -248,7 +245,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Transform elements with data-html attribute to Html component
-  private static transformDataHtml(element: Element): any {
+  private static transformDataHtml(element: Element): Record<string, unknown> {
     const htmlContent = element.getAttribute('data-html') || element.innerHTML;
     const stripHeaders = element.getAttribute('data-strip-headers') === 'true';
     const placeholder = element.getAttribute('data-placeholder');
@@ -269,7 +266,7 @@ function HtmlWithDataBinding(props: HtmlProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Use data binding
-  const { dataSource: _source, loading, error, cached, ...htmlProps } = useDataBinding<HtmlModel>(
+  const { loading, error, ...htmlProps } = useDataBinding<HtmlModel>(
     dataSource!,
     restProps as Partial<HtmlModel>,
     HtmlModel.getSchema(),

package/src/components/Logo.tsx

@@ -35,7 +35,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
 import LogoModel from '../schemas/LogoSchema';
@@ -73,13 +73,16 @@ function LogoView({
   className,
   ...restProps
 }: LogoViewProps) {
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
-  
-  // Convert separate offset values to BadgeOffset object
-  const badgeOffset: BadgeOffset | undefined = (badgeOffsetX !== undefined || badgeOffsetY !== undefined) 
-    ? { x: badgeOffsetX, y: badgeOffsetY }
-    : undefined;
-  
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+
+  // Convert separate offset values to BadgeOffset object - memoize to prevent unnecessary re-renders
+  const badgeOffset: BadgeOffset | undefined = useMemo(
+    () => (badgeOffsetX !== undefined || badgeOffsetY !== undefined)
+      ? { x: badgeOffsetX, y: badgeOffsetY }
+      : undefined,
+    [badgeOffsetX, badgeOffsetY]
+  );
+
   const textRef = useRef<SVGTextElement>(null);
   const [calculatedBadgePosition, setCalculatedBadgePosition] = useState({ x: 155, y: 20 });
   const [svgWidth, setSvgWidth] = useState(180);
@@ -156,7 +159,7 @@ function LogoView({
   const { fontSize, height } = getSizeConfig(size, isNewLine);
 
   // Calculate badge position based on semantic positioning system
-  const calculateBadgePosition = useCallback((textBBox: DOMRect, svgWidth: number, svgHeight: number) => {
+  const calculateBadgePosition = useCallback((textBBox: DOMRect) => {
     // Scale factor based on font size (medium/28px is the baseline)
     const scale = fontSize / 28; // 28 is the medium/default font size
     const scaledOffset = 8 * scale;
@@ -223,14 +226,14 @@ function LogoView({
     if (textRef.current) {
       const textBBox = textRef.current.getBBox();
       // Calculate badge position using semantic positioning
-      const badgePos = calculateBadgePosition(textBBox, svgWidth, height);
+      const badgePos = calculateBadgePosition(textBBox);
       // Ensure SVG is wide enough to accommodate text and badge
       const requiredWidth = Math.max(180, textBBox.x + textBBox.width + 20);
-      
+
       setCalculatedBadgePosition(badgePos);
       setSvgWidth(requiredWidth);
     }
-  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts]);
+  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts, svgWidth]);
   
   // Determine CSS class for variant
   let variantClass = '';
@@ -268,23 +271,24 @@ function LogoView({
             <animate attributeName="r" values={`${badgeRadius};${badgeRadius + 1};${badgeRadius}`} dur="1.5s" repeatCount="indefinite" />
           </circle>
         );
-      case 'star':
+      case 'star': {
         const starScale = scale;
         return (
-          <polygon 
+          <polygon
             points={`${x},${y-5*starScale} ${x+2*starScale},${y} ${x+7*starScale},${y} ${x+3*starScale},${y+3*starScale} ${x+5*starScale},${y+8*starScale} ${x},${y+5*starScale} ${x-5*starScale},${y+8*starScale} ${x-3*starScale},${y+3*starScale} ${x-7*starScale},${y} ${x-2*starScale},${y}`}
             {...baseProps}
           >
             <animate attributeName="opacity" values="0.8;1;0.8" dur="1.5s" repeatCount="indefinite" />
           </polygon>
         );
+      }
       case 'square':
         return (
           <rect x={x-badgeRadius} y={y-badgeRadius} width={badgeSize} height={badgeSize} {...baseProps}>
             <animate attributeName="opacity" values="0.8;1;0.8" dur="1.5s" repeatCount="indefinite" />
           </rect>
         );
-      case 'heart':
+      case 'heart': {
         const heartScale = scale;
         return (
           <path
@@ -294,6 +298,7 @@ function LogoView({
             <animate attributeName="fill-opacity" values="0.7;1;0.7" dur="1.5s" repeatCount="indefinite" />
           </path>
         );
+      }
       default:
         return (
           <circle cx={x} cy={y} r={badgeRadius} {...baseProps}>
@@ -365,7 +370,7 @@ function LogoView({
     }
 
     // Create container with image positioned based on imagePosition
-    let containerStyle: React.CSSProperties = {
+    const containerStyle: React.CSSProperties = {
       display: 'flex',
       alignItems: 'center',
       gap: '8px',
@@ -421,20 +426,28 @@ function LogoView({
 // Main Logo component with data binding support
 function Logo(props: LogoProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
-  
+
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<LogoModel>(
+    dataSource || '',
+    {
+      initialData: restProps,
+      schema: LogoModel.getSchema(),
+      cache: true,
+      cacheTTL: 300000,
+      strict: false,
+      ...bindingOptions
+    }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <LogoView {...restProps} />;
   }
-  
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...logoProps } = useDataBinding<LogoModel>(
-    dataSource,
-    restProps as Partial<LogoModel>,
-    LogoModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-  
+
+  // Use data binding result
+  const { loading, error, ...logoProps } = bindingResult;
+
   // Show loading state
   if (loading) {
     return (
@@ -443,7 +456,7 @@ function Logo(props: LogoProps) {
       </div>
     );
   }
-  
+
   // Show error state
   if (error) {
     return (
@@ -452,12 +465,12 @@ function Logo(props: LogoProps) {
       </div>
     );
   }
-  
+
   return <LogoView {...logoProps} />;
 }
 
 // Mark as QwickApp component
-(Logo as any)[QWICKAPP_COMPONENT] = true;
+Object.defineProperty(Logo, QWICKAPP_COMPONENT, { value: true, enumerable: false, configurable: true });
 
 // Export types for external use
 export type { LogoVariant, LogoSize, LogoBadgeShape, PositionType, BadgeOffset };