@qwickapps/react-framework 1.3.1 → 1.3.2

package/README.md

@@ -4,7 +4,13 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
-### August 31, 2025 - CMS Content Components
+### September 1, 2025 - Optional Dependencies & Performance
+- **Optional Logging**: Made `@qwickapps/logging` an optional dependency with console fallback
+- **Reduced Bundle Size**: Core framework no longer includes logging overhead by default
+- **React Error Fixes**: Fixed React error #62 in Markdown mixed content scenarios
+- **DOM Nesting**: Added automatic cleanup of invalid DOM nesting from marked.js output
+
+### August 31, 2025 - CMS Content Components  
 - **Html Component**: Transform HTML strings into React components with configurable transformation rules
 - **Markdown Component**: Convert Markdown to React components using marked library with Html component integration
 - **Transform System**: Extensible HTML transformation architecture with optimized rule sets for Article and Markdown content
@@ -52,6 +58,16 @@ A complete React framework for building modern, responsive applications with int
 npm install @qwickapps/react-framework
 ```
 
+### Optional Dependencies
+
+The framework uses console-based logging by default. For advanced logging features, optionally install:
+
+```bash
+npm install @qwickapps/logging
+```
+
+This will enable structured logging with configurable levels and outputs. If not installed, the framework automatically falls back to console logging.
+
 ## Quick Start
 
 ### Basic Setup

package/dist/index.esm.js

@@ -1,8 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { CircularProgress, Button as Button$1, Paper, Typography, useTheme as useTheme$1, Box, Container as Container$8, Stack, Tooltip, IconButton, Snackbar, Alert, useMediaQuery, Avatar, Chip, Menu, MenuItem, Grid, Divider, Link, ListItemIcon, ListItemText, Card, CardContent, ButtonGroup, Collapse, TextField as TextField$1, FormControl, InputLabel, Select, FormHelperText } from '@mui/material';
 import React, { useMemo, useContext, useState, useEffect, createContext, useRef, useCallback, cloneElement } from 'react';
-import { Logger, createLogger } from '@qwickapps/logging';
-export * from '@qwickapps/logging';
 import { MustacheTemplateProvider, MemoryCacheProvider, CachedDataProvider, Field, Editor, FieldType, Schema, Model, DataType } from '@qwickapps/schema';
 import { IsOptional, IsString, IsIn, IsUrl, IsArray, ValidateNested, IsNumber, Min, Max, IsBoolean, IsNotEmpty, IsObject } from 'class-validator';
 import { Type } from 'class-transformer';
@@ -468,6 +466,63 @@ function useBaseProps(props) {
   };
 }
 
+/**
+ * QwickApps React Framework - Logger Utility
+ *
+ * Optional logging with fallback to console when @qwickapps/logging is not available
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+/**
+ * Console-based logger fallback
+ */
+class ConsoleLogger {
+  constructor(name) {
+    this.name = name;
+  }
+  debug(message, ...args) {
+    {
+      console.debug(`[${this.name}] ${message}`, ...args);
+    }
+  }
+  info(message, ...args) {
+    console.info(`[${this.name}] ${message}`, ...args);
+  }
+  warn(message, ...args) {
+    console.warn(`[${this.name}] ${message}`, ...args);
+  }
+  error(message, ...args) {
+    console.error(`[${this.name}] ${message}`, ...args);
+  }
+}
+/**
+ * Create logger with optional @qwickapps/logging dependency
+ */
+function createLogger(name) {
+  try {
+    // Try to use @qwickapps/logging if available
+    const logging = require('@qwickapps/logging');
+    return logging.createLogger(name);
+  } catch {
+    // Fallback to console-based logger
+    return new ConsoleLogger(name);
+  }
+}
+/**
+ * Framework-specific loggers
+ */
+const loggers = {
+  scaffold: createLogger('Scaffold'),
+  navigation: createLogger('Navigation'),
+  auth: createLogger('Auth'),
+  theme: createLogger('Theme'),
+  palette: createLogger('Palette'),
+  form: createLogger('Form'),
+  layout: createLogger('Layout'),
+  menu: createLogger('Menu'),
+  router: createLogger('Router')
+};
+
 /**
 * ContentResolver provides a unified interface to fetch and render content
 * using data providers, template resolvers, and optional caching.
@@ -506,10 +561,7 @@ function useBaseProps(props) {
  */
 class TemplateResolver {
   constructor(config) {
-    this.log = new Logger({
-      namespace: 'ContentResolver',
-      enabled: config.enableLogging || false
-    });
+    this.log = createLogger('ContentResolver');
     this.enableLogging = config.enableLogging || false;
     this.templateResolver = config.templateResolver || new MustacheTemplateProvider();
     if (config.cacheProvider === true) {
@@ -13121,6 +13173,22 @@ const defaultMarkdownRules = [
     return null;
   }
 }];
+/**
+ * Parse style string into React style object
+ */
+function parseStyleString(styleStr) {
+  const styles = {};
+  if (!styleStr) return styles;
+  styleStr.split(';').forEach(declaration => {
+    const [property, value] = declaration.split(':').map(s => s.trim());
+    if (property && value) {
+      // Convert kebab-case to camelCase
+      const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      styles[camelProperty] = value;
+    }
+  });
+  return styles;
+}
 /**
  * Default fallback component - renders element as-is with SafeSpan content
  */
@@ -13128,6 +13196,9 @@ const defaultFallback = (element, key) => {
   const tagName = element.tagName.toLowerCase();
   // Check if this is a void element (self-closing)
   const voidElements = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+  // Handle style attribute separately to convert to object
+  const styleAttr = element.getAttribute('style');
+  const style = styleAttr ? parseStyleString(styleAttr) : undefined;
   const props = {
     key,
     ...(element.className ? {
@@ -13136,7 +13207,10 @@ const defaultFallback = (element, key) => {
     ...(element.id ? {
       id: element.id
     } : {}),
-    ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id'].includes(attr.name)).map(attr => [attr.name, attr.value]))
+    ...(style ? {
+      style
+    } : {}),
+    ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id', 'style'].includes(attr.name)).map(attr => [attr.name, attr.value]))
   };
   if (voidElements.has(tagName)) {
     // Void elements can't have children
@@ -13181,6 +13255,9 @@ function transformElement(element, key, config = {
     const children = Array.from(element.children);
     const tagName = element.tagName.toLowerCase();
     const transformedChildren = children.map((child, index) => transformElement(child, `${key}-${index}`, config));
+    // Handle style attribute separately to convert to object
+    const styleAttr = element.getAttribute('style');
+    const style = styleAttr ? parseStyleString(styleAttr) : undefined;
     return /*#__PURE__*/React.createElement(tagName, {
       key,
       ...(element.className ? {
@@ -13189,12 +13266,39 @@ function transformElement(element, key, config = {
       ...(element.id ? {
         id: element.id
       } : {}),
-      ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id'].includes(attr.name)).map(attr => [attr.name, attr.value]))
+      ...(style ? {
+        style
+      } : {}),
+      ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id', 'style'].includes(attr.name)).map(attr => [attr.name, attr.value]))
     }, ...transformedChildren);
   }
   // No transformation needed - use fallback
   return fallbackComponent(element, key);
 }
+/**
+ * Clean up invalid DOM nesting that can cause React errors
+ */
+function cleanupInvalidNesting(html) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  // Find paragraphs that contain block-level elements (invalid nesting)
+  const paragraphs = doc.querySelectorAll('p');
+  const blockElements = ['div', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'main', 'figure', 'blockquote', 'pre', 'table', 'form', 'fieldset', 'address'];
+  paragraphs.forEach(p => {
+    const hasBlockChildren = Array.from(p.children).some(child => blockElements.includes(child.tagName.toLowerCase()));
+    if (hasBlockChildren) {
+      // Convert paragraph to div to allow block children
+      const div = doc.createElement('div');
+      div.innerHTML = p.innerHTML;
+      // Copy attributes
+      Array.from(p.attributes).forEach(attr => {
+        div.setAttribute(attr.name, attr.value);
+      });
+      p.parentNode?.replaceChild(div, p);
+    }
+  });
+  return doc.body.innerHTML;
+}
 /**
  * Transform HTML string to React components
  */
@@ -13202,8 +13306,10 @@ function transformHtmlToReact(html, config = {
   rules: defaultArticleRules
 }) {
   if (!html.trim()) return [];
+  // Clean up invalid DOM nesting first
+  const cleanHtml = cleanupInvalidNesting(html);
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
+  const doc = parser.parseFromString(cleanHtml, 'text/html');
   return Array.from(doc.body.children).map((element, index) => transformElement(element, index.toString(), config));
 }
 /**
@@ -20128,29 +20234,6 @@ const FormPage = ({
   });
 };
 
-/**
- * QwickApps React Framework - Logger Utility
- *
- * Re-exports from @qwickapps/logging with framework-specific loggers
- *
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- */
-// Re-export everything from the logging package
-/**
- * Framework-specific loggers
- */
-const loggers = {
-  scaffold: createLogger('Scaffold'),
-  navigation: createLogger('Navigation'),
-  auth: createLogger('Auth'),
-  theme: createLogger('Theme'),
-  palette: createLogger('Palette'),
-  form: createLogger('Form'),
-  layout: createLogger('Layout'),
-  menu: createLogger('Menu'),
-  router: createLogger('Router')
-};
-
 const logger = loggers.scaffold;
 // Material UI breakpoints
 const BREAKPOINTS = {
@@ -24140,4 +24223,4 @@ var ActionType;
   ActionType["CANCEL"] = "cancel";
 })(ActionType || (ActionType = {}));
 
-export { AVAILABLE_PALETTES, ActionModel, ActionType, AllPalettes, Article, ArticleModel, BasePage, Button, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, DimensionsProvider, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormMethod, FormPage, GridCell, GridLayout, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, Logo, Markdown, MetadataItemModel, Page, PageBannerHeader, PageBannerHeaderModel, PaletteAutumn, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, ProductCard, ProductCardActionModel, ProductCardModel, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, SafeSpan, SafeSpanModel, Section, SectionModel, SelectInputField, T, TextField, TextInputField, TextInputFieldModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, applyCustomPalette, clearUserPalettePreference, clearUserThemePreference, createPaletteFromCurrentTheme, deleteCustomPalette, exportPalette, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getPaletteConfig, getPaletteName, getSystemTheme, getThemePerformanceStats, importPalette, initializePalette, initializeTheme, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, t, useBaseProps, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, usePalette, useQwickApp, useResolveTemplate, useSafeLocation, useSafeNavigate, useTemplate, useTheme };
+export { AVAILABLE_PALETTES, ActionModel, ActionType, AllPalettes, Article, ArticleModel, BasePage, Button, CardListGrid, CardListGridModel, ChoiceInputField, ChoiceInputFieldModel, Code, CodeModel, Content, ContentModel, CoverImageHeader, CoverImageHeaderModel, DataProvider, DataProxy, DimensionsProvider, FeatureCard, FeatureCardActionModel, FeatureCardModel, FeatureGrid, FeatureGridModel, FeatureItemModel, Footer, FooterItemModel, FooterModel, FooterSectionModel, FormBlock, FormBlockModel, FormMethod, FormPage, GridCell, GridLayout, HeaderActionModel, HeroBlock, HeroBlockModel, Html, HtmlInputField, Logo, Markdown, MetadataItemModel, Page, PageBannerHeader, PageBannerHeaderModel, PaletteAutumn, PaletteCosmic, PaletteDefault, PaletteOcean, PaletteProvider, PaletteSpring, PaletteSwitcher, PaletteSwitcherModel, PaletteWinter, ProductCard, ProductCardActionModel, ProductCardModel, ProductModel, QWICKAPP_COMPONENT, QwickApp, QwickAppsLogo, SafeSpan, SafeSpanModel, Section, SectionModel, SelectInputField, T, TextField, TextInputField, TextInputFieldModel, ThemeProvider, ThemeSwitcher, ThemeSwitcherModel, applyCustomPalette, clearUserPalettePreference, clearUserThemePreference, createLogger, createPaletteFromCurrentTheme, deleteCustomPalette, exportPalette, getCSSVariable, getComputedTheme, getCurrentPalette, getCurrentTheme, getCustomPalettes, getPaletteConfig, getPaletteName, getSystemTheme, getThemePerformanceStats, importPalette, initializePalette, initializeTheme, loadUserPalettePreference, loadUserThemePreference, logThemePerformanceStats, loggers, resetThemePerformanceStats, resolveDimension, resolveDimensions, resolveSpacing, resolveSpacingProps, saveCustomPalette, savePalettePreference, saveThemePreference, saveUserPalettePreference, saveUserThemePreference, setCSSVariable, setPalette, setTheme, t, useBaseProps, useData, useDataBinding, useDataContext, useDataProvider, useDimensions, usePalette, useQwickApp, useResolveTemplate, useSafeLocation, useSafeNavigate, useTemplate, useTheme };

package/dist/index.js

@@ -3,7 +3,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
 var React = require('react');
-var logging = require('@qwickapps/logging');
 var schema = require('@qwickapps/schema');
 var classValidator = require('class-validator');
 var classTransformer = require('class-transformer');
@@ -469,6 +468,63 @@ function useBaseProps(props) {
   };
 }
 
+/**
+ * QwickApps React Framework - Logger Utility
+ *
+ * Optional logging with fallback to console when @qwickapps/logging is not available
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+/**
+ * Console-based logger fallback
+ */
+class ConsoleLogger {
+  constructor(name) {
+    this.name = name;
+  }
+  debug(message, ...args) {
+    {
+      console.debug(`[${this.name}] ${message}`, ...args);
+    }
+  }
+  info(message, ...args) {
+    console.info(`[${this.name}] ${message}`, ...args);
+  }
+  warn(message, ...args) {
+    console.warn(`[${this.name}] ${message}`, ...args);
+  }
+  error(message, ...args) {
+    console.error(`[${this.name}] ${message}`, ...args);
+  }
+}
+/**
+ * Create logger with optional @qwickapps/logging dependency
+ */
+function createLogger(name) {
+  try {
+    // Try to use @qwickapps/logging if available
+    const logging = require('@qwickapps/logging');
+    return logging.createLogger(name);
+  } catch {
+    // Fallback to console-based logger
+    return new ConsoleLogger(name);
+  }
+}
+/**
+ * Framework-specific loggers
+ */
+const loggers = {
+  scaffold: createLogger('Scaffold'),
+  navigation: createLogger('Navigation'),
+  auth: createLogger('Auth'),
+  theme: createLogger('Theme'),
+  palette: createLogger('Palette'),
+  form: createLogger('Form'),
+  layout: createLogger('Layout'),
+  menu: createLogger('Menu'),
+  router: createLogger('Router')
+};
+
 /**
 * ContentResolver provides a unified interface to fetch and render content
 * using data providers, template resolvers, and optional caching.
@@ -507,10 +563,7 @@ function useBaseProps(props) {
  */
 class TemplateResolver {
   constructor(config) {
-    this.log = new logging.Logger({
-      namespace: 'ContentResolver',
-      enabled: config.enableLogging || false
-    });
+    this.log = createLogger('ContentResolver');
     this.enableLogging = config.enableLogging || false;
     this.templateResolver = config.templateResolver || new schema.MustacheTemplateProvider();
     if (config.cacheProvider === true) {
@@ -13122,6 +13175,22 @@ const defaultMarkdownRules = [
     return null;
   }
 }];
+/**
+ * Parse style string into React style object
+ */
+function parseStyleString(styleStr) {
+  const styles = {};
+  if (!styleStr) return styles;
+  styleStr.split(';').forEach(declaration => {
+    const [property, value] = declaration.split(':').map(s => s.trim());
+    if (property && value) {
+      // Convert kebab-case to camelCase
+      const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      styles[camelProperty] = value;
+    }
+  });
+  return styles;
+}
 /**
  * Default fallback component - renders element as-is with SafeSpan content
  */
@@ -13129,6 +13198,9 @@ const defaultFallback = (element, key) => {
   const tagName = element.tagName.toLowerCase();
   // Check if this is a void element (self-closing)
   const voidElements = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+  // Handle style attribute separately to convert to object
+  const styleAttr = element.getAttribute('style');
+  const style = styleAttr ? parseStyleString(styleAttr) : undefined;
   const props = {
     key,
     ...(element.className ? {
@@ -13137,7 +13209,10 @@ const defaultFallback = (element, key) => {
     ...(element.id ? {
       id: element.id
     } : {}),
-    ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id'].includes(attr.name)).map(attr => [attr.name, attr.value]))
+    ...(style ? {
+      style
+    } : {}),
+    ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id', 'style'].includes(attr.name)).map(attr => [attr.name, attr.value]))
   };
   if (voidElements.has(tagName)) {
     // Void elements can't have children
@@ -13182,6 +13257,9 @@ function transformElement(element, key, config = {
     const children = Array.from(element.children);
     const tagName = element.tagName.toLowerCase();
     const transformedChildren = children.map((child, index) => transformElement(child, `${key}-${index}`, config));
+    // Handle style attribute separately to convert to object
+    const styleAttr = element.getAttribute('style');
+    const style = styleAttr ? parseStyleString(styleAttr) : undefined;
     return /*#__PURE__*/React.createElement(tagName, {
       key,
       ...(element.className ? {
@@ -13190,12 +13268,39 @@ function transformElement(element, key, config = {
       ...(element.id ? {
         id: element.id
       } : {}),
-      ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id'].includes(attr.name)).map(attr => [attr.name, attr.value]))
+      ...(style ? {
+        style
+      } : {}),
+      ...Object.fromEntries(Array.from(element.attributes).filter(attr => !['class', 'id', 'style'].includes(attr.name)).map(attr => [attr.name, attr.value]))
     }, ...transformedChildren);
   }
   // No transformation needed - use fallback
   return fallbackComponent(element, key);
 }
+/**
+ * Clean up invalid DOM nesting that can cause React errors
+ */
+function cleanupInvalidNesting(html) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  // Find paragraphs that contain block-level elements (invalid nesting)
+  const paragraphs = doc.querySelectorAll('p');
+  const blockElements = ['div', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'main', 'figure', 'blockquote', 'pre', 'table', 'form', 'fieldset', 'address'];
+  paragraphs.forEach(p => {
+    const hasBlockChildren = Array.from(p.children).some(child => blockElements.includes(child.tagName.toLowerCase()));
+    if (hasBlockChildren) {
+      // Convert paragraph to div to allow block children
+      const div = doc.createElement('div');
+      div.innerHTML = p.innerHTML;
+      // Copy attributes
+      Array.from(p.attributes).forEach(attr => {
+        div.setAttribute(attr.name, attr.value);
+      });
+      p.parentNode?.replaceChild(div, p);
+    }
+  });
+  return doc.body.innerHTML;
+}
 /**
  * Transform HTML string to React components
  */
@@ -13203,8 +13308,10 @@ function transformHtmlToReact(html, config = {
   rules: defaultArticleRules
 }) {
   if (!html.trim()) return [];
+  // Clean up invalid DOM nesting first
+  const cleanHtml = cleanupInvalidNesting(html);
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
+  const doc = parser.parseFromString(cleanHtml, 'text/html');
   return Array.from(doc.body.children).map((element, index) => transformElement(element, index.toString(), config));
 }
 /**
@@ -20129,29 +20236,6 @@ const FormPage = ({
   });
 };
 
-/**
- * QwickApps React Framework - Logger Utility
- *
- * Re-exports from @qwickapps/logging with framework-specific loggers
- *
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- */
-// Re-export everything from the logging package
-/**
- * Framework-specific loggers
- */
-const loggers = {
-  scaffold: logging.createLogger('Scaffold'),
-  navigation: logging.createLogger('Navigation'),
-  auth: logging.createLogger('Auth'),
-  theme: logging.createLogger('Theme'),
-  palette: logging.createLogger('Palette'),
-  form: logging.createLogger('Form'),
-  layout: logging.createLogger('Layout'),
-  menu: logging.createLogger('Menu'),
-  router: logging.createLogger('Router')
-};
-
 const logger = loggers.scaffold;
 // Material UI breakpoints
 const BREAKPOINTS = {
@@ -24191,6 +24275,7 @@ exports.ThemeSwitcher = ThemeSwitcher;
 exports.applyCustomPalette = applyCustomPalette;
 exports.clearUserPalettePreference = clearUserPalettePreference;
 exports.clearUserThemePreference = clearUserThemePreference;
+exports.createLogger = createLogger;
 exports.createPaletteFromCurrentTheme = createPaletteFromCurrentTheme;
 exports.deleteCustomPalette = deleteCustomPalette;
 exports.exportPalette = exportPalette;
@@ -24237,9 +24322,3 @@ exports.useSafeLocation = useSafeLocation;
 exports.useSafeNavigate = useSafeNavigate;
 exports.useTemplate = useTemplate;
 exports.useTheme = useTheme;
-Object.keys(logging).forEach(function (k) {
-    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-        enumerable: true,
-        get: function () { return logging[k]; }
-    });
-});

package/dist/templates/TemplateResolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateResolver.d.ts","sourceRoot":"","sources":["../../src/templates/TemplateResolver.ts"],"names":[],"mappings":"AAOA,OAAO,EAAsB,YAAY,EAAsD,KAAK,EAA4B,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACzK,OAAO,EAEL,iBAAiB,EAEjB,sBAAsB,EACvB,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,gBAAiB,YAAW,iBAAiB;IACxD,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,aAAa,CAAC,CAAwB;IAC9C,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,GAAG,CAAS;gBAER,MAAM,EAAE,sBAAsB;IA4BpC,GAAG,CAAC,CAAC,SAAS,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAI5D,MAAM,CAAC,CAAC,SAAS,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC;IAIlG;;OAEG;IACG,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAG,MAAM,CAAE;IAsB3D;;;OAGG;YACW,iBAAiB;CAsChC"}
+{"version":3,"file":"TemplateResolver.d.ts","sourceRoot":"","sources":["../../src/templates/TemplateResolver.ts"],"names":[],"mappings":"AAOA,OAAO,EAAsB,YAAY,EAAsD,KAAK,EAA4B,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACzK,OAAO,EAEL,iBAAiB,EAEjB,sBAAsB,EACvB,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,gBAAiB,YAAW,iBAAiB;IACxD,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,aAAa,CAAC,CAAwB;IAC9C,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,GAAG,CAAS;gBAER,MAAM,EAAE,sBAAsB;IAwBpC,GAAG,CAAC,CAAC,SAAS,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAI5D,MAAM,CAAC,CAAC,SAAS,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC;IAIlG;;OAEG;IACG,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAG,MAAM,CAAE;IAsB3D;;;OAGG;YACW,iBAAiB;CAsChC"}

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

@@ -1 +1 @@
-{"version":3,"file":"htmlTransform.d.ts","sourceRoot":"","sources":["../../src/utils/htmlTransform.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC/D;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACxE;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,aAAa,EA0G9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,aAAa,EAqC/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,EAAE,KAAK,MAAM,KAAG,KAAK,CAAC,SA+BrE,CAAC;AAkBF;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,MAAM,GAAE,eAAgD,GACvD,KAAK,CAAC,SAAS,CAqCjB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,MAAM,GAAE,eAAgD,GACvD,KAAK,CAAC,SAAS,EAAE,CASnB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAuB3D"}
+{"version":3,"file":"htmlTransform.d.ts","sourceRoot":"","sources":["../../src/utils/htmlTransform.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC/D;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACxE;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,aAAa,EA0G9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,aAAa,EAqC/C,CAAC;AAsBF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,EAAE,KAAK,MAAM,KAAG,KAAK,CAAC,SAoCrE,CAAC;AAkBF;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,MAAM,GAAE,eAAgD,GACvD,KAAK,CAAC,SAAS,CA0CjB;AAmCD;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,MAAM,GAAE,eAAgD,GACvD,KAAK,CAAC,SAAS,EAAE,CAYnB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAuB3D"}

package/dist/utils/logger.d.ts

@@ -1,12 +1,24 @@
 /**
  * QwickApps React Framework - Logger Utility
  *
- * Re-exports from @qwickapps/logging with framework-specific loggers
+ * Optional logging with fallback to console when @qwickapps/logging is not available
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-export * from '@qwickapps/logging';
-import { Logger } from '@qwickapps/logging';
+export interface Logger {
+    debug(message: string, ...args: any[]): void;
+    info(message: string, ...args: any[]): void;
+    warn(message: string, ...args: any[]): void;
+    error(message: string, ...args: any[]): void;
+}
+/**
+ * Create logger with optional @qwickapps/logging dependency
+ */
+declare function createLogger(name: string): Logger;
+/**
+ * Re-export Logger type and createLogger function for compatibility
+ */
+export { createLogger };
 /**
  * Framework-specific loggers
  */

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

@@ -1 +1 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/utils/logger.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,oBAAoB,CAAC;AAGnC,OAAO,EAAgB,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAU1C,CAAC"}
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/utils/logger.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,MAAM;IACrB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC7C,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC5C,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC5C,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;CAC9C;AAqCD;;GAEG;AACH,iBAAS,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAS1C;AAED;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAU1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
@@ -48,12 +48,14 @@
   "author": "QwickApps",
   "license": "PolyForm-Shield-1.0.0",
   "dependencies": {
-    "@qwickapps/logging": "^1.0.0",
     "@qwickapps/schema": "^1.3.1",
     "marked": "^4.3.0",
     "md5": "^2.3.0",
     "sanitize-html": "^2.17.0"
   },
+  "optionalDependencies": {
+    "@qwickapps/logging": "^1.0.0"
+  },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
     "@emotion/styled": ">=11.0.0",

package/src/stories/{form/FormComponents.stories.tsx → FormComponents.stories.tsx}

@@ -4,13 +4,13 @@
 
 import { Box, Paper, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '../../components/buttons/Button';
-import { TextField } from '../../components/input/TextField';
-import { GridCell } from '../../components/layout/GridCell';
-import GridLayout from '../../components/layout/GridLayout';
+import { Button } from '../components/buttons/Button';
+import { TextField } from '../components/input/TextField';
+import { GridCell } from '../components/layout/GridCell';
+import GridLayout from '../components/layout/GridLayout';
 
 const meta: Meta = {
-  title: 'Form/Enhanced Components',
+  title: 'Forms/Enhanced Components',
   parameters: {
     layout: 'padded',
     docs: {
@@ -43,14 +43,14 @@ export const BasicTextField: StoryObj = {
       <TextField
         label="Small Width"
         width="small"
-        margin="medium"
+        margin="normal"
         padding="small"
       />
       <br />
       <TextField
         label="Large Width"
         width="large"
-        margin="medium"
+        margin="normal"
         padding="large"
         background="primary.light"
       />
@@ -73,7 +73,7 @@ export const BasicButton: StoryObj = {
       <Button
         variant="contained"
         width="large"
-        margin="medium"
+        margin="normal"
         padding="large"
       >
         Large Width

package/src/templates/TemplateResolver.ts

@@ -4,7 +4,7 @@
 * 
 * Copyright (c) 2025 QwickApps.com. All rights reserved.
 */
-import { Logger } from '@qwickapps/logging';
+import { Logger, createLogger } from '../utils/logger';
 import { CachedDataProvider, DataResponse, ICacheProvider, IDataProvider, MemoryCacheProvider, Model, MustacheTemplateProvider, SelectOptions } from '@qwickapps/schema';
 import {
   DataProxy,
@@ -51,11 +51,7 @@ export class TemplateResolver implements ITemplateResolver {
   private log: Logger;
 
   constructor(config: TemplateResolverConfig) {
-    this.log = new Logger({
-      namespace: 'ContentResolver',
-      enabled: config.enableLogging || false
-    });
-
+    this.log = createLogger('ContentResolver');
     this.enableLogging = config.enableLogging || false;
     this.templateResolver = config.templateResolver || new MustacheTemplateProvider();
     if (config.cacheProvider === true) {

package/src/utils/__tests__/nested-dom-fix.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * Test for DOM nesting fix in HTML transformation
+ */
+
+import { transformHtmlToReact, defaultMarkdownRules } from '../htmlTransform';
+
+describe('DOM nesting fix', () => {
+  it('should fix invalid paragraph nesting with block elements', () => {
+    // This is the problematic HTML that marked.js creates from mixed content
+    const invalidHtml = `
+      <p>You can mix HTML with Markdown when needed:</p>
+      <p><div style="padding: 16px; border: 1px solid #ccc;">
+        This is <strong>HTML with Markdown</strong> inside it!
+      </div></p>
+      <p>Back to regular content.</p>
+    `;
+
+    // Should not throw React error
+    expect(() => {
+      const result = transformHtmlToReact(invalidHtml, { rules: defaultMarkdownRules });
+      expect(result).toBeDefined();
+      expect(Array.isArray(result)).toBe(true);
+    }).not.toThrow();
+  });
+
+  it('should preserve valid nesting', () => {
+    const validHtml = `
+      <p>This is a valid paragraph with <strong>inline elements</strong>.</p>
+      <div>This is a valid div with block content.</div>
+    `;
+
+    const result = transformHtmlToReact(validHtml, { rules: defaultMarkdownRules });
+    expect(result).toBeDefined();
+    expect(result.length).toBeGreaterThan(0);
+  });
+
+  it('should handle deeply nested invalid structures', () => {
+    const deeplyNested = `
+      <p>
+        Outer paragraph
+        <div>
+          Block in paragraph
+          <p>Paragraph in div in paragraph</p>
+        </div>
+      </p>
+    `;
+
+    expect(() => {
+      const result = transformHtmlToReact(deeplyNested, { rules: defaultMarkdownRules });
+      expect(result).toBeDefined();
+    }).not.toThrow();
+  });
+});

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

@@ -0,0 +1,83 @@
+/**
+ * Test for optional logging dependency fallback
+ */
+
+import { createLogger, loggers } from '../logger';
+
+// Mock the require function to simulate missing @qwickapps/logging package
+const originalRequire = require;
+
+describe('Optional logging dependency', () => {
+  beforeEach(() => {
+    // Reset console spy before each test
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    // Restore original require
+    (global as any).require = originalRequire;
+  });
+
+  it('should use console fallback when @qwickapps/logging is not available', () => {
+    // Mock require to throw an error (simulating missing package)
+    (global as any).require = jest.fn().mockImplementation((module: string) => {
+      if (module === '@qwickapps/logging') {
+        throw new Error('Cannot find module');
+      }
+      return originalRequire(module);
+    });
+
+    // Spy on console methods
+    const consoleSpy = jest.spyOn(console, 'info').mockImplementation();
+
+    // Create a new logger (should use fallback)
+    const logger = createLogger('TestLogger');
+    logger.info('Test message');
+
+    expect(consoleSpy).toHaveBeenCalledWith('[TestLogger] Test message');
+    consoleSpy.mockRestore();
+  });
+
+  it('should have all framework loggers available', () => {
+    expect(loggers).toHaveProperty('scaffold');
+    expect(loggers).toHaveProperty('navigation');
+    expect(loggers).toHaveProperty('auth');
+    expect(loggers).toHaveProperty('theme');
+    expect(loggers).toHaveProperty('palette');
+    expect(loggers).toHaveProperty('form');
+    expect(loggers).toHaveProperty('layout');
+    expect(loggers).toHaveProperty('menu');
+    expect(loggers).toHaveProperty('router');
+
+    // Each logger should have the required methods
+    Object.values(loggers).forEach(logger => {
+      expect(typeof logger.debug).toBe('function');
+      expect(typeof logger.info).toBe('function');
+      expect(typeof logger.warn).toBe('function');
+      expect(typeof logger.error).toBe('function');
+    });
+  });
+
+  it('should suppress debug logs in production', () => {
+    const originalEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+
+    // Mock require to throw an error (use fallback)
+    (global as any).require = jest.fn().mockImplementation((module: string) => {
+      if (module === '@qwickapps/logging') {
+        throw new Error('Cannot find module');
+      }
+      return originalRequire(module);
+    });
+
+    const debugSpy = jest.spyOn(console, 'debug').mockImplementation();
+    
+    const logger = createLogger('TestLogger');
+    logger.debug('Debug message');
+
+    expect(debugSpy).not.toHaveBeenCalled();
+    
+    debugSpy.mockRestore();
+    process.env.NODE_ENV = originalEnv;
+  });
+});

package/src/utils/htmlTransform.tsx

@@ -179,6 +179,26 @@ export const defaultMarkdownRules: TransformRule[] = [
   }
 ];
 
+/**
+ * Parse style string into React style object
+ */
+function parseStyleString(styleStr: string): React.CSSProperties {
+  const styles: React.CSSProperties = {};
+  
+  if (!styleStr) return styles;
+  
+  styleStr.split(';').forEach(declaration => {
+    const [property, value] = declaration.split(':').map(s => s.trim());
+    if (property && value) {
+      // Convert kebab-case to camelCase
+      const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      styles[camelProperty as keyof React.CSSProperties] = value;
+    }
+  });
+  
+  return styles;
+}
+
 /**
  * Default fallback component - renders element as-is with SafeSpan content
  */
@@ -191,13 +211,18 @@ export const defaultFallback = (element: Element, key: string): React.ReactNode
     'link', 'meta', 'param', 'source', 'track', 'wbr'
   ]);
 
+  // Handle style attribute separately to convert to object
+  const styleAttr = element.getAttribute('style');
+  const style = styleAttr ? parseStyleString(styleAttr) : undefined;
+
   const props = {
     key,
     ...(element.className ? { className: element.className } : {}),
     ...(element.id ? { id: element.id } : {}),
+    ...(style ? { style } : {}),
     ...Object.fromEntries(
       Array.from(element.attributes)
-        .filter(attr => !['class', 'id'].includes(attr.name))
+        .filter(attr => !['class', 'id', 'style'].includes(attr.name))
         .map(attr => [attr.name, attr.value])
     )
   };
@@ -257,15 +282,20 @@ export function transformElement(
       transformElement(child, `${key}-${index}`, config)
     );
 
+    // Handle style attribute separately to convert to object
+    const styleAttr = element.getAttribute('style');
+    const style = styleAttr ? parseStyleString(styleAttr) : undefined;
+
     return React.createElement(
       tagName,
       {
         key,
         ...(element.className ? { className: element.className } : {}),
         ...(element.id ? { id: element.id } : {}),
+        ...(style ? { style } : {}),
         ...Object.fromEntries(
           Array.from(element.attributes)
-            .filter(attr => !['class', 'id'].includes(attr.name))
+            .filter(attr => !['class', 'id', 'style'].includes(attr.name))
             .map(attr => [attr.name, attr.value])
         )
       },
@@ -277,6 +307,39 @@ export function transformElement(
   return fallbackComponent(element, key);
 }
 
+/**
+ * Clean up invalid DOM nesting that can cause React errors
+ */
+function cleanupInvalidNesting(html: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  
+  // Find paragraphs that contain block-level elements (invalid nesting)
+  const paragraphs = doc.querySelectorAll('p');
+  const blockElements = ['div', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'main', 'figure', 'blockquote', 'pre', 'table', 'form', 'fieldset', 'address'];
+  
+  paragraphs.forEach(p => {
+    const hasBlockChildren = Array.from(p.children).some(child => 
+      blockElements.includes(child.tagName.toLowerCase())
+    );
+    
+    if (hasBlockChildren) {
+      // Convert paragraph to div to allow block children
+      const div = doc.createElement('div');
+      div.innerHTML = p.innerHTML;
+      
+      // Copy attributes
+      Array.from(p.attributes).forEach(attr => {
+        div.setAttribute(attr.name, attr.value);
+      });
+      
+      p.parentNode?.replaceChild(div, p);
+    }
+  });
+  
+  return doc.body.innerHTML;
+}
+
 /**
  * Transform HTML string to React components
  */
@@ -286,8 +349,11 @@ export function transformHtmlToReact(
 ): React.ReactNode[] {
   if (!html.trim()) return [];
 
+  // Clean up invalid DOM nesting first
+  const cleanHtml = cleanupInvalidNesting(html);
+  
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
+  const doc = parser.parseFromString(cleanHtml, 'text/html');
   
   return Array.from(doc.body.children).map((element, index) =>
     transformElement(element, index.toString(), config)

package/src/utils/logger.ts

@@ -1,16 +1,71 @@
 /**
  * QwickApps React Framework - Logger Utility
  * 
- * Re-exports from @qwickapps/logging with framework-specific loggers
+ * Optional logging with fallback to console when @qwickapps/logging is not available
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-// Re-export everything from the logging package
-export * from '@qwickapps/logging';
+export interface Logger {
+  debug(message: string, ...args: any[]): void;
+  info(message: string, ...args: any[]): void;
+  warn(message: string, ...args: any[]): void;
+  error(message: string, ...args: any[]): void;
+}
 
-// Import createLogger and Logger type to create framework-specific loggers
-import { createLogger, Logger } from '@qwickapps/logging';
+/**
+ * Console-based logger fallback
+ */
+class ConsoleLogger implements Logger {
+  constructor(private name: string) {}
+
+  debug(message: string, ...args: any[]): void {
+    if (process.env.NODE_ENV !== 'production') {
+      console.debug(`[${this.name}] ${message}`, ...args);
+    }
+  }
+
+  info(message: string, ...args: any[]): void {
+    console.info(`[${this.name}] ${message}`, ...args);
+  }
+
+  warn(message: string, ...args: any[]): void {
+    console.warn(`[${this.name}] ${message}`, ...args);
+  }
+
+  error(message: string, ...args: any[]): void {
+    console.error(`[${this.name}] ${message}`, ...args);
+  }
+}
+
+/**
+ * No-op logger for when logging should be disabled
+ */
+class NoOpLogger implements Logger {
+  debug(): void {}
+  info(): void {}
+  warn(): void {}
+  error(): void {}
+}
+
+/**
+ * Create logger with optional @qwickapps/logging dependency
+ */
+function createLogger(name: string): Logger {
+  try {
+    // Try to use @qwickapps/logging if available
+    const logging = require('@qwickapps/logging');
+    return logging.createLogger(name);
+  } catch {
+    // Fallback to console-based logger
+    return new ConsoleLogger(name);
+  }
+}
+
+/**
+ * Re-export Logger type and createLogger function for compatibility
+ */
+export { createLogger };
 
 /**
  * Framework-specific loggers