@qwickapps/react-framework 1.3.4 → 1.3.5

package/README.md

@@ -4,6 +4,13 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
+### September 4, 2025 - Stability & Inline Wrapper Guard
+
+- **ProductCard Stability Fix**: Removed inline wrapper React components that caused subtree remounts and potential focus/state loss; replaced with stable JSX fragments.
+- **Preventive Lint Rule**: Repo now enforces a custom `no-inline-component-wrapper` ESLint rule (scoped rollout) to block reintroduction of the remount pattern.
+- **Internal Refactor Only**: No public API changes; safe patch update.
+
+
 ### September 2, 2025 - Built-in Error Handling & Accessibility
 - **Automatic Error Boundaries**: QwickApp now automatically wraps all content with ErrorBoundary for robust error handling
 - **Built-in Accessibility**: AccessibilityProvider automatically included for WCAG 2.1 AA compliance

package/dist/components/blocks/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/Content.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAMvD,KAAK,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;AAEjD,MAAM,WAAW,YAAa,SAAQ,gBAAgB,EAAE,eAAe;CAAG;AA4L1E,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,kDA6CnC;AAED,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/Content.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAMvD,KAAK,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;AAEjD,MAAM,WAAW,YAAa,SAAQ,gBAAgB,EAAE,eAAe;CAAG;AAwI1E,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,kDA6CnC;AAED,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/blocks/ProductCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AASH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAoD,aAAa,EAAE,MAAM,aAAa,CAAC;AAI9F,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,oBAAqB,SAAQ,aAAa;IAClD,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,EAAE,eAAe;CAAG;AAgVlF;;;GAGG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAmE3C;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AASH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAoD,aAAa,EAAE,MAAM,aAAa,CAAC;AAI9F,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5C,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,oBAAqB,SAAQ,aAAa;IAClD,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,EAAE,eAAe;CAAG;AA+UlF;;;GAGG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,kDAmE3C;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAe,KAAK,EAAqC,MAAM,sBAAsB,CAAC;AAW7F,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,2FAA2F;IAC3F,YAAY,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,yEAAyE;IACzE,eAAe,EAAE,eAAe,CAAC;IACjC,2BAA2B;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,YAAY,EAAE,OAAO,CAAC;IAGtB,uEAAuE;IACvE,iBAAiB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9C,+DAA+D;IAC/D,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;IAG1C,kCAAkC;IAClC,eAAe,EAAE,MAAM,SAAS,CAAC;IACjC,2EAA2E;IAC3E,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAKD,eAAO,MAAM,QAAQ,QAAO,iBAM3B,CAAC;AAoBF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0QtD,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAAe,KAAK,EAAqC,MAAM,sBAAsB,CAAC;AAW7F,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,2FAA2F;IAC3F,YAAY,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,yEAAyE;IACzE,eAAe,EAAE,eAAe,CAAC;IACjC,2BAA2B;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,YAAY,EAAE,OAAO,CAAC;IAGtB,uEAAuE;IACvE,iBAAiB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9C,+DAA+D;IAC/D,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;IAG1C,kCAAkC;IAClC,eAAe,EAAE,MAAM,SAAS,CAAC;IACjC,2EAA2E;IAC3E,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAKD,eAAO,MAAM,QAAQ,QAAO,iBAM3B,CAAC;AAoBF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyQtD,CAAC"}

package/dist/index.esm.js

@@ -13760,72 +13760,62 @@ function ContentView({
         return 3;
     }
   };
