@cimplify/sdk 0.23.0 → 0.24.0

package/dist/react.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { getVariantDisplayName, createCimplifyClient } from './chunk-3GSXQNWV.mjs';
-export { getVariantDisplayName } from './chunk-3GSXQNWV.mjs';
-import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-BYQPMSH2.mjs';
-import { isSupportedCurrency, formatPrice, parsePrice, getUnitPriceAtQuantity, isOnSale, getDiscountPercentage, getBasePrice, getPriceRange, formatPriceRange } from './chunk-OANVYH27.mjs';
+import { getVariantDisplayName, createCimplifyClient } from './chunk-H34GSEGR.mjs';
+export { getVariantDisplayName } from './chunk-H34GSEGR.mjs';
+import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-TBZLJPM4.mjs';
+import { isSupportedCurrency, formatPrice, parsePrice, getUnitPriceAtQuantity, isOnSale, getDiscountPercentage, getBasePrice, getPriceRange, formatPriceRange } from './chunk-E3HC2YAE.mjs';
 import React3, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { NumberField } from '@base-ui/react/number-field';
@@ -7482,21 +7482,713 @@ function useDebounce(value, delay) {
   }, [value, delay]);
   return debounced;
 }
+function TwoColumnGrid({
+  left,
+  right,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cimplify-product-layout-grid": true,
+      className: cn("grid lg:grid-cols-2 gap-8 lg:gap-12", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-cimplify-product-layout-media": true, children: left }),
+        /* @__PURE__ */ jsx("div", { "data-cimplify-product-layout-info": true, children: right })
+      ]
+    }
+  );
+}
+function MetadataStringList({
+  items,
+  label,
+  icon,
+  className
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-metadata-list": true, className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium", children: [
+      icon,
+      label
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-xs text-muted-foreground px-2.5 py-1 bg-muted",
+        children: item
+      },
+      `${item}-${i}`
+    )) })
+  ] });
+}
+function CustomAttributesTable({
+  attributes,
+  className
+}) {
+  if (!attributes || attributes.length === 0) return null;
+  const groups = /* @__PURE__ */ new Map();
+  for (const attr of attributes) {
+    const group = attr.group_name || "Details";
+    if (!groups.has(group)) groups.set(group, []);
+    groups.get(group).push(attr);
+  }
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-custom-attributes": true, className: cn("space-y-4", className), children: Array.from(groups.entries()).map(([groupName, attrs]) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h3", { "data-cimplify-attribute-group": true, className: "text-sm font-semibold mb-2", children: groupName }),
+    /* @__PURE__ */ jsx("div", { className: "border border-border divide-y divide-border", children: attrs.map((attr) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attr.name }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatAttributeValue(attr) })
+    ] }, attr.definition_id)) })
+  ] }, groupName)) });
+}
+function formatAttributeValue(attr) {
+  if (attr.value === null || attr.value === void 0) return "\u2014";
+  if (typeof attr.value === "boolean") return attr.value ? "Yes" : "No";
+  if (Array.isArray(attr.value)) return attr.value.join(", ");
+  if (typeof attr.value === "object" && "value" in attr.value) {
+    return `${attr.value.value}${attr.unit ? ` ${attr.unit}` : ""}`;
+  }
+  const str = String(attr.value);
+  return attr.unit ? `${str} ${attr.unit}` : str;
+}
+function PropertiesTable({
+  properties,
+  className
+}) {
+  if (!properties || properties.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-properties": true, className, children: /* @__PURE__ */ jsx("div", { className: "border border-border divide-y divide-border", children: properties.map((prop) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: prop.name }),
+    /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+      prop.values.filter(Boolean).join(", "),
+      prop.unit ? ` ${prop.unit}` : ""
+    ] })
+  ] }, prop.slug)) }) });
+}
+function TagPills({
+  tags,
+  className
+}) {
+  if (!tags || tags.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-tags": true, className: cn("flex flex-wrap gap-1.5", className), children: tags.map((tag) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "text-xs font-medium text-muted-foreground px-2.5 py-1 bg-muted rounded-full",
+      children: tag
+    },
+    tag
+  )) });
+}
+function InventoryBadge({
+  product,
+  className
+}) {
+  const status = product.inventory_status;
+  if (!status) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-inventory-badge": true, className: cn("flex items-center gap-2 text-sm", className), children: [
+    /* @__PURE__ */ jsx("span", { className: cn(
+      "w-2 h-2 rounded-full",
+      status.in_stock ? "bg-green-500" : "bg-red-500"
+    ) }),
+    /* @__PURE__ */ jsx("span", { className: status.in_stock ? "text-green-700 font-medium" : "text-red-700 font-medium", children: status.in_stock ? "In stock" : "Out of stock" }),
+    status.in_stock && status.stock_level != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      "\xB7 ",
+      status.stock_level.toLocaleString(),
+      " available"
+    ] }),
+    status.low_stock && /* @__PURE__ */ jsx("span", { className: "text-amber-600 font-medium", children: "\xB7 Low stock" })
+  ] });
+}
+function RelatedProductsSection({
+  products,
+  title = "You might also like",
+  renderImage,
+  className
+}) {
+  if (products.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-related": true, className: cn("mt-12 pt-8 border-t border-border", className), children: [
+    /* @__PURE__ */ jsx(
+      "h2",
+      {
+        "data-cimplify-product-layout-related-title": true,
+        className: "text-xl font-semibold mb-6",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(ProductGrid, { products, renderImage })
+  ] });
+}
+function getMetadataStringList(metadata, key) {
+  const value = metadata?.[key];
+  if (!Array.isArray(value)) return [];
+  return value.filter((item) => typeof item === "string");
+}
+function PriceRange({ product, className }) {
+  const { displayCurrency } = useCimplify();
+  const range = getPriceRange(product);
+  if (!range) return null;
+  return /* @__PURE__ */ jsx("span", { "data-cimplify-price-range": true, className, children: formatPriceRange(range.min, range.max, displayCurrency) });
+}
+function DefaultProductLayout({
+  product,
+  onAddToCart,
+  renderBreadcrumb,
+  relatedProducts,
+  showRelated = true,
+  className
+}) {
+  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const hasRange = product.quantity_pricing && product.quantity_pricing.length > 1 || product.variants && product.variants.length > 1;
+  const onSale = isOnSale(product);
+  const hasPhysicalDetails = product.sku || product.vendor || product.material;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "default", className: cn("space-y-8", className), children: [
+    renderBreadcrumb?.(product),
+    /* @__PURE__ */ jsx(
+      TwoColumnGrid,
+      {
+        left: /* @__PURE__ */ jsx(
+          ProductImageGallery,
+          {
+            images,
+            productName: product.name
+          }
+        ),
+        right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            product.vendor && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-widest", children: product.vendor }),
+            /* @__PURE__ */ jsx(TagPills, { tags: product.tags || [] })
+          ] }),
+          /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-baseline gap-3", children: hasRange ? /* @__PURE__ */ jsx(PriceRange, { product, className: "text-2xl font-extrabold" }) : onSale ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-extrabold" }),
+            /* @__PURE__ */ jsx(Price, { amount: getBasePrice(product), className: "text-lg text-muted-foreground line-through" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5", children: [
+              "Save ",
+              getDiscountPercentage(product),
+              "%"
+            ] })
+          ] }) : /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold" }) }),
+          /* @__PURE__ */ jsx(InventoryBadge, { product }),
+          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          hasPhysicalDetails && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-details": true, className: "space-y-1 text-sm text-muted-foreground", children: [
+            product.sku && /* @__PURE__ */ jsxs("p", { children: [
+              "SKU: ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: product.sku })
+            ] }),
+            product.barcode && /* @__PURE__ */ jsxs("p", { children: [
+              "Barcode: ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: product.barcode })
+            ] }),
+            product.material && /* @__PURE__ */ jsxs("p", { children: [
+              "Material: ",
+              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: product.material })
+            ] }),
+            product.vendor && /* @__PURE__ */ jsxs("p", { children: [
+              "Brand: ",
+              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: product.vendor })
+            ] }),
+            (product.length_mm || product.width_mm || product.height_mm) && /* @__PURE__ */ jsxs("p", { children: [
+              "Dimensions: ",
+              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: [product.length_mm, product.width_mm, product.height_mm].filter(Boolean).map((d) => `${(d / 10).toFixed(1)} cm`).join(" x ") })
+            ] }),
+            product.item_condition && product.item_condition !== "new" && /* @__PURE__ */ jsxs("p", { children: [
+              "Condition: ",
+              /* @__PURE__ */ jsx("span", { className: "text-foreground capitalize", children: product.item_condition })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
+          /* @__PURE__ */ jsx(PropertiesTable, { properties: product.properties || [] }),
+          /* @__PURE__ */ jsx(
+            ProductCustomizer,
+            {
+              product,
+              onAddToCart
+            }
+          )
+        ] })
+      }
+    ),
+    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsx(
+      RelatedProductsSection,
+      {
+        products: relatedProducts
+      }
+    )
+  ] });
+}
+var DIETARY_TAGS = /* @__PURE__ */ new Set([
+  "vegetarian",
+  "vegan",
+  "gluten-free",
+  "dairy-free",
+  "nut-free",
+  "spicy",
+  "halal",
+  "kosher",
+  "organic",
+  "sugar-free"
+]);
+function FoodProductLayout({
+  product,
+  onAddToCart,
+  renderBreadcrumb,
+  relatedProducts,
+  showRelated = true,
+  className
+}) {
+  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const allTags = product.tags || [];
+  const dietaryTags = allTags.filter((t) => DIETARY_TAGS.has(t));
+  const otherTags = allTags.filter((t) => !DIETARY_TAGS.has(t));
+  const ingredients = getMetadataStringList(product.metadata, "ingredients");
+  const pairings = getMetadataStringList(product.metadata, "pairings");
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "food", className: cn("space-y-8", className), children: [
+    renderBreadcrumb?.(product),
+    /* @__PURE__ */ jsx(
+      TwoColumnGrid,
+      {
+        left: /* @__PURE__ */ jsx(
+          ProductImageGallery,
+          {
+            images,
+            productName: product.name
+          }
+        ),
+        right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+            dietaryTags.map((tag) => /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full", children: tag }, tag)),
+            product.allergies && product.allergies.map((allergy) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded-full", children: [
+              "Contains ",
+              allergy
+            ] }, allergy))
+          ] }),
+          /* @__PURE__ */ jsx(TagPills, { tags: otherTags }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
+            /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold mt-2 block" })
+          ] }),
+          (product.calories != null || product.preparation_time_minutes != null) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-stats": true, className: "flex flex-wrap gap-4 py-3 border-y border-border", children: [
+            product.preparation_time_minutes != null && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("strong", { className: "text-foreground", children: [
+                product.preparation_time_minutes,
+                " min"
+              ] }),
+              " prep time"
+            ] }),
+            product.calories != null && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: product.calories }),
+              " calories"
+            ] })
+          ] }),
+          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          (ingredients.length > 0 || pairings.length > 0) && /* @__PURE__ */ jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(MetadataStringList, { items: ingredients, label: "Key Ingredients" }),
+            /* @__PURE__ */ jsx(MetadataStringList, { items: pairings, label: "Pairings" })
+          ] }),
+          /* @__PURE__ */ jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
+          /* @__PURE__ */ jsx(
+            ProductCustomizer,
+            {
+              product,
+              onAddToCart
+            }
+          )
+        ] })
+      }
+    ),
+    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsx(
+      RelatedProductsSection,
+      {
+        products: relatedProducts,
+        title: "You may also enjoy"
+      }
+    )
+  ] });
+}
+function WholesaleProductLayout({
+  product,
+  onAddToCart,
+  renderBreadcrumb,
+  relatedProducts,
+  showRelated = true,
+  className
+}) {
+  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "wholesale", className: cn("space-y-8", className), children: [
+    renderBreadcrumb?.(product),
+    /* @__PURE__ */ jsx(
+      TwoColumnGrid,
+      {
+        left: /* @__PURE__ */ jsx(
+          ProductImageGallery,
+          {
+            images,
+            productName: product.name
+          }
+        ),
+        right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsx(TagPills, { tags: product.tags || [] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            product.sku && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground font-medium uppercase tracking-wider mb-1", children: [
+              "SKU: ",
+              product.sku
+            ] }),
+            /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name })
+          ] }),
+          /* @__PURE__ */ jsx("div", { children: hasTiers ? /* @__PURE__ */ jsx(PriceRange, { product, className: "text-2xl font-extrabold" }) : /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold" }) }),
+          /* @__PURE__ */ jsx(InventoryBadge, { product }),
+          product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-moq": true, className: "flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 text-sm text-amber-800", children: [
+            "Minimum order quantity: ",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              product.min_order_quantity,
+              " units"
+            ] })
+          ] }),
+          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          hasTiers && /* @__PURE__ */ jsx(
+            VolumePricing,
+            {
+              tiers: product.quantity_pricing,
+              defaultOpen: true
+            }
+          ),
+          (product.sku || product.barcode || product.vendor) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-details": true, className: "space-y-1 text-sm text-muted-foreground", children: [
+            product.barcode && /* @__PURE__ */ jsxs("p", { children: [
+              "Barcode: ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: product.barcode })
+            ] }),
+            product.vendor && /* @__PURE__ */ jsxs("p", { children: [
+              "Supplier: ",
+              /* @__PURE__ */ jsx("span", { className: "text-foreground", children: product.vendor })
+            ] }),
+            product.hs_code && /* @__PURE__ */ jsxs("p", { children: [
+              "HS Code: ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: product.hs_code })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
+          /* @__PURE__ */ jsx(PropertiesTable, { properties: product.properties || [] }),
+          /* @__PURE__ */ jsx(
+            ProductCustomizer,
+            {
+              product,
+              onAddToCart
+            }
+          )
+        ] })
+      }
+    ),
+    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsx(
+      RelatedProductsSection,
+      {
+        products: relatedProducts,
+        title: "Related products"
+      }
+    )
+  ] });
+}
+function formatMinutes(minutes) {
+  if (minutes >= 1440) return `${Math.floor(minutes / 1440)} day${minutes >= 2880 ? "s" : ""}`;
+  if (minutes >= 60) {
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    return m > 0 ? `${h}h ${m}min` : `${h} hour${h > 1 ? "s" : ""}`;
+  }
+  return `${minutes} min`;
+}
+function ServiceProductLayout({
+  product,
+  onAddToCart,
+  renderBreadcrumb,
+  relatedProducts,
+  showRelated = true,
+  className
+}) {
+  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
+  const depositAmount = hasDeposit ? parsePrice(product.deposit_amount) : 0;
+  const cancellationHours = product.cancellation_window_minutes ? Math.floor(product.cancellation_window_minutes / 60) : null;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "service", className: cn("space-y-8", className), children: [
+    renderBreadcrumb?.(product),
+    /* @__PURE__ */ jsx(
+      TwoColumnGrid,
+      {
+        left: /* @__PURE__ */ jsx(
+          ProductImageGallery,
+          {
+            images,
+            productName: product.name
+          }
+        ),
+        right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsx(TagPills, { tags: product.tags || [] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
+            /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-bold text-primary mt-2 block" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-service-info": true, className: "flex flex-wrap gap-2", children: [
+            product.duration_minutes != null && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: formatMinutes(product.duration_minutes) }),
+            hasDeposit && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: [
+              /* @__PURE__ */ jsx(Price, { amount: depositAmount }),
+              " deposit"
+            ] }),
+            product.general_service_capacity != null && product.general_service_capacity > 1 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: [
+              "Up to ",
+              product.general_service_capacity,
+              " people"
+            ] }),
+            product.buffer_before_minutes != null && product.buffer_before_minutes > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: [
+              product.buffer_before_minutes,
+              " min buffer"
+            ] })
+          ] }),
+          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          (product.requires_specific_staff || product.requires_specific_resource) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-requirements": true, className: "text-sm text-muted-foreground space-y-1", children: [
+            product.requires_specific_staff && /* @__PURE__ */ jsx("p", { children: "Staff selection required" }),
+            product.requires_specific_resource && /* @__PURE__ */ jsx("p", { children: "Resource selection required" })
+          ] }),
+          /* @__PURE__ */ jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
+          /* @__PURE__ */ jsx(
+            ProductCustomizer,
+            {
+              product,
+              onAddToCart,
+              showSpecialInstructions: false
+            }
+          ),
+          (cancellationHours != null || product.no_show_fee) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-cancellation": true, className: "border border-border p-4 space-y-2 text-sm", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Cancellation Policy" }),
+            cancellationHours != null && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+              "Free cancellation up to ",
+              /* @__PURE__ */ jsxs("strong", { className: "text-foreground", children: [
+                cancellationHours,
+                " hours"
+              ] }),
+              " before the appointment"
+            ] }),
+            product.no_show_fee && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
+              "No-show fee: ",
+              /* @__PURE__ */ jsx(Price, { amount: product.no_show_fee, className: "font-medium text-foreground" })
+            ] }),
+            hasDeposit && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: product.deposit_type === "fixed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Price, { amount: depositAmount, className: "font-medium text-foreground" }),
+              " deposit charged at booking"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              parsePrice(product.deposit_amount),
+              "% deposit charged at booking"
+            ] }) })
+          ] })
+        ] })
+      }
+    ),
+    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsx(
+      RelatedProductsSection,
+      {
+        products: relatedProducts,
+        title: "Other services"
+      }
+    )
+  ] });
+}
+var DIGITAL_TYPE_LABELS = {
+  download: "Digital download",
+  license: "Software license",
+  event_ticket: "Event ticket",
+  access_pass: "Access pass",
+  gift_card: "Gift card"
+};
+function DigitalProductLayout({
+  product,
+  onAddToCart,
+  renderBreadcrumb,
+  relatedProducts,
+  showRelated = true,
+  className
+}) {
+  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const typeLabel = product.digital_type ? DIGITAL_TYPE_LABELS[product.digital_type] || product.digital_type : "Digital product";
+  const isTicket = product.digital_type === "event_ticket";
+  const isAccessPass = product.digital_type === "access_pass";
+  const isDownload = product.digital_type === "download" || product.digital_type === "license";
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "digital", className: cn("space-y-8", className), children: [
+    renderBreadcrumb?.(product),
+    /* @__PURE__ */ jsx(
+      TwoColumnGrid,
+      {
+        left: /* @__PURE__ */ jsx(
+          ProductImageGallery,
+          {
+            images,
+            productName: product.name
+          }
+        ),
+        right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { "data-cimplify-product-layout-badge": true, className: "text-xs font-semibold uppercase tracking-wider text-primary bg-primary/10 px-2.5 py-1 rounded-full", children: typeLabel }),
+            /* @__PURE__ */ jsx(TagPills, { tags: product.tags || [] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-extrabold tracking-tight", children: product.name }),
+            /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-bold mt-2 block" })
+          ] }),
+          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          isDownload && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-delivery": true, className: "flex items-center gap-3 px-4 py-3 bg-muted rounded-lg", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-primary shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Instant delivery" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Download immediately after purchase" })
+            ] })
+          ] }),
+          isTicket && (product.event_date || product.venue) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-event": true, className: "border border-border p-4 space-y-2", children: [
+            product.event_date && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Date:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: new Date(product.event_date).toLocaleDateString(void 0, { weekday: "long", year: "numeric", month: "long", day: "numeric" }) })
+            ] }),
+            product.venue && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Venue:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: product.venue })
+            ] }),
+            product.ticket_type && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Type:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium capitalize", children: product.ticket_type })
+            ] })
+          ] }),
+          isAccessPass && (product.access_type || product.access_duration_days) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-access": true, className: "border border-border p-4 space-y-2", children: [
+            product.access_type && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Access:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium capitalize", children: product.access_type })
+            ] }),
+            product.access_level && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Level:" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium capitalize", children: product.access_level })
+            ] }),
+            product.access_duration_days && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Duration:" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+                product.access_duration_days,
+                " days"
+              ] })
+            ] })
+          ] }),
+          isDownload && (product.file_size_mb || product.file_type || product.version || product.max_downloads) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout-file-details": true, className: "grid grid-cols-2 gap-3", children: [
+            product.file_type && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-muted text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Format" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: product.file_type.toUpperCase() })
+            ] }),
+            product.file_size_mb != null && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-muted text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Size" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)} GB` : `${product.file_size_mb} MB` })
+            ] }),
+            product.max_downloads != null && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-muted text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Downloads" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: product.max_downloads })
+            ] }),
+            product.version && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-muted text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Version" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold", children: [
+                "v",
+                product.version
+              ] })
+            ] }),
+            product.download_expires_days != null && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-muted text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Expires" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold", children: [
+                product.download_expires_days,
+                " days"
+              ] })
+            ] }),
+            product.max_activations != null && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-muted text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Activations" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: product.max_activations })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
+          /* @__PURE__ */ jsx(
+            ProductCustomizer,
+            {
+              product,
+              onAddToCart,
+              showSpecialInstructions: false
+            }
+          )
+        ] })
+      }
+    ),
+    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsx(
+      RelatedProductsSection,
+      {
+        products: relatedProducts,
+        title: "More digital products"
+      }
+    )
+  ] });
+}
+var ProductTemplate = /* @__PURE__ */ ((ProductTemplate2) => {
+  ProductTemplate2["Default"] = "default";
+  ProductTemplate2["Food"] = "food";
+  ProductTemplate2["Wholesale"] = "wholesale";
+  ProductTemplate2["Service"] = "service";
+  ProductTemplate2["Digital"] = "digital";
+  ProductTemplate2["Physical"] = "physical";
+  return ProductTemplate2;
+})(ProductTemplate || {});
+var BUILT_IN_LAYOUTS = {
+  ["food" /* Food */]: FoodProductLayout,
+  ["wholesale" /* Wholesale */]: WholesaleProductLayout,
+  ["service" /* Service */]: ServiceProductLayout,
+  ["digital" /* Digital */]: DigitalProductLayout,
+  ["default" /* Default */]: DefaultProductLayout
+};
+function resolveTemplateKey(product) {
+  const metaTemplate = product.metadata?.page_template;
+  if (typeof metaTemplate === "string" && metaTemplate.trim()) {
+    return metaTemplate.trim();
+  }
+  if (product.quantity_pricing && product.quantity_pricing.length > 1) {
+    return "wholesale" /* Wholesale */;
+  }
+  if (product.type === "service") {
+    return "service" /* Service */;
+  }
+  if (product.type === "digital") {
+    return "digital" /* Digital */;
+  }
+  if (product.render_hint === "food") {
+    return "food" /* Food */;
+  }
+  if (product.render_hint === "physical") {
+    return "physical" /* Physical */;
+  }
+  return "default" /* Default */;
+}
+function resolveLayout(product, pages, templates) {
+  if (pages?.[product.slug]) {
+    return pages[product.slug];
+  }
+  const key = resolveTemplateKey(product);
+  if (templates?.[key]) {
+    return templates[key];
+  }
+  if (BUILT_IN_LAYOUTS[key]) {
+    return BUILT_IN_LAYOUTS[key];
+  }
+  return DefaultProductLayout;
+}
 function ProductPage({
   productId,
   product: productProp,
-  relatedProducts,
+  pages,
+  templates,
   onAddToCart,
   renderImage,
-  showAvailability = true,
-  showSaleBadge = true,
+  renderBreadcrumb,
+  relatedProducts,
   showRelated = true,
-  relatedTitle = "You might also like",
   className,
   classNames
 }) {
-  const { product: fetched, isLoading } = useProduct(productId, {
-    enabled: !productProp
+  const resolvedId = productId || productProp?.slug || productProp?.id || "";
+  const { product: fetched, isLoading } = useProduct(resolvedId, {
+    enabled: !productProp && resolvedId.length > 0
   });
   const product = productProp ?? fetched;
   if (isLoading && !product) {
@@ -7506,41 +8198,34 @@ function ProductPage({
         "data-cimplify-product-page": true,
         "aria-busy": "true",
         className: cn(className, classNames?.root, classNames?.loading),
-        children: /* @__PURE__ */ jsxs("div", { "data-cimplify-product-page-skeleton": true, style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
-          /* @__PURE__ */ jsx("div", { style: { aspectRatio: "4/3", backgroundColor: "rgba(0,0,0,0.06)", borderRadius: "0.5rem" } }),
-          /* @__PURE__ */ jsx("div", { style: { height: "2rem", width: "60%", backgroundColor: "rgba(0,0,0,0.06)", borderRadius: "0.25rem" } }),
-          /* @__PURE__ */ jsx("div", { style: { height: "1rem", width: "30%", backgroundColor: "rgba(0,0,0,0.06)", borderRadius: "0.25rem" } })
+        children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-2 gap-8 lg:gap-12 animate-pulse", children: [
+          /* @__PURE__ */ jsx("div", { className: "aspect-square bg-muted" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-8 w-3/5 bg-muted" }),
+            /* @__PURE__ */ jsx("div", { className: "h-6 w-2/5 bg-muted" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-4/5 bg-muted" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-3/5 bg-muted" }),
+            /* @__PURE__ */ jsx("div", { className: "h-14 w-full bg-muted mt-8" })
+          ] })
         ] })
       }
     );
   }
   if (!product) {
-    return /* @__PURE__ */ jsx("div", { "data-cimplify-product-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsx("p", { children: "Product not found." }) });
+    return /* @__PURE__ */ jsx("div", { "data-cimplify-product-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Product not found." }) });
   }
-  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-page": true, className: cn(className, classNames?.root), children: [
-    (showAvailability || showSaleBadge) && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-page-badges": true, className: classNames?.badges, children: [
-      showAvailability && /* @__PURE__ */ jsx(AvailabilityBadge, { product }),
-      showSaleBadge && /* @__PURE__ */ jsx(SaleBadge, { product })
-    ] }),
-    /* @__PURE__ */ jsx("div", { "data-cimplify-product-page-main": true, className: classNames?.main, children: /* @__PURE__ */ jsx(
-      ProductSheet,
-      {
-        product,
-        onAddToCart,
-        renderImage
-      }
-    ) }),
-    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-product-page-related": true, className: classNames?.relatedSection, children: [
-      /* @__PURE__ */ jsx("h2", { "data-cimplify-product-page-related-title": true, className: classNames?.relatedTitle, children: relatedTitle }),
-      /* @__PURE__ */ jsx(
-        ProductGrid,
-        {
-          products: relatedProducts,
-          renderImage
-        }
-      )
-    ] })
-  ] });
+  const Layout = resolveLayout(product, pages, templates);
+  return /* @__PURE__ */ jsx("div", { "data-cimplify-product-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsx(
+    Layout,
+    {
+      product,
+      onAddToCart,
+      renderImage,
+      renderBreadcrumb,
+      relatedProducts,
+      showRelated
+    }
+  ) });
 }
 function CartPage({
   title = "Your Cart",
@@ -8570,12 +9255,6 @@ function RecentlyViewed({
     product.product_id
   )) });
 }
