@qwickapps/react-framework 1.5.6 → 1.5.8

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "palettes": [
     {
       "id": "default",
@@ -8,11 +8,11 @@
       "description": "Classic blue and neutral color scheme - the original QwickApps palette",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.6",
-      "file": "palette-default.1.5.6.css",
+      "version": "1.5.8",
+      "file": "palette-default.1.5.8.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.5.6.min.css",
+      "fileMinified": "palette-default.1.5.8.min.css",
       "fileLatest": "palette-default.latest.css",
       "fileLatestMinified": "palette-default.latest.min.css"
     },
@@ -22,11 +22,11 @@
       "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.6",
-      "file": "palette-autumn.1.5.6.css",
+      "version": "1.5.8",
+      "file": "palette-autumn.1.5.8.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.5.6.min.css",
+      "fileMinified": "palette-autumn.1.5.8.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.6",
-      "file": "palette-cosmic.1.5.6.css",
+      "version": "1.5.8",
+      "file": "palette-cosmic.1.5.8.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.5.6.min.css",
+      "fileMinified": "palette-cosmic.1.5.8.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.6",
-      "file": "palette-ocean.1.5.6.css",
+      "version": "1.5.8",
+      "file": "palette-ocean.1.5.8.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.5.6.min.css",
+      "fileMinified": "palette-ocean.1.5.8.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.6",
-      "file": "palette-spring.1.5.6.css",
+      "version": "1.5.8",
+      "file": "palette-spring.1.5.8.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.5.6.min.css",
+      "fileMinified": "palette-spring.1.5.8.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.6",
-      "file": "palette-winter.1.5.6.css",
+      "version": "1.5.8",
+      "file": "palette-winter.1.5.8.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.5.6.min.css",
+      "fileMinified": "palette-winter.1.5.8.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/dist/schemas/transformers/ReactNodeTransformer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactNodeTransformer.d.ts","sourceRoot":"","sources":["../../../src/schemas/transformers/ReactNodeTransformer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAgB,SAAS,EAAiC,MAAM,OAAO,CAAC;AAG/E;;;GAGG;AACH,qBAAa,oBAAoB;IAC/B;;;;OAIG;IACH,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO;IAoE1C;;;;OAIG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS;IA4C5C;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc;IAqB7B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,uBAAuB;IAmBtC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAkB/B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;CAqBlC"}
+{"version":3,"file":"ReactNodeTransformer.d.ts","sourceRoot":"","sources":["../../../src/schemas/transformers/ReactNodeTransformer.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAgB,SAAS,EAAiC,MAAM,OAAO,CAAC;AAG/E;;;GAGG;AACH,qBAAa,oBAAoB;IAC/B;;;;OAIG;IACH,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO;IAoE1C;;;;OAIG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS;IA4C5C;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc;IAqB7B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,uBAAuB;IAoBtC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAkB/B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;CAuBlC"}

package/dist/utils/iconMap.d.ts

@@ -4,6 +4,11 @@
  * Provides centralized icon mapping for both Material-UI components and emoji representations.
  * Used across the framework for consistent icon rendering in buttons, navigation, admin UI, etc.
  *
+ * Features:
+ * - Static map for commonly used icons with emoji support
+ * - Fallback to HelpOutline icon for unmapped icons (with console warning)
+ * - Runtime icon registration via registerIcon() for app-specific icons
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 import React from 'react';
@@ -15,21 +20,28 @@ export interface IconMapping {
     component: React.ComponentType;
 }
 /**
- * Centralized icon registry mapping icon names to their representations
- * Supports both Material-UI components and emoji for different contexts
+ * Centralized icon registry mapping icon names to their representations.
+ * Sorted alphabetically by category, then by key within each category.
+ *
+ * For icons not in this map, getIconComponent() will return a HelpOutline fallback
+ * and log a warning. Use registerIcon() to add app-specific icons at runtime.
  */
 export declare const iconMap: Record<string, IconMapping>;
 /**
  * Get emoji representation of an icon
- * @param iconName - Icon name (case-insensitive)
+ * @param iconName - Icon name (case-insensitive, supports snake_case)
  * @param fallback - Fallback emoji if icon not found (default: 🔗)
  * @returns Emoji string
  */
 export declare function getIconEmoji(iconName: string | undefined, fallback?: string): string;
 /**
- * Get Material-UI component representation of an icon
- * @param iconName - Icon name (case-insensitive)
- * @returns React element or null if not found
+ * Get Material-UI component representation of an icon.
+ *
+ * Uses the static iconMap for known icons. For unmapped icons,
+ * returns a HelpOutline fallback and logs a warning.
+ *
+ * @param iconName - Icon name (case-insensitive, supports snake_case)
+ * @returns React element (mapped icon or HelpOutline fallback), or null if no name provided
  */
 export declare function getIconComponent(iconName: string | undefined): React.ReactElement | null;
 /**
@@ -38,11 +50,12 @@ export declare function getIconComponent(iconName: string | undefined): React.Re
  */
 export declare function registerIcon(name: string, mapping: IconMapping): void;
 /**
- * Check if an icon is registered
+ * Check if an icon is registered in the static map
+ * If false, getIconComponent will return HelpOutline fallback
  */
 export declare function hasIcon(iconName: string): boolean;
 /**
- * Get all registered icon names
+ * Get all registered icon names from the static map
  */
 export declare function getRegisteredIcons(): string[];
 //# sourceMappingURL=iconMap.d.ts.map

package/dist/utils/iconMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iconMap.d.ts","sourceRoot":"","sources":["../../src/utils/iconMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAuE1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAqG/C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,GAAE,MAAa,GAAG,MAAM,CAI1F;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAWxF;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAErE;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C"}
+{"version":3,"file":"iconMap.d.ts","sourceRoot":"","sources":["../../src/utils/iconMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAyG1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC;CAChC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAmK/C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,GAAE,MAAa,GAAG,MAAM,CAK1F;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAiBxF;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAErE;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C"}

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.5.6",
-  "type": "module",
+  "version": "1.5.8",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/__tests__/utils/iconMap.test.tsx

@@ -0,0 +1,197 @@
+/**
+ * Icon Map Tests
+ *
+ * Tests for the icon mapping utility functions.
+ */
+
+import {
+  getIconComponent,
+  getIconEmoji,
+  hasIcon,
+  registerIcon,
+  getRegisteredIcons,
+  iconMap,
+} from '../../utils/iconMap';
+import { Home, Star } from '@mui/icons-material';
+
+describe('iconMap', () => {
+  describe('getIconComponent', () => {
+    it('returns null for undefined input', () => {
+      expect(getIconComponent(undefined)).toBeNull();
+    });
+
+    it('returns null for empty string', () => {
+      expect(getIconComponent('')).toBeNull();
+    });
+
+    it('returns correct component for mapped icon', () => {
+      const result = getIconComponent('home');
+      expect(result).not.toBeNull();
+      expect(result?.type).toBe(Home);
+    });
+
+    it('is case-insensitive', () => {
+      const lower = getIconComponent('home');
+      const upper = getIconComponent('HOME');
+      const mixed = getIconComponent('Home');
+
+      expect(lower?.type).toBe(upper?.type);
+      expect(lower?.type).toBe(mixed?.type);
+    });
+
+    it('supports snake_case icon names', () => {
+      const result = getIconComponent('manage_accounts');
+      expect(result).not.toBeNull();
+    });
+
+    it('returns HelpOutline fallback for unmapped icons', () => {
+      // Suppress console.warn for this test
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const result = getIconComponent('nonexistent_icon_xyz');
+      expect(result).not.toBeNull();
+
+      warnSpy.mockRestore();
+    });
+
+    it('logs warning for unmapped icons in non-production', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      getIconComponent('nonexistent_icon_xyz');
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining('nonexistent_icon_xyz')
+      );
+
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('getIconEmoji', () => {
+    it('returns fallback for undefined input', () => {
+      expect(getIconEmoji(undefined)).toBe('🔗');
+    });
+
+    it('returns custom fallback when provided', () => {
+      expect(getIconEmoji(undefined, '❓')).toBe('❓');
+    });
+
+    it('returns correct emoji for mapped icon', () => {
+      expect(getIconEmoji('home')).toBe('🏠');
+      expect(getIconEmoji('favorite')).toBe('❤️');
+      expect(getIconEmoji('star')).toBe('⭐');
+    });
+
+    it('is case-insensitive', () => {
+      expect(getIconEmoji('HOME')).toBe(getIconEmoji('home'));
+    });
+
+    it('returns fallback for unmapped icons', () => {
+      expect(getIconEmoji('nonexistent_icon')).toBe('🔗');
+    });
+  });
+
+  describe('hasIcon', () => {
+    it('returns true for mapped icons', () => {
+      expect(hasIcon('home')).toBe(true);
+      expect(hasIcon('settings')).toBe(true);
+      expect(hasIcon('people')).toBe(true);
+    });
+
+    it('returns false for unmapped icons', () => {
+      expect(hasIcon('nonexistent_icon')).toBe(false);
+    });
+
+    it('is case-insensitive', () => {
+      expect(hasIcon('HOME')).toBe(true);
+      expect(hasIcon('Home')).toBe(true);
+    });
+  });
+
+  describe('registerIcon', () => {
+    // Cleanup any test icons after each test to prevent pollution
+    afterEach(() => {
+      delete iconMap['custom_test_icon'];
+      delete iconMap['upper_case_icon'];
+    });
+
+    it('registers new icons at runtime', () => {
+      const customIconName = 'custom_test_icon';
+
+      // Should not exist initially
+      expect(hasIcon(customIconName)).toBe(false);
+
+      // Register it
+      registerIcon(customIconName, {
+        emoji: '🎯',
+        component: Star,
+      });
+
+      // Should exist now
+      expect(hasIcon(customIconName)).toBe(true);
+      expect(getIconEmoji(customIconName)).toBe('🎯');
+    });
+
+    it('is case-insensitive for registration', () => {
+      registerIcon('UPPER_CASE_ICON', {
+        emoji: '🔤',
+        component: Star,
+      });
+
+      expect(hasIcon('upper_case_icon')).toBe(true);
+      expect(hasIcon('UPPER_CASE_ICON')).toBe(true);
+    });
+  });
+
+  describe('getRegisteredIcons', () => {
+    it('returns an array of icon names', () => {
+      const icons = getRegisteredIcons();
+
+      expect(Array.isArray(icons)).toBe(true);
+      expect(icons.length).toBeGreaterThan(0);
+    });
+
+    it('includes common icons', () => {
+      const icons = getRegisteredIcons();
+
+      expect(icons).toContain('home');
+      expect(icons).toContain('settings');
+      expect(icons).toContain('dashboard');
+      expect(icons).toContain('people');
+      expect(icons).toContain('manage_accounts');
+    });
+  });
+
+  describe('iconMap coverage', () => {
+    it('has emoji and component for all entries', () => {
+      for (const [name, mapping] of Object.entries(iconMap)) {
+        expect(mapping.emoji).toBeDefined();
+        expect(typeof mapping.emoji).toBe('string');
+        expect(mapping.emoji.length).toBeGreaterThan(0);
+
+        expect(mapping.component).toBeDefined();
+        // Components can be functions or objects (React.memo, forwardRef, etc.)
+        expect(['function', 'object']).toContain(typeof mapping.component);
+      }
+    });
+
+    it('includes essential icons for navigation', () => {
+      const essentialIcons = [
+        'home', 'dashboard', 'settings', 'menu',
+        'people', 'person', 'help', 'info',
+      ];
+
+      for (const icon of essentialIcons) {
+        expect(hasIcon(icon)).toBe(true);
+      }
+    });
+
+    it('includes authentication icons', () => {
+      const authIcons = ['lock', 'security', 'key', 'login', 'logout'];
+
+      for (const icon of authIcons) {
+        expect(hasIcon(icon)).toBe(true);
+      }
+    });
+  });
+});

package/src/components/AccessibilityChecker.tsx

@@ -23,13 +23,16 @@ import {
   IconButton,
   Divider,
 } from '@mui/material';
-import {
-  Accessibility as AccessibilityIcon,
-  CheckCircle as CheckIcon,
-  Warning as WarningIcon,
-  Error as ErrorIcon,
-  Close as CloseIcon,
-} from '@mui/icons-material';
+import Accessibility from '@mui/icons-material/Accessibility';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import Warning from '@mui/icons-material/Warning';
+import Error from '@mui/icons-material/Error';
+import Close from '@mui/icons-material/Close';
+const AccessibilityIcon = Accessibility;
+const CheckIcon = CheckCircle;
+const WarningIcon = Warning;
+const ErrorIcon = Error;
+const CloseIcon = Close;
 import { getContrastRatio } from '@mui/material';
 import { getCurrentPalette } from '../utils/paletteUtils';
 import { getCurrentTheme } from '../utils/themeUtils';

package/src/components/ErrorBoundary.tsx

@@ -68,9 +68,9 @@ export class ErrorBoundary extends Component<Props, State> {
 
 		// Send error to logging service if available
 		if (typeof window !== 'undefined') {
-			// @ts-expect-error - Global error logging service may not be defined
-			if (window.qwickapps?.logError) {
-				window.qwickapps.logError(error, errorInfo);
+			const globalWindow = window as unknown as { qwickapps?: { logError?: (error: Error, errorInfo: React.ErrorInfo) => void } };
+			if (globalWindow.qwickapps?.logError) {
+				globalWindow.qwickapps.logError(error, errorInfo);
 			}
 		}
 	}

package/src/components/Html.tsx

@@ -58,12 +58,15 @@ function HtmlView({
   stripHeaders = false,
   placeholder,
   component = 'div',
+  transformConfig,
+  sanitize,
+  sanitizeOptions,
   ...restProps
 }: HtmlViewProps) {
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (HtmlView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(HtmlView, { [QWICKAPP_COMPONENT]: true });
 
   // Return placeholder if no HTML content
   if (!children || !children.trim()) {
@@ -177,7 +180,7 @@ function HtmlView({
 }
 
 // Main component with data binding support and serialization capability
-export class Html extends ModelView<HtmlProps, HtmlModel> {
+export class Html extends ModelView<HtmlProps> {
   // Component self-declaration for serialization
   static readonly tagName = 'Html';
   static readonly version = '1.0.0';
@@ -191,9 +194,11 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
     if (version !== Html.version) {
       console.warn(`Version mismatch: Expected ${Html.version} but got ${version}`);
     }
-    
-    const { children, ...props } = data || {};
-    return <Html {...props} >{ComponentTransformer.deserialize(children)}</Html>;
+
+    const typedData = (data as Record<string, unknown>) || {};
+    const { children, ...props } = typedData;
+    // Children should be a string (HTML content), not deserialized React nodes
+    return <Html {...props}>{children as string}</Html>;
   }
 
   // Component-specific serialization properties
@@ -218,14 +223,16 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
 
   // Register HTML patterns that Html component can handle
   static registerPatternHandlers(registry: Record<string, unknown>): void {
+    const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => 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);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('div.html-content')) {
+      typedRegistry.registerPattern?.('div.html-content', Html.transformHtmlDiv);
     }
 
     // Register elements with data-html attribute
-    if (!registry.hasPattern('[data-html]')) {
-      registry.registerPattern('[data-html]', Html.transformDataHtml);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('[data-html]')) {
+      typedRegistry.registerPattern?.('[data-html]', Html.transformDataHtml);
     }
   }
 
@@ -268,9 +275,7 @@ function HtmlWithDataBinding(props: HtmlProps) {
   // Use data binding
   const { loading, error, ...htmlProps } = useDataBinding<HtmlModel>(
     dataSource!,
-    restProps as Partial<HtmlModel>,
-    HtmlModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<HtmlModel>
   );
 
   // Show loading state

package/src/components/Logo.tsx

@@ -430,14 +430,7 @@ function Logo(props: LogoProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<LogoModel>(
     dataSource || '',
-    {
-      initialData: restProps,
-      schema: LogoModel.getSchema(),
-      cache: true,
-      cacheTTL: 300000,
-      strict: false,
-      ...bindingOptions
-    }
+    restProps as Partial<LogoModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/Markdown.tsx

@@ -35,7 +35,7 @@ type MarkdownViewProps = SchemaProps<MarkdownModel> & {
   /** Custom transformation configuration for HTML conversion */
   htmlTransformConfig?: TransformConfig;
   /** Custom sanitization options */
-  sanitizeOptions?: unknown;
+  sanitizeOptions?: Record<string, unknown>;
   /** Container element type */
   component?: React.ElementType;
   /** Marked options for Markdown parsing */
@@ -78,7 +78,7 @@ function MarkdownView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (MarkdownView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(MarkdownView, { [QWICKAPP_COMPONENT]: true });
 
   // Return placeholder if no Markdown content
   if (!children || !children.trim()) {
@@ -186,7 +186,7 @@ function MarkdownView({
 }
 
 // Main component with data binding support and serialization capability
-export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
+export class Markdown extends ModelView<MarkdownProps> {
   // Component self-declaration for serialization
   static readonly tagName = 'Markdown';
   static readonly version = '1.0.0';
@@ -213,14 +213,16 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
 
   // Register HTML patterns that Markdown component can handle
   static registerPatternHandlers(registry: unknown): void {
+    const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
     // Register div elements with specific classes for Markdown transformation
-    if (!registry.hasPattern('div.markdown-content')) {
-      registry.registerPattern('div.markdown-content', Markdown.transformMarkdownDiv);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('div.markdown-content')) {
+      typedRegistry.registerPattern?.('div.markdown-content', Markdown.transformMarkdownDiv);
     }
     
     // Register elements with data-markdown attribute
-    if (!registry.hasPattern('[data-markdown]')) {
-      registry.registerPattern('[data-markdown]', Markdown.transformDataMarkdown);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('[data-markdown]')) {
+      typedRegistry.registerPattern?.('[data-markdown]', Markdown.transformDataMarkdown);
     }
   }
 
@@ -263,9 +265,7 @@ function MarkdownWithDataBinding(props: MarkdownProps) {
   // Use data binding
   const { loading, error, ...markdownProps } = useDataBinding<MarkdownModel>(
     dataSource!,
-    restProps as Partial<MarkdownModel>,
-    MarkdownModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<MarkdownModel>
   );
 
   // Show loading state

package/src/components/QwickApp.tsx

@@ -34,7 +34,7 @@
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-import React, { cloneElement, useState } from 'react';
+import React, { cloneElement, useState, useEffect } from 'react';
 import { DataProvider, ThemeProvider, PrintModeProvider, NavigationProvider, type ThemeMode } from '../contexts';
 import { QwickAppContext, type QwickAppContextValue, type QwickAppProps } from '../contexts/QwickAppContext';
 import { type TemplateResolverConfig } from '../types';
@@ -126,6 +126,13 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
     setAppConfig(prev => ({ ...prev, ...updates } as typeof prev));
   };
 
+  // Sync logo prop changes with internal state (for dynamic logo updates)
+  useEffect(() => {
+    if (resolvedConfig.logo !== appConfig.logo) {
+      setAppConfig(prev => ({ ...prev, logo: resolvedConfig.logo }));
+    }
+  }, [resolvedConfig.logo]);
+
   const contextValue: QwickAppContextValue = {
     appName: resolvedConfig.appName!, // Safe to use ! since we validated above
     appId: resolvedConfig.appId,

package/src/components/ResponsiveMenu.tsx

@@ -57,7 +57,7 @@ const ResponsiveMenu: React.FC<ResponsiveMenuProps> = (props) => {
   } = restProps;
   
   // Mark as QwickApp component
-  (ResponsiveMenu as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(ResponsiveMenu, { [QWICKAPP_COMPONENT]: true });
   const [screenSize, setScreenSize] = useState<ScreenSize>('desktop');
   const [isNavRailExpanded, setIsNavRailExpanded] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);

package/src/components/SafeSpan.tsx

@@ -26,7 +26,7 @@ function SafeSpanView(props: SafeSpanViewProps) {
   const { styleProps, htmlProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (SafeSpanView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(SafeSpanView, { [QWICKAPP_COMPONENT]: true });
   
   // Enhanced HTML sanitization with strict security configuration
   const sanitizeOptions = {
@@ -95,7 +95,7 @@ function SafeSpanView(props: SafeSpanViewProps) {
 }
 
 // Main component with data binding support and serialization capability
-export class SafeSpan extends ModelView<SafeSpanProps, SafeSpanModel> {
+export class SafeSpan extends ModelView<SafeSpanProps> {
   // Component self-declaration for serialization
   static readonly tagName = 'SafeSpan';
   static readonly version = '1.0.0';
@@ -121,14 +121,16 @@ export class SafeSpan extends ModelView<SafeSpanProps, SafeSpanModel> {
 
   // Register HTML patterns that SafeSpan component can handle
   static registerPatternHandlers(registry: unknown): void {
+    const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
     // Register span elements with specific classes or attributes
-    if (!registry.hasPattern('span.safe-content')) {
-      registry.registerPattern('span.safe-content', SafeSpan.transformSafeSpan);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('span.safe-content')) {
+      typedRegistry.registerPattern?.('span.safe-content', SafeSpan.transformSafeSpan);
     }
     
     // Register span elements with data-safe attribute
-    if (!registry.hasPattern('span[data-safe]')) {
-      registry.registerPattern('span[data-safe]', SafeSpan.transformSafeSpan);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('span[data-safe]')) {
+      typedRegistry.registerPattern?.('span[data-safe]', SafeSpan.transformSafeSpan);
     }
   }
 
@@ -153,9 +155,7 @@ function SafeSpanWithDataBinding(props: SafeSpanProps) {
   // Use data binding
   const { loading, error, ...safeSpanProps } = useDataBinding<SafeSpanModel>(
     dataSource!,
-    restProps as Partial<SafeSpanModel>,
-    SafeSpanModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<SafeSpanModel>
   );
 
   // Show loading state