@cimplify/sdk 0.85.0 → 0.87.0

package/dist/utils.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var chunkL5GKVQVJ_js = require('./chunk-L5GKVQVJ.js');
-var chunk7Y2O3E4D_js = require('./chunk-7Y2O3E4D.js');
-require('./chunk-XA3ZNR75.js');
+var chunkPTPOQVXS_js = require('./chunk-PTPOQVXS.js');
+require('./chunk-AETVRBKI.js');
 require('./chunk-OWW5GUSB.js');
 
 
@@ -21,109 +21,109 @@ Object.defineProperty(exports, "resolvePhoneCountryCode", {
 });
 Object.defineProperty(exports, "CURRENCY_SYMBOLS", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.CURRENCY_SYMBOLS; }
+  get: function () { return chunkPTPOQVXS_js.CURRENCY_SYMBOLS; }
 });
 Object.defineProperty(exports, "MOBILE_MONEY_PROVIDERS", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.MOBILE_MONEY_PROVIDERS; }
+  get: function () { return chunkPTPOQVXS_js.MOBILE_MONEY_PROVIDERS; }
 });
 Object.defineProperty(exports, "categorizePaymentError", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.categorizePaymentError; }
+  get: function () { return chunkPTPOQVXS_js.categorizePaymentError; }
 });
 Object.defineProperty(exports, "detectMobileMoneyProvider", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.detectMobileMoneyProvider; }
+  get: function () { return chunkPTPOQVXS_js.detectMobileMoneyProvider; }
 });
 Object.defineProperty(exports, "formatMoney", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.formatMoney; }
+  get: function () { return chunkPTPOQVXS_js.formatMoney; }
 });
 Object.defineProperty(exports, "formatNumberCompact", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.formatNumberCompact; }
+  get: function () { return chunkPTPOQVXS_js.formatNumberCompact; }
 });
 Object.defineProperty(exports, "formatPrice", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.formatPrice; }
+  get: function () { return chunkPTPOQVXS_js.formatPrice; }
 });
 Object.defineProperty(exports, "formatPriceAdjustment", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.formatPriceAdjustment; }
+  get: function () { return chunkPTPOQVXS_js.formatPriceAdjustment; }
 });
 Object.defineProperty(exports, "formatPriceCompact", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.formatPriceCompact; }
+  get: function () { return chunkPTPOQVXS_js.formatPriceCompact; }
 });
 Object.defineProperty(exports, "formatPriceWithTax", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.formatPriceWithTax; }
+  get: function () { return chunkPTPOQVXS_js.formatPriceWithTax; }
 });
 Object.defineProperty(exports, "formatProductPrice", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.formatProductPrice; }
+  get: function () { return chunkPTPOQVXS_js.formatProductPrice; }
 });
 Object.defineProperty(exports, "getBasePrice", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.getBasePrice; }
+  get: function () { return chunkPTPOQVXS_js.getBasePrice; }
 });
 Object.defineProperty(exports, "getCurrencySymbol", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.getCurrencySymbol; }
+  get: function () { return chunkPTPOQVXS_js.getCurrencySymbol; }
 });
 Object.defineProperty(exports, "getDiscountPercentage", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.getDiscountPercentage; }
+  get: function () { return chunkPTPOQVXS_js.getDiscountPercentage; }
 });
 Object.defineProperty(exports, "getDisplayPrice", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.getDisplayPrice; }
+  get: function () { return chunkPTPOQVXS_js.getDisplayPrice; }
 });
 Object.defineProperty(exports, "getMarkupPercentage", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.getMarkupPercentage; }
+  get: function () { return chunkPTPOQVXS_js.getMarkupPercentage; }
 });
 Object.defineProperty(exports, "getProductCurrency", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.getProductCurrency; }
+  get: function () { return chunkPTPOQVXS_js.getProductCurrency; }
 });
 Object.defineProperty(exports, "getTaxAmount", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.getTaxAmount; }
+  get: function () { return chunkPTPOQVXS_js.getTaxAmount; }
 });
 Object.defineProperty(exports, "hasTaxInfo", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.hasTaxInfo; }
+  get: function () { return chunkPTPOQVXS_js.hasTaxInfo; }
 });
 Object.defineProperty(exports, "isOnSale", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.isOnSale; }
+  get: function () { return chunkPTPOQVXS_js.isOnSale; }
 });
 Object.defineProperty(exports, "isPaymentStatusFailure", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.isPaymentStatusFailure; }
+  get: function () { return chunkPTPOQVXS_js.isPaymentStatusFailure; }
 });
 Object.defineProperty(exports, "isPaymentStatusRequiresAction", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.isPaymentStatusRequiresAction; }
+  get: function () { return chunkPTPOQVXS_js.isPaymentStatusRequiresAction; }
 });
 Object.defineProperty(exports, "isPaymentStatusSuccess", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.isPaymentStatusSuccess; }
+  get: function () { return chunkPTPOQVXS_js.isPaymentStatusSuccess; }
 });
 Object.defineProperty(exports, "isTaxInclusive", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.isTaxInclusive; }
+  get: function () { return chunkPTPOQVXS_js.isTaxInclusive; }
 });
 Object.defineProperty(exports, "normalizePaymentResponse", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.normalizePaymentResponse; }
+  get: function () { return chunkPTPOQVXS_js.normalizePaymentResponse; }
 });
 Object.defineProperty(exports, "normalizeStatusResponse", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.normalizeStatusResponse; }
+  get: function () { return chunkPTPOQVXS_js.normalizeStatusResponse; }
 });
 Object.defineProperty(exports, "parsePrice", {
   enumerable: true,
-  get: function () { return chunk7Y2O3E4D_js.parsePrice; }
+  get: function () { return chunkPTPOQVXS_js.parsePrice; }
 });

package/dist/utils.mjs

@@ -1,4 +1,4 @@
 export { isValidPhoneForContext, normalizePhoneToE164, resolvePhoneCountryCode } from './chunk-YOIVZ6OA.mjs';
-export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-TD3AY34U.mjs';
-import './chunk-AMZXALF6.mjs';
+export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-KFLGQGMC.mjs';
+import './chunk-K5EN2W2Q.mjs';
 import './chunk-3G6RQLXK.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.85.0",
+  "version": "0.87.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -107,7 +107,9 @@
     "contracts:diff": "bun scripts/diff-contracts.ts",
     "contracts:smoke": "bun scripts/diff-contracts.ts --smoke",
     "contracts": "bun run contracts:emit && bun run contracts:diff",
