@qwickapps/react-framework 1.5.7 → 1.5.9

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "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.7",
-      "file": "palette-default.1.5.7.css",
+      "version": "1.5.9",
+      "file": "palette-default.1.5.9.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.5.7.min.css",
+      "fileMinified": "palette-default.1.5.9.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.7",
-      "file": "palette-autumn.1.5.7.css",
+      "version": "1.5.9",
+      "file": "palette-autumn.1.5.9.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.5.7.min.css",
+      "fileMinified": "palette-autumn.1.5.9.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.7",
-      "file": "palette-cosmic.1.5.7.css",
+      "version": "1.5.9",
+      "file": "palette-cosmic.1.5.9.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.5.7.min.css",
+      "fileMinified": "palette-cosmic.1.5.9.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.7",
-      "file": "palette-ocean.1.5.7.css",
+      "version": "1.5.9",
+      "file": "palette-ocean.1.5.9.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.5.7.min.css",
+      "fileMinified": "palette-ocean.1.5.9.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.7",
-      "file": "palette-spring.1.5.7.css",
+      "version": "1.5.9",
+      "file": "palette-spring.1.5.9.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.5.7.min.css",
+      "fileMinified": "palette-spring.1.5.9.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.7",
-      "file": "palette-winter.1.5.7.css",
+      "version": "1.5.9",
+      "file": "palette-winter.1.5.9.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.5.7.min.css",
+      "fileMinified": "palette-winter.1.5.9.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.map

@@ -1 +1 @@
-{"version":3,"file":"iconMap.d.ts","sourceRoot":"","sources":["../../src/utils/iconMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAsF1B;;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,CA0H/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"}
+{"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.7",
-  "type": "module",
+  "version": "1.5.9",
   "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",
@@ -12,13 +11,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.esm.js"
+      "default": "./dist/index.js"
     },
     "./config": {
       "types": "./dist/config.d.ts",
+      "import": "./dist/config.esm.js",
       "require": "./dist/config.js",
-      "import": "./dist/config.esm.js"
+      "default": "./dist/config.js"
     },
     "./dist/index.css": "./dist/index.css",
     "./index.css": "./dist/index.css"
@@ -130,7 +131,7 @@
     "ts-jest": "^29.4.1",
     "ts-loader": "^9.5.2",
     "typescript": "^5.9.2",
-    "vite": "^7.0.6"
+    "vite": "^6.0.0"
   },
   "publishConfig": {
     "access": "public"

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,19 +213,21 @@ 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);
     }
   }
 
   // Transform div with markdown-content class to Markdown component
-  private static transformMarkdownDiv(element: Element): unknown {
+  private static transformMarkdownDiv(element: Element): Record<string, unknown> {
     const sanitize = element.getAttribute('data-sanitize') !== 'false';
     const placeholder = element.getAttribute('data-placeholder');
     
@@ -240,7 +242,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   }
 
   // Transform elements with data-markdown attribute to Markdown component
-  private static transformDataMarkdown(element: Element): unknown {
+  private static transformDataMarkdown(element: Element): Record<string, unknown> {
     const markdownContent = element.getAttribute('data-markdown') || element.textContent;
     const sanitize = element.getAttribute('data-sanitize') !== 'false';
     const placeholder = element.getAttribute('data-placeholder');
@@ -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/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,19 +121,21 @@ 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);
     }
   }
 
   // Transform span elements to SafeSpan component
