@datlv-trustshop/shopify-inapp-components 0.2.3 → 0.2.5

package/dist/components/GrowApps.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { Card, Text, BlockStack, Box, InlineStack, Button, Popover, ActionList, } from "@shopify/polaris";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { Card, Text, BlockStack, Box, InlineStack, Button, Popover, ActionList, SkeletonBodyText, SkeletonThumbnail, } from "@shopify/polaris";
 import { ExternalIcon, MenuHorizontalIcon } from "@shopify/polaris-icons";
 import { useDashboard } from "../hooks/useDashboard";
 import { useTranslation } from "../hooks/useTranslations";
 const DEFAULT_DISMISS_KEY = "ts-dashboard-growapps-dismissed";
 const DEFAULT_DISMISS_DURATION = 7 * 24 * 60 * 60 * 1000;
+// Fixed dimensions to prevent layout shifts
+const CARD_WIDTH = 282;
+const CARD_MIN_HEIGHT = 140; // Reduced from 180 to avoid excessive white space
+const ICON_SIZE = 60;
+const GAP_SIZE = 20;
 export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = DEFAULT_DISMISS_KEY, dismissDuration = DEFAULT_DISMISS_DURATION, showDismiss = true, showNavigation = true, maxItems = 6, }) => {
     const slidesContainerRef = useRef(null);
-    const currentPositionRef = useRef(0);
-    const { data } = useDashboard();
+    const [currentPosition, setCurrentPosition] = useState(0);
+    const { data, loading } = useDashboard();
     const growAppsTranslations = useTranslation("growApps");
     const allGrowApps = data?.grow_apps || [];
     const displayLimit = data?.grow_apps_display_limit || maxItems;
@@ -18,9 +23,13 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
     const [maxIndex, setMaxIndex] = useState(0);
     const [popoverActive, setPopoverActive] = useState(false);
     const [isVisible, setIsVisible] = useState(true);
+    const [isContentReady, setIsContentReady] = useState(false);
+    const [touchDelta, setTouchDelta] = useState(0);
+    const [isSwiping, setIsSwiping] = useState(false);
     const touchStartX = useRef(null);
     const touchEndX = useRef(null);
     const swiping = useRef(false);
+    const lastDelta = useRef(0);
     const togglePopoverActive = () => setPopoverActive((active) => !active);
     const handleDismiss = () => {
         setIsVisible(false);
@@ -50,6 +59,15 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
             }
         }
     }, [dismissKey, dismissDuration]);
+    // Mark content as ready when data loads
+    useEffect(() => {
+        if (!loading && growApps.length >= 0) {
+            // Small delay to ensure DOM is ready
+            requestAnimationFrame(() => {
+                setIsContentReady(true);
+            });
+        }
+    }, [loading, growApps.length]);
     const handleGetAppClick = (app) => {
         const url = app.button_install_link || app.app_url || app.get_app || "#";
         if (url && url !== "#") {
@@ -66,8 +84,8 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
             return;
         const containerWidth = slidesContainerRef.current.offsetWidth;
         const totalWidth = slideWrap.scrollWidth;
-        const slideWidth = 282;
-        const gap = 20;
+        const slideWidth = CARD_WIDTH;
+        const gap = GAP_SIZE;
         const slideStep = slideWidth + gap;
         const maxSlides = Math.max(0, Math.ceil((totalWidth - containerWidth) / slideStep));
         const newIndex = Math.max(0, Math.min(currentIndex + direction, maxSlides));
@@ -76,21 +94,30 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
             return;
         }
         const newPosition = -newIndex * slideStep;
-        slideWrap.style.transform = `translateX(${newPosition}px)`;
-        currentPositionRef.current = newPosition;
+        // Remove direct DOM manipulation - let React handle it
+        setCurrentPosition(newPosition);
         setCurrentIndex(newIndex);
         setMaxIndex(maxSlides);
     }, [currentIndex]);
-    const handleTouchStart = (e) => {
+    const handleTouchStart = useCallback((e) => {
         touchStartX.current = e.touches[0].clientX;
+        touchEndX.current = e.touches[0].clientX; // Initialize end position
         swiping.current = true;
-    };
-    const handleTouchMove = (e) => {
-        if (!swiping.current)
+        setIsSwiping(true);
+        setTouchDelta(0);
+    }, []);
+    const handleTouchMove = useCallback((e) => {
+        if (!swiping.current || touchStartX.current === null)
             return;
         touchEndX.current = e.touches[0].clientX;
-    };
-    const handleTouchEnd = () => {
+        const delta = touchEndX.current - touchStartX.current;
+        // Only update if delta changed significantly (reduce jitter)
+        if (Math.abs(delta - lastDelta.current) > 1) {
+            lastDelta.current = delta;
+            setTouchDelta(delta);
+        }
+    }, []);
+    const handleTouchEnd = useCallback(() => {
         if (!swiping.current)
             return;
         const swipeThreshold = 50;
@@ -103,10 +130,17 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
                 handleSlide(-1);
             }
         }
+        else {
+            // Snap back if swipe wasn't far enough
+            setTouchDelta(0);
+        }
         swiping.current = false;
         touchStartX.current = null;
         touchEndX.current = null;
-    };
+        lastDelta.current = 0;
+        setIsSwiping(false);
+        setTouchDelta(0);
+    }, [handleSlide]);
     useEffect(() => {
         const calculateMaxIndex = () => {
             if (!slidesContainerRef.current)
@@ -116,23 +150,48 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
                 return;
             const containerWidth = slidesContainerRef.current.offsetWidth;
             const totalWidth = slideWrap.scrollWidth;
-            const slideWidth = 282;
-            const gap = 20;
-            const slideStep = slideWidth + gap;
+            const slideStep = CARD_WIDTH + GAP_SIZE;
             const maxSlides = Math.max(0, Math.ceil((totalWidth - containerWidth) / slideStep));
             setMaxIndex(maxSlides);
         };
-        setTimeout(calculateMaxIndex, 100);
-        const handleResize = () => calculateMaxIndex();
+        // Use requestAnimationFrame instead of setTimeout for better performance
+        const rafId = requestAnimationFrame(calculateMaxIndex);
+        const handleResize = () => {
+            requestAnimationFrame(calculateMaxIndex);
+        };
         window.addEventListener("resize", handleResize);
         return () => {
+            cancelAnimationFrame(rafId);
             window.removeEventListener("resize", handleResize);
         };
     }, [growApps.length]);
