@salla.sa/twilight-theme-engine 1.0.0-beta.4

package/dist/chunk-NSX6XPDU.js

@@ -0,0 +1,673 @@
+import { product } from './chunk-OZTGUF7K.js';
+import { ProductCard } from './chunk-RH32IGQD.js';
+import { registry } from './chunk-G7ALL4BC.js';
+import { useTranslation } from './chunk-VVRYP6IL.js';
+import { Image, LazyRenderWhenVisible } from './chunk-2KF5JJU6.js';
+import { Link } from './chunk-TZ4YD5CU.js';
+import { TwilightContext } from './chunk-BWFBVXT3.js';
+import { memo, useState, useCallback, useEffect, lazy, Component, useRef, useMemo, Suspense } from 'react';
+import { SallaProductsSlider, SallaProductsList, ProductsSliderSkeleton, ListSkeleton, SliderSkeleton, BackgroundSliderSkeleton, BulletDeliverySkeleton, ReviewItemSkeleton, FixedProductsSkeleton, Pulse } from '@salla.sa/twilight-components-react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useQuery } from '@tanstack/react-query';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaSlider } from '@salla.sa/twilight-components-react/slider';
+
+function ProductsSlider({ data }) {
+  const { t } = useTranslation();
+  const {
+    products,
+    title,
+    display_all_url: displayAllUrl,
+    position = 1,
+    priority = false,
+    show_controls: showControls,
+    controls_outer: controlsOuter,
+    loop,
+    centered,
+    slides_per_view: slidesPerView,
+    direction,
+    autoplay
+  } = data;
+  const sliderProps = useMemo(
+    () => ({
+      id: `slider-${position}`,
+      displayAllTitle: t("blocks.home.display_all", "View All"),
+      ...showControls !== void 0 && { showControls },
+      ...controlsOuter !== void 0 && { controlsOuter },
+      ...loop !== void 0 && { loop },
+      ...centered !== void 0 && { centered },
+      ...slidesPerView !== void 0 && { slidesPerView },
+      ...direction !== void 0 && { direction }
+    }),
+    [position, t, showControls, controlsOuter, loop, centered, slidesPerView, direction]
+  );
+  const loader = useCallback(
+    () => product.list({
+      source: products.source,
+      sourceValue: products.source_value
+    }),
+    [products.source, products.source_value]
+  );
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ProductsSliderSkeleton, {}), children: /* @__PURE__ */ jsx(
+    SallaProductsSlider,
+    {
+      id: `best-offers-${position}-slider`,
+      loader,
+      sliderProps,
+      ...displayAllUrl ? { displayAllUrl } : {},
+      ...title ? { blockTitle: title } : {},
+      ...autoplay !== void 0 ? { autoplay } : {},
+      skeleton: /* @__PURE__ */ jsx(ProductsSliderSkeleton, {}),
+      children: (product2, index) => /* @__PURE__ */ jsx(ProductCard, { product: product2, imagePriority: priority && index < 2 })
+    }
+  ) });
+}
+var StoreFeatures = memo(function StoreFeatures2({ data }) {
+  const { features } = data;
+  if (!features.length) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(2,minmax(0,1fr))] md:grid-cols-[repeat(3,minmax(0,1fr))] gap-4 sm:gap-6 xl:gap-8", children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "s-block--features__item", children: [
+    /* @__PURE__ */ jsx("div", { className: "feature-icon", children: /* @__PURE__ */ jsx("i", { className: feature.icon }) }),
+    /* @__PURE__ */ jsx("h2", { children: feature.title }),
+    /* @__PURE__ */ jsx("p", { children: feature.description })
+  ] }, index)) }) });
+});
+var FixedBanner = memo(function FixedBanner2(props) {
+  const { data, priority = false } = props;
+  const image = data.image?.url;
+  if (!image) {
+    return null;
+  }
+  const url = data.url;
+  const altText = data.image.alt?.trim() ? data.image.alt : data.title || "fixed banner";
+  const imgProps = priority ? {
+    loading: "eager",
+    fetchPriority: "high",
+    decoding: "sync"
+  } : {
+    loading: "lazy",
+    decoding: "async"
+  };
+  const smallUrl = data.image.small_url;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx(
+    Link,
+    {
+      to: url || "#",
+      className: "banner banner--fixed overflow-hidden",
+      "aria-label": `Banner ${altText}`,
+      children: /* @__PURE__ */ jsxs("picture", { children: [
+        smallUrl && /* @__PURE__ */ jsx("source", { media: "(max-width: 767px)", srcSet: smallUrl }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            width: "1200",
+            height: "300",
+            src: image,
+            alt: altText,
+            style: { maxWidth: "100%", objectFit: "contain" },
+            loading: imgProps.loading,
+            decoding: imgProps.decoding,
+            ...priority && { fetchPriority: imgProps.fetchPriority }
+          }
+        )
+      ] })
+    }
+  ) }) });
+});
+function FixedProducts({ data }) {
+  const { t } = useTranslation();
+  const title = data.title;
+  const limit = data.limit ? Number(data.limit) : void 0;
+  const isVertical = data.isVertical ?? true;
+  const { data: result, isLoading } = useQuery(
+    product.queries.list({
+      source: data.products.source,
+      sourceValue: data.products?.source_value,
+      perPage: limit
+    })
+  );
+  const products = result?.items ?? [];
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(FixedProductsSkeleton, {});
+  }
+  if (!products.length) return null;
+  return /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx(FixedProductsSkeleton, {}), children: [
+    title && /* @__PURE__ */ jsxs("div", { className: "s-block__title", children: [
+      /* @__PURE__ */ jsx("div", { className: "right-side", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
+      data.display_all_url && /* @__PURE__ */ jsxs(Link, { to: data.display_all_url, className: "s-block__display-all", children: [
+        t("blocks.home.display_all", "View All"),
+        /* @__PURE__ */ jsx("i", { className: "sicon-arrow-left" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "s-products-list-wrapper " + (isVertical ? "s-products-list-vertical-cards" : "s-products-list-horizontal-cards"),
+        children: products.slice(0, 4).map((product2) => /* @__PURE__ */ jsx(ProductCard, { product: product2 }, product2.id))
+      }
+    )
+  ] });
+}
+var FeaturedProductsStyle1 = memo(function FeaturedProductsStyle12({
+  data
+}) {
+  const items = data.items || [];
+  const mainProduct = data.main_product;
+  const [activeTab, setActiveTab] = useState(items[0]?.id || "");
+  const [isAnimating, setIsAnimating] = useState(false);
+  const handleTabClick = useCallback(
+    (tabId) => {
+      if (tabId === activeTab) return;
+      setIsAnimating(true);
+      setActiveTab(tabId);
+      setTimeout(() => setIsAnimating(false), 100);
+    },
+    [activeTab]
+  );
+  if (!items.length) return null;
+  const hasMultipleSections = items.length > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "s-block__title", children: [
+      /* @__PURE__ */ jsx("div", { className: "right-side", children: /* @__PURE__ */ jsx("h2", { children: mainProduct?.title }) }),
+      hasMultipleSections && /* @__PURE__ */ jsx("div", { className: "tabs hide-scroll hidden lg:flex", children: items.map((section) => /* @__PURE__ */ jsx(
+        SallaButton,
+        {
+          shape: "link",
+          onClick: () => handleTabClick(section.id || ""),
+          className: `tab-trigger ${activeTab === section.id ? "is-active" : ""}`,
+          children: section.title || section.name
+        },
+        section.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `grid grid-cols-1 gap-8 ${mainProduct?.product ? "lg:grid-cols-2" : ""}`, children: [
+      mainProduct?.product && /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx(
+        "custom-salla-product-card",
+        {
+          "shadow-on-hover": true,
+          product: JSON.stringify(mainProduct.product),
+          isSpecial: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        hasMultipleSections && /* @__PURE__ */ jsx("div", { className: "tabs mb-4 sm:mb-8 hide-scroll lg:hidden", children: items.map((section) => /* @__PURE__ */ jsx(
+          SallaButton,
+          {
+            shape: "link",
+            onClick: () => handleTabClick(section.id || ""),
+            className: `tab-trigger ${activeTab === section.id ? "is-active" : ""}`,
+            children: section.title || section.name
+          },
+          section.id
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "tabs-wrapper flex flex-1", children: items.map((section) => {
+          const isActive = activeTab === section.id;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `tabs__item grid-cols-2 ${mainProduct?.product ? "" : "lg:grid-cols-4"} ${isActive ? "is-active" : ""} ${isAnimating && isActive ? "opacity-0 translate-y-3" : ""} ${!isAnimating && isActive ? "opacity-100 translate-y-0" : ""}`,
+              children: section.products?.slice(0, mainProduct?.product ? 4 : 8).map((product2, productIndex) => /* @__PURE__ */ jsx(
+                "custom-salla-product-card",
+                {
+                  product: JSON.stringify(product2)
+                },
+                product2.id || productIndex
+              ))
+            },
+            section.id
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+});
+var FeaturedProductsStyle2 = memo(function FeaturedProductsStyle22({
+  data
+}) {
+  const items = data.items || [];
+  const isSlider = data.is_slider ?? true;
+  const [activeTab, setActiveTab] = useState(items[0]?.id || "");
+  const [isAnimating, setIsAnimating] = useState(false);
+  const handleTabClick = useCallback(
+    (tabId) => {
+      if (tabId === activeTab) return;
+      setIsAnimating(true);
+      setActiveTab(tabId);
+      setTimeout(() => setIsAnimating(false), 100);
+    },
+    [activeTab]
+  );
+  const loader = useCallback(
+    (source, value, limit) => {
+      return () => product.list({
+        source,
+        sourceValue: value,
+        perPage: limit
+      });
+    },
+    []
+  );
+  if (!items.length) return null;
+  const hasMultipleSections = items.length > 1;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    hasMultipleSections && /* @__PURE__ */ jsx("div", { className: "tabs hide-scroll", children: items.map((section) => /* @__PURE__ */ jsx(
+      SallaButton,
+      {
+        fill: "outline",
+        onClick: () => handleTabClick(section.id || ""),
+        className: `tab-trigger ${activeTab === section.id ? "is-active" : ""}`,
+        children: section.title || section.name
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "tabs-wrapper", children: items.map((section) => {
+      const isActive = activeTab === section.id;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `tabs__item ${isActive ? "is-active" : ""} ${isAnimating && isActive ? "opacity-0 translate-y-3" : ""} ${!isAnimating && isActive ? "opacity-100 translate-y-0" : ""}`,
+          children: isSlider ? /* @__PURE__ */ jsx(
+            SallaProductsSlider,
+            {
+              loader: loader(
+                section.products.source,
+                section.products?.source_value,
+                section.products?.limit
+              ),
+              sliderProps: { id: `section-${section.id}-slider` },
+              children: (product2) => /* @__PURE__ */ jsx(ProductCard, { className: "s-products-slider-card", product: product2 })
+            }
+          ) : /* @__PURE__ */ jsx(
+            SallaProductsList,
+            {
+              loader: loader(
+                section.products.source,
+                section.products?.source_value,
+                section.products?.limit
+              ),
+              itemsClassName: "s-products-list-horizontal-cards",
+              children: (products) => products.map((product2) => /* @__PURE__ */ jsx(ProductCard, { product: product2 }, product2.id))
+            }
+          )
+        },
+        section.id
+      );
+    }) })
+  ] }) });
+});
+var FeaturedProductsStyle3 = memo(function FeaturedProductsStyle32({
+  data
+}) {
+  const items = data.items || [];
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "inner", children: items.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "s-block__title", children: /* @__PURE__ */ jsx("h2", { children: section.title }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 grid lg:grid-cols-2 gap-4 sm:gap-8", children: section.featured_product ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ProductCard, { product: section.featured_product, layout: "fullImage", withShadow: true }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:gap-8", children: section.products?.slice(0, 3).map((product2, idx) => /* @__PURE__ */ jsx(
+        ProductCard,
+        {
+          product: product2,
+          layout: "minimal",
+          withShadow: true,
+          index: idx
+        },
+        product2.id
+      )) })
+    ] }) : section.products?.map((product2, idx) => /* @__PURE__ */ jsx(
+      ProductCard,
+      {
+        product: product2,
+        layout: "minimal",
+        withShadow: true,
+        index: idx
+      },
+      product2.id
+    )) })
+  ] }, section.id || sectionIndex)) }) });
+});
+var ParallaxBackground = memo(function ParallaxBackground2({
+  data
+}) {
+  const { image, url, title, link_text: linkText, is_opacity: isOpacity = false } = data;
+  if (!image?.url) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "full-banner-entry", style: { backgroundImage: `url(${image.url})` }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `overlay h-full w-full ${isOpacity ? "bg-black" : ""} opacity-60 absolute top-0 left-0`
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-5 xs:p-11 relative", children: /* @__PURE__ */ jsxs("div", { children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold leading-12", children: title }),
+      url && linkText && /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: url,
+          className: "inline-block text-white text-sm border rounded-md font-bold px-8 py-4",
+          children: linkText
+        }
+      )
+    ] }) })
+  ] }) });
+});
+var PhotosSlider = memo(function PhotosSlider2({ data }) {
+  const items = data.items || [];
+  const position = data.position ?? 1;
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    SallaSlider,
+    {
+      type: "carousel",
+      className: "home-slider photos-slider",
+      centered: true,
+      autoPlay: true,
+      pagination: true,
+      id: `photos-${position}-slider`,
+      sliderConfig: { watchOverflow: true },
+      children: /* @__PURE__ */ jsx("div", { slot: "items", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "swiper-slide", style: { aspectRatio: "1200/300" }, children: /* @__PURE__ */ jsx(Link, { to: item.url || "#", children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: item.image,
+          className: "w-full h-full object-contain rounded-md",
+          alt: `image-slider-${index}`,
+          width: 1200,
+          height: 300,
+          priority: index === 0
+        }
+      ) }) }, index)) })
+    }
+  ) });
+});
+var SquarePhotos = memo(function SquarePhotos2({ data }) {
+  const items = data.items || [];
+  const title = data.title;
+  if (!items.length) return null;
+  const gridCols = items.length <= 3 ? `one-row md:grid-cols-${items.length}` : "md:grid-cols-3 two-row";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx("div", { className: "s-block__title", children: /* @__PURE__ */ jsx("div", { className: "right-side", children: /* @__PURE__ */ jsx("h2", { children: title }) }) }),
+    /* @__PURE__ */ jsx("div", { className: `grid ${gridCols} grid-flow-row gap-3 sm:gap-8`, children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        className: `banner-entry square-photos ${item.text ? "has-overlay with-hover" : ""}`,
+        style: { backgroundImage: `url(${item.image?.url})` },
+        to: item.url || "#",
+        ...item.link_type === "external_link" ? { target: "_blank" } : {},
+        children: item.text && /* @__PURE__ */ jsx("h3", { className: "text-with-border", children: /* @__PURE__ */ jsx("span", { children: item.text }) })
+      },
+      index
+    )) })
+  ] });
+});
+var Youtube = memo(function Youtube2({ data }) {
+  const { youtube_id: youtubeId } = data;
+  const [isLoaded, setIsLoaded] = useState(false);
+  useEffect(() => {
+    if (!youtubeId) return;
+    let mounted = true;
+    import('@justinribeiro/lite-youtube').then(() => {
+      if (mounted) setIsLoaded(true);
+    }).catch((err) => {
+      console.error("Failed to load lite-youtube:", err);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [youtubeId]);
+  if (!youtubeId) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "videoWrapper", children: isLoaded ? /* @__PURE__ */ jsx("lite-youtube", { videoid: youtubeId, params: "rel=0" }) : /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-gray-200 w-full h-full min-h-[300px] rounded" }) }) }) });
+});
+var BundleComponent = memo(function BundleComponent2(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  const { component_name: componentName, bundle_id: bundleId, ...rest } = props.data;
+  const config = JSON.stringify(rest);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    "salla-custom-component",
+    {
+      "component-name": componentName,
+      "bundle-id": bundleId,
+      config,
+      suppressHydrationWarning: true
+    }
+  ) });
+});
+
+// src/components/home/lazy.ts
+var LazyTestimonials = lazy(
+  () => import('./Testimonials-MZCVP66E.js').then((m) => ({ default: m.Testimonials }))
+);
+
+// src/components/home/register.ts
+var DefaultHomeComponents = {
+  "fixed-banner": FixedBanner,
+  "photos-slider": PhotosSlider,
+  testimonial: LazyTestimonials,
+  "store-features": StoreFeatures,
+  youtube: Youtube,
+  "square-photos": SquarePhotos,
+  "fixed-products": FixedProducts,
+  "products-slider": ProductsSlider,
+  "parallax-background": ParallaxBackground,
+  "featured-products:style1": FeaturedProductsStyle1,
+  "featured-products:style2": FeaturedProductsStyle2,
+  "featured-products:style3": FeaturedProductsStyle3,
+  "bundle-component": BundleComponent
+};
+function registerHomeComponents(components = DefaultHomeComponents, prefix = "home:") {
+  Object.entries(components).forEach(([path, component]) => {
+    if (component) {
+      registry.register(`${prefix}${path}`, component);
+    }
+  });
+}
+function DevelopmentErrorCard({ error, data }) {
+  return /* @__PURE__ */ jsxs("section", { dir: "ltr", className: "s-block container overflow-hidden bg-red-50 border border-red-300 p-4", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-red-800 text-sm font-bold", children: [
+      "Home Component Error: ",
+      data.path
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-red-700 text-sm mt-2", children: error.message }),
+    /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx("summary", { className: "text-xs cursor-pointer text-red-600", children: "Stack Trace" }),
+      /* @__PURE__ */ jsx("pre", { className: "text-xs mt-1 overflow-auto max-h-32 text-red-700", children: error.stack })
+    ] }),
+    /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx("summary", { className: "text-xs cursor-pointer text-red-600", children: "Component Data" }),
+      /* @__PURE__ */ jsx("pre", { className: "text-xs mt-1 overflow-auto max-h-32 text-red-700", children: JSON.stringify(data, null, 2) })
+    ] })
+  ] });
+}
+var ComponentErrorBoundary = class extends Component {
+  static {
+    this.contextType = TwilightContext;
+  }
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    if (!this.context) {
+      console.error("[ComponentErrorBoundary] Must be used within TwilightProvider");
+      return;
+    }
+    const { log } = this.context;
+    const { data, position } = this.props;
+    log.groupCollapsed(`HomeComponent Error: ${data.path || "unknown"}`);
+    log.error("ERROR", error.message);
+    log.label("COMPONENT", data.path || "unknown");
+    log.label("POSITION", position);
+    log.label("URL", typeof window !== "undefined" ? window.location.href : "SSR");
+    log.label("TIME", (/* @__PURE__ */ new Date()).toISOString());
+    log.trace("STACK TRACE", error.stack || "");
+    log.trace("COMPONENT STACK", errorInfo.componentStack || "");
+    log.dir("COMPONENT DATA", data);
+    log.groupEnd();
+  }
+  render() {
+    const { hasError, error } = this.state;
+    const { children, data } = this.props;
+    if (hasError && error) {
+      if (process.env.NODE_ENV === "production") {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(DevelopmentErrorCard, { error, data });
+    }
+    return children;
+  }
+};
+function SquareGridSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "s-block container grid grid-cols-2 sm:grid-cols-4 gap-4 py-8", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(Pulse, { className: "aspect-square" }, i)) });
+}
+var FallbackComponent = memo(function FallbackComponent2({ data }) {
+  if (process.env.NODE_ENV === "production") return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      dir: "ltr",
+      className: "s-block container overflow-hidden bg-yellow-50 border border-yellow-200 p-4",
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-yellow-800 text-sm", children: [
+          /* @__PURE__ */ jsx("strong", { children: "Unknown component:" }),
+          " ",
+          data.path
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-yellow-700 text-xs mt-1", children: [
+          "Register it in setup.ts: ",
+          /* @__PURE__ */ jsxs("code", { children: [
+            "registry.register('home:",
+            data.path,
+            "', YourComponent)"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
+          /* @__PURE__ */ jsx("summary", { className: "text-xs cursor-pointer", children: "Component Data" }),
+          /* @__PURE__ */ jsx("pre", { className: "text-xs mt-1 overflow-auto max-h-32", children: JSON.stringify(data, null, 2) })
+        ] })
+      ]
+    }
+  );
+});
+function getComponentByPath(data) {
+  const { path, view_style: viewStyle } = data;
+  if (viewStyle) {
+    const variantKey = `home:${path}:${viewStyle}`;
+    const variant = registry.resolve(variantKey);
+    if (variant) {
+      return variant;
+    }
+  }
+  const registryKey = `home:${path}`;
+  const component = registry.resolve(registryKey);
+  if (component) {
+    return component;
+  }
+  return FallbackComponent;
+}
+var COMPONENT_CONFIG = {
+  "products-slider": { height: "450px", placeholder: /* @__PURE__ */ jsx(ProductsSliderSkeleton, {}) },
+  "fixed-products": { height: "450px", placeholder: /* @__PURE__ */ jsx(FixedProductsSkeleton, {}) },
+  "featured-products": {
+    height: "450px",
+    placeholder: /* @__PURE__ */ jsx(ProductsSliderSkeleton, {}),
+    className: (data) => {
+      const style = data.view_style;
+      if (style === "style1")
+        return "s-block s-block--featured-products s-block-tabs s-block--special-products container tabs-initialized";
+      if (style === "style2")
+        return `s-block s-block--featured-products s-block-tabs s-block--tabs-produtcs s-block--full-bg tabs-initialized ${data.is_slider ? "as-slider" : "as-grid"} bg-gray-100 py-8 sm:py-16`;
+      if (style === "style3")
+        return `s-block s-block--featured-products s-block--features-products${Array.isArray(data.items) && data.items.length > 1 ? " two-cols" : ""} container`;
+      return "s-block s-block--featured-products container overflow-hidden";
+    },
+    id: (data) => `featured-products-${data.view_style}-${data.position ?? 0}`
+  },
+  testimonial: { height: "350px", placeholder: /* @__PURE__ */ jsx(ReviewItemSkeleton, {}) },
+  "store-features": { height: "200px", placeholder: /* @__PURE__ */ jsx(BulletDeliverySkeleton, {}) },
+  "parallax-background": { height: "500px", placeholder: /* @__PURE__ */ jsx(BackgroundSliderSkeleton, {}) },
+  "fixed-banner": { height: "350px", placeholder: /* @__PURE__ */ jsx(BackgroundSliderSkeleton, {}) },
+  "photos-slider": {
+    height: "clamp(130px, 30vw, 350px)",
+    placeholder: /* @__PURE__ */ jsx(SliderSkeleton, {}),
+    className: (data) => `s-block s-block--photos-slider${data.is_repeated ? " repeated-block" : ""}`
+  },
+  "square-photos": { height: "250px", placeholder: /* @__PURE__ */ jsx(SquareGridSkeleton, {}) },
+  youtube: { height: "350px", placeholder: /* @__PURE__ */ jsx(SliderSkeleton, {}) },
+  "bundle-component": {
+    height: "400px",
+    placeholder: /* @__PURE__ */ jsx(ProductsSliderSkeleton, {}),
+    className: (data) => `s-block s-block--bundle-${data.component_name}`
+  },
+  "main-links": {
+    height: "200px",
+    placeholder: /* @__PURE__ */ jsx(ListSkeleton, {}),
+    className: (data) => {
+      const mergeWithTop = data.merge_links_with_top_component;
+      const position = data.position;
+      return [
+        "s-block",
+        "s-block--main-links",
+        mergeWithTop && position ? "merge-with-top-component" : "",
+        !data.title && mergeWithTop ? "merged-has-no-title" : ""
+      ].filter(Boolean).join(" ");
+    }
+  },
+  "square-links": { height: "200px", placeholder: /* @__PURE__ */ jsx(SquareGridSkeleton, {}) }
+};
+var themeComponentConfig = {};
+function registerHomeComponentConfig(config) {
+  Object.assign(themeComponentConfig, config);
+}
+function resolveComponentConfig(path) {
+  return themeComponentConfig[path] ?? COMPONENT_CONFIG[path];
+}
+var HomeComponentRenderer = memo(function HomeComponentRenderer2({
+  data,
+  index
+}) {
+  const renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  if (process.env.NODE_ENV === "development") {
+    console.log(
+      `[HomeComponentRenderer] RENDER: path=${data.path}, index=${index}, renderCount=${renderCountRef.current}`
+    );
+  }
+  useEffect(() => {
+    console.log(
+      `[HomeComponentRenderer] MOUNT: path=${data.path}, index=${index}, renderCount=${renderCountRef.current}`
+    );
+    return () => {
+      console.log(`[HomeComponentRenderer] UNMOUNT: path=${data.path}, index=${index}`);
+    };
+  }, [data.path, index]);
+  const isFirstComponent = index <= 2;
+  const Component2 = getComponentByPath(data);
+  const config = resolveComponentConfig(data.path);
+  const resolvedClassName = config?.className ? typeof config.className === "function" ? config.className(data) : config.className : `s-block s-block--${data.path}`;
+  const resolvedId = config?.id ? typeof config.id === "function" ? config.id(data) : config.id : void 0;
+  const height = config?.height || "400px";
+  const content = /* @__PURE__ */ jsx(ComponentErrorBoundary, { data, position: index + 1, children: /* @__PURE__ */ jsx(Component2, { data: { ...data, position: index + 1, priority: isFirstComponent } }) });
+  return /* @__PURE__ */ jsx(
+    LazyRenderWhenVisible,
+    {
+      rootMargin: "50px",
+      className: resolvedClassName,
+      id: resolvedId,
+      estimatedHeight: height,
+      renderOnMount: isFirstComponent,
+      placeholder: config?.placeholder ?? /* @__PURE__ */ jsx(ProductsSliderSkeleton, {}),
+      children: content
+    }
+  );
+});
+
+export { BundleComponent, ComponentErrorBoundary, DefaultHomeComponents, FeaturedProductsStyle1, FeaturedProductsStyle2, FeaturedProductsStyle3, FixedBanner, FixedProducts, HomeComponentRenderer, LazyTestimonials, ParallaxBackground, PhotosSlider, ProductsSlider, SquarePhotos, StoreFeatures, Youtube, registerHomeComponentConfig, registerHomeComponents };
+//# sourceMappingURL=chunk-NSX6XPDU.js.map
+//# sourceMappingURL=chunk-NSX6XPDU.js.map