@qwickapps/react-framework 1.5.9 → 1.5.11

package/dist/components/SafeSpan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SafeSpan.d.ts","sourceRoot":"","sources":["../../src/components/SafeSpan.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGjE,OAAO,aAAa,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,KAAK,iBAAiB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;AACpD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;CAAG;AA6E5E,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAEpD,MAAM,CAAC,QAAQ,CAAC,OAAO,cAAc;IACrC,MAAM,CAAC,QAAQ,CAAC,OAAO,WAAW;IAGlC,SAAS,CAAC,yBAAyB,IAAI,OAAO;IAQ9C,SAAS,CAAC,UAAU,IAAI,KAAK,CAAC,YAAY;IAM1C,SAAS,CAAC,qBAAqB,IAAI,KAAK,CAAC,YAAY;IAKrD,MAAM,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAevD,OAAO,CAAC,MAAM,CAAC,iBAAiB;CAWjC;AA4BD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"SafeSpan.d.ts","sourceRoot":"","sources":["../../src/components/SafeSpan.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGjE,OAAO,aAAa,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,KAAK,iBAAiB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;AACpD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;CAAG;AAgF5E,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAEpD,MAAM,CAAC,QAAQ,CAAC,OAAO,cAAc;IACrC,MAAM,CAAC,QAAQ,CAAC,OAAO,WAAW;IAGlC,SAAS,CAAC,yBAAyB,IAAI,OAAO;IAQ9C,SAAS,CAAC,UAAU,IAAI,KAAK,CAAC,YAAY;IAM1C,SAAS,CAAC,qBAAqB,IAAI,KAAK,CAAC,YAAY;IAKrD,MAAM,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAevD,OAAO,CAAC,MAAM,CAAC,iBAAiB;CAWjC;AA4BD,eAAe,QAAQ,CAAC"}

package/dist/index.esm.js