-function PriceRange({ product, className }) {
-  const { displayCurrency } = useCimplify();
-  const range = getPriceRange(product);
-  if (!range) return null;
-  return /* @__PURE__ */ jsx("span", { "data-cimplify-price-range": true, className, children: formatPriceRange(range.min, range.max, displayCurrency) });
-}
 function DeliveryEstimate({
   latitude,
   longitude,
@@ -8723,4 +9402,4 @@ function CurrencySelector({
   }) });
 }
 
-export { Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleSelector, CartPage, CartSummary, CataloguePage, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyCheckout, CimplifyProvider, CollectionPage, CompositeSelector, CurrencySelector, DateSlotPicker, DealBanner, DealsPage, DeliveryEstimate, DiscountInput, ElementsProvider, LocationPicker, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, QuantitySelector, RecentlyViewed, RecommendationCarousel, ResourcePicker, SaleBadge, SearchInput, SearchPage, ServiceCard, ServiceGrid, SessionMessageBanner, SlotPicker, StaffPicker, StoreNav, VariantSelector, VolumePricing, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleSelector, CartPage, CartSummary, CataloguePage, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyCheckout, CimplifyProvider, CollectionPage, CompositeSelector, CurrencySelector, CustomAttributesTable, DateSlotPicker, DealBanner, DealsPage, DefaultProductLayout, DeliveryEstimate, DigitalProductLayout, DiscountInput, ElementsProvider, FoodProductLayout, InventoryBadge, LocationPicker, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, ResourcePicker, SaleBadge, SearchInput, SearchPage, ServiceCard, ServiceGrid, ServiceProductLayout, SessionMessageBanner, SlotPicker, StaffPicker, StoreNav, TagPills, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductLayout, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };