@qwickapps/react-framework 1.4.7 → 1.4.9

package/dist/src/components/buttons/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAE5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACtE,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAoLD,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,WAAW,CAMpD,CAAC;AAwEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAuB,MAAM,OAAO,CAAC;AAqC5C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E;;;GAGG;AACH,QAAA,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAkCrD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAUxF;AAED;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,CAAC;AAGxB,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG;IAEhG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AA6OF,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,WAAW,CA0BpD,CAAC;AAwEH,eAAe,MAAM,CAAC"}

package/dist/src/components/menu/MenuItem.d.ts

@@ -11,8 +11,8 @@ export interface MenuItem {
     id: string;
     /** Display label for the menu item */
     label: string;
-    /** Icon component or JSX element to display */
-    icon?: React.ReactNode;
+    /** Icon name (string) or icon component (React.ReactNode) to display */
+    icon?: string | React.ReactNode;
     /** Click handler for the menu item */
     onClick?: () => void;
     /** External link URL (if this is a link) */

package/dist/src/components/menu/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/MenuItem.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/MenuItem.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/src/schemas/ButtonSchema.d.ts

@@ -8,12 +8,15 @@ import { ViewSchema } from './ViewSchema';
 export declare class ButtonModel extends ViewSchema {
     label?: string;
     variant?: 'primary' | 'secondary' | 'outlined' | 'text' | 'contained';
+    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
     buttonSize?: 'small' | 'medium' | 'large';
     href?: string;
     target?: '_blank' | '_self' | '_parent' | '_top';
     disabled?: boolean;
     loading?: boolean;
     fullWidth?: boolean;
+    icon?: string;
+    endIcon?: string;
 }
 export default ButtonModel;
 //# sourceMappingURL=ButtonSchema.d.ts.map

package/dist/src/schemas/ButtonSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSchema.d.ts","sourceRoot":"","sources":["../../../src/schemas/ButtonSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,qBACa,WAAY,SAAQ,UAAU;IAUzC,KAAK,CAAC,EAAE,MAAM,CAAC;IAWf,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IAWtE,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAW1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAUjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAUlB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ButtonSchema.d.ts","sourceRoot":"","sources":["../../../src/schemas/ButtonSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,qBACa,WAAY,SAAQ,UAAU;IAUzC,KAAK,CAAC,EAAE,MAAM,CAAC;IAWf,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IAWtE,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAW3E,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAW1C,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAUjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAUlB,SAAS,CAAC,EAAE,OAAO,CAAC;IAWpB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAe,WAAW,CAAC"}

package/dist/src/schemas/transformers/ComponentTransformer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentTransformer.d.ts","sourceRoot":"","sources":["../../../../src/schemas/transformers/ComponentTransformer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAc,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAahE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC;AAcvD;;;GAGG;AACH,qBAAa,oBAAoB;IAC/B;;;OAGG;IACH,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAI5C;;;OAGG;IACH,MAAM,CAAC,YAAY,IAAI,OAAO;IAI9B;;;;OAIG;IACH,MAAM,CAAC,iBAAiB,CAAC,cAAc,EAAE,uBAAuB,GAAG,IAAI;IA4BvE;;;;OAIG;IACH,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,MAAM;IAKvD;;;;;;OAMG;IACH,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,SAAS,EAAE;IAe9E;;;;KAIC;IACD,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAQpC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,eAAe;IAsC9B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAqE5B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,gCAAgC;IAI/C;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,uBAAuB;IA4BtC;;;OAGG;IACH,MAAM,CAAC,uBAAuB,IAAI,MAAM,EAAE;IAI1C;;OAEG;IACH,MAAM,CAAC,aAAa,IAAI,IAAI;IAO5B;;;;OAIG;IACH,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI;IAOtE;;;;OAIG;IACH,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAI3C;;;;OAIG;IACH,MAAM,CAAC,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAe/D;;;;OAIG;IACH,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE;IAS/C;;;;;OAKG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAsC/B;;;OAGG;IACH,MAAM,CAAC,qBAAqB,IAAI,MAAM,EAAE;CAGzC"}
+{"version":3,"file":"ComponentTransformer.d.ts","sourceRoot":"","sources":["../../../../src/schemas/transformers/ComponentTransformer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAc,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAahE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC;AAcvD;;;GAGG;AACH,qBAAa,oBAAoB;IAC/B;;;OAGG;IACH,MAAM,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAI5C;;;OAGG;IACH,MAAM,CAAC,YAAY,IAAI,OAAO;IAI9B;;;;OAIG;IACH,MAAM,CAAC,iBAAiB,CAAC,cAAc,EAAE,uBAAuB,GAAG,IAAI;IA2BvE;;;;OAIG;IACH,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,MAAM;IAKvD;;;;;;OAMG;IACH,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,SAAS,EAAE;IAe9E;;;;KAIC;IACD,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAQpC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,eAAe;IAsC9B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAgE5B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,gCAAgC;IAI/C;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,uBAAuB;IA4BtC;;;OAGG;IACH,MAAM,CAAC,uBAAuB,IAAI,MAAM,EAAE;IAI1C;;OAEG;IACH,MAAM,CAAC,aAAa,IAAI,IAAI;IAO5B;;;;OAIG;IACH,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,IAAI;IAOtE;;;;OAIG;IACH,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAI3C;;;;OAIG;IACH,MAAM,CAAC,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAe/D;;;;OAIG;IACH,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE;IAS/C;;;;;OAKG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAsC/B;;;OAGG;IACH,MAAM,CAAC,qBAAqB,IAAI,MAAM,EAAE;CAGzC"}

package/dist/src/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,GAAG;IAqEtC;;;;OAIG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,GAAG,GAAG,SAAS;IA2CxC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc;IAqB7B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,uBAAuB;IAkBtC;;;;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,GAAG;IAoEtC;;;;OAIG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,GAAG,GAAG,SAAS;IA2CxC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc;IAqB7B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,uBAAuB;IAkBtC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAkB/B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;CAqBlC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "type": "module",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
@@ -23,6 +23,13 @@
     "./dist/index.css": "./dist/index.css",
     "./index.css": "./dist/index.css"
   },
+  "sideEffects": [
+    "**/*.css",
+    "./src/schemas/transformers/registry.ts",
+    "./src/schemas/index.ts",
+    "./dist/schemas/transformers/registry.js",
+    "./dist/schemas/index.js"
+  ],
   "files": [
     "dist",
     "src",
@@ -41,6 +48,7 @@
     "clean": "rm -rf dist node_modules .rollup.cache storybook-static",
     "create-project": "node scripts/create-qwickapps-project.js",
     "prepublishOnly": "npm run build",
+    "publish": "npm publish",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

package/scripts/create-qwickapps-project.js

@@ -19,9 +19,11 @@ import { fileURLToPath } from 'url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const projectName = process.argv[2];
+// When run as: npx @qwickapps/react-framework create my-project
+// argv[0] = node, argv[1] = script, argv[2] = "create", argv[3] = "my-project"
+const projectName = process.argv[3] || process.argv[2];
 
-if (!projectName) {
+if (!projectName || projectName === 'create') {
   console.error('❌ Error: Please provide a project name');
   console.log('Usage: npx @qwickapps/react-framework create my-app-name');
   process.exit(1);

package/src/components/Html.tsx

@@ -194,7 +194,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
     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 } = data || {};
     return <Html {...props} >{ComponentTransformer.deserialize(children)}</Html>;
   }

package/src/components/Logo.tsx

@@ -325,7 +325,7 @@ function LogoView({
     }
     
     // If image is a React node, render it directly
-    return <div className="logo-image-container">{image}</div>;
+    return <div className="logo-image-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{image}</div>;
   };
 
   // Determine layout based on image position
@@ -338,7 +338,7 @@ function LogoView({
         fill="none" 
         xmlns="http://www.w3.org/2000/svg"
         className={`logo-svg dynamic-logo ${sizeClass} ${variantClass}`.trim()}
-        style={{ height: `${height}px` }}
+        style={{ height: `${height}px`, ...style }}
         role="img"
         aria-label={ariaLabel}
       >
@@ -446,7 +446,6 @@ function Logo(props: LogoProps) {
   
   // Show error state
   if (error) {
-    console.error('Error loading logo:', error);
     return (
       <div style={{ color: 'red', textAlign: 'center', padding: '16px' }}>
         Error loading logo: {error.message}
@@ -454,7 +453,6 @@ function Logo(props: LogoProps) {
     );
   }
   
-  console.log('Resolved props for Logo:', logoProps);
   return <LogoView {...logoProps} />;
 }
 

package/src/components/QwickApp.css

@@ -148,7 +148,7 @@ html[data-palette="autumn"][data-theme="dark"] {
   
   /* Text palette - Warm light */
   --palette-text-primary: #fef3c7;
-  --palette-text-secondary: #d6d3d1;
+  --palette-text-secondary: #a8a29e;
   --palette-text-disabled: rgba(254, 243, 199, 0.38);
   --palette-text-inverted: #0c0a09;
   
@@ -322,7 +322,7 @@ html[data-palette="cosmic"][data-theme="dark"] {
   
   /* Text palette - Starlight */
   --palette-text-primary: #e0e7ff;
-  --palette-text-secondary: #c4b5fd;
+  --palette-text-secondary: #a78bfa;
   --palette-text-disabled: rgba(224, 231, 255, 0.38);
   --palette-text-inverted: #0f0c29;
   
@@ -498,7 +498,7 @@ html[data-palette="default"][data-theme="dark"] {
 
   /* Text palette */
   --palette-text-primary: #ffffff;
-  --palette-text-secondary: #b0b0b0;
+  --palette-text-secondary: #9ca3af;
   --palette-text-disabled: rgba(255, 255, 255, 0.38);
   --palette-text-inverted: #000000;
 
@@ -675,7 +675,7 @@ html[data-palette="ocean"][data-theme="dark"] {
   
   /* Text palette - Phosphorescent */
   --palette-text-primary: #cffafe;
-  --palette-text-secondary: #a5f3fc;
+  --palette-text-secondary: #67e8f9;
   --palette-text-disabled: rgba(207, 250, 254, 0.38);
   --palette-text-inverted: #020617;
   
@@ -837,7 +837,7 @@ html[data-palette="spring"][data-theme="dark"] {
 
   /* Text palette - Moonlit green */
   --palette-text-primary: #dcfce7;
-  --palette-text-secondary: #bbf7d0;
+  --palette-text-secondary: #86efac;
   --palette-text-disabled: rgba(220, 252, 231, 0.38);
   --palette-text-inverted: #0a120a;
   
@@ -1011,7 +1011,7 @@ html[data-palette="winter"][data-theme="dark"] {
   
   /* Text palette - Snow and ice */
   --palette-text-primary: #f8fafc;
-  --palette-text-secondary: #cbd5e1;
+  --palette-text-secondary: #94a3b8;
   --palette-text-disabled: rgba(248, 250, 252, 0.38);
   --palette-text-inverted: #020617;
   
@@ -1191,7 +1191,7 @@ html[data-palette="autumn"][data-theme="dark"] {
 
   /* Text palette */
   --palette-text-primary: #fef3c7;
-  --palette-text-secondary: #d6d3d1;
+  --palette-text-secondary: #a8a29e;
   --palette-text-disabled: rgba(254, 243, 199, 0.38);
   --palette-text-inverted: #0c0a09;
 
@@ -1349,8 +1349,8 @@ html[data-palette="autumn"][data-theme="dark"] {
   --theme-link-hover: var(--palette-info-dark);
 
   /* Code colors */
-  --theme-code-bg: var(--palette-surface-variant);
-  --theme-code-text: var(--palette-text-primary);
+  --theme-code-bg: var(--palette-surface-main);
+  --theme-code-text: var(--palette-primary);
 
   /* MUI integration */
   --theme-mui-label-bg: var(--palette-surface-main);
@@ -1398,7 +1398,7 @@ html[data-theme="light"] {
   --theme-option-selected-text: var(--palette-primary-dark);
   
   /* Code colors */
-  --theme-code-bg: rgba(0, 0, 0, 0.1);
+  --theme-code-text: var(--palette-primary-dark);
 }
 
 /* Dark theme specific adjustments */
@@ -1427,8 +1427,7 @@ html[data-theme="dark"] {
   --theme-option-selected-text: var(--palette-primary-light);
   
   /* Code colors */
-  --theme-code-bg: rgba(255, 255, 255, 0.1);
-  --theme-code-text: var(--palette-text-secondary);
+  --theme-code-text: var(--palette-primary-light);
   
   /* MUI integration */
   --theme-mui-label-bg: rgb(41, 41, 41);
@@ -1465,4 +1464,11 @@ button:focus,
   transition: none;
 }
 
-
+/* Improve standard element appearances */
+code, code.inline-code {
+  font-family: 'Source Code Pro', monospace;
+  background-color: var(--theme-code-bg) !important;
+  color: var(--theme-code-text) !important;
+  padding: 2px 4px;
+  border-radius: 4px;
+}

package/src/components/ResponsiveMenu.tsx

@@ -20,6 +20,7 @@ import React, { useState, useEffect } from 'react';
 import { WithBaseProps, useBaseProps, QWICKAPP_COMPONENT } from '../hooks/useBaseProps';
 import { useQwickApp } from '../contexts/QwickAppContext';
 import Logo from './Logo';
+import { getIconComponent } from './buttons/Button';
 import './ResponsiveMenu.css';
 import { useSafeLocation, useSafeNavigate } from '../utils/reactUtils';
 import { loggers } from '../utils/logger';
@@ -143,9 +144,19 @@ const ResponsiveMenu: React.FC<ResponsiveMenuProps> = (props) => {
       }
     };
 
+    // Transform icon string to component or use provided ReactNode
+    let displayIcon: React.ReactNode = null;
+    if (item.icon) {
+      if (typeof item.icon === 'string') {
+        displayIcon = getIconComponent(item.icon);
+      } else {
+        displayIcon = item.icon;
+      }
+    }
+
     const content = (
       <>
-        {item.icon && <span className="menu-item-icon">{item.icon}</span>}
+        {displayIcon && <span className="menu-item-icon">{displayIcon}</span>}
         {!isCompact && <span className="menu-item-label">{item.label}</span>}
         {item.badge && <span className="menu-item-badge">{item.badge}</span>}
       </>

package/src/components/SafeSpan.tsx

@@ -171,7 +171,6 @@ function SafeSpanWithDataBinding(props: SafeSpanProps) {
     return null;
   }
 
-  console.log('Resolved props for SafeSpan:', safeSpanProps);
   return <SafeSpanView {...safeSpanProps} />;
 }
 

package/src/components/Scaffold.css

@@ -15,6 +15,14 @@
   --rail-width-expanded: 280px;
   --touch-target-size: 48px;
   
+  --menu-bg: var(--theme-surface);
+  --menu-text: var(--theme-on-surface);
+  --menu-hover: var(--theme-surface-variant);
+  --menu-active: var(--theme-primary);
+  --menu-active-text: var(--theme-on-primary);
+  --menu-border: var(--theme-outline-variant);
+  --menu-shadow: rgba(0, 0, 0, 0.1);
+  
   --scaffold-background: var(--theme-background);
   --scaffold-surface: var(--theme-surface);
   --scaffold-on-surface: var(--theme-on-surface);
@@ -92,6 +100,12 @@
   gap: 8px;
 }
 
+.appbar-theme-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 /* Menu button */
 .menu-button {
   display: flex;

package/src/components/Scaffold.tsx

@@ -22,6 +22,7 @@ import Logo from './Logo';
 import ThemeSwitcher from './buttons/ThemeSwitcher';
 import PaletteSwitcher from './buttons/PaletteSwitcher';
 import { RadioButtonUnchecked as DefaultIcon } from '@mui/icons-material';
+import { getIconComponent } from './buttons/Button';
 import './Scaffold.css';
 import { useSafeLocation, useSafeNavigate } from '../utils/reactUtils';
 import { loggers } from '../utils/logger';
@@ -251,9 +252,22 @@ const Scaffold: React.FC<ScaffoldProps> = ({
       }
     };
 
-    // 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 ? <DefaultIcon /> : null);
+    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);
+      } 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 />;
+    }
 
     const content = (
       <>

package/src/components/blocks/Article.tsx

@@ -77,11 +77,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
           }
@@ -101,15 +103,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
       }}
@@ -221,7 +293,6 @@ function ArticleWithDataBinding(props: ArticleProps) {
     return null;
   }
 
-  console.log('Resolved props for Article:', articleProps);
   return <ArticleView {...articleProps} />;
 }
 

package/src/components/blocks/CoverImageHeader.tsx

@@ -430,7 +430,7 @@ function CoverImageHeader(props: CoverImageHeaderProps) {
         .map(action => ({
           ...action,
           id: action.id as string,
-          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
         }))
     : [];
 

package/src/components/blocks/Footer.tsx

@@ -16,7 +16,6 @@ import {
   Divider,
   Link,
   Paper,
-  Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
@@ -24,6 +23,7 @@ import { WithDataBinding } from '@qwickapps/schema';
 import React from 'react';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding, WithBaseProps } from '../../hooks';
 import FooterModel from '../../schemas/FooterSchema';
+import Text from './Text';
 
 export interface FooterSection {
   /** Unique identifier for the section */
@@ -64,7 +64,7 @@ interface FooterViewProps extends WithBaseProps {
   showDivider?: boolean;
 }
 
-export interface FooterProps extends FooterViewProps, WithDataBinding {}
+export interface FooterProps extends FooterViewProps, WithDataBinding { }
 
 function FooterView({
   sections = [],
@@ -77,21 +77,21 @@ function FooterView({
   ...restProps
 }: FooterViewProps) {
   const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
-  
+
   // Mark as QwickApp component
   (FooterView as any)[QWICKAPP_COMPONENT] = true;
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  
+
   // Force vertical on mobile for better usability
   const effectiveOrientation = isMobile ? 'vertical' : orientation;
 
   const renderFooterItem = (item: FooterItem) => {
     const content = (
-      <Typography
+      <Text
         variant="body2"
-        color="text.secondary"
-        sx={{ 
+        customColor="var(--theme-text-secondary)"
+        sx={{
           textDecoration: item.href ? 'none' : 'inherit',
           '&:hover': item.href ? { color: 'primary.main' } : {},
           cursor: item.href || item.onClick ? 'pointer' : 'default',
@@ -100,7 +100,7 @@ function FooterView({
         onClick={item.onClick}
       >
         {item.label}
-      </Typography>
+      </Text>
     );
 
     if (item.href) {
@@ -128,17 +128,17 @@ function FooterView({
   const renderSection = (section: FooterSection) => (
     <Box key={section.id} sx={{ minWidth: 0 }}>
       {section.title && (
-        <Typography
+        <Text
           variant="subtitle2"
           component="h3"
-          sx={{ 
+          sx={{
             fontWeight: 600,
-            mb: 1.5,
-            color: 'text.primary'
+            mb: 1.5
           }}
+          customColor="var(--theme-text-primary)"
         >
           {section.title}
-        </Typography>
+        </Text>
       )}
       <Box>
         {section.items.map(item => renderFooterItem(item))}
@@ -214,8 +214,8 @@ function FooterView({
         >
           {/* Logo/Branding Section */}
           {logo && (
-            <Box 
-              sx={{ 
+            <Box
+              sx={{
                 flexShrink: 0,
                 mb: effectiveOrientation === 'vertical' ? 2 : 0,
                 mr: effectiveOrientation === 'horizontal' ? 'auto' : 0
@@ -263,14 +263,14 @@ function FooterView({
               }}
             >
               {copyright && (
-                <Typography variant="caption" color="text.secondary">
+                <Text variant="caption" customColor='var(--theme-text-secondary)'>
                   {copyright}
-                </Typography>
+                </Text>
               )}
               {legalText && (
-                <Typography variant="caption" color="text.secondary">
+                <Text variant="caption" customColor="var(--theme-text-secondary)">
                   {legalText}
-                </Typography>
+                </Text>
               )}
             </Box>
           </Box>
@@ -308,9 +308,9 @@ function Footer(props: FooterProps) {
           textAlign: 'center'
         }}
       >
-        <Typography variant="body2" color="text.secondary">
+        <Text variant="body2" customColor="var(--theme-text-secondary)">
           Loading Footer...
-        </Typography>
+        </Text>
       </Box>
     );
   }
@@ -328,9 +328,9 @@ function Footer(props: FooterProps) {
             textAlign: 'center'
           }}
         >
-          <Typography variant="body2" color="error">
+          <Text variant="body2" customColor='var(--theme-error)' >
             Error Loading Footer: {error.message}
-          </Typography>
+          </Text>
         </Box>
       );
     }

package/src/components/blocks/PageBannerHeader.tsx

@@ -407,7 +407,7 @@ function PageBannerHeader(props: PageBannerHeaderProps) {
       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
       }
     }));