-    useEffect(() => { }, [growApps]);
+    // Memoize navigation button styles to prevent recalculation
+    // Must be defined before any returns to follow React hooks rules
+    const navButtonStyle = useMemo(() => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "24px",
+        height: "24px",
+        padding: 0,
+        border: "none",
+        borderRadius: "4px",
+        backgroundColor: "transparent",
+        transition: "opacity 0.2s ease", // Only animate opacity
+    }), []);
+    // Don't render at all if dismissed to prevent CLS
     if (!isVisible) {
         return null;
     }
+    // Show skeleton while loading to reserve space
+    if (loading || !isContentReady) {
+        return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsxs(BlockStack, { gap: "200", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(SkeletonBodyText, { lines: 1 }), _jsx(SkeletonBodyText, { lines: 1 })] }), _jsx("div", { style: { display: "flex", gap: `${GAP_SIZE}px`, overflow: "hidden" }, children: [1, 2, 3].map((idx) => (_jsx("div", { style: {
+                                        flexShrink: 0,
+                                        width: `${CARD_WIDTH}px`,
+                                        minHeight: `${CARD_MIN_HEIGHT}px`,
+                                    }, children: _jsx(Card, { children: _jsx(Box, { children: _jsxs(BlockStack, { gap: "300", children: [_jsx(SkeletonThumbnail, { size: "large" }), _jsxs(BlockStack, { gap: "200", children: [_jsx(SkeletonBodyText, { lines: 1 }), _jsx(SkeletonBodyText, { lines: 2 })] })] }) }) }) }, idx))) })] }) }) }) }));
+    }
+    // Handle empty state with reserved space
     if (growApps.length === 0) {
         return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: growAppsTranslations?.noData || "No apps available" }) }) }) }));
     }
@@ -155,39 +214,29 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
                                                 borderRadius: "8px",
                                                 backgroundColor: "#e3e3e3",
                                             }, children: [_jsx("button", { onClick: () => handleSlide(-1), disabled: currentIndex === 0, style: {
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        width: "24px",
-                                                        height: "24px",
-                                                        padding: 0,
-                                                        border: "none",
-                                                        borderRadius: "4px",
-                                                        backgroundColor: "transparent",
+                                                        ...navButtonStyle,
                                                         cursor: currentIndex === 0 ? "not-allowed" : "pointer",
-                                                        transition: "background-color 0.2s ease",
                                                         opacity: currentIndex === 0 ? 0.5 : 1,
                                                     }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M10.5 13L5.5 8l5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) }), _jsx("button", { onClick: () => handleSlide(1), disabled: currentIndex >= maxIndex, style: {
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        width: "24px",
-                                                        height: "24px",
-                                                        padding: 0,
-                                                        border: "none",
-                                                        borderRadius: "4px",
-                                                        backgroundColor: "transparent",
+                                                        ...navButtonStyle,
                                                         cursor: currentIndex >= maxIndex ? "not-allowed" : "pointer",
-                                                        transition: "background-color 0.2s ease",
                                                         opacity: currentIndex >= maxIndex ? 0.5 : 1,
                                                     }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M5.5 13l5-5-5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) })] }))] })] }), _jsx("div", { className: "slides-container", style: {
                                 overflow: "hidden",
                                 width: "100%",
+                                touchAction: "pan-y pinch-zoom", // Allow vertical scroll and pinch, handle horizontal
+                                WebkitOverflowScrolling: "touch", // iOS momentum scrolling
+                                userSelect: "none", // Prevent text selection during swipe
+                                WebkitUserSelect: "none"
+                                // Removed minHeight to avoid excessive white space
                             }, ref: slidesContainerRef, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: _jsx("div", { className: "slides-wrapper", style: {
                                     display: "flex",
-                                    gap: "20px",
-                                    transition: "transform 0.3s ease-in-out",
-                                    transform: "translateX(0px)",
+                                    gap: `${GAP_SIZE}px`,
+                                    transition: isSwiping ? "none" : "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)", // Better easing
+                                    transform: `translate3d(${currentPosition + touchDelta}px, 0, 0)`, // Use translate3d for GPU
+                                    willChange: isSwiping ? "transform" : "auto", // Only during interaction
+                                    backfaceVisibility: "hidden", // Force GPU acceleration
+                                    perspective: 1000, // Create 3D rendering context
                                 }, children: growApps.map((app, index) => {
                                     const iconUrl = app.icon_url || app.imageUrl || "";
                                     const buttonText = app.button_install_text ||
@@ -197,10 +246,17 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
                                         "Get app";
                                     return (_jsx("div", { "data-index": index, style: {
                                             flexShrink: 0,
-                                            width: "282px",
-                                            transition: "transform 0.2s ease",
-                                        }, children: _jsx(Card, { children: _jsx(Box, { minWidth: "250px", minHeight: "180px", children: _jsxs(BlockStack, { gap: "300", children: [_jsx(InlineStack, { gap: "400", blockAlign: "start", children: iconUrl && (_jsx("img", { src: iconUrl, alt: app.title, width: 60, height: 60, style: {
+                                            width: `${CARD_WIDTH}px`,
+                                            // Remove per-card transition that causes CLS
+                                        }, children: _jsx(Card, { children: _jsx(Box, { minWidth: `${CARD_WIDTH - 32}px`, children: _jsxs(BlockStack, { gap: "300", children: [_jsx(InlineStack, { gap: "400", blockAlign: "start", children: iconUrl ? (_jsx("img", { src: iconUrl, alt: app.title, width: ICON_SIZE, height: ICON_SIZE, style: {
+                                                                    borderRadius: "8px",
+                                                                    flexShrink: 0,
+                                                                    objectFit: "cover",
+                                                                }, loading: "eager", decoding: "async" })) : (_jsx("div", { style: {
+                                                                    width: `${ICON_SIZE}px`,
+                                                                    height: `${ICON_SIZE}px`,
                                                                     borderRadius: "8px",
+                                                                    backgroundColor: "#f0f0f0",
                                                                     flexShrink: 0,
                                                                 } })) }), _jsxs(BlockStack, { gap: "200", children: [_jsx("div", { style: {
                                                                         display: "-webkit-box",
@@ -211,6 +267,7 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
                                                                         WebkitBoxOrient: "vertical",
                                                                         overflow: "hidden",
                                                                         textOverflow: "ellipsis",
+                                                                        minHeight: "20px", // Reserve space
                                                                     }, children: app.title }), _jsx("div", { style: {
                                                                         display: "-webkit-box",
                                                                         WebkitLineClamp: 2,
@@ -220,8 +277,10 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
                                                                         fontSize: "13px",
                                                                         color: "#616161",
                                                                         lineHeight: 1.4,
+                                                                        minHeight: "36px", // Reserve space for 2 lines
                                                                     }, children: app.content }), _jsx("div", { style: {
                                                                         alignSelf: "flex-start",
+                                                                        minHeight: "36px", // Reserve space for button
                                                                     }, children: _jsx(Button, { icon: ExternalIcon, variant: "secondary", size: "medium", onClick: () => handleGetAppClick(app), children: buttonText }) })] })] }) }) }) }, app.id || index));
                                 }) }) })] }) }) }) }));
 };

package/dist/components/WhatsNew.js

@@ -1,17 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
-import { Button, Tabs, Text, BlockStack, InlineStack, Box, Card, } from "@shopify/polaris";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Button, Tabs, Text, BlockStack, InlineStack, Box, Card, SkeletonBodyText, SkeletonThumbnail, } from "@shopify/polaris";
 import { ExternalIcon } from "@shopify/polaris-icons";
 import { ArticleList } from "./ArticleList";
 import ImageLoading from "./ImageLoading";
 import { useArticles, useWhatsNew } from "../hooks";
 import { useTranslation } from "../hooks/useTranslations";
 import { sdkStyles, mergeStyles } from "./styles";
