@qwickapps/react-framework 1.4.8 → 1.4.9

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useMediaQuery, Box, useTheme as useTheme$1, Paper, Typography, Tooltip, IconButton, Snackbar, Alert, CircularProgress, Button as Button$1, Container as Container$9, Stack, Skeleton, Avatar, Chip, Menu, MenuItem, Card, CardContent, ButtonGroup, Collapse, TextField as TextField$1, FormControl, InputLabel, Select, FormHelperText, FormControlLabel, Switch, Grid, Divider, Link, ListItemIcon, ListItemText } from '@mui/material';
+import { useMediaQuery, Box, useTheme as useTheme$1, Paper, Typography, Tooltip, IconButton, Snackbar, Alert, CircularProgress, Button as Button$1, Container as Container$9, Stack, Skeleton, Avatar, Chip, Menu as Menu$1, MenuItem, Card, CardContent, ButtonGroup, Collapse, TextField as TextField$1, FormControl, InputLabel, Select, FormHelperText, FormControlLabel, Switch, Grid, Divider, Link, ListItemIcon, ListItemText } from '@mui/material';
 import React, { useMemo, useContext, useState, useEffect, createContext, useReducer, useCallback, useRef, isValidElement, createElement, useId, useLayoutEffect, Component, cloneElement } from 'react';
 import { MustacheTemplateProvider, MemoryCacheProvider, CachedDataProvider, Field, Editor, FieldType, Schema, Model, DataType } from '@qwickapps/schema';
 import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
-import { Check, ContentCopy, BrokenImage, MoreVert, FormatBold, FormatItalic, FormatUnderlined, Code as Code$1, VisibilityOff, Visibility, Help, Add, ExpandMore, ExpandLess, Schedule, Launch, LightMode, DarkMode, SettingsSystemDaydream, Palette, Circle, RadioButtonUnchecked } from '@mui/icons-material';
+import { Check, ContentCopy, Home, Download, CloudDownload, CloudUpload, Settings, Dashboard, Info, Help, Add, Edit, Delete, Close, ArrowForward, ArrowBack, Menu, Search, Favorite, Star, Share, Save, Send, Email, Phone, Person, Group, Business, ShoppingCart, AttachMoney, Lock, LockOpen, Visibility, VisibilityOff, BrokenImage, MoreVert, FormatBold, FormatItalic, FormatUnderlined, Code as Code$1, ExpandMore, ExpandLess, Schedule, Launch, LightMode, DarkMode, SettingsSystemDaydream, Palette, Circle, RadioButtonUnchecked } from '@mui/icons-material';
 import { IsOptional, ValidateIf, IsIn, IsInt, Min, IsString, IsNotEmpty, IsBoolean, IsNumber, Max, IsArray, ValidateNested, IsUrl, IsObject } from 'class-validator';
 import 'reflect-metadata';
 import { Type } from 'class-transformer';
