@qwickapps/react-framework 1.3.5 → 1.4.1

package/src/components/Markdown.tsx

@@ -22,28 +22,27 @@
 
 import { Box } from '@mui/material';
 import { marked } from 'marked';
-import React from 'react';
-import { QWICKAPP_COMPONENT, useBaseProps, WithBaseProps } from '../hooks';
+import React, { ReactElement } from 'react';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
+import MarkdownModel from '../schemas/MarkdownSchema';
+import { ModelView } from './base/ModelView';
 import Html from './Html';
 import SafeSpan from './SafeSpan';
 import { TransformConfig, defaultMarkdownRules } from '../utils/htmlTransform';
 
-export interface MarkdownProps extends WithBaseProps {
-  /** Markdown content as string */
-  children: string;
+type MarkdownViewProps = ModelProps<MarkdownModel> & {
   /** Custom transformation configuration for HTML conversion */
   htmlTransformConfig?: TransformConfig;
-  /** Whether to sanitize HTML output (default: true) */
-  sanitize?: boolean;
   /** Custom sanitization options */
   sanitizeOptions?: any;
-  /** Fallback content when Markdown is empty */
-  placeholder?: string;
   /** Container element type */
   component?: React.ElementType;
   /** Marked options for Markdown parsing */
   markedOptions?: marked.MarkedOptions;
-}
+};
+
+export interface MarkdownProps extends MarkdownViewProps, WithDataBinding {}
 
 /**
  * Configure marked with security and GitHub Flavored Markdown support
@@ -65,10 +64,8 @@ const getMarkedOptions = (customOptions?: marked.MarkedOptions): marked.MarkedOp
   ...customOptions
 });
 
-/**
- * Markdown component - converts Markdown to React components via Html
- */
-export function Markdown({
+// View component - handles the actual rendering
+function MarkdownView({
   children = '',
   htmlTransformConfig,
   sanitize = true,
@@ -77,11 +74,11 @@ export function Markdown({
   component = 'div',
   markedOptions,
   ...restProps
-}: MarkdownProps) {
+}: MarkdownViewProps) {
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (Markdown as any)[QWICKAPP_COMPONENT] = true;
+  (MarkdownView as any)[QWICKAPP_COMPONENT] = true;
 
   // Return placeholder if no Markdown content
   if (!children || !children.trim()) {
@@ -188,4 +185,116 @@ export function Markdown({
   }
 }
 
+// Main component with data binding support and serialization capability
+export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'Markdown';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <Markdown {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      children: this.props.children,
+      sanitize: this.props.sanitize,
+      placeholder: this.props.placeholder
+    };
+  }
+
+  // Markdown component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
+    return <MarkdownView {...restProps} />;
+  }
+
+  // Markdown component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <MarkdownWithDataBinding {...this.props} />;
+  }
+
+  // Register HTML patterns that Markdown component can handle
+  static registerPatternHandlers(registry: any): void {
+    // Register div elements with specific classes for Markdown transformation
+    if (!registry.hasPattern('div.markdown-content')) {
+      registry.registerPattern('div.markdown-content', Markdown.transformMarkdownDiv);
+    }
+    
+    // Register elements with data-markdown attribute
+    if (!registry.hasPattern('[data-markdown]')) {
+      registry.registerPattern('[data-markdown]', Markdown.transformDataMarkdown);
+    }
+  }
+
+  // Transform div with markdown-content class to Markdown component
+  private static transformMarkdownDiv(element: Element): any {
+    const sanitize = element.getAttribute('data-sanitize') !== 'false';
+    const placeholder = element.getAttribute('data-placeholder');
+    
+    return {
+      tagName: 'Markdown',
+      props: {
+        children: element.textContent || '',
+        sanitize,
+        placeholder: placeholder || undefined
+      }
+    };
+  }
+
+  // Transform elements with data-markdown attribute to Markdown component
+  private static transformDataMarkdown(element: Element): any {
+    const markdownContent = element.getAttribute('data-markdown') || element.textContent;
+    const sanitize = element.getAttribute('data-sanitize') !== 'false';
+    const placeholder = element.getAttribute('data-placeholder');
+    
+    return {
+      tagName: 'Markdown',
+      props: {
+        children: markdownContent,
+        sanitize,
+        placeholder: placeholder || undefined
+      }
+    };
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function MarkdownWithDataBinding(props: MarkdownProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...markdownProps } = useDataBinding<MarkdownModel>(
+    dataSource!,
+    restProps as Partial<MarkdownModel>,
+    MarkdownModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Box sx={{ p: 2, textAlign: 'center', opacity: 0.6 }}>
+        Loading Markdown content...
+      </Box>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading Markdown content:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Box sx={{ p: 2, border: '1px solid orange', borderRadius: 1, backgroundColor: 'rgba(255, 165, 0, 0.1)' }}>
+          <strong>Error Loading Markdown:</strong> {error.message}
+        </Box>
+      );
+    }
+    return null;
+  }
+
+  return <MarkdownView {...markdownProps} />;
+}
+
 export default Markdown;