+// Fixed dimensions to prevent CLS - reduced to avoid excessive white space
+const CONTAINER_MIN_HEIGHT = 300; // Reduced from 450
 export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick, onViewAllUpdates, onViewAllArticles, maxUpdates = 5, showNavigation = true, showViewAllButton = true, navigate, }) => {
     const [productUpdateIndex, setProductUpdateIndex] = useState(0);
     const [articleIndex, setArticleIndex] = useState(0);
     const [selectedTab, setSelectedTab] = useState(0);
     const [isMobile, setIsMobile] = useState(false);
+    const [isContentReady, setIsContentReady] = useState(false);
+    const [touchDelta, setTouchDelta] = useState(0);
+    const [isSwiping, setIsSwiping] = useState(false);
     const touchStartX = useRef(null);
     const touchEndX = useRef(null);
     const swiping = useRef(false);
@@ -19,7 +24,7 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
     const articles = useArticles();
     const whatsNew = useWhatsNew();
     const t = useTranslation('whatsNew');
-    const limitedUpdates = whatsNew.updates.slice(0, maxUpdates);
+    const limitedUpdates = useMemo(() => whatsNew.updates.slice(0, maxUpdates), [whatsNew.updates, maxUpdates]);
     useEffect(() => {
         const handleResize = () => {
             setIsMobile(window.innerWidth <= 768);
@@ -28,10 +33,14 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, []);
-    React.useEffect(() => {
-        if (limitedUpdates.length > 0) {
+    // Mark content as ready when data loads
+    useEffect(() => {
+        if (limitedUpdates.length > 0 || articlesList.length > 0) {
+            requestAnimationFrame(() => {
+                setIsContentReady(true);
+            });
         }
-    }, [limitedUpdates]);
+    }, [limitedUpdates.length, articles.articles.length]);
     const articlesList = articles.articles;
     const nextSlide = () => {
         if (selectedTab === 0) {
@@ -72,11 +81,15 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
     const handleTouchStart = (e) => {
         touchStartX.current = e.touches[0].clientX;
         swiping.current = true;
+        setIsSwiping(true);
+        setTouchDelta(0);
     };
     const handleTouchMove = (e) => {
-        if (!swiping.current)
+        if (!swiping.current || touchStartX.current === null)
             return;
         touchEndX.current = e.touches[0].clientX;
+        const delta = touchEndX.current - touchStartX.current;
+        setTouchDelta(delta);
     };
     const handleTouchEnd = () => {
         if (!swiping.current)
@@ -94,6 +107,8 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
         swiping.current = false;
         touchStartX.current = null;
         touchEndX.current = null;
+        setIsSwiping(false);
+        setTouchDelta(0);
     };
     const handleProductUpdateClick = (update) => {
         const tryUrl = update.button_try_url || update.link;
@@ -171,13 +186,18 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
                 return articleIndex >= maxIndex;
             }
         })();
+    // Show skeleton while loading
+    if (!isContentReady) {
+        return (_jsx("div", { style: { ...sdkStyles.dashboardWhatsNew, minHeight: `${CONTAINER_MIN_HEIGHT}px` }, className: className, children: _jsx(Card, { children: _jsxs(BlockStack, { gap: "400", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(SkeletonBodyText, { lines: 1 }), _jsx(InlineStack, { gap: "300", blockAlign: "center", align: "space-between", children: _jsx("div", { style: { width: "200px" }, children: _jsx(SkeletonBodyText, { lines: 1 }) }) })] }), _jsx(Box, { children: _jsxs(BlockStack, { gap: "400", children: [_jsx(SkeletonThumbnail, { size: "large" }), _jsx(SkeletonBodyText, { lines: 3 })] }) })] }) }) }));
+    }
+    // Empty state
     if (limitedUpdates.length === 0 && articlesList.length === 0) {
-        return (_jsx("div", { style: mergeStyles(sdkStyles.dashboardWhatsNew), className: className, children: _jsx(Card, { children: _jsx(BlockStack, { gap: "400", children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: t.noData || "No updates available" }) }) }) }));
+        return (_jsx("div", { style: { ...sdkStyles.dashboardWhatsNew, minHeight: `${CONTAINER_MIN_HEIGHT}px` }, className: className, children: _jsx(Card, { children: _jsx(BlockStack, { gap: "400", children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: t.noData || "No updates available" }) }) }) }));
     }
     const mobileStyles = isMobile
         ? {
             slidesContainer: {
-                overflowX: "auto",
+                overflow: "auto",
                 scrollSnapType: "x mandatory",
                 WebkitOverflowScrolling: "touch",
                 scrollbarWidth: "none",
@@ -190,6 +210,7 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
                 scrollSnapAlign: "center",
                 flex: "0 0 85%",
                 maxWidth: "85%",
+                minHeight: "280px",
             },
             slideImage: {
                 display: "none",
@@ -231,16 +252,20 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
                                                         ? handleViewAllUpdates
                                                         : handleViewAllArticles, children: selectedTab === 0
                                                         ? (t.buttonViewAll?.productUpdate || "View all updates")
-                                                        : (t.buttonViewAll?.article || "View all articles") })), showNavigation && !isMobile && (_jsxs("div", { style: sdkStyles.slideNavigation, children: [_jsx("button", { onClick: prevSlide, disabled: isPrevDisabled, style: mergeStyles(sdkStyles.slideButton, isPrevDisabled ? sdkStyles.slideButtonDisabled : {}, {
+                                                        : (t.buttonViewAll?.article || "View all articles") })), showNavigation && (_jsxs("div", { style: sdkStyles.slideNavigation, children: [_jsx("button", { onClick: prevSlide, disabled: isPrevDisabled, style: mergeStyles(sdkStyles.slideButton, isPrevDisabled ? sdkStyles.slideButtonDisabled : {}, {
                                                                 cursor: isPrevDisabled ? "not-allowed" : "pointer",
                                                                 opacity: isPrevDisabled ? 0.5 : 1,
                                                             }), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M10.5 13L5.5 8l5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) }), _jsx("button", { onClick: nextSlide, disabled: isNextDisabled, style: mergeStyles(sdkStyles.slideButton, isNextDisabled ? sdkStyles.slideButtonDisabled : {}, {
                                                                 cursor: isNextDisabled ? "not-allowed" : "pointer",
                                                                 opacity: isNextDisabled ? 0.5 : 1,
-                                                            }), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M5.5 13l5-5-5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) })] }))] })] })] }), _jsx(Box, { children: selectedTab === 0 ? (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, mobileStyles.slidesContainer, { scrollbarWidth: "none" }), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx("div", { style: mergeStyles(sdkStyles.slidesWrapper, mobileStyles.slidesWrapper, {
+                                                            }), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M5.5 13l5-5-5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) }) })] }))] })] })] }), _jsx(Box, { children: selectedTab === 0 ? (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, mobileStyles.slidesContainer, {
+                                    scrollbarWidth: "none",
+                                }), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx("div", { style: mergeStyles(sdkStyles.slidesWrapper, mobileStyles.slidesWrapper, {
                                         transform: isMobile
-                                            ? "none"
-                                            : `translateX(-${productUpdateIndex * 90}%)`,
+                                            ? `translateX(calc(-${productUpdateIndex * 85}% + ${touchDelta}px))` // 85% for mobile with swipe delta
+                                            : `translateX(calc(-${productUpdateIndex * 90}% + ${touchDelta}px))`,
+                                        transition: isSwiping ? "none" : "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                        willChange: "transform", // GPU acceleration
                                     }), children: limitedUpdates.map((update) => (_jsxs("div", { style: mergeStyles(sdkStyles.slideBox, isMobile ? mobileStyles.slideBox : {}), children: [_jsxs("div", { style: sdkStyles.slideContent, children: [_jsx(Text, { variant: "headingMd", as: "h3", children: update.title }), (update.releaseDate || update.date_time) && (_jsx(Text, { variant: "bodySm", tone: "subdued", as: "p", children: update.releaseDate || update.date_time })), (update.description || update.content?.text) && (_jsx(Text, { as: "p", children: update.description || update.content?.text })), update.features && update.features.length > 0 && (_jsx("ul", { style: { paddingLeft: "20px", margin: 0 }, children: update.features.map((item, idx) => (_jsx("li", { style: {
                                                                 fontSize: "13px",
                                                                 lineHeight: 1.4,
@@ -254,5 +279,7 @@ export const WhatsNew = ({ className = "", onProductUpdateClick, onArticleClick,
                                                                     }
                                                                 }, children: update.button_learn_more || "Learn more" }))] })] }), _jsx("div", { style: mergeStyles(sdkStyles.slideImage, isMobile ? mobileStyles.slideImage : {}), children: _jsx(ImageLoading, { src: update.imageUrl ||
                                                         update.image_url ||
-                                                        "https://asset.trustshop.io/dashboard/news-review-summary.png", alt: `what-new-${update.id}`, width: 712, height: 400, borderRadius: 12 }) })] }, update.id))) }) })) : (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, { overflowX: "hidden", overflowY: "hidden", scrollbarWidth: "none" }, mobileStyles.slidesContainer), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx(ArticleList, { layout: "slide", onArticleClick: handleArticleClick, showThumbnail: true, showAuthor: true, showDate: true, currentIndex: articleIndex, onSlideChange: setArticleIndex, showNavigation: false }) })) })] }) })] }));
+                                                        "https://asset.trustshop.io/dashboard/news-review-summary.png", alt: `what-new-${update.id}`, width: 712, height: 400, borderRadius: 12 }) })] }, update.id))) }) })) : (_jsx("div", { ref: slideContainerRef, style: mergeStyles(sdkStyles.slidesContainer, {
+                                    scrollbarWidth: "none",
+                                }, mobileStyles.slidesContainer), className: isMobile ? "whats-new-mobile-scrollbar" : "", onTouchStart: isMobile ? handleTouchStart : undefined, onTouchMove: isMobile ? handleTouchMove : undefined, onTouchEnd: isMobile ? handleTouchEnd : undefined, children: _jsx(ArticleList, { layout: "slide", onArticleClick: handleArticleClick, showThumbnail: true, showAuthor: true, showDate: true, currentIndex: articleIndex, onSlideChange: setArticleIndex, showNavigation: false }) })) })] }) })] }));
 };