@@ -1543,7 +1543,7 @@ const ThemeProvider = ({
     const backgroundMain = getCSSCustomProperty('--theme-background') || (isDark ? '#121212' : '#ffffff');
     const surfaceMain = getCSSCustomProperty('--theme-surface') || (isDark ? '#1e1e1e' : '#ffffff');
     const textPrimary = getCSSCustomProperty('--theme-text-primary') || (isDark ? '#ffffff' : '#000000');
-    const textSecondary = getCSSCustomProperty('--theme-text-secondary') || (isDark ? '#000000' : '#ffffff');
+    const textSecondary = getCSSCustomProperty('--theme-text-secondary') || (isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)');
     const textDisabled = getCSSCustomProperty('--theme-on-disabled') || (isDark ? 'rgba(255, 255, 255, 0.38)' : 'rgba(0, 0, 0, 0.38)');
     return createTheme({
       palette: {
@@ -2648,11 +2648,64 @@ Code.transformCodeHighlight = element => {
   };
 };
 
+/**
+ * Icon name to Material-UI icon component mapping
+ * Used by finalize function to transform icon string names to React components
+ */
+const iconRegistry = {
+  home: Home,
+  download: Download,
+  clouddownload: CloudDownload,
+  cloudupload: CloudUpload,
+  settings: Settings,
+  dashboard: Dashboard,
+  info: Info,
+  help: Help,
+  add: Add,
+  edit: Edit,
+  delete: Delete,
+  check: Check,
+  close: Close,
+  arrowforward: ArrowForward,
+  arrowback: ArrowBack,
+  menu: Menu,
+  search: Search,
+  favorite: Favorite,
+  star: Star,
+  share: Share,
+  save: Save,
+  send: Send,
+  email: Email,
+  phone: Phone,
+  person: Person,
+  group: Group,
+  business: Business,
+  shoppingcart: ShoppingCart,
+  attachmoney: AttachMoney,
+  lock: Lock,
+  lockopen: LockOpen,
+  visibility: Visibility,
+  visibilityoff: VisibilityOff
+};
+/**
+ * Get icon component from icon name string
+ * Exported for use by other components (Scaffold, ResponsiveMenu, etc.)
+ */
+function getIconComponent(iconName) {
+  if (!iconName) return null;
+  const IconComponent = iconRegistry[iconName.toLowerCase()];
+  if (!IconComponent) {
+    console.warn(`[Button] Icon "${iconName}" not found in registry`);
+    return null;
+  }
+  return jsx(IconComponent, {});
+}
 // View component - handles the actual rendering
 const ButtonView = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     label,
     variant = 'primary',
+    color,
     buttonSize = 'medium',
     icon,
     endIcon,
@@ -2683,8 +2736,13 @@ const ButtonView = /*#__PURE__*/React.forwardRef((props, ref) => {
         return 'contained';
     }
   };
-  // Map our variants to MUI colors
-  const getMuiColor = () => {
+  // Get theme color name - prioritize explicit color prop over variant-derived color
+  const getThemeColorName = () => {
+    // If color prop is explicitly provided, use it
+    if (color) {
+      return color;
+    }
+    // Otherwise derive from variant
     switch (variant) {
       case 'primary':
         return 'primary';
@@ -2700,6 +2758,50 @@ const ButtonView = /*#__PURE__*/React.forwardRef((props, ref) => {
         return 'primary';
     }
   };
+  // Get CSS theme variable styles based on variant and color
+  const getColorStyles = () => {
+    const muiVariant = getMuiVariant();
+    const colorName = getThemeColorName();
+    // For contained buttons: use solid background
+    if (muiVariant === 'contained') {
+      return {
+        backgroundColor: `var(--theme-${colorName})`,
+        color: `var(--theme-on-${colorName})`,
+        '&:hover': {
+          backgroundColor: `var(--theme-${colorName}-dark)`
+        },
+        '&.Mui-disabled': {
+          backgroundColor: 'var(--theme-text-disabled)',
+          color: 'var(--theme-on-surface)'
+        }
+      };
+    }
+    // For outlined buttons: border and text color
+    if (muiVariant === 'outlined') {
+      return {
+        borderColor: `var(--theme-${colorName})`,
+        color: `var(--theme-${colorName})`,
+        '&:hover': {
+          borderColor: `var(--theme-${colorName}-dark)`,
+          backgroundColor: `var(--theme-${colorName}-light)`
+        },
+        '&.Mui-disabled': {
+          borderColor: 'var(--theme-border-main)',
+          color: 'var(--theme-text-disabled)'
+        }
+      };
+    }
+    // For text buttons: just text color
+    return {
+      color: `var(--theme-${colorName})`,
+      '&:hover': {
+        backgroundColor: `var(--theme-${colorName}-light)`
+      },
+      '&.Mui-disabled': {
+        color: 'var(--theme-text-disabled)'
+      }
+    };
+  };
   // Handle action serialization pattern for onClick
   const handleActionClick = React.useCallback(event => {
     if (action) {
@@ -2756,12 +2858,13 @@ const ButtonView = /*#__PURE__*/React.forwardRef((props, ref) => {
   // Base button props
   const baseProps = {
     variant: getMuiVariant(),
-    color: getMuiColor(),
     size: buttonSize,
     disabled: disabled || loading,
     fullWidth,
     ...restProps,
     sx: {
+      // Apply CSS theme variable colors
+      ...getColorStyles(),
       // Ensure consistent text transform
       textTransform: 'none',
       // Loading state adjustments
@@ -2770,6 +2873,7 @@ const ButtonView = /*#__PURE__*/React.forwardRef((props, ref) => {
           marginRight: 1
         }
       }),
+      // Merge user-provided sx prop last to allow overrides
       ...(restProps.sx || {})
     },
     startIcon: loading ? jsx(CircularProgress, {
@@ -2812,8 +2916,27 @@ const Button = createSerializableView({
   tagName: 'Button',
   version: '1.0.0',
   role: 'view',
-  View: ButtonView
+  View: ButtonView,
   // Button component uses default react-children strategy for potential child content
+  finalize: props => {
+    // Transform icon string names to React icon components
+    const transformedProps = {
+      ...props
+    };
+    if (typeof props.icon === 'string') {
+      const iconComponent = getIconComponent(props.icon);
+      if (iconComponent) {
+        transformedProps.icon = iconComponent;
+      }
+    }
+    if (typeof props.endIcon === 'string') {
+      const endIconComponent = getIconComponent(props.endIcon);
+      if (endIconComponent) {
+        transformedProps.endIcon = endIconComponent;
+      }
+    }
+    return transformedProps;
+  }
 });
 // Register HTML patterns that Button component can handle
 Button.registerPatternHandlers = registry => {
@@ -3546,7 +3669,8 @@ Text$1.registerPatternHandlers = registry => {
 Text$1.transformParagraph = element => {
   return {
     tagName: 'Text',
-    props: {
+    version: '1.0.0',
+    data: {
       variant: 'body1',
       component: 'p',
       content: element.textContent || ''
@@ -3565,7 +3689,8 @@ Text$1.transformHeading = (element, tagName) => {
   };
   return {
     tagName: 'Text',
-    props: {
+    version: '1.0.0',
+    data: {
       variant: variantMap[tagName] || 'h4',
       component: tagName,
       content: element.textContent || ''
@@ -3576,7 +3701,8 @@ Text$1.transformHeading = (element, tagName) => {
 Text$1.transformSpan = element => {
   return {
     tagName: 'Text',
-    props: {
+    version: '1.0.0',
+    data: {
       variant: 'body2',
       component: 'span',
       content: element.textContent || ''
@@ -3854,7 +3980,7 @@ __decorate([Field(), Editor({
   field_type: FieldType.TEXTAREA,
   label: 'Click Handler',
   description: 'JavaScript function for click events',
-  placeholder: 'function(event) { console.log("clicked"); }'
+  placeholder: 'function(event) { console.debug("clicked"); }'
 }), IsOptional(), IsString(), __metadata("design:type", Function)], ViewSchema.prototype, "onClick", void 0);
 __decorate([Field(), Editor({
   field_type: FieldType.TEXTAREA,
@@ -4283,7 +4409,7 @@ function CoverImageHeaderView({
             minWidth: 36
           },
           children: jsx(MoreVert, {})
-        }), jsx(Menu, {
+        }), jsx(Menu$1, {
           anchorEl: anchorEl,
           open: isMenuOpen,
           onClose: handleMenuClose,
@@ -4522,7 +4648,7 @@ function CoverImageHeader(props) {
   const convertedActions = modelActions ? modelActions.filter(action => typeof action.id === 'string' && !!action.id).map(action => ({
     ...action,
     id: action.id,
-    onClick: () => console.log(`Action clicked: ${action.id}`) // Default handler for data-driven actions
+    onClick: () => console.debug(`Action clicked: ${action.id}`) // Default handler for data-driven actions
   })) : [];
   return jsx(CoverImageHeaderView, {
     ...viewProps,
@@ -5079,6 +5205,11 @@ function LogoView({
     // If image is a React node, render it directly
     return jsx("div", {
       className: "logo-image-container",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
       children: image
     });
   };
@@ -5092,7 +5223,8 @@ function LogoView({
       xmlns: "http://www.w3.org/2000/svg",
       className: `logo-svg dynamic-logo ${sizeClass} ${variantClass}`.trim(),
       style: {
-        height: `${height}px`
+        height: `${height}px`,
+        ...style
       },
       role: "img",
       "aria-label": ariaLabel,
@@ -5202,7 +5334,6 @@ function Logo(props) {
   }
   // Show error state
   if (error) {
-    console.error('Error loading logo:', error);
     return jsxs("div", {
       style: {
         color: 'red',
@@ -5212,7 +5343,6 @@ function Logo(props) {
       children: ["Error loading logo: ", error.message]
     });
   }
-  console.log('Resolved props for Logo:', logoProps);
   return jsx(LogoView, {
     ...logoProps
   });
@@ -16524,7 +16654,6 @@ function SafeSpanWithDataBinding(props) {
       });
     }
   }
-  console.log('Resolved props for SafeSpan:', safeSpanProps);
   return jsx(SafeSpanView, {
     ...safeSpanProps
   });
@@ -17442,7 +17571,6 @@ class Html extends ModelView {
     if (version !== Html.version) {
       console.warn(`Version mismatch: Expected ${Html.version} but got ${version}`);
     }
-    console.log(`TEST: Creating ${tagName} - ${version} from JSON:`, jsonData);
     const {
       children,
       ...props
@@ -17611,7 +17739,6 @@ class ReactNodeTransformer {
     // Handle React elements
     if (/*#__PURE__*/isValidElement(node)) {
       const element = node;
-      console.log(`TEST: isValidElement:`, element);
       const comp = element.type;
       const rawName = typeof comp === 'string' ? comp : comp?.render?.name || comp?.name || comp?.muiName || comp?.displayName || 'Anonymous';
       // Normalize wrapper names like ForwardRef(Typography), Styled(Typography)
@@ -17724,7 +17851,6 @@ class ReactNodeTransformer {
       // Handle HTML elements
       if (typeof elementType === 'string') {
         const deserializedProps = ReactNodeTransformer.deserializeProps(props);
-        console.log(`TEST: Create Element:`, elementType, deserializedProps);
         return /*#__PURE__*/createElement(elementType, {
           key,
           ...deserializedProps
@@ -17851,7 +17977,6 @@ class ComponentTransformer {
     if (componentRegistry.has(tagName)) {
       console.warn(`Component '${tagName}' is already registered. Overwriting existing registration.`);
     }
-    console.log(`TEST: Registering component: ${tagName} (version ${version})`);
     componentRegistry.set(tagName, componentClass);
     // Register HTML patterns if component supports them
     if (typeof componentClass.registerPatternHandlers === 'function') {
@@ -17965,13 +18090,9 @@ class ComponentTransformer {
       if (typeof componentType === 'function') {
         const tagName = ComponentTransformer.findTagNameForComponent(componentType);
         if (tagName) {
-          console.log(`TEST: Serializing component instance of ${tagName}:`, element.props);
           const componentClass = componentRegistry.get(tagName);
           let serializedData = null;
-          console.log(`TEST: Element type:`, typeof element.toJson);
-          console.log(`TEST: Component type:`, typeof componentClass.toJson);
           if (typeof componentClass.toJson === 'function') {
-            console.log(`TEST: Serializing via component toJson method ${tagName}:`, element.props);
             serializedData = componentClass.toJson(element.props);
           }
           if (serializedData !== null) {
@@ -17983,7 +18104,6 @@ class ComponentTransformer {
               ...key,
               ...serializedData
             };
-            console.log(`TEST: Serialized component ${tagName}:`, result);
             return result;
           }
         } else if (strictMode) {
@@ -18001,8 +18121,6 @@ class ComponentTransformer {
       version: FALLBACK_VERSION,
       data: ReactNodeTransformer.serialize(node)
     };
-    console.log(`TEST: Serialized unregistered node as ${FALLBACK_TAG}:`, result, node);
-    console.log(`TEST: Component Registry:`, componentRegistry);
     return result;
   }
   /**
@@ -18266,11 +18384,13 @@ function ArticleView({
     // Ensure proper width constraints for article content
     maxWidth: '800px',
     mx: 'auto',
+    p: 3,
     // Header styling when headers are present
     '& h1, & h2, & h3, & h4, & h5, & h6': {
       maxWidth: '100%',
-      mb: 1.5,
-      mt: 2,
+      mb: 2,
+      mt: 3,
+      color: 'var(--theme-text-primary)',
       '&:first-of-type': {
         mt: 0
       }
@@ -18290,15 +18410,85 @@ function ArticleView({
       fontWeight: 600,
       lineHeight: 1.4
     },
+    '& h4': {
+      fontSize: '1.25rem',
+      fontWeight: 600,
+      lineHeight: 1.4,
+      mt: 2.5,
+      mb: 1.5
+    },
     // Ensure paragraphs have proper spacing
     '& p': {
-      mb: 1.5,
-      lineHeight: 1.6
+      mb: 2,
+      lineHeight: 1.8,
+      fontSize: '1.1rem',
+      color: 'var(--theme-text-primary)'
     },
     // Ensure lists have proper spacing
     '& ul, & ol': {
-      mb: 1.5,
-      pl: 3
+      mb: 2.5,
+      pl: 4,
+      '& li': {
+        mb: 1,
+        lineHeight: 1.8,
+        fontSize: '1.05rem',
+        color: 'var(--theme-text-primary)'
+      }
+    },
+    // Blockquote styling
+    '& blockquote': {
+      borderLeft: '4px solid var(--theme-primary)',
+      pl: 3,
+      pr: 2,
+      py: 2,
+      my: 3,
+      ml: 0,
+      mr: 0,
+      background: 'var(--theme-surface)',
+      borderRadius: '8px',
+      '& p': {
+        fontSize: '1.15rem',
+        fontStyle: 'italic',
+        lineHeight: 1.7,
+        mb: 1,
+        color: 'var(--theme-text-primary)'
+      },
+      '& cite': {
+        display: 'block',
+        fontSize: '0.95rem',
+        fontStyle: 'normal',
+        fontWeight: 600,
+        color: 'var(--theme-text-secondary)',
+        mt: 1
+      }
+    },
+    // Strong/bold text
+    '& strong': {
+      fontWeight: 600,
+      color: 'var(--theme-text-primary)'
+    },
+    // Emphasis/italic text
+    '& em': {
+      fontStyle: 'italic',
+      color: 'var(--theme-text-primary)'
+    },
+    // Links
+    '& a': {
+      color: 'var(--theme-primary)',
+      textDecoration: 'none',
+      fontWeight: 500,
+      '&:hover': {
+        textDecoration: 'underline'
+      }
+    },
+    // Images and figures
+    '& figure': {
+      margin: '2rem 0',
+      '& img': {
+        maxWidth: '100%',
+        height: 'auto',
+        borderRadius: '8px'
+      }
     },
     ...styleProps.sx,
     children: html
@@ -18414,7 +18604,6 @@ function ArticleWithDataBinding(props) {
       });
     }
   }
-  console.log('Resolved props for Article:', articleProps);
   return jsx(ArticleView, {
     ...articleProps
   });
@@ -19167,7 +19356,7 @@ function PageBannerHeaderView({
             borderColor: 'divider'
           },
           children: jsx(MoreVert, {})
-        }), jsx(Menu, {
+        }), jsx(Menu$1, {
           anchorEl: anchorEl,
           open: isMenuOpen,
           onClose: handleMenuClose,
@@ -19345,7 +19534,7 @@ function PageBannerHeader(props) {
     destructive: action.destructive,
     priority: action.priority,
     onClick: () => {
-      console.log(`Action clicked: ${action.id} - ${action.label}`);
+      console.debug(`Action clicked: ${action.id} - ${action.label}`);
       // In a real app, this would dispatch events or call configured handlers
     }
   }));
@@ -20822,9 +21011,9 @@ function FooterView({
   // Force vertical on mobile for better usability
   const effectiveOrientation = isMobile ? 'vertical' : orientation;
   const renderFooterItem = item => {
-    const content = jsx(Typography, {
+    const content = jsx(Text$1, {
       variant: "body2",
-      color: "text.secondary",
+      customColor: "var(--theme-text-secondary)",
       sx: {
         textDecoration: item.href ? 'none' : 'inherit',
         '&:hover': item.href ? {
@@ -20860,14 +21049,14 @@ function FooterView({
     sx: {
       minWidth: 0
     },
-    children: [section.title && jsx(Typography, {
+    children: [section.title && jsx(Text$1, {
       variant: "subtitle2",
       component: "h3",
       sx: {
         fontWeight: 600,
-        mb: 1.5,
-        color: 'text.primary'
+        mb: 1.5
       },
+      customColor: "var(--theme-text-primary)",
       children: section.title
     }), jsx(Box, {
       children: section.items.map(item => renderFooterItem(item))
@@ -20983,13 +21172,13 @@ function FooterView({
             },
             gap: 1
           },
-          children: [copyright && jsx(Typography, {
+          children: [copyright && jsx(Text$1, {
             variant: "caption",
-            color: "text.secondary",
+            customColor: 'var(--theme-text-secondary)',
             children: copyright
-          }), legalText && jsx(Typography, {
+          }), legalText && jsx(Text$1, {
             variant: "caption",
-            color: "text.secondary",
+            customColor: "var(--theme-text-secondary)",
             children: legalText
           })]
         })
@@ -21035,9 +21224,9 @@ function Footer(props) {
         },
         textAlign: 'center'
       },
-      children: jsx(Typography, {
+      children: jsx(Text$1, {
         variant: "body2",
-        color: "text.secondary",
+        customColor: "var(--theme-text-secondary)",
         children: "Loading Footer..."
       })
     });
@@ -21056,9 +21245,9 @@ function Footer(props) {
           },
           textAlign: 'center'
         },
-        children: jsxs(Typography, {
+        children: jsxs(Text$1, {
           variant: "body2",
-          color: "error",
+          customColor: 'var(--theme-error)',
           children: ["Error Loading Footer: ", error.message]
         })
       });
@@ -22063,7 +22252,7 @@ function ThemeSwitcherView({
       },
       className: styleProps.className,
       children: getCurrentIcon()
-    }), jsxs(Menu, {
+    }), jsxs(Menu$1, {
       id: "theme-menu",
       anchorEl: anchorEl,
       open: open,
@@ -22433,7 +22622,7 @@ function PaletteSwitcherView({
         },
         children: jsx(Palette, {})
       })
-    }), jsx(Menu, {
+    }), jsx(Menu$1, {
       id: "palette-menu",
       anchorEl: anchorEl,
       open: open,
@@ -23138,9 +23327,21 @@ const Scaffold = ({
         }
       }
     };
-    // For primary navigation (bottom, rail, appbar), enforce icon requirement
+    // Transform icon string to component, or use provided ReactNode, or fallback to DefaultIcon
     const needsIcon = variant !== 'drawer';
-    const displayIcon = item.icon || (needsIcon ? jsx(RadioButtonUnchecked, {}) : null);
+    let displayIcon = null;
+    if (item.icon) {
+      // If icon is a string, transform it to component
+      if (typeof item.icon === 'string') {
+        displayIcon = getIconComponent(item.icon) || (needsIcon ? jsx(RadioButtonUnchecked, {}) : 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 = jsx(RadioButtonUnchecked, {});
+    }
     const content = jsxs(Fragment, {
       children: [displayIcon && jsx("span", {
         className: `menu-item-icon menu-item-icon-${variant}`,