-    "schema:add": "bun scripts/schema-add.ts"
+    "schema:add": "bun scripts/schema-add.ts",
+    "gen:api": "openapi-typescript ../../contracts/storefront-openapi.json -o src/types/generated.ts",
+    "gen:api:check": "bun run gen:api && git diff --exit-code src/types/generated.ts"
   },
   "peerDependencies": {
     "@paystack/inline-js": "^2.23.0",
@@ -148,6 +150,7 @@
     "hono": "^4.12.25",
     "jsdom": "^29.1.1",
     "msw": "^2.14.6",
+    "openapi-typescript": "^7.13.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tailwindcss": "4.3.1",

package/registry/currency-selector.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "currency-selector.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport type { CimplifyError } from \"@cimplify/sdk\";\nimport type { FxRateResponse } from \"../types/fx\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CurrencySelectorClassNames {\n  root?: string;\n  option?: string;\n  activeOption?: string;\n  rate?: string;\n  label?: string;\n  loading?: string;\n}\n\nexport interface CurrencySelectorProps {\n  /** Available currencies to display. */\n  currencies: CurrencyCode[];\n  /** Currently selected currency. */\n  currentCurrency?: CurrencyCode;\n  /** Called when a currency is selected. */\n  onCurrencyChange?: (currency: CurrencyCode) => void;\n  /** Show the exchange rate next to each currency. Requires `baseCurrency`. */\n  showRate?: boolean;\n  /** Base currency used for rate display. */\n  baseCurrency?: CurrencyCode;\n  /** Custom currency option renderer. */\n  renderCurrency?: (\n    currency: CurrencyCode,\n    isActive: boolean,\n    rate: FxRateResponse | null,\n  ) => React.ReactNode;\n  className?: string;\n  classNames?: CurrencySelectorClassNames;\n}\n\n/**\n * CurrencySelector — currency switcher for international customers.\n *\n * Renders selectable currency options with optional exchange rate display.\n * Returns `null` when there is only one currency (no selector needed).\n */\nexport function CurrencySelector({\n  currencies,\n  currentCurrency,\n  onCurrencyChange,\n  showRate = false,\n  baseCurrency,\n  renderCurrency,\n  className,\n  classNames,\n}: CurrencySelectorProps): React.ReactElement | null {\n  const context = useOptionalCimplifyClient();\n  const client = context?.client ?? null;\n\n  const [rates, setRates] = useState<Record<string, FxRateResponse>>({});\n  const [isLoadingRates, setIsLoadingRates] = useState(false);\n  const requestIdRef = useRef(0);\n\n  useEffect(() => {\n    if (!showRate || !baseCurrency || !client) return;\n\n    const targets = currencies.filter((c) => c !== baseCurrency);\n    if (targets.length === 0) return;\n\n    const nextRequestId = ++requestIdRef.current;\n    setIsLoadingRates(true);\n\n    void (async () => {\n      const fetched: Record<string, FxRateResponse> = {};\n\n      await Promise.all(\n        targets.map(async (currency) => {\n          const res = await client.fx.getRate(baseCurrency, currency);\n          if (res.ok) {\n            fetched[currency] = res.value;\n          }\n        }),\n      );\n\n      if (nextRequestId !== requestIdRef.current) return;\n\n      setRates(fetched);\n      setIsLoadingRates(false);\n    })();\n  }, [client, showRate, baseCurrency, currencies]);\n\n  if (currencies.length <= 1) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-currency-selector className={cn(className, classNames?.root)}>\n      {currencies.map((currency) => {\n        const isActive = currentCurrency === currency;\n        const rate = rates[currency] ?? null;\n\n        return (\n          <button\n            key={currency}\n            type=\"button\"\n            onClick={() => onCurrencyChange?.(currency)}\n            data-cimplify-currency-option\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(\n              classNames?.option,\n              isActive && classNames?.activeOption,\n            )}\n          >\n            {renderCurrency ? (\n              renderCurrency(currency, isActive, rate)\n            ) : (\n              <>\n                <span data-cimplify-currency-label className={classNames?.label}>\n                  {currency}\n                </span>\n                {showRate && baseCurrency && currency !== baseCurrency && (\n                  <span data-cimplify-currency-rate className={classNames?.rate}>\n                    {isLoadingRates\n                      ? \"...\"\n                      : rate\n                        ? `1 ${baseCurrency} = ${rate.rate.toFixed(4)} ${currency}`\n                        : null}\n                  </span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport type { CimplifyError } from \"@cimplify/sdk\";\nimport type { FxRateResponse } from \"../types/fx\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CurrencySelectorClassNames {\n  root?: string;\n  option?: string;\n  activeOption?: string;\n  rate?: string;\n  label?: string;\n  loading?: string;\n}\n\nexport interface CurrencySelectorProps {\n  /** Available currencies to display. */\n  currencies: CurrencyCode[];\n  /** Currently selected currency. */\n  currentCurrency?: CurrencyCode;\n  /** Called when a currency is selected. */\n  onCurrencyChange?: (currency: CurrencyCode) => void;\n  /** Show the exchange rate next to each currency. Requires `baseCurrency`. */\n  showRate?: boolean;\n  /** Base currency used for rate display. */\n  baseCurrency?: CurrencyCode;\n  /** Custom currency option renderer. */\n  renderCurrency?: (\n    currency: CurrencyCode,\n    isActive: boolean,\n    rate: FxRateResponse | null,\n  ) => React.ReactNode;\n  className?: string;\n  classNames?: CurrencySelectorClassNames;\n}\n\n/**\n * CurrencySelector — currency switcher for international customers.\n *\n * Renders selectable currency options with optional exchange rate display.\n * Returns `null` when there is only one currency (no selector needed).\n */\nexport function CurrencySelector({\n  currencies,\n  currentCurrency,\n  onCurrencyChange,\n  showRate = false,\n  baseCurrency,\n  renderCurrency,\n  className,\n  classNames,\n}: CurrencySelectorProps): React.ReactElement | null {\n  const context = useOptionalCimplifyClient();\n  const client = context?.client ?? null;\n\n  const [rates, setRates] = useState<Record<string, FxRateResponse>>({});\n  const [isLoadingRates, setIsLoadingRates] = useState(false);\n  const requestIdRef = useRef(0);\n\n  useEffect(() => {\n    if (!showRate || !baseCurrency || !client) return;\n\n    const targets = currencies.filter((c) => c !== baseCurrency);\n    if (targets.length === 0) return;\n\n    const nextRequestId = ++requestIdRef.current;\n    setIsLoadingRates(true);\n\n    void (async () => {\n      const fetched: Record<string, FxRateResponse> = {};\n\n      await Promise.all(\n        targets.map(async (currency) => {\n          const res = await client.fx.getRate(baseCurrency, currency);\n          if (res.ok) {\n            fetched[currency] = res.value;\n          }\n        }),\n      );\n\n      if (nextRequestId !== requestIdRef.current) return;\n\n      setRates(fetched);\n      setIsLoadingRates(false);\n    })();\n  }, [client, showRate, baseCurrency, currencies]);\n\n  if (currencies.length <= 1) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-currency-selector className={cn(className, classNames?.root)}>\n      {currencies.map((currency) => {\n        const isActive = currentCurrency === currency;\n        const rate = rates[currency] ?? null;\n\n        return (\n          <button\n            key={currency}\n            type=\"button\"\n            onClick={() => onCurrencyChange?.(currency)}\n            data-cimplify-currency-option\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(\n              classNames?.option,\n              isActive && classNames?.activeOption,\n            )}\n          >\n            {renderCurrency ? (\n              renderCurrency(currency, isActive, rate)\n            ) : (\n              <>\n                <span data-cimplify-currency-label className={classNames?.label}>\n                  {currency}\n                </span>\n                {showRate && baseCurrency && currency !== baseCurrency && (\n                  <span data-cimplify-currency-rate className={classNames?.rate}>\n                    {isLoadingRates\n                      ? \"...\"\n                      : rate\n                        ? `1 ${baseCurrency} = ${Number(rate.rate).toFixed(4)} ${currency}`\n                        : null}\n                  </span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/digital-product-card.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "cards/digital-product-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\n\nconst TYPE_BADGES: Record<string, { label: string; color: string }> = {\n  download: { label: \"Download\", color: \"bg-sky-50 text-sky-700 border-sky-200/60\" },\n  license: { label: \"License\", color: \"bg-blue-50 text-blue-700 border-blue-200/60\" },\n  event_ticket: { label: \"Event\", color: \"bg-violet-50 text-violet-700 border-violet-200/60\" },\n  access_pass: { label: \"Access\", color: \"bg-emerald-50 text-emerald-700 border-emerald-200/60\" },\n  gift_card: { label: \"Gift Card\", color: \"bg-amber-50 text-amber-700 border-amber-200/60\" },\n};\n\nexport function DigitalProductCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: CardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const typeBadge = product.digital_type ? TYPE_BADGES[product.digital_type] : null;\n  const isTicket = product.digital_type === \"event_ticket\";\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"4/3\" renderImage={renderImage}>\n        {typeBadge && (\n          <span className={`absolute top-3 left-3 text-[11px] font-semibold tracking-wide border px-2 py-0.5 rounded-md ${typeBadge.color}`}>\n            {typeBadge.label}\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-3.5\">\n        <h3 className=\"text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate\">\n          {product.name}\n        </h3>\n\n        {/* Event: date + venue */}\n        {isTicket && (product.event_date || product.venue) && (\n          <p className=\"text-[12px] text-muted-foreground mt-1 truncate\">\n            {product.event_date && new Date(product.event_date).toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" })}\n            {product.event_date && product.venue && \" · \"}\n            {product.venue}\n          </p>\n        )}\n\n        {/* Non-event: description */}\n        {!isTicket && product.description && (\n          <p className=\"text-[12px] text-muted-foreground mt-1 line-clamp-1\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        <div className=\"flex items-center justify-between mt-2.5\">\n          <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n\n          {/* File info pill */}\n          {product.file_type && (\n            <span className=\"text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n              {product.file_type.toUpperCase()}\n              {product.file_size_mb != null && ` · ${product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)}GB` : `${product.file_size_mb}MB`}`}\n            </span>\n          )}\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\n\nconst TYPE_BADGES: Record<string, { label: string; color: string }> = {\n  download: { label: \"Download\", color: \"bg-sky-50 text-sky-700 border-sky-200/60\" },\n  license_key: { label: \"License\", color: \"bg-blue-50 text-blue-700 border-blue-200/60\" },\n  ticket: { label: \"Event\", color: \"bg-violet-50 text-violet-700 border-violet-200/60\" },\n  access_grant: { label: \"Access\", color: \"bg-emerald-50 text-emerald-700 border-emerald-200/60\" },\n  redemption_code: { label: \"Code\", color: \"bg-amber-50 text-amber-700 border-amber-200/60\" },\n};\n\nexport function DigitalProductCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: CardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const typeBadge = product.digital_type ? TYPE_BADGES[product.digital_type] : null;\n  const isTicket = product.digital_type === \"ticket\";\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"4/3\" renderImage={renderImage}>\n        {typeBadge && (\n          <span className={`absolute top-3 left-3 text-[11px] font-semibold tracking-wide border px-2 py-0.5 rounded-md ${typeBadge.color}`}>\n            {typeBadge.label}\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-3.5\">\n        <h3 className=\"text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate\">\n          {product.name}\n        </h3>\n\n        {/* Event: date + venue */}\n        {isTicket && (product.event_date || product.venue) && (\n          <p className=\"text-[12px] text-muted-foreground mt-1 truncate\">\n            {product.event_date && new Date(product.event_date).toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" })}\n            {product.event_date && product.venue && \" · \"}\n            {product.venue}\n          </p>\n        )}\n\n        {/* Non-event: description */}\n        {!isTicket && product.description && (\n          <p className=\"text-[12px] text-muted-foreground mt-1 line-clamp-1\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        <div className=\"flex items-center justify-between mt-2.5\">\n          <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n\n          {/* File info pill */}\n          {product.file_type && (\n            <span className=\"text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n              {product.file_type.toUpperCase()}\n              {product.file_size_mb != null && ` · ${product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)}GB` : `${product.file_size_mb}MB`}`}\n            </span>\n          )}\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }

package/registry/digital-product-layout.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "layouts/digital-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  TagPills,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst DIGITAL_TYPE_LABELS: Record<string, string> = {\n  download: \"Digital download\",\n  license: \"Software license\",\n  event_ticket: \"Event ticket\",\n  access_pass: \"Access pass\",\n  gift_card: \"Gift card\",\n};\n\nexport function DigitalProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const currency = getProductCurrency(product);\n  const typeLabel = product.digital_type\n    ? DIGITAL_TYPE_LABELS[product.digital_type] || product.digital_type\n    : \"Digital product\";\n\n  const isTicket = product.digital_type === \"event_ticket\";\n  const isAccessPass = product.digital_type === \"access_pass\";\n  const isDownload = product.digital_type === \"download\" || product.digital_type === \"license\";\n\n  return (\n    <div data-cimplify-product-layout=\"digital\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Type badge + tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span data-cimplify-product-layout-badge className=\"text-xs font-semibold uppercase tracking-wider text-primary bg-primary/10 px-2.5 py-1 rounded-full\">\n                {typeLabel}\n              </span>\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} currency={currency} className=\"text-2xl font-bold mt-2 block\" />\n            </div>\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Delivery notice */}\n            {isDownload && (\n              <div data-cimplify-product-layout-delivery className=\"flex items-center gap-3 px-4 py-3 bg-muted rounded-lg\">\n                <svg className=\"w-5 h-5 text-primary shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n                </svg>\n                <div>\n                  <p className=\"text-sm font-medium\">Instant delivery</p>\n                  <p className=\"text-xs text-muted-foreground\">Download immediately after purchase</p>\n                </div>\n              </div>\n            )}\n\n            {/* Event info */}\n            {isTicket && (product.event_date || product.venue) && (\n              <div data-cimplify-product-layout-event className=\"border border-border p-4 space-y-2\">\n                {product.event_date && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Date:</span>\n                    <span className=\"font-medium\">{new Date(product.event_date).toLocaleDateString(undefined, { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" })}</span>\n                  </div>\n                )}\n                {product.venue && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Venue:</span>\n                    <span className=\"font-medium\">{product.venue}</span>\n                  </div>\n                )}\n                {product.ticket_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Type:</span>\n                    <span className=\"font-medium capitalize\">{product.ticket_type}</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Access pass info */}\n            {isAccessPass && (product.access_type || product.access_duration_days) && (\n              <div data-cimplify-product-layout-access className=\"border border-border p-4 space-y-2\">\n                {product.access_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Access:</span>\n                    <span className=\"font-medium capitalize\">{product.access_type}</span>\n                  </div>\n                )}\n                {product.access_level && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Level:</span>\n                    <span className=\"font-medium capitalize\">{product.access_level}</span>\n                  </div>\n                )}\n                {product.access_duration_days && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Duration:</span>\n                    <span className=\"font-medium\">{product.access_duration_days} days</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* File details */}\n            {isDownload && (product.file_size_mb || product.file_type || product.version || product.max_downloads) && (\n              <div data-cimplify-product-layout-file-details className=\"grid grid-cols-2 gap-3\">\n                {product.file_type && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Format</p>\n                    <p className=\"text-sm font-semibold\">{product.file_type.toUpperCase()}</p>\n                  </div>\n                )}\n                {product.file_size_mb != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Size</p>\n                    <p className=\"text-sm font-semibold\">{product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)} GB` : `${product.file_size_mb} MB`}</p>\n                  </div>\n                )}\n                {product.max_downloads != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Downloads</p>\n                    <p className=\"text-sm font-semibold\">{product.max_downloads}</p>\n                  </div>\n                )}\n                {product.version && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Version</p>\n                    <p className=\"text-sm font-semibold\">v{product.version}</p>\n                  </div>\n                )}\n                {product.download_expires_days != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Expires</p>\n                    <p className=\"text-sm font-semibold\">{product.download_expires_days} days</p>\n                  </div>\n                )}\n                {product.max_activations != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Activations</p>\n                    <p className=\"text-sm font-semibold\">{product.max_activations}</p>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (license variants, billing plans, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              showSpecialInstructions={false}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"More digital products\"\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  TagPills,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst DIGITAL_TYPE_LABELS: Record<string, string> = {\n  download: \"Digital download\",\n  license_key: \"Software license\",\n  ticket: \"Event ticket\",\n  access_grant: \"Access pass\",\n  redemption_code: \"Redemption code\",\n};\n\nexport function DigitalProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const currency = getProductCurrency(product);\n  const typeLabel = product.digital_type\n    ? DIGITAL_TYPE_LABELS[product.digital_type] || product.digital_type\n    : \"Digital product\";\n\n  const isTicket = product.digital_type === \"ticket\";\n  const isAccessPass = product.digital_type === \"access_grant\";\n  const isDownload = product.digital_type === \"download\" || product.digital_type === \"license_key\";\n\n  return (\n    <div data-cimplify-product-layout=\"digital\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Type badge + tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <span data-cimplify-product-layout-badge className=\"text-xs font-semibold uppercase tracking-wider text-primary bg-primary/10 px-2.5 py-1 rounded-full\">\n                {typeLabel}\n              </span>\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} currency={currency} className=\"text-2xl font-bold mt-2 block\" />\n            </div>\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Delivery notice */}\n            {isDownload && (\n              <div data-cimplify-product-layout-delivery className=\"flex items-center gap-3 px-4 py-3 bg-muted rounded-lg\">\n                <svg className=\"w-5 h-5 text-primary shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n                </svg>\n                <div>\n                  <p className=\"text-sm font-medium\">Instant delivery</p>\n                  <p className=\"text-xs text-muted-foreground\">Download immediately after purchase</p>\n                </div>\n              </div>\n            )}\n\n            {/* Event info */}\n            {isTicket && (product.event_date || product.venue) && (\n              <div data-cimplify-product-layout-event className=\"border border-border p-4 space-y-2\">\n                {product.event_date && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Date:</span>\n                    <span className=\"font-medium\">{new Date(product.event_date).toLocaleDateString(undefined, { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" })}</span>\n                  </div>\n                )}\n                {product.venue && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Venue:</span>\n                    <span className=\"font-medium\">{product.venue}</span>\n                  </div>\n                )}\n                {product.ticket_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Type:</span>\n                    <span className=\"font-medium capitalize\">{product.ticket_type}</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Access pass info */}\n            {isAccessPass && (product.access_type || product.access_duration_days) && (\n              <div data-cimplify-product-layout-access className=\"border border-border p-4 space-y-2\">\n                {product.access_type && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Access:</span>\n                    <span className=\"font-medium capitalize\">{product.access_type}</span>\n                  </div>\n                )}\n                {product.access_level && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Level:</span>\n                    <span className=\"font-medium capitalize\">{product.access_level}</span>\n                  </div>\n                )}\n                {product.access_duration_days && (\n                  <div className=\"flex items-center gap-2 text-sm\">\n                    <span className=\"text-muted-foreground\">Duration:</span>\n                    <span className=\"font-medium\">{product.access_duration_days} days</span>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* File details */}\n            {isDownload && (product.file_size_mb || product.file_type || product.version || product.max_downloads) && (\n              <div data-cimplify-product-layout-file-details className=\"grid grid-cols-2 gap-3\">\n                {product.file_type && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Format</p>\n                    <p className=\"text-sm font-semibold\">{product.file_type.toUpperCase()}</p>\n                  </div>\n                )}\n                {product.file_size_mb != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Size</p>\n                    <p className=\"text-sm font-semibold\">{product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)} GB` : `${product.file_size_mb} MB`}</p>\n                  </div>\n                )}\n                {product.max_downloads != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Downloads</p>\n                    <p className=\"text-sm font-semibold\">{product.max_downloads}</p>\n                  </div>\n                )}\n                {product.version && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Version</p>\n                    <p className=\"text-sm font-semibold\">v{product.version}</p>\n                  </div>\n                )}\n                {product.download_expires_days != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Expires</p>\n                    <p className=\"text-sm font-semibold\">{product.download_expires_days} days</p>\n                  </div>\n                )}\n                {product.max_activations != null && (\n                  <div className=\"px-3 py-2 bg-muted text-center\">\n                    <p className=\"text-xs text-muted-foreground\">Activations</p>\n                    <p className=\"text-sm font-semibold\">{product.max_activations}</p>\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (license variants, billing plans, add to cart) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              showSpecialInstructions={false}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"More digital products\"\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/product-card.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "product-card.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback, useContext, useState } from \"react\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from \"@cimplify/sdk\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { prefetchProduct, trackProductView } from \"./hooks/use-product\";\nimport { useInViewport } from \"./hooks/use-in-viewport\";\nimport { speculate } from \"./utils/prefetch-policy\";\nimport { preloadImage } from \"./utils/preload-image\";\nimport {\n  useOptionalCimplifyClient,\n  DEFAULT_PREFETCH_OPTIONS,\n  type PrefetchMode,\n} from \"@cimplify/sdk/react\";\nimport { ImagePriorityContext } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { ProductSheet } from \"@cimplify/sdk/react\";\nimport { CardVariant } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { FoodProductCard } from \"@cimplify/sdk/react\";\nimport { RetailProductCard } from \"@cimplify/sdk/react\";\nimport { WholesaleProductCard } from \"@cimplify/sdk/react\";\nimport { DigitalProductCard } from \"@cimplify/sdk/react\";\nimport { StandardServiceCard } from \"@cimplify/sdk/react\";\nimport { RentalServiceCard } from \"@cimplify/sdk/react\";\nimport { AccommodationCard } from \"@cimplify/sdk/react\";\nimport { LeaseServiceCard } from \"@cimplify/sdk/react\";\nimport { SubscriptionCard } from \"@cimplify/sdk/react\";\nimport { BundleProductCard } from \"./cards/bundle-product-card\";\nimport { CompositeProductCard } from \"./cards/composite-product-card\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\n\nconst ASPECT_STYLES: Record<string, React.CSSProperties> = {\n  square: { aspectRatio: \"1/1\" },\n  \"4/3\": { aspectRatio: \"4/3\" },\n  \"16/10\": { aspectRatio: \"16/10\" },\n  \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nexport interface ProductCardClassNames {\n  root?: string;\n  imageContainer?: string;\n  image?: string;\n  body?: string;\n  name?: string;\n  description?: string;\n  price?: string;\n  badges?: string;\n  badge?: string;\n  modal?: string;\n  modalOverlay?: string;\n}\n\nexport interface ProductCardProps {\n  /** The product to display. */\n  product: Product;\n  /** Display mode: \"card\" opens a modal, \"page\" renders as a link. Auto-detected from product.display_mode. */\n  displayMode?: \"card\" | \"page\";\n  /** Explicit card variant. Auto-detected from product data when omitted. */\n  variant?: CardVariant;\n  /** Per-slug card map. Highest priority — maps a product slug to a custom card component. */\n  cards?: Record<string, React.ComponentType<CardLayoutProps>>;\n  /** Link href for page mode. Default: `/menu/${product.slug}` */\n  href?: string;\n  /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */\n  renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: {\n    src: string;\n    alt: string;\n    className?: string;\n  }) => React.ReactNode;\n  /** Custom link renderer for page mode (e.g. Next.js Link). */\n  renderLink?: (props: {\n    href: string;\n    className?: string;\n    children: React.ReactNode;\n    onPointerEnter?: React.PointerEventHandler<Element>;\n    onFocus?: React.FocusEventHandler<Element>;\n  }) => React.ReactElement;\n  /** Called when quick-add button is clicked (if the resolved card supports it). */\n  onQuickAdd?: (product: Product) => void;\n  /** Replace the entire default card body. */\n  children?: React.ReactNode;\n  /** Image aspect ratio. Default: \"4/3\". */\n  aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n  prefetch?: PrefetchMode;\n  className?: string;\n  classNames?: ProductCardClassNames;\n}\n\nconst BUILT_IN_CARDS: Record<string, React.ComponentType<CardLayoutProps>> = {\n  [CardVariant.Food]: FoodProductCard,\n  [CardVariant.Retail]: RetailProductCard,\n  [CardVariant.Wholesale]: WholesaleProductCard,\n  [CardVariant.Digital]: DigitalProductCard,\n  [CardVariant.Standard]: StandardServiceCard,\n  [CardVariant.Rental]: RentalServiceCard,\n  [CardVariant.Accommodation]: AccommodationCard,\n  [CardVariant.Lease]: LeaseServiceCard,\n  [CardVariant.Bundle]: BundleProductCard,\n  [CardVariant.Composite]: CompositeProductCard,\n  [CardVariant.Subscription]: SubscriptionCard,\n};\n\nconst RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);\nconst LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);\n\nfunction resolveCardVariant(product: Product): CardVariant {\n  if (product.type === PRODUCT_TYPE.Bundle) {\n    return CardVariant.Bundle;\n  }\n  if (product.type === PRODUCT_TYPE.Composite) {\n    return CardVariant.Composite;\n  }\n  if (product.quantity_pricing && product.quantity_pricing.length > 1) {\n    return CardVariant.Wholesale;\n  }\n  if (product.type === PRODUCT_TYPE.Digital) {\n    return CardVariant.Digital;\n  }\n  if (product.type === PRODUCT_TYPE.Service) {\n    if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {\n      return CardVariant.Rental;\n    }\n    if (product.duration_unit === DURATION_UNIT.Nights) {\n      return CardVariant.Accommodation;\n    }\n    if (product.duration_unit && LEASE_UNITS.has(product.duration_unit)) {\n      return CardVariant.Lease;\n    }\n    if (product.billing_plans && product.billing_plans.length > 0 && !product.duration_minutes) {\n      return CardVariant.Subscription;\n    }\n    return CardVariant.Standard;\n  }\n  if (product.render_hint === RENDER_HINT.Food) {\n    return CardVariant.Food;\n  }\n  if (product.render_hint === RENDER_HINT.Physical) {\n    return CardVariant.Retail;\n  }\n  return CardVariant.Retail;\n}\n\n/**\n * ProductCard — a product display card with two modes:\n *\n * - **card** (default): clickable button that opens a Base UI Dialog modal\n * - **page**: a plain `<a>` link for SEO-friendly product pages\n */\nexport function ProductCard({\n  product,\n  displayMode,\n  variant,\n  cards,\n  href,\n  renderModal,\n  renderImage,\n  renderLink,\n  onQuickAdd,\n  children,\n  aspectRatio = \"4/3\",\n  prefetch: prefetchProp,\n  className,\n  classNames,\n}: ProductCardProps): React.ReactElement {\n  const mode = displayMode ?? product.display_mode ?? \"card\";\n  const [isOpen, setIsOpen] = useState(false);\n\n  const context = useOptionalCimplifyClient();\n  const client = context?.client ?? null;\n  const prefetchConfig = context?.prefetch ?? DEFAULT_PREFETCH_OPTIONS;\n  const LinkComponent = context?.linkComponent ?? null;\n  const prefetchMode = prefetchProp ?? prefetchConfig.mode;\n  const imagePriority = useContext(ImagePriorityContext);\n\n  const { product: productDetails } = useProduct(product.slug ?? product.id, {\n    enabled: isOpen,\n  });\n\n  const warm = useCallback(() => {\n    if (!client || prefetchMode === \"off\") return;\n    speculate(() => prefetchProduct(client, product.slug ?? product.id));\n    if (prefetchConfig.images) {\n      preloadImage(product.images?.[0] || product.image_url);\n    }\n  }, [client, prefetchMode, prefetchConfig.images, product]);\n\n  const viewportRef = useInViewport(warm, {\n    rootMargin: prefetchConfig.rootMargin,\n    disabled: prefetchMode !== \"aggressive\",\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (open && client) {\n        trackProductView(client, product);\n      }\n    },\n    [client, product],\n  );\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const imageUrl = product.image_url || product.images?.[0];\n\n  const cardBody = (() => {\n    if (children) return children;\n\n    // Resolve card variant: slug map → explicit variant → auto-detect\n    const SlugCard = cards?.[product.slug];\n    if (SlugCard) {\n      return <SlugCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    const key = variant ?? resolveCardVariant(product);\n    const ResolvedCard = BUILT_IN_CARDS[key];\n    if (ResolvedCard) {\n      return <ResolvedCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    // Fallback: minimal default\n    const descriptionPreview = stripHtmlToText(product.description);\n    return (\n      <>\n        {imageUrl && (\n          <div\n            data-cimplify-product-card-image-container\n            className={cn(\"overflow-hidden rounded-t-xl\", classNames?.imageContainer)}\n            style={ASPECT_STYLES[aspectRatio]}\n          >\n            {renderImage ? (\n              renderImage({ src: imageUrl, alt: product.name, className: classNames?.image })\n            ) : (\n              <img\n                src={imageUrl}\n                alt={product.name}\n                loading={imagePriority ? \"eager\" : \"lazy\"}\n                decoding={imagePriority ? \"auto\" : \"async\"}\n                fetchPriority={imagePriority ? \"high\" : undefined}\n                className={cn(\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\", classNames?.image)}\n                data-cimplify-product-card-image\n              />\n            )}\n          </div>\n        )}\n        <div data-cimplify-product-card-body className={cn(\"p-4 flex flex-col gap-1\", classNames?.body)}>\n          <span data-cimplify-product-card-name className={cn(\"font-semibold text-foreground leading-tight\", classNames?.name)}>\n            {product.name}\n          </span>\n          {descriptionPreview && (\n            <span data-cimplify-product-card-description className={cn(\"text-sm text-muted-foreground line-clamp-2\", classNames?.description)}>\n              {descriptionPreview}\n            </span>\n          )}\n          <Price amount={product.default_price} currency={getProductCurrency(product)} className={cn(\"text-sm font-medium text-foreground mt-1\", classNames?.price)} />\n        </div>\n      </>\n    );\n  })();\n\n  // Page mode — render as a link\n  if (mode === \"page\") {\n    const linkHref = href ?? `/menu/${product.slug}`;\n    const linkClassName = cn(\"group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\", className, classNames?.root);\n\n    if (renderLink) {\n      return renderLink({\n        href: linkHref,\n        className: linkClassName,\n        children: cardBody,\n        onPointerEnter: warm,\n        onFocus: warm,\n      });\n    }\n\n    if (LinkComponent) {\n      return (\n        <LinkComponent\n          href={linkHref}\n          className={linkClassName}\n          onPointerEnter={warm}\n          onFocus={warm}\n        >\n          {cardBody}\n        </LinkComponent>\n      );\n    }\n\n    return (\n      <a\n        href={linkHref}\n        ref={viewportRef}\n        onPointerEnter={warm}\n        onFocus={warm}\n        data-cimplify-product-card\n        data-display-mode=\"page\"\n        className={linkClassName}\n      >\n        {cardBody}\n      </a>\n    );\n  }\n\n  // Card mode — render as Base UI Dialog\n  return (\n    <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>\n      <Dialog.Trigger\n        ref={viewportRef}\n        onPointerEnter={warm}\n        onFocus={warm}\n        data-cimplify-product-card\n        data-display-mode=\"card\"\n        className={cn(\n          \"group block w-full text-left p-0 cursor-pointer font-[inherit] text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\",\n          className,\n          classNames?.root,\n        )}\n      >\n        {cardBody}\n      </Dialog.Trigger>\n\n      <Dialog.Portal>\n        <Dialog.Backdrop\n          data-cimplify-product-card-backdrop\n          className={cn(\n            \"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity\",\n            classNames?.modalOverlay,\n          )}\n        />\n        <Dialog.Popup\n          data-cimplify-product-card-modal\n          className={cn(\n            \"fixed z-50 rounded-2xl p-0 max-w-lg w-full h-fit max-h-[85vh] overflow-auto bg-background shadow-2xl outline-none\",\n            classNames?.modal,\n          )}\n        >\n          {isOpen && (\n            productDetails ? (\n              renderModal ? (\n                renderModal(productDetails, handleClose)\n              ) : (\n                <ProductSheet\n                  product={productDetails}\n                  onClose={handleClose}\n                  renderImage={renderImage}\n                />\n              )\n            ) : (\n              <div\n                data-cimplify-product-card-modal-loading\n                aria-busy=\"true\"\n                className=\"flex flex-col\"\n              >\n                <div className=\"aspect-[5/2] bg-muted animate-pulse\" />\n                <div className=\"p-6 space-y-3\">\n                  <div className=\"h-5 w-3/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-7 w-2/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-4 w-4/5 bg-muted rounded animate-pulse\" />\n                </div>\n                <div className=\"mx-6 border-t border-border pt-4 pb-6\">\n                  <div className=\"h-14 bg-muted rounded-full animate-pulse\" />\n                </div>\n              </div>\n            )\n          )}\n        </Dialog.Popup>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useCallback, useContext, useState } from \"react\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport { BOUNDARY_KIND, PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from \"@cimplify/sdk\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { prefetchProduct, trackProductView } from \"./hooks/use-product\";\nimport { useInViewport } from \"./hooks/use-in-viewport\";\nimport { speculate } from \"./utils/prefetch-policy\";\nimport { preloadImage } from \"./utils/preload-image\";\nimport {\n  useOptionalCimplifyClient,\n  DEFAULT_PREFETCH_OPTIONS,\n  type PrefetchMode,\n} from \"@cimplify/sdk/react\";\nimport { ImagePriorityContext } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { ProductSheet } from \"@cimplify/sdk/react\";\nimport { CardVariant } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { FoodProductCard } from \"@cimplify/sdk/react\";\nimport { RetailProductCard } from \"@cimplify/sdk/react\";\nimport { WholesaleProductCard } from \"@cimplify/sdk/react\";\nimport { DigitalProductCard } from \"@cimplify/sdk/react\";\nimport { StandardServiceCard } from \"@cimplify/sdk/react\";\nimport { RentalServiceCard } from \"@cimplify/sdk/react\";\nimport { AccommodationCard } from \"@cimplify/sdk/react\";\nimport { LeaseServiceCard } from \"@cimplify/sdk/react\";\nimport { SubscriptionCard } from \"@cimplify/sdk/react\";\nimport { BundleProductCard } from \"./cards/bundle-product-card\";\nimport { CompositeProductCard } from \"./cards/composite-product-card\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\n\nconst ASPECT_STYLES: Record<string, React.CSSProperties> = {\n  square: { aspectRatio: \"1/1\" },\n  \"4/3\": { aspectRatio: \"4/3\" },\n  \"16/10\": { aspectRatio: \"16/10\" },\n  \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nexport interface ProductCardClassNames {\n  root?: string;\n  imageContainer?: string;\n  image?: string;\n  body?: string;\n  name?: string;\n  description?: string;\n  price?: string;\n  badges?: string;\n  badge?: string;\n  modal?: string;\n  modalOverlay?: string;\n}\n\nexport interface ProductCardProps {\n  /** The product to display. */\n  product: Product;\n  /** Display mode: \"card\" opens a modal, \"page\" renders as a link. Auto-detected from product.display_mode. */\n  displayMode?: \"card\" | \"page\";\n  /** Explicit card variant. Auto-detected from product data when omitted. */\n  variant?: CardVariant;\n  /** Per-slug card map. Highest priority — maps a product slug to a custom card component. */\n  cards?: Record<string, React.ComponentType<CardLayoutProps>>;\n  /** Link href for page mode. Default: `/menu/${product.slug}` */\n  href?: string;\n  /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */\n  renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: {\n    src: string;\n    alt: string;\n    className?: string;\n  }) => React.ReactNode;\n  /** Custom link renderer for page mode (e.g. Next.js Link). */\n  renderLink?: (props: {\n    href: string;\n    className?: string;\n    children: React.ReactNode;\n    onPointerEnter?: React.PointerEventHandler<Element>;\n    onFocus?: React.FocusEventHandler<Element>;\n  }) => React.ReactElement;\n  /** Called when quick-add button is clicked (if the resolved card supports it). */\n  onQuickAdd?: (product: Product) => void;\n  /** Replace the entire default card body. */\n  children?: React.ReactNode;\n  /** Image aspect ratio. Default: \"4/3\". */\n  aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n  prefetch?: PrefetchMode;\n  className?: string;\n  classNames?: ProductCardClassNames;\n}\n\nconst BUILT_IN_CARDS: Record<string, React.ComponentType<CardLayoutProps>> = {\n  [CardVariant.Food]: FoodProductCard,\n  [CardVariant.Retail]: RetailProductCard,\n  [CardVariant.Wholesale]: WholesaleProductCard,\n  [CardVariant.Digital]: DigitalProductCard,\n  [CardVariant.Standard]: StandardServiceCard,\n  [CardVariant.Rental]: RentalServiceCard,\n  [CardVariant.Accommodation]: AccommodationCard,\n  [CardVariant.Lease]: LeaseServiceCard,\n  [CardVariant.Bundle]: BundleProductCard,\n  [CardVariant.Composite]: CompositeProductCard,\n  [CardVariant.Subscription]: SubscriptionCard,\n};\n\nconst RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);\nconst LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);\n\nfunction resolveCardVariant(product: Product): CardVariant {\n  if (product.type === PRODUCT_TYPE.Bundle) {\n    return CardVariant.Bundle;\n  }\n  if (product.type === PRODUCT_TYPE.Composite) {\n    return CardVariant.Composite;\n  }\n  if (product.quantity_pricing && product.quantity_pricing.length > 1) {\n    return CardVariant.Wholesale;\n  }\n  if (product.type === PRODUCT_TYPE.Digital) {\n    return CardVariant.Digital;\n  }\n  if (product.type === PRODUCT_TYPE.Service) {\n    // An explicit boundary_kind overrides the duration-unit heuristic for the\n    // card family (CTA + per-unit copy), so e.g. a days-unit serviced apartment\n    // marked check_in_out renders as accommodation, and a delivered rental as\n    // a rental. `custom`/unset fall through to the duration-unit defaults.\n    switch (product.boundary_kind) {\n      case BOUNDARY_KIND.CheckInOut:\n        return CardVariant.Accommodation;\n      case BOUNDARY_KIND.MoveInOut:\n        return CardVariant.Lease;\n      case BOUNDARY_KIND.PickupReturn:\n      case BOUNDARY_KIND.DeliveryCollection:\n      case BOUNDARY_KIND.AccessVacate:\n        return CardVariant.Rental;\n    }\n    if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {\n      return CardVariant.Rental;\n    }\n    if (product.duration_unit === DURATION_UNIT.Nights) {\n      return CardVariant.Accommodation;\n    }\n    if (product.duration_unit && LEASE_UNITS.has(product.duration_unit)) {\n      return CardVariant.Lease;\n    }\n    if (product.billing_plans && product.billing_plans.length > 0 && !product.duration_minutes) {\n      return CardVariant.Subscription;\n    }\n    return CardVariant.Standard;\n  }\n  if (product.render_hint === RENDER_HINT.Food) {\n    return CardVariant.Food;\n  }\n  if (product.render_hint === RENDER_HINT.Physical) {\n    return CardVariant.Retail;\n  }\n  return CardVariant.Retail;\n}\n\n/**\n * ProductCard — a product display card with two modes:\n *\n * - **card** (default): clickable button that opens a Base UI Dialog modal\n * - **page**: a plain `<a>` link for SEO-friendly product pages\n */\nexport function ProductCard({\n  product,\n  displayMode,\n  variant,\n  cards,\n  href,\n  renderModal,\n  renderImage,\n  renderLink,\n  onQuickAdd,\n  children,\n  aspectRatio = \"4/3\",\n  prefetch: prefetchProp,\n  className,\n  classNames,\n}: ProductCardProps): React.ReactElement {\n  const mode = displayMode ?? product.display_mode ?? \"card\";\n  const [isOpen, setIsOpen] = useState(false);\n\n  const context = useOptionalCimplifyClient();\n  const client = context?.client ?? null;\n  const prefetchConfig = context?.prefetch ?? DEFAULT_PREFETCH_OPTIONS;\n  const LinkComponent = context?.linkComponent ?? null;\n  const prefetchMode = prefetchProp ?? prefetchConfig.mode;\n  const imagePriority = useContext(ImagePriorityContext);\n\n  const { product: productDetails } = useProduct(product.slug ?? product.id, {\n    enabled: isOpen,\n  });\n\n  const warm = useCallback(() => {\n    if (!client || prefetchMode === \"off\") return;\n    speculate(() => prefetchProduct(client, product.slug ?? product.id));\n    if (prefetchConfig.images) {\n      preloadImage(product.images?.[0] || product.image_url);\n    }\n  }, [client, prefetchMode, prefetchConfig.images, product]);\n\n  const viewportRef = useInViewport(warm, {\n    rootMargin: prefetchConfig.rootMargin,\n    disabled: prefetchMode !== \"aggressive\",\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (open && client) {\n        trackProductView(client, product);\n      }\n    },\n    [client, product],\n  );\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const imageUrl = product.image_url || product.images?.[0];\n\n  const cardBody = (() => {\n    if (children) return children;\n\n    // Resolve card variant: slug map → explicit variant → auto-detect\n    const SlugCard = cards?.[product.slug];\n    if (SlugCard) {\n      return <SlugCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    const key = variant ?? resolveCardVariant(product);\n    const ResolvedCard = BUILT_IN_CARDS[key];\n    if (ResolvedCard) {\n      return <ResolvedCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    // Fallback: minimal default\n    const descriptionPreview = stripHtmlToText(product.description);\n    return (\n      <>\n        {imageUrl && (\n          <div\n            data-cimplify-product-card-image-container\n            className={cn(\"overflow-hidden rounded-t-xl\", classNames?.imageContainer)}\n            style={ASPECT_STYLES[aspectRatio]}\n          >\n            {renderImage ? (\n              renderImage({ src: imageUrl, alt: product.name, className: classNames?.image })\n            ) : (\n              <img\n                src={imageUrl}\n                alt={product.name}\n                loading={imagePriority ? \"eager\" : \"lazy\"}\n                decoding={imagePriority ? \"auto\" : \"async\"}\n                fetchPriority={imagePriority ? \"high\" : undefined}\n                className={cn(\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\", classNames?.image)}\n                data-cimplify-product-card-image\n              />\n            )}\n          </div>\n        )}\n        <div data-cimplify-product-card-body className={cn(\"p-4 flex flex-col gap-1\", classNames?.body)}>\n          <span data-cimplify-product-card-name className={cn(\"font-semibold text-foreground leading-tight\", classNames?.name)}>\n            {product.name}\n          </span>\n          {descriptionPreview && (\n            <span data-cimplify-product-card-description className={cn(\"text-sm text-muted-foreground line-clamp-2\", classNames?.description)}>\n              {descriptionPreview}\n            </span>\n          )}\n          <Price amount={product.default_price} currency={getProductCurrency(product)} className={cn(\"text-sm font-medium text-foreground mt-1\", classNames?.price)} />\n        </div>\n      </>\n    );\n  })();\n\n  // Page mode — render as a link\n  if (mode === \"page\") {\n    const linkHref = href ?? `/menu/${product.slug}`;\n    const linkClassName = cn(\"group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\", className, classNames?.root);\n\n    if (renderLink) {\n      return renderLink({\n        href: linkHref,\n        className: linkClassName,\n        children: cardBody,\n        onPointerEnter: warm,\n        onFocus: warm,\n      });\n    }\n\n    if (LinkComponent) {\n      return (\n        <LinkComponent\n          href={linkHref}\n          className={linkClassName}\n          onPointerEnter={warm}\n          onFocus={warm}\n        >\n          {cardBody}\n        </LinkComponent>\n      );\n    }\n\n    return (\n      <a\n        href={linkHref}\n        ref={viewportRef}\n        onPointerEnter={warm}\n        onFocus={warm}\n        data-cimplify-product-card\n        data-display-mode=\"page\"\n        className={linkClassName}\n      >\n        {cardBody}\n      </a>\n    );\n  }\n\n  // Card mode — render as Base UI Dialog\n  return (\n    <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>\n      <Dialog.Trigger\n        ref={viewportRef}\n        onPointerEnter={warm}\n        onFocus={warm}\n        data-cimplify-product-card\n        data-display-mode=\"card\"\n        className={cn(\n          \"group block w-full text-left p-0 cursor-pointer font-[inherit] text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\",\n          className,\n          classNames?.root,\n        )}\n      >\n        {cardBody}\n      </Dialog.Trigger>\n\n      <Dialog.Portal>\n        <Dialog.Backdrop\n          data-cimplify-product-card-backdrop\n          className={cn(\n            \"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity\",\n            classNames?.modalOverlay,\n          )}\n        />\n        <Dialog.Popup\n          data-cimplify-product-card-modal\n          className={cn(\n            \"fixed z-50 rounded-2xl p-0 max-w-lg w-full h-fit max-h-[85vh] overflow-auto bg-background shadow-2xl outline-none\",\n            classNames?.modal,\n          )}\n        >\n          {isOpen && (\n            productDetails ? (\n              renderModal ? (\n                renderModal(productDetails, handleClose)\n              ) : (\n                <ProductSheet\n                  product={productDetails}\n                  onClose={handleClose}\n                  renderImage={renderImage}\n                />\n              )\n            ) : (\n              <div\n                data-cimplify-product-card-modal-loading\n                aria-busy=\"true\"\n                className=\"flex flex-col\"\n              >\n                <div className=\"aspect-[5/2] bg-muted animate-pulse\" />\n                <div className=\"p-6 space-y-3\">\n                  <div className=\"h-5 w-3/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-7 w-2/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-4 w-4/5 bg-muted rounded animate-pulse\" />\n                </div>\n                <div className=\"mx-6 border-t border-border pt-4 pb-6\">\n                  <div className=\"h-14 bg-muted rounded-full animate-pulse\" />\n                </div>\n              </div>\n            )\n          )}\n        </Dialog.Popup>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"
     }
   ]
 }