package/dist/hooks/index.d.ts

@@ -7,3 +7,5 @@ export * from "./useGrowApps";
 export * from "./usePartnerIntegration";
 export * from "./useFloatingCards";
 export * from "./useCampaignTracking";
+export * from "./useFloatingCardActions";
+export * from "./useFloatingCardEngine";

package/dist/hooks/index.js

@@ -7,3 +7,5 @@ export * from "./useGrowApps";
 export * from "./usePartnerIntegration";
 export * from "./useFloatingCards";
 export * from "./useCampaignTracking";
+export * from "./useFloatingCardActions";
+export * from "./useFloatingCardEngine";

package/dist/hooks/useFloatingCardActions.d.ts

@@ -0,0 +1,17 @@
+import { FloatingCardData } from '../components/FloatingCard';
+export interface FloatingCardActionsConfig {
+    navigate: (path: string) => void;
+    onOpenPricing?: () => void;
+    onDismiss?: (cardId: string | number) => void;
+    specialRoutes?: {
+        [key: string]: () => void;
+    };
+}
+export interface FloatingCardActionsReturn {
+    handlePrimaryAction: (card: FloatingCardData) => void;
+    handleSecondaryAction: (card: FloatingCardData) => void;
+    handleDismiss: (cardId: string | number) => void;
+    resolveAction: (action: FloatingCardData['primary_action'] | FloatingCardData['secondary_action']) => void;
+}
+export declare const useFloatingCardActions: (config: FloatingCardActionsConfig) => FloatingCardActionsReturn;
+export default useFloatingCardActions;