-  // Content wrapper based on variant
-  const ContentWrapper = ({
-    children
-  }) => {
-    const paddingValue = getPadding();
-    const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth);
-    const commonSx = {
-      textAlign: centered ? 'center' : 'left',
-      maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
-      width: '100%',
-      ...(centered && contentMaxWidth && {
-        mx: 'auto'
-      }),
-      p: paddingValue,
-      ...styleProps.sx
-    };
-    switch (variant) {
-      case 'elevated':
-        return jsx(Paper, {
-          elevation: 4,
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: theme.palette.background.paper
-          },
-          children: children
-        });
-      case 'outlined':
-        return jsx(Paper, {
-          variant: "outlined",
-          elevation: 0,
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: 'var(--theme-surface)',
-            borderColor: 'var(--theme-border-main)',
-            // Use theme border color
-            borderWidth: 1,
-            borderStyle: 'solid'
-          },
-          children: children
-        });
-      case 'filled':
-        return jsx(Box, {
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: 'var(--theme-surface-variant)',
-            // Use theme surface variant
-            borderRadius: 1
-          },
-          children: children
-        });
-      default:
-        return jsx(Box, {
-          ...htmlProps,
-          ...otherProps,
-          sx: commonSx,
-          children: children
-        });
-    }
+  // Compute stable wrapper element (avoid recreating component type each render which caused remount & focus loss)
+  const paddingValue = getPadding();
+  const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth);
+  const commonSx = {
+    textAlign: centered ? 'center' : 'left',
+    maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
+    width: '100%',
+    ...(centered && contentMaxWidth && {
+      mx: 'auto'
+    }),
+    p: paddingValue,
+    ...styleProps.sx
+  };
+  let Wrapper = Box;
+  let wrapperProps = {
+    ...htmlProps,
+    ...otherProps,
+    sx: commonSx
   };