@@ -16804,7 +16804,7 @@ function SafeSpanView(props) {
   });
   // Enhanced HTML sanitization with strict security configuration
   const sanitizeOptions = {
-    allowedTags: ['p', 'br', 'strong', 'em', 'u', 'span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'a', 'img'],
+    allowedTags: ['p', 'br', 'strong', 'em', 'u', 'span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'a', 'img', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td'],
     allowedAttributes: {
       'a': ['href', 'title', 'target'],
       'img': ['src', 'alt', 'title', 'width', 'height'],
@@ -16852,7 +16852,10 @@ function SafeSpanView(props) {
     });
   }
   // Render sanitized HTML content
-  return jsx("span", {
+  // Use div instead of span to allow block-level elements like <hr>, <table>, etc.
+  // This prevents React error #137 (invalid element nesting) when HTML contains
+  // block elements from markdown (e.g., --- becomes <hr>)
+  return jsx("div", {
     ...htmlProps,
     ...styleProps,
     dangerouslySetInnerHTML: {
@@ -18824,16 +18827,23 @@ let ComponentTransformer$1 = class ComponentTransformer {
       }, transformedChildren);
     }
     // Fallback - use ReactNodeTransformer to handle as unregistered HTML
+    const tagName = element.tagName.toLowerCase();
+    // Void elements (self-closing tags) cannot have innerHTML
+    // https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+    const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+    const isVoidElement = voidElements.includes(tagName);
     return ReactNodeTransformer.deserialize({
       type: 'react-element',
-      elementType: element.tagName.toLowerCase(),
+      elementType: tagName,
       props: {
         key,
         className: element.className || undefined,
         id: element.id || undefined,
-        dangerouslySetInnerHTML: {
-          __html: element.innerHTML
-        }
+        ...(isVoidElement ? {} : {
+          dangerouslySetInnerHTML: {
+            __html: element.innerHTML
+          }
+        })
       }
     });
   }

package/dist/index.js

@@ -16806,7 +16806,7 @@ function SafeSpanView(props) {
   });
   // Enhanced HTML sanitization with strict security configuration
   const sanitizeOptions = {
-    allowedTags: ['p', 'br', 'strong', 'em', 'u', 'span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'a', 'img'],
+    allowedTags: ['p', 'br', 'strong', 'em', 'u', 'span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'a', 'img', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td'],
     allowedAttributes: {
       'a': ['href', 'title', 'target'],
       'img': ['src', 'alt', 'title', 'width', 'height'],
@@ -16854,7 +16854,10 @@ function SafeSpanView(props) {
     });
   }
   // Render sanitized HTML content
-  return jsxRuntime.jsx("span", {
+  // Use div instead of span to allow block-level elements like <hr>, <table>, etc.
+  // This prevents React error #137 (invalid element nesting) when HTML contains
+  // block elements from markdown (e.g., --- becomes <hr>)
+  return jsxRuntime.jsx("div", {
     ...htmlProps,
     ...styleProps,
     dangerouslySetInnerHTML: {
@@ -18826,16 +18829,23 @@ let ComponentTransformer$1 = class ComponentTransformer {
       }, transformedChildren);
     }
     // Fallback - use ReactNodeTransformer to handle as unregistered HTML
+    const tagName = element.tagName.toLowerCase();
+    // Void elements (self-closing tags) cannot have innerHTML
+    // https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+    const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+    const isVoidElement = voidElements.includes(tagName);
     return ReactNodeTransformer.deserialize({
       type: 'react-element',
-      elementType: element.tagName.toLowerCase(),
+      elementType: tagName,
       props: {
         key,
         className: element.className || undefined,
         id: element.id || undefined,
-        dangerouslySetInnerHTML: {
-          __html: element.innerHTML
-        }
+        ...(isVoidElement ? {} : {
+          dangerouslySetInnerHTML: {
+            __html: element.innerHTML
+          }
+        })
       }
     });
   }

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.5.9",
+  "version": "1.5.11",
   "palettes": [
     {
       "id": "default",
@@ -8,11 +8,11 @@
       "description": "Classic blue and neutral color scheme - the original QwickApps palette",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.9",
-      "file": "palette-default.1.5.9.css",
+      "version": "1.5.11",
+      "file": "palette-default.1.5.11.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.5.9.min.css",
+      "fileMinified": "palette-default.1.5.11.min.css",
       "fileLatest": "palette-default.latest.css",
       "fileLatestMinified": "palette-default.latest.min.css"
     },
@@ -22,11 +22,11 @@
       "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.9",
-      "file": "palette-autumn.1.5.9.css",
+      "version": "1.5.11",
+      "file": "palette-autumn.1.5.11.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.5.9.min.css",
+      "fileMinified": "palette-autumn.1.5.11.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.9",
-      "file": "palette-cosmic.1.5.9.css",
+      "version": "1.5.11",
+      "file": "palette-cosmic.1.5.11.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.5.9.min.css",
+      "fileMinified": "palette-cosmic.1.5.11.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.9",
-      "file": "palette-ocean.1.5.9.css",
+      "version": "1.5.11",
+      "file": "palette-ocean.1.5.11.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.5.9.min.css",
+      "fileMinified": "palette-ocean.1.5.11.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.9",
-      "file": "palette-spring.1.5.9.css",
+      "version": "1.5.11",
+      "file": "palette-spring.1.5.11.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.5.9.min.css",
+      "fileMinified": "palette-spring.1.5.11.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.9",
-      "file": "palette-winter.1.5.9.css",
+      "version": "1.5.11",
+      "file": "palette-winter.1.5.11.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.5.9.min.css",
+      "fileMinified": "palette-winter.1.5.11.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/dist/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;AAchE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;AAc3D;;;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;IAmD9B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAkE5B;;;;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;AAchE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;AAc3D;;;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;IAmD9B;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAkE5B;;;;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;IA+C/B;;;OAGG;IACH,MAAM,CAAC,qBAAqB,IAAI,MAAM,EAAE;CAGzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.5.9",
+  "version": "1.5.11",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/SafeSpan.tsx

@@ -32,7 +32,7 @@ function SafeSpanView(props: SafeSpanViewProps) {
   const sanitizeOptions = {
     allowedTags: [
       'p', 'br', 'strong', 'em', 'u', 'span', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-      'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'a', 'img'
+      'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'a', 'img', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td'
     ],
     allowedAttributes: {
       'a': ['href', 'title', 'target'],
@@ -85,8 +85,11 @@ function SafeSpanView(props: SafeSpanViewProps) {
   }
   
   // Render sanitized HTML content
+  // Use div instead of span to allow block-level elements like <hr>, <table>, etc.
+  // This prevents React error #137 (invalid element nesting) when HTML contains
+  // block elements from markdown (e.g., --- becomes <hr>)
   return (
-    <span
+    <div
       {...htmlProps}
       {...styleProps}
       dangerouslySetInnerHTML={{ __html: sanitizedHtml }}

package/src/schemas/transformers/ComponentTransformer.ts

@@ -414,14 +414,23 @@ export class ComponentTransformer {
     }
 
     // Fallback - use ReactNodeTransformer to handle as unregistered HTML
+    const tagName = element.tagName.toLowerCase();
+
+    // Void elements (self-closing tags) cannot have innerHTML
+    // https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+    const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+                          'link', 'meta', 'param', 'source', 'track', 'wbr'];
+
+    const isVoidElement = voidElements.includes(tagName);
+
     return ReactNodeTransformer.deserialize({
       type: 'react-element',
-      elementType: element.tagName.toLowerCase(),
+      elementType: tagName,
       props: {
         key,
         className: element.className || undefined,
         id: element.id || undefined,
-        dangerouslySetInnerHTML: { __html: element.innerHTML }
+        ...(isVoidElement ? {} : { dangerouslySetInnerHTML: { __html: element.innerHTML } })
       }
     });
   }