@qwickapps/react-framework 1.9.0 → 1.9.1

package/dist/index.js

@@ -5769,7 +5769,7 @@ function LogoView({
       setCalculatedBadgePosition(badgePos);
       setSvgWidth(requiredWidth);
     }
-  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts, svgWidth]);
+  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts]);
   // Determine CSS class for variant
   let variantClass = '';
   if (variant === 'high-contrast' || variant === 'monochrome' || variant === 'on-primary') {
@@ -15935,7 +15935,8 @@ function sanitizeHtml(html, options, _recursing) {
   }
 
   let result = '';
-  // Used for hot swapping the result variable with an empty string in order to "capture" the text written to it.
+  // Used for hot swapping the result variable with an empty string
+  // in order to "capture" the text written to it.
   let tempResult = '';
 
   function Frame(tag, attribs) {
@@ -15966,7 +15967,8 @@ function sanitizeHtml(html, options, _recursing) {
   options.parser = Object.assign({}, htmlParserDefaults, options.parser);
 
   const tagAllowed = function (name) {
-    return options.allowedTags === false || (options.allowedTags || []).indexOf(name) > -1;
+    return options.allowedTags === false ||
+      (options.allowedTags || []).indexOf(name) > -1;
   };
 
   // vulnerableTags
@@ -16148,7 +16150,8 @@ function sanitizeHtml(html, options, _recursing) {
       }
 
       const isBeingEscaped = skip && (options.disallowedTagsMode === 'escape' || options.disallowedTagsMode === 'recursiveEscape');
-      const shouldPreserveEscapedAttributes = isBeingEscaped && options.preserveEscapedAttributes;
+      const shouldPreserveEscapedAttributes = isBeingEscaped &&
+        options.preserveEscapedAttributes;
 
       if (shouldPreserveEscapedAttributes) {
         each(attribs, function(value, a) {
@@ -16162,8 +16165,10 @@ function sanitizeHtml(html, options, _recursing) {
             delete frame.attribs[a];
             return;
           }
-          // If the value is empty, check if the attribute is in the allowedEmptyAttributes array.
-          // If it is not in the allowedEmptyAttributes array, and it is a known non-boolean attribute, delete it
+          // If the value is empty, check if the attribute is
+          // in the allowedEmptyAttributes array.
+          // If it is not in the allowedEmptyAttributes array,
+          // and it is a known non-boolean attribute, delete it
           // List taken from https://html.spec.whatwg.org/multipage/indices.html#attributes-3
           if (value === '' && (!options.allowedEmptyAttributes.includes(a)) &&
             (options.nonBooleanAttributes.includes(a) || options.nonBooleanAttributes.includes('*'))) {
@@ -16174,9 +16179,11 @@ function sanitizeHtml(html, options, _recursing) {
           // as necessary if there are specific values defined.
           let passedAllowedAttributesMapCheck = false;
           if (!allowedAttributesMap ||
-            (has(allowedAttributesMap, name) && allowedAttributesMap[name].indexOf(a) !== -1) ||
+            (has(allowedAttributesMap, name) &&
+              allowedAttributesMap[name].indexOf(a) !== -1) ||
             (allowedAttributesMap['*'] && allowedAttributesMap['*'].indexOf(a) !== -1) ||
-            (has(allowedAttributesGlobMap, name) && allowedAttributesGlobMap[name].test(a)) ||
+            (has(allowedAttributesGlobMap, name) &&
+              allowedAttributesGlobMap[name].test(a)) ||
             (allowedAttributesGlobMap['*'] && allowedAttributesGlobMap['*'].test(a))) {
             passedAllowedAttributesMapCheck = true;
           } else if (allowedAttributesMap && allowedAttributesMap[name]) {
@@ -16220,12 +16227,14 @@ function sanitizeHtml(html, options, _recursing) {
                 const parsed = parseUrl(value);
 
                 if (options.allowedScriptHostnames || options.allowedScriptDomains) {
-                  const allowedHostname = (options.allowedScriptHostnames || []).find(function (hostname) {
-                    return hostname === parsed.url.hostname;
-                  });
-                  const allowedDomain = (options.allowedScriptDomains || []).find(function(domain) {
-                    return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
-                  });
+                  const allowedHostname = (options.allowedScriptHostnames || [])
+                    .find(function (hostname) {
+                      return hostname === parsed.url.hostname;
+                    });
+                  const allowedDomain = (options.allowedScriptDomains || [])
+                    .find(function(domain) {
+                      return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
+                    });
                   allowed = allowedHostname || allowedDomain;
                 }
               } catch (e) {
@@ -16249,13 +16258,18 @@ function sanitizeHtml(html, options, _recursing) {
                   allowed = has(options, 'allowIframeRelativeUrls')
                     ? options.allowIframeRelativeUrls
                     : (!options.allowedIframeHostnames && !options.allowedIframeDomains);
-                } else if (options.allowedIframeHostnames || options.allowedIframeDomains) {
-                  const allowedHostname = (options.allowedIframeHostnames || []).find(function (hostname) {
-                    return hostname === parsed.url.hostname;
-                  });
-                  const allowedDomain = (options.allowedIframeDomains || []).find(function(domain) {
-                    return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
-                  });
+                } else if (
+                  options.allowedIframeHostnames ||
+                  options.allowedIframeDomains
+                ) {
+                  const allowedHostname = (options.allowedIframeHostnames || [])
+                    .find(function (hostname) {
+                      return hostname === parsed.url.hostname;
+                    });
+                  const allowedDomain = (options.allowedIframeDomains || [])
+                    .find(function(domain) {
+                      return parsed.url.hostname === domain || parsed.url.hostname.endsWith(`.${domain}`);
+                    });
                   allowed = allowedHostname || allowedDomain;
                 }
               } catch (e) {
@@ -16309,9 +16323,17 @@ function sanitizeHtml(html, options, _recursing) {
                   return t;
                 });
               if (allowedSpecificClasses && allowedWildcardClasses) {
-                value = filterClasses(value, deepmerge(allowedSpecificClasses, allowedWildcardClasses), allowedClassesGlobs);
+                value = filterClasses(
+                  value,
+                  deepmerge(allowedSpecificClasses, allowedWildcardClasses),
+                  allowedClassesGlobs
+                );
               } else {
-                value = filterClasses(value, allowedSpecificClasses || allowedWildcardClasses, allowedClassesGlobs);
+                value = filterClasses(
+                  value,
+                  allowedSpecificClasses || allowedWildcardClasses,
+                  allowedClassesGlobs
+                );
               }
               if (!value.length) {
                 delete frame.attribs[a];
@@ -16322,7 +16344,10 @@ function sanitizeHtml(html, options, _recursing) {
               if (options.parseStyleAttributes) {
                 try {
                   const abstractSyntaxTree = postcssParse(name + ' {' + value + '}', { map: false });
-                  const filteredAST = filterCss(abstractSyntaxTree, options.allowedStyles);
+                  const filteredAST = filterCss(
+                    abstractSyntaxTree,
+                    options.allowedStyles
+                  );
 
                   value = stringifyStyleAttributes(filteredAST);
 
@@ -16455,7 +16480,8 @@ function sanitizeHtml(html, options, _recursing) {
             tempResult = '';
           }
           // remove the opening tag from the result
-          result = result.substring(0, frame.tagPosition) + result.substring(frame.tagPosition + frame.openingTagLength);
+          result = result.substring(0, frame.tagPosition) +
+            result.substring(frame.tagPosition + frame.openingTagLength);
           return;
         } else if (filterResult) {
           result = result.substring(0, frame.tagPosition);
@@ -16490,6 +16516,16 @@ function sanitizeHtml(html, options, _recursing) {
   parser.write(html);
   parser.end();
 
+  if (options.disallowedTagsMode === 'escape' || options.disallowedTagsMode === 'recursiveEscape') {
+    const lastParsedIndex = parser.endIndex;
+    if (lastParsedIndex != null && lastParsedIndex >= 0 && lastParsedIndex < html.length) {
+      const unparsed = html.substring(lastParsedIndex);
+      result += escapeHtml(unparsed);
+    } else if ((lastParsedIndex == null || lastParsedIndex < 0) && html.length > 0 && result === '') {
+      result = escapeHtml(html);
+    }
+  }
+
   return result;
 
   function initializeState() {
@@ -16600,8 +16636,10 @@ function sanitizeHtml(html, options, _recursing) {
    * Modifies the abstractSyntaxTree object.
    *
    * @param {object} abstractSyntaxTree  - Object representation of CSS attributes.
-   * @property {array[Declaration]} abstractSyntaxTree.nodes[0] - Each object cointains prop and value key, i.e { prop: 'color', value: 'red' }.
-   * @param {object} allowedStyles       - Keys are properties (i.e color), value is list of permitted regex rules (i.e /green/i).
+   * @property {array[Declaration]} abstractSyntaxTree.nodes[0] -
+   * Each object contains prop and value key, i.e { prop: 'color', value: 'red' }.
+   * @param {object} allowedStyles       - Keys are properties (i.e color),
+   * value is list of permitted regex rules (i.e /green/i).
    * @return {object}                    - The modified tree.
    */
   function filterCss(abstractSyntaxTree, allowedStyles) {
@@ -16623,7 +16661,8 @@ function sanitizeHtml(html, options, _recursing) {
     }
 
     if (selectedRule) {
-      abstractSyntaxTree.nodes[0].nodes = astRules.nodes.reduce(filterDeclarations(selectedRule), []);
+      abstractSyntaxTree.nodes[0].nodes = astRules.nodes
+        .reduce(filterDeclarations(selectedRule), []);
     }
 
     return abstractSyntaxTree;
@@ -16634,7 +16673,8 @@ function sanitizeHtml(html, options, _recursing) {
    * values in the inline style attribute format.
    *
    * @param  {AbstractSyntaxTree} filteredAST
-   * @return {string}             - Example: "color:yellow;text-align:center !important;font-family:helvetica;"
+   * @return {string}             - Example:
+   * "color:yellow;text-align:center !important;font-family:helvetica;"
    */
   function stringifyStyleAttributes(filteredAST) {
     return filteredAST.nodes[0].nodes
@@ -16651,21 +16691,25 @@ function sanitizeHtml(html, options, _recursing) {
     * Filters the existing attributes for the given property. Discards any attributes
     * which don't match the allowlist.
     *
-    * @param  {object} selectedRule             - Example: { color: red, font-family: helvetica }
-    * @param  {array} allowedDeclarationsList   - List of declarations which pass the allowlist.
-    * @param  {object} attributeObject          - Object representing the current css property.
-    * @property {string} attributeObject.type   - Typically 'declaration'.
-    * @property {string} attributeObject.prop   - The CSS property, i.e 'color'.
-    * @property {string} attributeObject.value  - The corresponding value to the css property, i.e 'red'.
-    * @return {function}                        - When used in Array.reduce, will return an array of Declaration objects
+    * @param  {object} selectedRule - Example: { color: red, font-family: helvetica }
+    * @param  {array} allowedDeclarationsList - List of declarations
+    * which pass the allowlist.
+    * @param  {object} attributeObject - Object representing the current css property.
+    * @property {string} attributeObject.type - Typically 'declaration'.
+    * @property {string} attributeObject.prop - The CSS property, i.e 'color'.
+    * @property {string} attributeObject.value - The corresponding value to
+    * the css property, i.e 'red'.
+    * @return {function} - When used in Array.reduce,
+    * will return an array of Declaration objects
     */
   function filterDeclarations(selectedRule) {
     return function (allowedDeclarationsList, attributeObject) {
       // If this property is allowlisted...
       if (has(selectedRule, attributeObject.prop)) {
-        const matchesRegex = selectedRule[attributeObject.prop].some(function(regularExpression) {
-          return regularExpression.test(attributeObject.value);
-        });
+        const matchesRegex = selectedRule[attributeObject.prop]
+          .some(function(regularExpression) {
+            return regularExpression.test(attributeObject.value);
+          });
 
         if (matchesRegex) {
           allowedDeclarationsList.push(attributeObject);
@@ -16797,7 +16841,7 @@ sanitizeHtml.simpleTransform = function(newTagName, newAttribs, merge) {
 
     return {
       tagName: newTagName,
-      attribs: attribs
+      attribs
     };
   };
 };
@@ -18118,7 +18162,9 @@ function HtmlView({
         },
         ...styleProps.sx
       },
-      children: components
+      children: Array.isArray(components) ? components.map((child, idx) => /*#__PURE__*/React.isValidElement(child) && child.key == null ? /*#__PURE__*/React.cloneElement(child, {
+        key: `html-child-${idx}`
+      }) : child) : components
     });
   } catch (error) {
     console.error('Error transforming HTML content:', error);
@@ -18953,6 +18999,103 @@ function registerSerializableComponents() {
  */
 registerSerializableComponents();
 
+/**
+ * HeroSlideshow Component
+ *
+ * A slideshow built on top of HeroBlock that cycles through multiple slides
+ * with auto-rotation, fade transitions, and progress dot navigation.
+ *
+ * Usage (props-driven, e.g. qwickdocs):
+ *   <HeroSlideshow slides={[{ title: 'Slide 1', ... }, ...]} />
+ *
+ * Usage (CMS-driven, e.g. work-macha):
+ *   const slideshow = await payload.findByID({ collection: 'hero-slideshows', id });
+ *   <HeroSlideshow slides={slideshow.slides} autoPlayInterval={slideshow.autoPlayInterval} />
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+const TRANSITION_DURATION = 300; // ms
+/**
+ * HeroSlideshow - Cycles through HeroBlock slides with fade transitions
+ */
+function HeroSlideshow({
+  slides,
+  autoPlayInterval = 5000,
+  showDots = true,
+  blockHeight = 'large',
+  textAlign = 'center'
+}) {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [isVisible, setIsVisible] = React.useState(true);
+  const goToSlide = React.useCallback(index => {
+    if (index === currentIndex) return;
+    setIsVisible(false);
+    setTimeout(() => {
+      setCurrentIndex(index);
+      setIsVisible(true);
+    }, TRANSITION_DURATION);
+  }, [currentIndex]);
+  React.useEffect(() => {
+    if (slides.length <= 1 || autoPlayInterval <= 0) return;
+    const timer = setTimeout(() => {
+      goToSlide((currentIndex + 1) % slides.length);
+    }, autoPlayInterval);
+    return () => clearTimeout(timer);
+  }, [currentIndex, slides.length, autoPlayInterval, goToSlide]);
+  if (!slides.length) return null;
+  const slide = slides[currentIndex];
+  return jsxRuntime.jsxs(material.Box, {
+    sx: {
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    children: [jsxRuntime.jsx(material.Box, {
+      sx: {
+        opacity: isVisible ? 1 : 0,
+        transition: `opacity ${TRANSITION_DURATION}ms ease-in-out`
+      },
+      children: jsxRuntime.jsx(HeroBlock, {
+        title: slide.title,
+        subtitle: slide.subtitle,
+        backgroundImage: slide.backgroundImage,
+        backgroundGradient: slide.backgroundGradient,
+        backgroundColor: slide.backgroundColor,
+        actions: slide.actions,
+        overlayOpacity: slide.overlayOpacity,
+        blockHeight: blockHeight,
+        textAlign: textAlign
+      })
+    }), showDots && slides.length > 1 && jsxRuntime.jsx(material.Box, {
+      sx: {
+        position: 'absolute',
+        bottom: 20,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        gap: 1,
+        zIndex: 10
+      },
+      children: slides.map((_, index) => jsxRuntime.jsx(material.Box, {
+        role: "button",
+        "aria-label": `Go to slide ${index + 1}`,
+        onClick: () => goToSlide(index),
+        sx: {
+          width: index === currentIndex ? 28 : 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: 'rgba(255, 255, 255, 0.9)',
+          opacity: index === currentIndex ? 1 : 0.45,
+          cursor: 'pointer',
+          transition: 'all 0.3s ease',
+          '&:hover': {
+            opacity: 0.8
+          }
+        }
+      }, index))
+    })]
+  });
+}
+
 // View component - handles the actual rendering
 function ArticleView({
   html = '',
@@ -23227,6 +23370,7 @@ function FormFieldView({
   startAdornment,
   endAdornment,
   inputProps,
+  error,
   // Exclude ViewProps that conflict with MUI FormControl types
   margin: _margin,
   marginTop: _marginTop,
@@ -23281,6 +23425,7 @@ function FormFieldView({
   };
   return jsxRuntime.jsxs(material.FormControl, {
     fullWidth: fullWidth,
+    error: error,
     ...restProps,
     children: [jsxRuntime.jsx(material.InputLabel, {
       htmlFor: fieldId,
@@ -23340,6 +23485,7 @@ function FormSelectView({
   size = 'small',
   placeholder,
   name,
+  error,
   // Exclude ViewProps that conflict with MUI FormControl types
   margin: _margin,
   marginTop: _marginTop,
@@ -23383,6 +23529,7 @@ function FormSelectView({
   return jsxRuntime.jsxs(material.FormControl, {
     fullWidth: fullWidth,
     size: size,
+    error: error,
     ...restProps,
     children: [label && jsxRuntime.jsx(material.InputLabel, {
       sx: labelStyles,
@@ -33761,6 +33908,7 @@ exports.GalleryImageModel = GalleryImageModel;
 exports.GridCell = GridCell;
 exports.GridLayout = GridLayout;
 exports.HeroBlock = HeroBlock;
+exports.HeroSlideshow = HeroSlideshow;
 exports.Html = Html;
 exports.HtmlInputField = HtmlInputField;
 exports.Image = Image;

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "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.8.1",
-      "file": "palette-default.1.8.1.css",
+      "version": "1.9.1",
+      "file": "palette-default.1.9.1.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.8.1.min.css",
+      "fileMinified": "palette-default.1.9.1.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.8.1",
-      "file": "palette-autumn.1.8.1.css",
+      "version": "1.9.1",
+      "file": "palette-autumn.1.9.1.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.8.1.min.css",
+      "fileMinified": "palette-autumn.1.9.1.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Sophisticated teal, bronze, and navy - perfect for premium retail and fashion brands",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.8.1",
-      "file": "palette-boutique.1.8.1.css",
+      "version": "1.9.1",
+      "file": "palette-boutique.1.9.1.css",
       "primaryColor": "#3ca6b6",
       "inlined": false,
-      "fileMinified": "palette-boutique.1.8.1.min.css",
+      "fileMinified": "palette-boutique.1.9.1.min.css",
       "fileLatest": "palette-boutique.latest.css",
       "fileLatestMinified": "palette-boutique.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.8.1",
-      "file": "palette-cosmic.1.8.1.css",
+      "version": "1.9.1",
+      "file": "palette-cosmic.1.9.1.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.8.1.min.css",
+      "fileMinified": "palette-cosmic.1.9.1.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.8.1",
-      "file": "palette-ocean.1.8.1.css",
+      "version": "1.9.1",
+      "file": "palette-ocean.1.9.1.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.8.1.min.css",
+      "fileMinified": "palette-ocean.1.9.1.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.8.1",
-      "file": "palette-spring.1.8.1.css",
+      "version": "1.9.1",
+      "file": "palette-spring.1.9.1.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.8.1.min.css",
+      "fileMinified": "palette-spring.1.9.1.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -92,11 +92,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.8.1",
-      "file": "palette-winter.1.8.1.css",
+      "version": "1.9.1",
+      "file": "palette-winter.1.9.1.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.8.1.min.css",
+      "fileMinified": "palette-winter.1.9.1.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "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",
   "types": "dist/index.d.ts",
   "bin": {
-    "create": "./scripts/create-qwickapps-project.js"
+    "create": "scripts/create-qwickapps-project.js"
   },
   "exports": {
     ".": {
@@ -180,7 +180,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/qwickapps/react-framework.git"
+    "url": "git+https://github.com/qwickapps/react-framework.git"
   },
   "homepage": "https://github.com/qwickapps/react-framework#readme"
 }

package/src/components/Scaffold.css

@@ -458,6 +458,9 @@
   background: var(--scaffold-background);
   transition: padding 0.3s ease;
   box-sizing: border-box;
+  /* Establish stacking context below app bar to prevent content bleed-through on scroll (GH-1) */
+  position: relative;
+  z-index: 1;
 }
 
 /* =================== ANIMATIONS =================== */