package/src/components/QwickApp.tsx

@@ -4,12 +4,17 @@
  * This component eliminates the need to manually set up provider hierarchy.
  * Provides theme system, app context, optional scaffolding, and routing.
  * 
- * Example usage:
+ * Example usage with config:
  * ```tsx
  * import { BrowserRouter } from 'react-router-dom';
- * import { QwickApp, AuthProvider, JsonDataProvider } from '@qwickapps/react-framework';
+ * import { QwickApp, AuthProvider, JsonDataProvider, AppConfigBuilder } from '@qwickapps/react-framework';
  * 
  * function App() {
+ *   const config = AppConfigBuilder.create()
+ *     .withName("My App")
+ *     .withId("my.app")
+ *     .build();
+ *
  *   const dataSource = {
  *     dataProvider: new JsonDataProvider({ data: { company: [...] } }),
  *     cacheProvider: true, // Use default MemoryCacheProvider
@@ -17,7 +22,7 @@
  *   };
  * 
  *   return (
- *     <QwickApp appName="My App" appId="my.app" dataSource={dataSource}>
+ *     <QwickApp config={config} dataSource={dataSource}>
  *       <AuthProvider router={<BrowserRouter />} user={user}>
  *         <Route path="/" component={HomePage} />
  *         <Route path="/admin" component={AdminPage} requiresRole="admin" />
@@ -30,9 +35,10 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 import React, { cloneElement, useState } from 'react';
-import { DataProvider, ThemeProvider, type ThemeMode } from '../contexts';
+import { DataProvider, ThemeProvider, PrintModeProvider, type ThemeMode } from '../contexts';
 import { QwickAppContext, type QwickAppContextValue, type QwickAppProps } from '../contexts/QwickAppContext';
 import { type TemplateResolverConfig } from '../types';
+import { AppConfig } from '../config';
 import './QwickApp.css';
 import Scaffold from './Scaffold';
 import { ErrorBoundary } from './ErrorBoundary';
@@ -56,6 +62,13 @@ interface QwickAppComponentProps extends QwickAppProps {
   router?: React.ReactElement;
   /** Data source configuration for content management and template resolution */
   dataSource?: TemplateResolverConfig;
+  /** 
+   * AppConfig instance - when provided, overrides individual props 
+   * @example
+   * const config = AppConfigBuilder.create().withName("My App").build();
+   * <QwickApp config={config}>...</QwickApp>
+   */
+  config?: AppConfig;
   // Auth-related props moved to AuthProvider for better separation of concerns
 }
 
@@ -63,41 +76,59 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
   children,
   className,
   style,
-  defaultTheme,
-  defaultPalette,
-  appName,
-  logo,
-  appId = true,
-  enableScaffolding = false,
-  navigationItems = [],
+  defaultTheme: defaultThemeProp,
+  defaultPalette: defaultPaletteProp,
+  appName: appNameProp,
+  logo: logoProp,
+  appId: appIdProp,
+  enableScaffolding: enableScaffoldingProp,
+  navigationItems: navigationItemsProp = [],
   appBar,
-  showAppBar = true,
-  appBarHeight = 64,
-  showThemeSwitcher = false,
-  showPaletteSwitcher = false,
+  showAppBar: showAppBarProp = true,
+  appBarHeight: appBarHeightProp = 64,
+  showThemeSwitcher: showThemeSwitcherProp,
+  showPaletteSwitcher: showPaletteSwitcherProp,
   onLogoClick,
   router,
   dataSource,
+  config,
 }) => {
+  // Resolve configuration: explicit props override config defaults
+  const resolvedConfig = {
+    appName: appNameProp ?? config?.app.name,
+    appId: appIdProp ?? config?.app.id ?? true,
+    logo: logoProp ?? config?.app.logo,
+    enableScaffolding: enableScaffoldingProp ?? config?.ui.enableScaffolding ?? false,
+    showThemeSwitcher: showThemeSwitcherProp ?? config?.ui.showThemeSwitcher ?? false,
+    showPaletteSwitcher: showPaletteSwitcherProp ?? config?.ui.showPaletteSwitcher ?? false,
+    defaultTheme: defaultThemeProp ?? config?.ui.defaultTheme,
+    defaultPalette: defaultPaletteProp ?? config?.ui.defaultPalette,
+  };
+
+  // Ensure we have required configuration
+  if (!resolvedConfig.appName) {
+    throw new Error('QwickApp requires either appName prop or config with app.name');
+  }
+
   // State for app configuration that can be updated via useQwickApp
   const [appConfig, setAppConfig] = useState({
-    logo,
-    enableScaffolding,
-    navigationItems,
+    logo: resolvedConfig.logo,
+    enableScaffolding: resolvedConfig.enableScaffolding,
+    navigationItems: navigationItemsProp,
     appBar,
-    showAppBar,
-    appBarHeight,
-    showThemeSwitcher,
-    showPaletteSwitcher,
+    showAppBar: showAppBarProp,
+    appBarHeight: appBarHeightProp,
+    showThemeSwitcher: resolvedConfig.showThemeSwitcher,
+    showPaletteSwitcher: resolvedConfig.showPaletteSwitcher,
   });
 
-  const updateConfig = (updates: Partial<typeof appConfig>) => {
-    setAppConfig(prev => ({ ...prev, ...updates }));
+  const updateConfig = (updates: Partial<Pick<QwickAppProps, 'logo' | 'enableScaffolding' | 'navigationItems' | 'appBar' | 'showAppBar' | 'appBarHeight' | 'showThemeSwitcher' | 'showPaletteSwitcher'>>) => {
+    setAppConfig(prev => ({ ...prev, ...updates } as typeof prev));
   };
 
   const contextValue: QwickAppContextValue = {
-    appName,
-    appId,
+    appName: resolvedConfig.appName!, // Safe to use ! since we validated above
+    appId: resolvedConfig.appId,
     ...appConfig,
     onLogoClick,
     updateConfig,
@@ -106,7 +137,7 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
 
   const content = appConfig.enableScaffolding ? (
     <Scaffold
-      appName={appName}
+      appName={resolvedConfig.appName!} // Safe to use ! since we validated above
       navigationItems={appConfig.navigationItems}
       appBar={appConfig.appBar}
       showAppBar={appConfig.showAppBar}
@@ -131,12 +162,14 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
       <AccessibilityProvider>
         <div className={`qwick-app ${className || ''}`} style={style}>
           <ThemeProvider 
-            appId={appId} 
-            defaultTheme={defaultTheme} 
-            defaultPalette={defaultPalette}
+            appId={resolvedConfig.appId} 
+            defaultTheme={resolvedConfig.defaultTheme} 
+            defaultPalette={resolvedConfig.defaultPalette}
           >
             <QwickAppContext.Provider value={contextValue}>
-              {wrappedContent}
+              <PrintModeProvider>
+                {wrappedContent}
+              </PrintModeProvider>
             </QwickAppContext.Provider>
           </ThemeProvider>
         </div>

package/src/components/QwickIcon.tsx

@@ -0,0 +1,59 @@
+/**
+ * QwickIcon - Official QwickApps brand icon
+ * 
+ * A reusable SVG icon component for the QwickApps brand that can be used
+ * across all QwickApps applications. Features customizable size and 
+ * optional background for different use cases.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+
+export interface QwickIconProps {
+  /** Size of the icon in pixels */
+  size?: number;
+  /** Whether to show the background rectangle */
+  showBackground?: boolean;
+  /** Additional CSS class names */
+  className?: string;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+}
+
+const QwickIcon: React.FC<QwickIconProps> = ({ 
+  size = 48, 
+  showBackground = true,
+  className = '',
+  style = {}
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 225 225"
+    className={`qwick-icon ${className}`.trim()}
+    style={style}
+    role="img"
+    aria-label="QwickApps Icon"
+  >
+    {showBackground && <rect width="225" height="225" rx="48" fill="var(--theme-surface)" />}
+    <g transform="scale(0.9) translate(-5,-5)">
+      <g transform="translate(-128,-60)">
+        <path
+          className="logo-first-part"
+          fill="#FE6D0F"
+          d="M0 0 C1.3480925 -0.00788544 1.3480925 -0.00788544 2.72341919 -0.01593018 C5.67419172 -0.02905871 8.62441792 -0.02041442 11.57519531 -0.01025391 C13.64251813 -0.0122774 15.70984025 -0.01519113 17.77716064 -0.01895142 C22.10443943 -0.02336572 26.43153199 -0.01697508 30.75878906 -0.00292969 C36.2773468 0.01411856 41.79546534 0.00434284 47.31400681 -0.01364708 C51.5831018 -0.02454577 55.85209467 -0.02101006 60.12119293 -0.0132637 C62.15435082 -0.01127624 64.18751828 -0.01366927 66.22066498 -0.02070236 C76.73689794 -0.04908929 86.57929633 -0.04924466 96.65332031 3.38818359 C97.54098083 3.67795074 98.42864136 3.9677179 99.34320068 4.26626587 C114.15399949 9.31896076 126.4675764 21.76744512 133.65332031 35.38818359 C137.44514211 43.9738112 139.81630642 51.43992278 139.7668457 60.84057617 C139.76699173 61.5728241 139.76713776 62.30507202 139.76728821 63.05950928 C139.76659444 65.46727515 139.75882723 67.87496257 139.75097656 70.28271484 C139.74911048 71.95708677 139.74768747 73.63145924 139.74668884 75.30583191 C139.74287867 79.7034558 139.73306121 84.10104644 139.72198486 88.49865723 C139.71173847 92.9898229 139.70718431 97.48099397 139.70214844 101.97216797 C139.69143757 110.77752174 139.6743792 119.58284852 139.65332031 128.38818359 C138.53702723 127.43704375 137.42154262 126.48495501 136.30639648 125.5324707 C135.68512375 125.002379 135.06385101 124.47228729 134.42375183 123.9261322 C132.20679827 122.00029626 130.09344729 119.97434276 127.96582031 117.95068359 C121.3544337 111.96606452 113.93765643 107.63396094 105.65332031 104.38818359 C105.64397461 103.07736816 105.63462891 101.76655273 105.625 100.41601562 C105.58487807 95.51415049 105.51905854 90.61289839 105.44580078 85.71142578 C105.41771934 83.59724858 105.39644155 81.4829689 105.38232422 79.36865234 C105.36071633 76.31473808 105.31397548 73.26203954 105.26269531 70.20849609 C105.26085236 68.80943527 105.26085236 68.80943527 105.25897217 67.3821106 C105.05613797 58.12249123 102.35361677 49.9326592 95.65332031 43.38818359 C93.37687152 41.83978825 91.12212389 40.64502905 88.65332031 39.38818359 C88.0702562 39.02808197 87.48719208 38.66798035 86.88645935 38.29696655 C83.71010797 37.00434036 80.90937194 37.11787995 77.4855957 37.09765625 C76.41412041 37.08758041 76.41412041 37.08758041 75.32099915 37.07730103 C72.96425383 37.05833326 70.60779341 37.05439768 68.25097656 37.05224609 C66.60957218 37.04581795 64.96816895 37.03908958 63.32676697 37.03207397 C59.88782087 37.02010475 56.44897522 37.01639285 53.01000977 37.01757812 C48.60705215 37.01778144 44.20473906 36.99046492 39.80193424 36.95603371 C36.41239981 36.93377976 33.02302096 36.92974009 29.63342094 36.93079758 C28.01032729 36.9284399 26.38722945 36.91960691 24.76420784 36.90413284 C22.49249412 36.88449971 20.22217644 36.89029871 17.95043945 36.90234375 C16.65900528 36.89949371 15.36757111 36.89664368 14.03700256 36.89370728 C10.0894619 37.47058336 8.4533178 38.60386481 5.65332031 41.38818359 C4.36488826 43.96504769 4.49328598 45.87037118 4.44799805 48.75585938 C4.42805283 49.87687042 4.4081076 50.99788147 4.38755798 52.15286255 C4.36248924 53.97477615 4.36248924 53.97477615 4.33691406 55.83349609 C4.31613297 57.07364471 4.29535187 58.31379333 4.27394104 59.59152222 C4.21954326 62.88930182 4.16931936 66.18711079 4.12109375 69.48498535 C4.07086797 72.84991002 4.01524033 76.21474503 3.95996094 79.57958984 C3.85188552 86.18238589 3.75285167 92.78523103 3.65332031 99.38818359 C-7.89667969 99.38818359 -19.44667969 99.38818359 -31.34667969 99.38818359 C-31.54722373 80.32312956 -31.54722373 80.32312956 -31.59082031 72.14990234 C-31.6206242 66.58894779 -31.65574998 61.02840778 -31.72387695 55.46777344 C-31.77850048 50.98085383 -31.80816368 46.4943792 -31.8210659 42.00715256 C-31.83025168 40.30161924 -31.84818881 38.59610823 -31.87532997 36.89076614 C-32.04228479 25.95844515 -31.41983501 17.49965078 -24.17089844 8.76708984 C-23.46578125 8.16767578 -22.76066406 7.56826172 -22.03417969 6.95068359 C-21.33679688 6.33322266 -20.63941406 5.71576172 -19.92089844 5.07958984 C-13.46479327 0.83756627 -7.52553047 -0.0549708 0 0 Z"
+          transform="translate(185.3466796875,71.61181640625)"
+        />
+        <path
+          className="logo-second-part"
+          fill="#03BBCA"
+          d="M0 0 C11.55 0 23.1 0 35 0 C35.04125 3.25875 35.0825 6.5175 35.125 9.875 C35.47125788 19.41754586 36.68077925 25.86440869 43.74900818 32.68862915 C50.89908532 38.23277376 58.35470598 37.77209826 66.97265625 37.5859375 C68.50677317 37.57472707 70.04091178 37.56619562 71.57505798 37.56021118 C75.58524366 37.53745715 79.59409585 37.47865487 83.60375977 37.4119873 C87.70635953 37.3502711 91.80917779 37.32313407 95.91210938 37.29296875 C103.94201372 37.2288942 111.97084033 37.12668322 120 37 C117.59324168 34.57863654 115.18359847 32.1601637 112.7734375 29.7421875 C111.75527954 28.71774536 111.75527954 28.71774536 110.71655273 27.67260742 C106.8829741 23.82970702 102.99745284 20.13165615 98.8515625 16.625 C95.05012274 13.28871531 91.43825451 9.70885787 88 6 C88 5.67 88 5.34 88 5 C110.75508023 4.37644173 110.75508023 4.37644173 121 8 C122.051875 8.35191406 123.10375 8.70382813 124.1875 9.06640625 C147.22737862 17.29881571 164.80240124 33.21278198 175.41943359 55.15429688 C179.68328916 64.37125249 183.15018908 73.71312925 183.09765625 83.95703125 C183.09443359 85.06884766 183.09121094 86.18066406 183.08789062 87.32617188 C183.07951172 88.47666016 183.07113281 89.62714844 183.0625 90.8125 C183.05798828 91.98232422 183.05347656 93.15214844 183.04882812 94.35742188 C183.0370693 97.23833358 183.02063426 100.11914044 183 103 C180.55229893 100.57810948 178.13689836 98.15012289 175.81640625 95.60546875 C164.49520711 83.46019619 148.63443632 75.12990963 131.85790539 74.44966316 C128.34721591 74.38623286 124.84006559 74.37663155 121.32896042 74.40841484 C118.45052331 74.43424814 115.57348925 74.42890466 112.69497681 74.41651917 C106.58815705 74.39596309 100.48178961 74.41534647 94.375 74.4375 C87.28101821 74.45873236 80.18749777 74.46298673 73.09352493 74.43699837 C70.28119532 74.43367673 67.46978403 74.45471435 64.65756226 74.47740173 C46.51926055 74.50804771 31.73862671 70.07462761 18.28125 57.27734375 C17.5284375 56.52582031 16.775625 55.77429688 16 55 C15.02546875 54.04287109 15.02546875 54.04287109 14.03125 53.06640625 C3.06105089 41.49477078 -0.55499727 26.82435381 -0.1875 11.3125 C-0.125625 7.579375 -0.06375 3.84625 0 0 Z"
+          transform="translate(154,171)"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default QwickIcon;

package/src/components/SafeSpan.tsx

@@ -10,10 +10,12 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
+import React, { ReactElement } from 'react';
 import { WithDataBinding, ModelProps } from '@qwickapps/schema';
 import sanitizeHtml from 'sanitize-html';
-import { useBaseProps, useDataBinding, WithBaseProps } from '../hooks';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
 import SafeSpanModel from '../schemas/SafeSpanSchema';
+import { ModelView } from './base/ModelView';
 
 type SafeSpanViewProps = ModelProps<SafeSpanModel>;
 export interface SafeSpanProps extends SafeSpanViewProps, WithDataBinding {}
@@ -23,6 +25,9 @@ function SafeSpanView(props: SafeSpanViewProps) {
   const { html, placeholder, ...restProps } = props;
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
   
+  // Mark as QwickApp component
+  (SafeSpanView as any)[QWICKAPP_COMPONENT] = true;
+  
   // Enhanced HTML sanitization with strict security configuration
   const sanitizeOptions = {
     allowedTags: [
@@ -89,21 +94,70 @@ function SafeSpanView(props: SafeSpanViewProps) {
   );
 }
 
-/**
- * SafeSpan component with data binding support
- * Supports both traditional props and dataSource-driven rendering
- */
-function SafeSpan(props: SafeSpanProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
+// Main component with data binding support and serialization capability
+export class SafeSpan extends ModelView<SafeSpanProps, SafeSpanModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'SafeSpan';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <SafeSpan {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      html: this.props.html,
+      placeholder: this.props.placeholder
+    };
+  }
 
-  // If no dataSource, use traditional props
-  if (!dataSource) {
+  // SafeSpan component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
     return <SafeSpanView {...restProps} />;
   }
 
+  // SafeSpan component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <SafeSpanWithDataBinding {...this.props} />;
+  }
+
+  // Register HTML patterns that SafeSpan component can handle
+  static registerPatternHandlers(registry: any): void {
+    // Register span elements with specific classes or attributes
+    if (!registry.hasPattern('span.safe-content')) {
+      registry.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);
+    }
+  }
+
+  // Transform span elements to SafeSpan component
+  private static transformSafeSpan(element: Element): any {
+    const placeholder = element.getAttribute('data-placeholder');
+    
+    return {
+      tagName: 'SafeSpan',
+      props: {
+        html: element.innerHTML,
+        placeholder: placeholder || undefined
+      }
+    };
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function SafeSpanWithDataBinding(props: SafeSpanProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
   // Use data binding
   const { dataSource: _source, loading, error, cached, ...safeSpanProps } = useDataBinding<SafeSpanModel>(
-    dataSource,
+    dataSource!,
     restProps as Partial<SafeSpanModel>,
     SafeSpanModel.getSchema(),
     { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
@@ -122,6 +176,7 @@ function SafeSpan(props: SafeSpanProps) {
     return null;
   }
 
+  console.log('Resolved props for SafeSpan:', safeSpanProps);
   return <SafeSpanView {...safeSpanProps} />;
 }
 

package/src/components/Scaffold.tsx

@@ -89,8 +89,6 @@ const Scaffold: React.FC<ScaffoldProps> = ({
   const [screenSize, setScreenSize] = useState<ScreenSize>('desktop');
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [isRailExpanded, setIsRailExpanded] = useState(false);
-  // Use navigation items directly since Page no longer provides menu items
-  const combinedMenuItems = navigationItems;
 
   // React Router hooks (if available)
   const location = useSafeLocation();
@@ -132,8 +130,8 @@ const Scaffold: React.FC<ScaffoldProps> = ({
   // Page-specific actions and menu items are handled by header components
 
   // Sort items by priority
-  const sortedItems = [...combinedMenuItems].sort((a, b) => (a.priority || 999) - (b.priority || 999));
-
+  const sortedItems = [...navigationItems].sort((a, b) => (a.priority || 999) - (b.priority || 999));
+  
   // Material UI Guidelines: Split items based on screen size
   const getNavigationSplit = () => {
     switch (screenSize) {
@@ -217,10 +215,6 @@ const Scaffold: React.FC<ScaffoldProps> = ({
           logger.error('Menu item onClick error:', error);
         }
       } else if (item.route) {
-        if (navigate === undefined) {
-          logger.error('No navigation function available! Cannot navigate to:', item.route);
-          return;
-        }
         // Robust navigation with comprehensive error handling
         try {
           logger.debug(`Navigating from ${currentPath} to ${item.route}`);