-  private static transformSafeSpan(element: Element): unknown {
+  private static transformSafeSpan(element: Element): Record<string, unknown> {
     const placeholder = element.getAttribute('data-placeholder');
     
     return {
@@ -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

package/src/components/Scaffold.tsx

@@ -21,7 +21,7 @@ import { useQwickApp } from '../contexts/QwickAppContext';
 import Logo from './Logo';
 import ThemeSwitcher from './buttons/ThemeSwitcher';
 import PaletteSwitcher from './buttons/PaletteSwitcher';
-import { RadioButtonUnchecked as DefaultIcon } from '@mui/icons-material';
+// DefaultIcon removed - using iconMap radio_button_unchecked instead
 import { getIconComponent } from './buttons/Button';
 import './Scaffold.css';
 import { useNavigation } from '../contexts/NavigationContext';
@@ -260,21 +260,21 @@ const Scaffold: React.FC<ScaffoldProps> = ({
       }
     };
 
-    // Transform icon string to component, or use provided ReactNode, or fallback to DefaultIcon
+    // Transform icon string to component, or use provided ReactNode, or fallback to radio_button_unchecked
     const needsIcon = variant !== 'drawer';
     let displayIcon: React.ReactNode = null;
 
     if (item.icon) {
       // If icon is a string, transform it to component
       if (typeof item.icon === 'string') {
-        displayIcon = getIconComponent(item.icon) || (needsIcon ? <DefaultIcon /> : null);
+        displayIcon = getIconComponent(item.icon) || (needsIcon ? getIconComponent('radio_button_unchecked') : null);
       } else {
         // If icon is already a React component, use it
         displayIcon = item.icon;
       }
     } else if (needsIcon) {
       // No icon provided, use default for primary navigation
-      displayIcon = <DefaultIcon />;
+      displayIcon = getIconComponent('radio_button_unchecked');
     }
 
     const content = (

package/src/components/base/ModelView.tsx

@@ -295,7 +295,7 @@ export abstract class ModelView<TProps = Record<string, unknown>>
  * Helper function for creating ModelView component classes with ViewSchema support
  * Updated to work with the new ViewSchema processing system
  */
-export function createModelViewClass<TProps, TModel>(
+export function createModelViewClass<TProps>(
   config: {
     tagName: string;
     version: string;
@@ -306,7 +306,7 @@ export function createModelViewClass<TProps, TModel>(
   }
 ): unknown {
 
-  class DynamicModelView extends ModelView<TProps, TModel> {
+  class DynamicModelView extends ModelView<TProps> {
     static readonly tagName = config.tagName;
     static readonly version = config.version;
 

package/src/components/blocks/Article.tsx

@@ -39,7 +39,7 @@ function ArticleView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (ArticleView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(ArticleView, { [QWICKAPP_COMPONENT]: true });
 
   // Return empty state if no HTML content
   if (!html.trim()) {
@@ -336,7 +336,7 @@ function ArticleView({
 }
 
 // Main component with data binding support and serialization capability
-export class Article extends ModelView<ArticleProps, ArticleModel> {
+export class Article extends ModelView<ArticleProps> {
   // Component self-declaration for serialization
   static readonly tagName = 'Article';
   static readonly version = '1.0.0';
@@ -362,14 +362,16 @@ export class Article extends ModelView<ArticleProps, ArticleModel> {
 
   // Register HTML patterns that Article 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 article elements
-    if (!registry.hasPattern('article')) {
-      registry.registerPattern('article', Article.transformArticle);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('article')) {
+      typedRegistry.registerPattern?.('article', Article.transformArticle);
     }
   }
 
   // Transform article elements to Article component
-  private static transformArticle(element: Element): unknown {
+  private static transformArticle(element: Element): Record<string, unknown> {
     const skipHeader = element.getAttribute('data-skip-header') === 'true';
     
     return {
@@ -389,9 +391,7 @@ function ArticleWithDataBinding(props: ArticleProps) {
   // Use data binding
   const { loading, error, ...articleProps } = useDataBinding<ArticleModel>(
     dataSource!,
-    restProps as Partial<ArticleModel>,
-    ArticleModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ArticleModel>
   );
 
   // Show loading state

package/src/components/blocks/CardListGrid.tsx

@@ -87,9 +87,7 @@ function CardListGrid(props: CardListGridProps) {
   // Always call hooks unconditionally
   const result = useDataBinding<CardListGridModel>(
     dataSource || '',
-    restProps as Partial<CardListGridModel>,
-    CardListGridModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<CardListGridModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/Code.tsx

@@ -22,7 +22,10 @@
 
 import React, { useState } from 'react';
 import { Box, Typography, Tooltip, IconButton, Snackbar, Alert, useTheme, Paper } from '@mui/material';
-import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
+import ContentCopy from '@mui/icons-material/ContentCopy';
+import Check from '@mui/icons-material/Check';
+const CopyIcon = ContentCopy;
+const CheckIcon = Check;
 import CodeSchema from '../../schemas/CodeSchema';
 import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
 import { ViewProps } from '../shared/viewProps';
@@ -260,17 +263,16 @@ export const Code: SerializableComponent<CodeProps> = createSerializableView<Cod
 
 // Register HTML patterns that Code component can handle
 (Code as Record<string, unknown>).registerPatternHandlers = (registry: Record<string, (...args: unknown[]) => unknown>): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (...args: unknown[]) => unknown) => void };
+
   // Register pre + code pattern
-  if (!registry.hasPattern) {
-    return;
-  }
-  if (!registry.hasPattern('pre code')) {
-    registry.registerPattern('pre code', (Code as Record<string, unknown>).transformPreCode as (...args: unknown[]) => unknown);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('pre code')) {
+    typedRegistry.registerPattern?.('pre code', (Code as Record<string, unknown>).transformPreCode as (...args: unknown[]) => unknown);
   }
 
   // Register standalone code pattern for complex code blocks
-  if (!registry.hasPattern('code.highlight')) {
-    registry.registerPattern('code.highlight', (Code as Record<string, unknown>).transformCodeHighlight as (...args: unknown[]) => unknown);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('code.highlight')) {
+    typedRegistry.registerPattern?.('code.highlight', (Code as Record<string, unknown>).transformCodeHighlight as (...args: unknown[]) => unknown);
   }
 };
 

package/src/components/blocks/Content.tsx

@@ -45,7 +45,7 @@ function ContentView({
   const theme = useTheme();
 
   // Mark as QwickApp component
-  (ContentView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(ContentView, { [QWICKAPP_COMPONENT]: true });
 
   // Map spacing to padding values
   const getPadding = () => {
@@ -170,9 +170,7 @@ function Content(props: ContentProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<ContentModel>(
     dataSource || '',
-    restProps as Partial<ContentModel>,
-    ContentModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ContentModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/CoverImageHeader.tsx

@@ -11,7 +11,8 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { MoreVert as MoreIcon } from '@mui/icons-material';
+import MoreVert from "@mui/icons-material/MoreVert";
+const MoreIcon = MoreVert;
 import {
   Avatar,
   Box,
@@ -401,9 +402,7 @@ function CoverImageHeader(props: CoverImageHeaderProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<CoverImageHeaderModel>(
     dataSource || '',
-    restProps as Partial<CoverImageHeaderModel>,
-    CoverImageHeaderModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<CoverImageHeaderModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/FeatureCard.tsx

@@ -260,14 +260,12 @@ function FeatureCard(props: FeatureCardProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Mark as QwickApp component
-  (FeatureCard as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(FeatureCard, { [QWICKAPP_COMPONENT]: true });
 
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<FeatureCardModel>(
     dataSource || '',
-    restProps as Partial<FeatureCardModel>,
-    FeatureCardModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<FeatureCardModel>
   );
 
   // If no dataSource, use traditional props