-  return jsx(ContentWrapper, {
+  if (variant === 'elevated') {
+    Wrapper = Paper;
+    wrapperProps = {
+      ...wrapperProps,
+      elevation: 4,
+      sx: {
+        ...commonSx,
+        backgroundColor: theme.palette.background.paper
+      }
+    };
+  } else if (variant === 'outlined') {
+    Wrapper = Paper;
+    wrapperProps = {
+      ...wrapperProps,
+      variant: 'outlined',
+      elevation: 0,
+      sx: {
+        ...commonSx,
+        backgroundColor: 'var(--theme-surface)',
+        borderColor: 'var(--theme-border-main)',
+        borderWidth: 1,
+        borderStyle: 'solid'
+      }
+    };
+  } else if (variant === 'filled') {
+    Wrapper = Box;
+    wrapperProps = {
+      ...wrapperProps,
+      sx: {
+        ...commonSx,
+        backgroundColor: 'var(--theme-surface-variant)',
+        borderRadius: 1
+      }
+    };
+  }
+  return jsx(Wrapper, {
+    ...wrapperProps,
     children: jsxs(Stack, {
       spacing: 2,
       children: [(title || subtitle) && jsxs(Box, {
@@ -17137,7 +17127,9 @@ function ProductCardView({
     return actions;
   };
   const displayActions = actions || getDefaultActions();
-  const FeaturesList = () => {
+  // INLINE WRAPPERS REFACTORED: Instead of inline component declarations (which cause remounts),
+  // compute JSX fragments via plain variables/functions and inject directly.
+  const featuresListElement = (() => {
     const featuresToShow = variant === 'compact' ? (product.features || []).slice(0, maxFeaturesCompact) : product.features || [];
     return jsxs(Box, {
       sx: {
@@ -17197,40 +17189,37 @@ function ProductCardView({
         })]
       })]
     });
-  };
-  const TechnologiesSection = () => {
-    if (!showTechnologies || variant === 'compact') return null;
-    return jsxs(Box, {
+  })();
+  const technologiesSectionElement = !showTechnologies || variant === 'compact' ? null : jsxs(Box, {
+    sx: {
+      mb: 3
+    },
+    children: [jsx(Typography, {
+      variant: "h6",
+      component: "h4",
       sx: {
-        mb: 3
+        mb: 1.5,
+        fontSize: '1rem',
+        fontWeight: 600
       },
-      children: [jsx(Typography, {
-        variant: "h6",
-        component: "h4",
-        sx: {
-          mb: 1.5,
-          fontSize: '1rem',
-          fontWeight: 600
-        },
-        children: "Technologies:"
-      }), jsx(Box, {
+      children: "Technologies:"
+    }), jsx(Box, {
+      sx: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 1
+      },
+      children: product.technologies.map((tech, index) => jsx(Chip, {
+        label: tech,
+        variant: "outlined",
+        size: "small",
         sx: {
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: 1
-        },
-        children: product.technologies.map((tech, index) => jsx(Chip, {
-          label: tech,
-          variant: "outlined",
-          size: "small",
-          sx: {
-            fontSize: '0.8rem',
-            fontWeight: 500
-          }
-        }, index))
-      })]
-    });
-  };
+          fontSize: '0.8rem',
+          fontWeight: 500
+        }
+      }, index))
+    })]
+  });
   return jsxs(Box, {
     className: styleProps.className || "product-card",
     onClick: htmlProps.onClick || (variant === 'compact' ? handleProductClick : undefined),
@@ -17336,7 +17325,7 @@ function ProductCardView({
           },
           children: variant === 'detailed' ? product.description : product.shortDescription || product.description
         })]
-      }), jsx(FeaturesList, {}), jsx(TechnologiesSection, {}), jsx(Box, {
+      }), featuresListElement, technologiesSectionElement, jsx(Box, {
         sx: {
           display: 'flex',
           gap: 1.5,
@@ -18197,7 +18186,6 @@ const ThemeProvider = ({
         }
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild // Re-create theme when palette changes
   // Theme preference management methods
   const setPreferredTheme = theme => {

package/dist/index.js

@@ -13762,72 +13762,62 @@ function ContentView({
         return 3;
     }
   };
-  // Content wrapper based on variant
-  const ContentWrapper = ({
-    children
-  }) => {
-    const paddingValue = getPadding();
-    const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth);
-    const commonSx = {
-      textAlign: centered ? 'center' : 'left',
-      maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
-      width: '100%',
-      ...(centered && contentMaxWidth && {
-        mx: 'auto'
-      }),
-      p: paddingValue,
-      ...styleProps.sx
-    };
-    switch (variant) {
-      case 'elevated':
-        return jsxRuntime.jsx(material.Paper, {
-          elevation: 4,
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: theme.palette.background.paper
-          },
-          children: children
-        });
-      case 'outlined':
-        return jsxRuntime.jsx(material.Paper, {
-          variant: "outlined",
-          elevation: 0,
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: 'var(--theme-surface)',
-            borderColor: 'var(--theme-border-main)',
-            // Use theme border color
-            borderWidth: 1,
-            borderStyle: 'solid'
-          },
-          children: children
-        });
-      case 'filled':
-        return jsxRuntime.jsx(material.Box, {
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: 'var(--theme-surface-variant)',
-            // Use theme surface variant
-            borderRadius: 1
-          },
-          children: children
-        });
-      default:
-        return jsxRuntime.jsx(material.Box, {
-          ...htmlProps,
-          ...otherProps,
-          sx: commonSx,
-          children: children
-        });
-    }
+  // Compute stable wrapper element (avoid recreating component type each render which caused remount & focus loss)
+  const paddingValue = getPadding();
+  const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth);
+  const commonSx = {
+    textAlign: centered ? 'center' : 'left',
+    maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
+    width: '100%',
+    ...(centered && contentMaxWidth && {
+      mx: 'auto'
+    }),
+    p: paddingValue,
+    ...styleProps.sx
+  };
+  let Wrapper = material.Box;
+  let wrapperProps = {
+    ...htmlProps,
+    ...otherProps,
+    sx: commonSx
   };
-  return jsxRuntime.jsx(ContentWrapper, {
+  if (variant === 'elevated') {
+    Wrapper = material.Paper;
+    wrapperProps = {
+      ...wrapperProps,
+      elevation: 4,
+      sx: {
+        ...commonSx,
+        backgroundColor: theme.palette.background.paper
+      }
+    };
+  } else if (variant === 'outlined') {
+    Wrapper = material.Paper;
+    wrapperProps = {
+      ...wrapperProps,
+      variant: 'outlined',
+      elevation: 0,
+      sx: {
+        ...commonSx,
+        backgroundColor: 'var(--theme-surface)',
+        borderColor: 'var(--theme-border-main)',
+        borderWidth: 1,
+        borderStyle: 'solid'
+      }
+    };
+  } else if (variant === 'filled') {
+    Wrapper = material.Box;
+    wrapperProps = {
+      ...wrapperProps,
+      sx: {
+        ...commonSx,
+        backgroundColor: 'var(--theme-surface-variant)',
+        borderRadius: 1
+      }
+    };
+  }
+  return jsxRuntime.jsx(Wrapper, {
+    ...wrapperProps,
     children: jsxRuntime.jsxs(material.Stack, {
       spacing: 2,
       children: [(title || subtitle) && jsxRuntime.jsxs(material.Box, {
@@ -17139,7 +17129,9 @@ function ProductCardView({
     return actions;
   };
   const displayActions = actions || getDefaultActions();
-  const FeaturesList = () => {
+  // INLINE WRAPPERS REFACTORED: Instead of inline component declarations (which cause remounts),
+  // compute JSX fragments via plain variables/functions and inject directly.
+  const featuresListElement = (() => {
     const featuresToShow = variant === 'compact' ? (product.features || []).slice(0, maxFeaturesCompact) : product.features || [];
     return jsxRuntime.jsxs(material.Box, {
       sx: {
@@ -17199,40 +17191,37 @@ function ProductCardView({
         })]
       })]
     });
-  };
-  const TechnologiesSection = () => {
-    if (!showTechnologies || variant === 'compact') return null;
-    return jsxRuntime.jsxs(material.Box, {
+  })();
+  const technologiesSectionElement = !showTechnologies || variant === 'compact' ? null : jsxRuntime.jsxs(material.Box, {
+    sx: {
+      mb: 3
+    },
+    children: [jsxRuntime.jsx(material.Typography, {
+      variant: "h6",
+      component: "h4",
       sx: {
-        mb: 3
+        mb: 1.5,
+        fontSize: '1rem',
+        fontWeight: 600
       },
-      children: [jsxRuntime.jsx(material.Typography, {
-        variant: "h6",
-        component: "h4",
-        sx: {
-          mb: 1.5,
-          fontSize: '1rem',
-          fontWeight: 600
-        },
-        children: "Technologies:"
-      }), jsxRuntime.jsx(material.Box, {
+      children: "Technologies:"
+    }), jsxRuntime.jsx(material.Box, {
+      sx: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 1
+      },
+      children: product.technologies.map((tech, index) => jsxRuntime.jsx(material.Chip, {
+        label: tech,
+        variant: "outlined",
+        size: "small",
         sx: {
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: 1
-        },
-        children: product.technologies.map((tech, index) => jsxRuntime.jsx(material.Chip, {
-          label: tech,
-          variant: "outlined",
-          size: "small",
-          sx: {
-            fontSize: '0.8rem',
-            fontWeight: 500
-          }
-        }, index))
-      })]
-    });
-  };
+          fontSize: '0.8rem',
+          fontWeight: 500
+        }
+      }, index))
+    })]
+  });
   return jsxRuntime.jsxs(material.Box, {
     className: styleProps.className || "product-card",
     onClick: htmlProps.onClick || (variant === 'compact' ? handleProductClick : undefined),
@@ -17338,7 +17327,7 @@ function ProductCardView({
           },
           children: variant === 'detailed' ? product.description : product.shortDescription || product.description
         })]
-      }), jsxRuntime.jsx(FeaturesList, {}), jsxRuntime.jsx(TechnologiesSection, {}), jsxRuntime.jsx(material.Box, {
+      }), featuresListElement, technologiesSectionElement, jsxRuntime.jsx(material.Box, {
         sx: {
           display: 'flex',
           gap: 1.5,
@@ -18199,7 +18188,6 @@ const ThemeProvider = ({
         }
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild // Re-create theme when palette changes
   // Theme preference management methods
   const setPreferredTheme = theme => {

package/package.json

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

package/src/components/blocks/Content.tsx

@@ -61,85 +61,33 @@ function ContentView({
     }
   };
 
-  // Content wrapper based on variant
-  const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const paddingValue = getPadding();
-    const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth as BreakpointValue);
-    const commonSx: SxProps<Theme> = {
-      textAlign: centered ? 'center' : 'left',
-      maxWidth: mappedMaxWidth !== false 
-        ? theme.breakpoints.values[mappedMaxWidth] 
-        : '100%',
-      width: '100%',
-      ...(centered && contentMaxWidth && {
-        mx: 'auto',
-      }),
-      p: paddingValue,
-      ...styleProps.sx,
-    };
-
-    switch (variant) {
-      case 'elevated':
-        return (
-          <Paper 
-            elevation={4}
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: theme.palette.background.paper,
-            }}
-          >
-            {children}
-          </Paper>
-        );
-      case 'outlined':
-        return (
-          <Paper 
-            variant="outlined" 
-            elevation={0}
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: 'var(--theme-surface)',
-              borderColor: 'var(--theme-border-main)', // Use theme border color
-              borderWidth: 1,
-              borderStyle: 'solid',
-            }}
-          >
-            {children}
-          </Paper>
-        );
-      case 'filled':
-        return (
-          <Box
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: 'var(--theme-surface-variant)', // Use theme surface variant
-              borderRadius: 1,
-            }}
-          >
-            {children}
-          </Box>
-        );
-      default:
-        return (
-          <Box
-            {...htmlProps}
-            {...otherProps}
-            sx={commonSx}
-          >
-            {children}
-          </Box>
-        );
-    }
+  // Compute stable wrapper element (avoid recreating component type each render which caused remount & focus loss)
+  const paddingValue = getPadding();
+  const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth as BreakpointValue);
+  const commonSx: SxProps<Theme> = {
+    textAlign: centered ? 'center' : 'left',
+    maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
+    width: '100%',
+    ...(centered && contentMaxWidth && { mx: 'auto' }),
+    p: paddingValue,
+    ...styleProps.sx,
   };
 
+  let Wrapper: React.ElementType = Box;
+  let wrapperProps: Record<string, any> = { ...htmlProps, ...otherProps, sx: commonSx };
+  if (variant === 'elevated') {
+    Wrapper = Paper;
+    wrapperProps = { ...wrapperProps, elevation: 4, sx: { ...commonSx, backgroundColor: theme.palette.background.paper } };
+  } else if (variant === 'outlined') {
+    Wrapper = Paper;
+    wrapperProps = { ...wrapperProps, variant: 'outlined', elevation: 0, sx: { ...commonSx, backgroundColor: 'var(--theme-surface)', borderColor: 'var(--theme-border-main)', borderWidth: 1, borderStyle: 'solid' } };
+  } else if (variant === 'filled') {
+    Wrapper = Box;
+    wrapperProps = { ...wrapperProps, sx: { ...commonSx, backgroundColor: 'var(--theme-surface-variant)', borderRadius: 1 } };
+  }
+
   return (
-    <ContentWrapper>
+    <Wrapper {...wrapperProps}>
       <Stack spacing={2}>
         {/* Header */}
         {(title || subtitle) && (
@@ -210,7 +158,7 @@ function ContentView({
           </Stack>
         )}
       </Stack>
-    </ContentWrapper>
+  </Wrapper>
   );
 }
 

package/src/components/blocks/ProductCard.tsx

@@ -141,26 +141,29 @@ function ProductCardView({
 
   const displayActions = actions || getDefaultActions();
 
-  const FeaturesList = () => {
-    const featuresToShow = variant === 'compact' 
+  // INLINE WRAPPERS REFACTORED: Instead of inline component declarations (which cause remounts),
+  // compute JSX fragments via plain variables/functions and inject directly.
+
+  const featuresListElement = (() => {
+    const featuresToShow = variant === 'compact'
       ? (product.features || []).slice(0, maxFeaturesCompact)
       : (product.features || []);
 
     return (
       <Box sx={{ mb: variant === 'detailed' ? 2.5 : 2 }}>
-        <Typography 
-          variant="h6" 
+        <Typography
+          variant="h6"
           component="h4"
-          sx={{ 
-            mb: 1.5, 
+          sx={{
+            mb: 1.5,
             fontSize: '1.1rem',
             fontWeight: 600
           }}
         >
           Key Features:
         </Typography>
-        <Box component="ul" sx={{ 
-          m: 0, 
+        <Box component="ul" sx={{
+          m: 0,
           p: 0,
           listStyle: 'none'
         }}>
@@ -185,9 +188,9 @@ function ProductCardView({
                   flexShrink: 0
                 }}
               />
-              <Typography 
-                variant="body2" 
-                sx={{ 
+              <Typography
+                variant="body2"
+                sx={{
                   fontSize: '0.95rem',
                   lineHeight: 1.4,
                   opacity: 0.8
@@ -198,10 +201,10 @@ function ProductCardView({
             </Box>
           ))}
           {variant === 'compact' && (product.features || []).length > maxFeaturesCompact && (
-            <Typography 
-              variant="body2" 
+            <Typography
+              variant="body2"
               color="primary"
-              sx={{ 
+              sx={{
                 fontSize: '0.9rem',
                 pl: 2.5,
                 fontWeight: 500
@@ -213,41 +216,37 @@ function ProductCardView({
         </Box>
       </Box>
     );
-  };
-
-  const TechnologiesSection = () => {
-    if (!showTechnologies || variant === 'compact') return null;
+  })();
 
-    return (
-      <Box sx={{ mb: 3 }}>
-        <Typography 
-          variant="h6" 
-          component="h4"
-          sx={{ 
-            mb: 1.5, 
-            fontSize: '1rem',
-            fontWeight: 600
-          }}
-        >
-          Technologies:
-        </Typography>
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-          {product.technologies.map((tech, index) => (
-            <Chip
-              key={index}
-              label={tech}
-              variant="outlined"
-              size="small"
-              sx={{
-                fontSize: '0.8rem',
-                fontWeight: 500
-              }}
-            />
-          ))}
-        </Box>
+  const technologiesSectionElement = (!showTechnologies || variant === 'compact') ? null : (
+    <Box sx={{ mb: 3 }}>
+      <Typography
+        variant="h6"
+        component="h4"
+        sx={{
+          mb: 1.5,
+          fontSize: '1rem',
+          fontWeight: 600
+        }}
+      >
+        Technologies:
+      </Typography>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+        {product.technologies.map((tech, index) => (
+          <Chip
+            key={index}
+            label={tech}
+            variant="outlined"
+            size="small"
+            sx={{
+              fontSize: '0.8rem',
+              fontWeight: 500
+            }}
+          />
+        ))}
       </Box>
-    );
-  };
+    </Box>
+  );
 
   return (
     <Box
@@ -364,11 +363,11 @@ function ProductCardView({
           </Typography>
         </Box>
 
-        {/* Features */}
-        <FeaturesList />
+  {/* Features */}
+  {featuresListElement}
 
-        {/* Technologies */}
-        <TechnologiesSection />
+  {/* Technologies */}
+  {technologiesSectionElement}
 
         {/* Action Buttons */}
         <Box sx={{ 

package/src/contexts/ThemeContext.tsx

@@ -302,8 +302,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
           },
         },
       },
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  });
   }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild // Re-create theme when palette changes
 
   // Theme preference management methods