package/dist/hooks/useFloatingCardActions.js

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+export const useFloatingCardActions = (config) => {
+    const { navigate, onOpenPricing, onDismiss, specialRoutes = {} } = config;
+    const resolveAction = useCallback((action) => {
+        if (!action?.url)
+            return;
+        const url = action.url;
+        // Check for special routes first
+        if (url === '/pricing' || url.startsWith('/pricing?')) {
+            if (onOpenPricing) {
+                onOpenPricing();
+                return;
+            }
+        }
+        // Check custom special routes
+        for (const [route, handler] of Object.entries(specialRoutes)) {
+            if (url === route || url.startsWith(`${route}?`)) {
+                handler();
+                return;
+            }
+        }
+        // Handle internal routes (starts with /)
+        if (url.startsWith('/')) {
+            navigate(url);
+            return;
+        }
+        // Handle external links
+        if ((url.startsWith('http://') || url.startsWith('https://')) &&
+            action.external !== false) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        // Fallback to navigation for relative paths or unknown formats
+        navigate(url);
+    }, [navigate, onOpenPricing, specialRoutes]);
+    const handlePrimaryAction = useCallback((card) => {
+        resolveAction(card.primary_action);
+    }, [resolveAction]);
+    const handleSecondaryAction = useCallback((card) => {
+        resolveAction(card.secondary_action);
+    }, [resolveAction]);
+    const handleDismiss = useCallback((cardId) => {
+        if (onDismiss) {
+            onDismiss(cardId);
+        }
+    }, [onDismiss]);
+    return {
+        handlePrimaryAction,
+        handleSecondaryAction,
+        handleDismiss,
+        resolveAction,
+    };
+};
+export default useFloatingCardActions;

package/dist/hooks/useFloatingCardEngine.d.ts

@@ -0,0 +1,21 @@
+import { FloatingCardActionsConfig } from './useFloatingCardActions';
+import { FloatingCardData } from '../components/FloatingCard';
+export interface FloatingCardEngineConfig extends Omit<FloatingCardActionsConfig, 'onDismiss'> {
+    shopId?: string;
+    currentRoute?: string;
+}
+export interface FloatingCardEngineReturn {
+    visibleCards: FloatingCardData[];
+    loading: boolean;
+    error: Error | null;
+    handlePrimaryAction: (card: FloatingCardData) => void;
+    handleSecondaryAction: (card: FloatingCardData) => void;
+    handleDismiss: (cardId: string | number) => void;
+    resolveAction: (action: FloatingCardData['primary_action'] | FloatingCardData['secondary_action']) => void;
+}
+/**
+ * Comprehensive hook that combines floating card data fetching with action handling.
+ * This provides a complete solution for floating card functionality.
+ */
+export declare const useFloatingCardEngine: (config: FloatingCardEngineConfig) => FloatingCardEngineReturn;
+export default useFloatingCardEngine;

package/dist/hooks/useFloatingCardEngine.js

@@ -0,0 +1,39 @@
+import { useVisibleFloatingCards } from './useFloatingCards';
+import { useFloatingCardActions } from './useFloatingCardActions';
+/**
+ * Comprehensive hook that combines floating card data fetching with action handling.
+ * This provides a complete solution for floating card functionality.
+ */
+export const useFloatingCardEngine = (config) => {
+    const { shopId, currentRoute, navigate, onOpenPricing, specialRoutes } = config;
+    // Fetch visible floating cards
+    const { visibleCards, dismissCard, loading, error } = useVisibleFloatingCards({
+        shopId,
+        currentRoute,
+    });
+    // Set up action handlers with dismiss integrated
+    const actions = useFloatingCardActions({
+        navigate,
+        onOpenPricing,
+        specialRoutes,
+        onDismiss: (cardId) => {
+            // Convert to number if needed for compatibility
+            const id = typeof cardId === 'string' ? parseInt(cardId, 10) : cardId;
+            if (!isNaN(id)) {
+                dismissCard(id);
+            }
+        },
+    });
+    return {
+        // Data
+        visibleCards,
+        loading,
+        error,
+        // Actions
+        handlePrimaryAction: actions.handlePrimaryAction,
+        handleSecondaryAction: actions.handleSecondaryAction,
+        handleDismiss: actions.handleDismiss,
+        resolveAction: actions.resolveAction,
+    };
+};
+export default useFloatingCardEngine;

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export { DashboardProvider, DashboardContext, useDashboardContext, } from "./pro
 export type { DashboardProviderProps, DashboardContextValue, } from "./provider/DashboardProvider";
 export * from "./hooks";
 export * from "./components";
+export { CLSMonitor, startCLSMonitoring, stopCLSMonitoring, getCLSMetrics } from "./utils/cls-monitor";
+export type { CLSMetrics, CLSMonitorOptions } from "./utils/cls-monitor";
 export type { SDKTranslations } from './types/translations';
 export { defaultTranslations } from './translations/default';
 export { useTranslations, useTranslation } from './hooks/useTranslations';

package/dist/index.js

@@ -6,6 +6,8 @@ export * from "./types";
 export { DashboardProvider, DashboardContext, useDashboardContext, } from "./provider/DashboardProvider";
 export * from "./hooks";
 export * from "./components";
+// Export CLS monitoring utilities (optional)
+export { CLSMonitor, startCLSMonitoring, stopCLSMonitoring, getCLSMetrics } from "./utils/cls-monitor";
 export { defaultTranslations } from './translations/default';
 export { useTranslations, useTranslation } from './hooks/useTranslations';
 // Campaign Tracking

package/dist/provider/DashboardProvider.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useEffect, useState, useCallback, useMemo, useRef, } from "react";
 import { GlobalDashboardManager } from "../core/global-manager";
 import { defaultTranslations } from "../translations/default";
+import { injectClsStyles } from "../utils/injectStyles";
 export const DashboardContext = createContext(null);
 export const useDashboardContext = () => {
     const context = React.useContext(DashboardContext);
@@ -38,6 +39,10 @@ export const DashboardProvider = ({ children, config, locale, translations, auto
         ...config,
         locale: locale || config.locale || "en",
     }), [config, locale]);
+    // Inject CLS fix styles on mount (only once globally)
+    useEffect(() => {
+        injectClsStyles();
+    }, []);
     // Register this provider
     useEffect(() => {
         const providerId = providerIdRef.current;

package/dist/utils/cls-monitor.d.ts

@@ -0,0 +1,50 @@
+/**
+ * CLS (Cumulative Layout Shift) Monitoring Utility
+ * Tracks and reports layout shifts for performance optimization
+ */
+interface LayoutShiftEntry extends PerformanceEntry {
+    value: number;
+    hadRecentInput: boolean;
+    sources?: Array<{
+        node?: Node;
+        previousRect: DOMRectReadOnly;
+        currentRect: DOMRectReadOnly;
+    }>;
+}
+export interface CLSMetrics {
+    value: number;
+    entries: LayoutShiftEntry[];
+    timestamp: number;
+}
+export interface CLSMonitorOptions {
+    threshold?: number;
+    onShift?: (metrics: CLSMetrics) => void;
+    onThresholdExceeded?: (metrics: CLSMetrics) => void;
+    debug?: boolean;
+    reportToConsole?: boolean;
+    reportToAnalytics?: (metrics: CLSMetrics) => void;
+}
+export declare class CLSMonitor {
+    private observer;
+    private clsValue;
+    private clsEntries;
+    private options;
+    private sessionValue;
+    private sessionEntries;
+    private lastShiftTime;
+    private readonly SESSION_GAP;
+    constructor(options?: CLSMonitorOptions);
+    start(): void;
+    private processLayoutShift;
+    private logShift;
+    stop(): void;
+    reset(): void;
+    getCurrentCLS(): CLSMetrics;
+    private supportsLayoutShift;
+    static identifyProblematicElements(entries: LayoutShiftEntry[]): Element[];
+    static getAttribution(entries: LayoutShiftEntry[]): Map<string, number>;
+}
+export declare function startCLSMonitoring(options?: CLSMonitorOptions): CLSMonitor;
+export declare function stopCLSMonitoring(): void;
+export declare function getCLSMetrics(): CLSMetrics | null;
+export {};

package/dist/utils/cls-monitor.js

@@ -0,0 +1,184 @@
+/**
+ * CLS (Cumulative Layout Shift) Monitoring Utility
+ * Tracks and reports layout shifts for performance optimization
+ */
+export class CLSMonitor {
+    constructor(options = {}) {
+        this.observer = null;
+        this.clsValue = 0;
+        this.clsEntries = [];
+        this.sessionValue = 0;
+        this.sessionEntries = [];
+        this.lastShiftTime = 0;
+        this.SESSION_GAP = 5000; // 5 seconds
+        this.options = {
+            threshold: options.threshold || 0.1, // Good CLS threshold
+            onShift: options.onShift || (() => { }),
+            onThresholdExceeded: options.onThresholdExceeded || (() => { }),
+            debug: options.debug || false,
+            reportToConsole: options.reportToConsole || false,
+            reportToAnalytics: options.reportToAnalytics || (() => { }),
+        };
+    }
+    start() {
+        if (!this.supportsLayoutShift()) {
+            console.warn('PerformanceObserver for layout-shift not supported');
+            return;
+        }
+        try {
+            this.observer = new PerformanceObserver((list) => {
+                const entries = list.getEntries();
+                for (const entry of entries) {
+                    // Ignore shifts with recent input (user-initiated)
+                    if (!entry.hadRecentInput) {
+                        this.processLayoutShift(entry);
+                    }
+                }
+            });
+            this.observer.observe({
+                type: 'layout-shift',
+                buffered: true
+            });
+            if (this.options.debug) {
+                console.log('CLS Monitor started');
+            }
+        }
+        catch (error) {
+            console.error('Failed to start CLS Monitor:', error);
+        }
+    }
+    processLayoutShift(entry) {
+        const now = Date.now();
+        // Check if this is part of a new session
+        if (now - this.lastShiftTime > this.SESSION_GAP) {
+            // Start new session
+            this.sessionValue = 0;
+            this.sessionEntries = [];
+        }
+        this.lastShiftTime = now;
+        this.sessionValue += entry.value;
+        this.sessionEntries.push(entry);
+        // Update cumulative value (max session value)
+        if (this.sessionValue > this.clsValue) {
+            this.clsValue = this.sessionValue;
+            this.clsEntries = [...this.sessionEntries];
+        }
+        const metrics = {
+            value: this.clsValue,
+            entries: this.clsEntries,
+            timestamp: now,
+        };
+        // Report shift
+        this.options.onShift(metrics);
+        // Check threshold
+        if (this.clsValue > this.options.threshold) {
+            this.options.onThresholdExceeded(metrics);
+        }
+        // Debug logging
+        if (this.options.debug || this.options.reportToConsole) {
+            this.logShift(entry, metrics);
+        }
+        // Report to analytics
+        this.options.reportToAnalytics(metrics);
+    }
+    logShift(entry, metrics) {
+        const affectedElements = entry.sources?.map(source => {
+            if (source.node && source.node.nodeType === 1) {
+                const element = source.node;
+                return {
+                    element: element.tagName,
+                    id: element.id,
+                    className: element.className,
+                    previousRect: source.previousRect,
+                    currentRect: source.currentRect,
+                };
+            }
+            return null;
+        }).filter(Boolean) || [];
+        console.group(`🎯 Layout Shift Detected`);
+        console.log('Shift Value:', entry.value.toFixed(4));
+        console.log('Session CLS:', this.sessionValue.toFixed(4));
+        console.log('Total CLS:', metrics.value.toFixed(4));
+        console.log('Threshold:', this.options.threshold);
+        console.log('Status:', metrics.value > this.options.threshold ? '❌ Bad' : '✅ Good');
+        if (affectedElements.length > 0) {
+            console.log('Affected Elements:', affectedElements);
+        }
+        console.groupEnd();
+    }
+    stop() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+            if (this.options.debug) {
+                console.log('CLS Monitor stopped');
+            }
+        }
+    }
+    reset() {
+        this.clsValue = 0;
+        this.clsEntries = [];
+        this.sessionValue = 0;
+        this.sessionEntries = [];
+        this.lastShiftTime = 0;
+    }
+    getCurrentCLS() {
+        return {
+            value: this.clsValue,
+            entries: this.clsEntries,
+            timestamp: Date.now(),
+        };
+    }
+    supportsLayoutShift() {
+        return typeof PerformanceObserver !== 'undefined' &&
+            PerformanceObserver.supportedEntryTypes?.includes('layout-shift');
+    }
+    // Helper method to identify problematic elements
+    static identifyProblematicElements(entries) {
+        const problematicElements = new Set();
+        for (const entry of entries) {
+            if (entry.sources) {
+                for (const source of entry.sources) {
+                    if (source.node && source.node.nodeType === 1) {
+                        problematicElements.add(source.node);
+                    }
+                }
+            }
+        }
+        return Array.from(problematicElements);
+    }
+    // Helper to get CLS attribution
+    static getAttribution(entries) {
+        const attribution = new Map();
+        for (const entry of entries) {
+            if (entry.sources) {
+                for (const source of entry.sources) {
+                    if (source.node && source.node.nodeType === 1) {
+                        const element = source.node;
+                        const key = `${element.tagName}${element.id ? '#' + element.id : ''}${element.className ? '.' + element.className.split(' ').join('.') : ''}`;
+                        attribution.set(key, (attribution.get(key) || 0) + entry.value);
+                    }
+                }
+            }
+        }
+        return attribution;
+    }
+}
+// Singleton instance for easy global usage
+let globalMonitor = null;
+export function startCLSMonitoring(options) {
+    if (!globalMonitor) {
+        globalMonitor = new CLSMonitor(options);
+        globalMonitor.start();
+    }
+    return globalMonitor;
+}
+export function stopCLSMonitoring() {
+    if (globalMonitor) {
+        globalMonitor.stop();
+        globalMonitor = null;
+    }
+}
+export function getCLSMetrics() {
+    return globalMonitor ? globalMonitor.getCurrentCLS() : null;
+}

package/dist/utils/injectStyles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Automatically inject CLS fix styles into the document
+ * This ensures the styles are always applied without requiring manual imports
+ */
+export declare const polarisClsFixStyles = "\n/* Critical Polaris CLS Fixes */\n.Polaris-ShadowBevel {\n  min-height: inherit !important;\n  will-change: contents;\n}\n\n.Polaris-Card {\n  min-height: 100px;\n  contain: layout style;\n}\n\n.Polaris-Tabs__Panel {\n  min-height: 350px;\n  contain: layout;\n}\n\n.Polaris-Tabs__TabPanel {\n  min-height: inherit;\n}\n\n.Polaris-Box {\n  /* Prevent height changes from dynamic content */\n  contain: style;\n}\n\n/* Skeleton state improvements */\n.Polaris-SkeletonBodyText,\n.Polaris-SkeletonDisplayText,\n.Polaris-SkeletonThumbnail {\n  animation: none !important;\n  background: linear-gradient(\n    90deg,\n    #f0f0f0 25%,\n    #f8f8f8 50%,\n    #f0f0f0 75%\n  );\n  background-size: 200% 100%;\n  animation: pulse 1.5s ease-in-out infinite !important;\n}\n\n@keyframes pulse {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* Prevent layout shifts from Polaris transitions */\n.Polaris-Card,\n.Polaris-Banner,\n.Polaris-CalloutCard {\n  transform: translateZ(0);\n  will-change: transform;\n}\n\n/* Fix for navigation tabs */\n.custom-tabs-wrapper-dashboard {\n  min-height: 400px;\n}\n\n/* GPU acceleration for transforms */\n[style*=\"transform\"] {\n  will-change: transform;\n}\n";
+/**
+ * Inject CLS fix styles into the document head
+ * This is called automatically when the SDK initializes
+ */
+export declare function injectClsStyles(): void;
+/**
+ * Remove injected styles (for cleanup)
+ */
+export declare function removeClsStyles(): void;

package/dist/utils/injectStyles.js

@@ -0,0 +1,105 @@
+/**
+ * Automatically inject CLS fix styles into the document
+ * This ensures the styles are always applied without requiring manual imports
+ */
+const STYLE_ID = 'ts-shopify-polaris-cls-fixes';
+export const polarisClsFixStyles = `
+/* Critical Polaris CLS Fixes */
+.Polaris-ShadowBevel {
+  min-height: inherit !important;
+  will-change: contents;
+}
+
+.Polaris-Card {
+  min-height: 100px;
+  contain: layout style;
+}
+
+.Polaris-Tabs__Panel {
+  min-height: 350px;
+  contain: layout;
+}
+
+.Polaris-Tabs__TabPanel {
+  min-height: inherit;
+}
+
+.Polaris-Box {
+  /* Prevent height changes from dynamic content */
+  contain: style;
+}
+
+/* Skeleton state improvements */
+.Polaris-SkeletonBodyText,
+.Polaris-SkeletonDisplayText,
+.Polaris-SkeletonThumbnail {
+  animation: none !important;
+  background: linear-gradient(
+    90deg,
+    #f0f0f0 25%,
+    #f8f8f8 50%,
+    #f0f0f0 75%
+  );
+  background-size: 200% 100%;
+  animation: pulse 1.5s ease-in-out infinite !important;
+}
+
+@keyframes pulse {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Prevent layout shifts from Polaris transitions */
+.Polaris-Card,
+.Polaris-Banner,
+.Polaris-CalloutCard {
+  transform: translateZ(0);
+  will-change: transform;
+}
+
+/* Fix for navigation tabs */
+.custom-tabs-wrapper-dashboard {
+  min-height: 400px;
+}
+
+/* GPU acceleration for transforms */
+[style*="transform"] {
+  will-change: transform;
+}
+`;
+/**
+ * Inject CLS fix styles into the document head
+ * This is called automatically when the SDK initializes
+ */
+export function injectClsStyles() {
+    // Check if styles are already injected
+    if (typeof document === 'undefined') {
+        return; // SSR safety
+    }
+    if (document.getElementById(STYLE_ID)) {
+        return; // Already injected
+    }
+    // Create and inject style element
+    const styleElement = document.createElement('style');
+    styleElement.id = STYLE_ID;
+    styleElement.textContent = polarisClsFixStyles;
+    // Add to head (or body as fallback)
+    const target = document.head || document.body;
+    target.appendChild(styleElement);
+}
+/**
+ * Remove injected styles (for cleanup)
+ */
+export function removeClsStyles() {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const styleElement = document.getElementById(STYLE_ID);
+    if (styleElement) {
+        styleElement.remove();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datlv-trustshop/shopify-inapp-components",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "private": false,
   "description": "React TypeScript components for Shopify in-app dashboard content",
   "main": "dist/index.js",