@cimplify/sdk 0.63.0 → 0.64.1

package/dist/react.d.mts

@@ -1930,6 +1930,13 @@ declare function ProductGrid({ products, columns, renderCard, renderImage, empty
 
 declare function cn(...inputs: ClassValue[]): string;
 
+/**
+ * Project HTML to a single-line plain-text preview. NOT a security boundary —
+ * output is only ever rendered as text (never as HTML). For card/meta previews
+ * where tags must not appear.
+ */
+declare function stripHtmlToText(html: string | null | undefined): string;
+
 interface SearchInputClassNames {
     root?: string;
     input?: string;
@@ -3444,4 +3451,4 @@ interface ChatWidgetProps {
 }
 declare function ChatWidget({ client: clientProp, businessName, greeting, subtitle, starters, placeholder, position, defaultOpen, pollInterval, className, classNames, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
-export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/react.d.ts

@@ -1930,6 +1930,13 @@ declare function ProductGrid({ products, columns, renderCard, renderImage, empty
 
 declare function cn(...inputs: ClassValue[]): string;
 
+/**
+ * Project HTML to a single-line plain-text preview. NOT a security boundary —
+ * output is only ever rendered as text (never as HTML). For card/meta previews
+ * where tags must not appear.
+ */
+declare function stripHtmlToText(html: string | null | undefined): string;
+
 interface SearchInputClassNames {
     root?: string;
     input?: string;
@@ -3444,4 +3451,4 @@ interface ChatWidgetProps {
 }
 declare function ChatWidget({ client: clientProp, businessName, greeting, subtitle, starters, placeholder, position, defaultOpen, pollInterval, className, classNames, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
 
-export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, type AccountContentProps, AccountDashboardPage, type AccountDashboardPageProps, AccountHero, type AccountHeroProps, AccountIdentityStrip, type AccountIdentityStripProps, AccountNav, type AccountNavProps, AccountOrderDetailPage, type AccountOrderDetailPageProps, AccountOrdersPage, type AccountOrdersPageProps, type AccountPageBaseProps, AccountShell, type AccountShellProps, AccountSidebar, type AccountSidebarProps, AccountSignedOutPrompt, type AccountSignedOutPromptProps, AccountSubscriptionDetailPage, type AccountSubscriptionDetailPageProps, AccountSubscriptionsPage, type AccountSubscriptionsPageProps, Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorClassNames, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, AvailabilityBadge, type AvailabilityBadgeClassNames, type AvailabilityBadgeProps, BackLink, type BackLinkProps, BillingPlanSelector, type BillingPlanSelectorClassNames, type BillingPlanSelectorProps, BookingCard, type BookingCardClassNames, type BookingCardProps, BookingList, type BookingListClassNames, type BookingListProps, BookingPage, type BookingPageClassNames, type BookingPageProps, BookingsPage, type BookingsPageClassNames, type BookingsPageProps, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, type BundleSelectorClassNames, type BundleSelectorProps, Button, type ButtonProps, CardImage, type CardLayoutProps, CardShell, CardVariant, type CartAddOnOptionSelection, CartDrawer, type CartDrawerProps, CartDrawerProvider, type CartLayoutProps, CartPage, type CartPageClassNames, type CartPageProps, CartSummary, type CartSummaryClassNames, type CartSummaryProps, CartTemplate, type CartVariantSelection, CatalogueCollectionLayout, type CatalogueLayoutProps, CataloguePage, type CataloguePageClassNames, type CataloguePageProps, CatalogueTemplate, CategoryFilter, type CategoryFilterClassNames, type CategoryFilterProps, CategoryGrid, type CategoryGridClassNames, type CategoryGridProps, ChatWidget, type ChatWidgetClassNames, type ChatWidgetProps, CheckIcon, CheckoutPage, type CheckoutPageClassNames, type CheckoutPageProps, CimplifyAccount, type CimplifyAccountProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyClientContextValue, type CimplifyClientSession, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CimplifySignInButton, type CimplifySignInButtonProps, type CollectionLayoutProps, CollectionPage, type CollectionPageClassNames, type CollectionPageProps, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, type CompositeSelectorClassNames, type CompositeSelectorProps, ContextCard, type ContextCardProps, type ContextRow, ContinuityCard, type ContinuityCardProps, CurrencySelector, type CurrencySelectorClassNames, type CurrencySelectorProps, CustomAttributesTable, CustomerInputFields, type CustomerInputFieldsClassNames, type CustomerInputFieldsProps, DashboardIcon, DashboardIcon20, DatePicker, type DatePickerClassNames, type DatePickerProps, DateSlotPicker, type DateSlotPickerClassNames, type DateSlotPickerProps, DealBanner, type DealBannerClassNames, type DealBannerProps, DealsPage, type DealsPageClassNames, type DealsPageProps, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, type DeliveryEstimateClassNames, type DeliveryEstimateProps, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, type DiscountInputClassNames, type DiscountInputProps, ElementsProvider, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, FeaturedCollectionLayout, type FilterTabItem, FilterTabs, type FilterTabsProps, FoodProductCard, FoodProductLayout, HappeningCard, type HappeningCardProps, type HappeningPaneData, IdentityIcon, IdentityOfframp, type IdentityOfframpProps, type IdentitySummary, InventoryBadge, ItemsCard, type ItemsCardProps, LeaseServiceCard, LocationPicker, type LocationPickerClassNames, type LocationPickerProps, MediaGallery, type MediaGalleryProps, type MediaItem, MetadataStringList, MobileAccountShell, type MobileAccountShellProps, MobileBackButton, MobileMoreButton, MobileTabBar, type MobileTabBarProps, type NavItem, NextDeliveryCard, type NextDeliveryCardProps, OrderDetailHeader, type OrderDetailHeaderProps, OrderDetailMetaPipe, OrderDetailPage, type OrderDetailPageClassNames, type OrderDetailPageProps, OrderHistory, type OrderHistoryClassNames, OrderHistoryPage, type OrderHistoryPageClassNames, type OrderHistoryPageProps, type OrderHistoryProps, type OrderItemData, OrderList, type OrderListProps, OrderRow, type OrderRowData, type OrderRowProps, type OrderRowStatus, OrderSummary, type OrderSummaryClassNames, type OrderSummaryProps, OrderTimeline, type OrderTimelineProps, OrderTotals, type OrderTotalsProps, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, type PriceProps, PriceRange, type PriceRangeProps, ProductCard, type ProductCardClassNames, type ProductCardProps, ProductCustomizer, type ProductCustomizerClassNames, type ProductCustomizerProps, ProductGrid, type ProductGridClassNames, type ProductGridProps, ProductImageGallery, type ProductImageGalleryProps, type ProductLayoutProps, ProductModel3D, type ProductModel3DProps, ProductPage, type ProductPageClassNames, type ProductPageProps, ProductSheet, type ProductSheetClassNames, type ProductSheetProps, ProductTemplate, PropertiesTable, QuantitySelector, type QuantitySelectorClassNames, type QuantitySelectorProps, QuickAddButton, RecentlyViewed, type RecentlyViewedClassNames, type RecentlyViewedProps, RecommendationCarousel, type RecommendationCarouselClassNames, type RecommendationCarouselProps, RelatedProductsSection, RentalServiceCard, type Resource, ResourcePicker, type ResourcePickerClassNames, type ResourcePickerProps, RetailProductCard, RichText, type RichTextProps, SaleBadge, type SaleBadgeClassNames, type SaleBadgeProps, ScheduleServiceCard, SearchInput, type SearchInputClassNames, type SearchInputProps, type SearchLayoutProps, SearchPage, type SearchPageClassNames, type SearchPageProps, SearchTemplate, Section, SectionMore, type SectionMoreProps, type SectionProps, type ServiceCardLayoutProps, ServiceProductLayout, SessionMessageBanner, type SessionMessageBannerClassNames, type SessionMessageBannerProps, SignOutIcon, Skeleton, type SkeletonProps, SlotPicker, type SlotPickerClassNames, type SlotPickerProps, SoldOutOverlay, StaffPicker, type StaffPickerClassNames, type StaffPickerProps, StandardServiceCard, Status, type StatusProps, StoreNav, type StoreNavClassNames, type StoreNavProps, StoreVideo, type StoreVideoProps, SubscriptionCard, SubscriptionList, type SubscriptionListProps, SubscriptionRow, type SubscriptionRowData, type SubscriptionRowProps, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, type TimePickerClassNames, type TimePickerProps, type TimelineStep, Toast, type ToastProps, type TotalsData, TwoColumnGrid, type UseActivityStateOptions, type UseActivityStateResult, type UseAttributeDefinitionsOptions, type UseAttributeDefinitionsResult, type UseAvailableSlotsOptions, type UseAvailableSlotsResult, type UseBillingPlansOptions, type UseBillingPlansResult, type UseBookingsOptions, type UseBookingsResult, type UseBootstrapOptions, type UseBootstrapResult, type UseBundlesOptions, type UseBundlesResult, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseChatOptions, type UseChatResult, type UseCimplifySessionOptions, type UseCimplifySessionResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseDealsOptions, type UseDealsResult, type UseDeliveryFeeOptions, type UseDeliveryFeeResult, type UseFxRateOptions, type UseFxRateResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseOrdersOptions, type UseOrdersResult, type UseProductAvailabilityOptions, type UseProductAvailabilityResult, type UseProductDealsOptions, type UseProductDealsResult, type UseProductOptions, type UseProductPriceInput, type UseProductPriceResult, type UseProductResult, type UseProductSchedulesOptions, type UseProductSchedulesResult, type UseProductsOnSaleOptions, type UseProductsOnSaleResult, type UseProductsOptions, type UseProductsResult, type UsePropertyFacetsOptions, type UsePropertyFacetsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseRecommendationsOptions, type UseRecommendationsResult, type UseSearchOptions, type UseSearchResult, type UseServiceAvailabilityOptions, type UseServiceAvailabilityResult, type UseServicesOptions, type UseServicesResult, type UseTaxonomiesOptions, type UseTaxonomiesResult, type UseTaxonomyOptions, type UseTaxonomyPathOptions, type UseTaxonomyPathResult, type UseTaxonomyResult, type UseValidateDiscountOptions, type UseValidateDiscountResult, type UseVariantSelectorOptions, type UseVariantSelectorResult, VariantSelector, type VariantSelectorClassNames, type VariantSelectorProps, VolumePricing, type VolumePricingClassNames, type VolumePricingProps, WelcomeCard, type WelcomeCardProps, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/react.js

@@ -9247,6 +9247,8 @@ var ALLOWED_EMBED_HOSTS = /* @__PURE__ */ new Set([
   "youtube-nocookie.com",
   "player.vimeo.com"
 ]);
+var IFRAME_ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen";
+var SAFE_CLASS_PATTERN = /^cimplify-[a-z0-9-]+$/i;
 var ALLOWED_CSS_PROPERTIES = {
   "text-align": true,
   color: true,
@@ -9323,8 +9325,20 @@ function safeAttrValue(tag, name, value, cssFilter) {
     }
     return "";
   }
+  if (tag === "iframe" && name === "allow") {
+    return IFRAME_ALLOW;
+  }
+  if (name === "class") {
+    return value.split(/\s+/).filter((token) => SAFE_CLASS_PATTERN.test(token)).join(" ");
+  }
   return xss.safeAttrValue(tag, name, value, cssFilter);
 }
+function withLinkSafety(html) {
+  return html.replace(/<a\b[^>]*>/gi, (tag) => {
+    if (!/\btarget\s*=\s*["']_blank["']/i.test(tag)) return tag;
+    return /\brel\s*=\s*["'][^"']*["']/i.test(tag) ? tag.replace(/\brel\s*=\s*["'][^"']*["']/i, 'rel="noopener noreferrer"') : tag.replace(/>$/, ' rel="noopener noreferrer">');
+  });
+}
 var FILTER = new xss.FilterXSS({
   whiteList: RICH_TEXT_WHITELIST,
   css: { whiteList: ALLOWED_CSS_PROPERTIES },
@@ -9334,7 +9348,7 @@ var FILTER = new xss.FilterXSS({
   allowCommentTag: false
 });
 function sanitizeRichTextHtml(html) {
-  return FILTER.process(html);
+  return withLinkSafety(FILTER.process(html));
 }
 var RICH_TEXT_PROSE = cn(
   "text-muted-foreground leading-relaxed",
@@ -9668,6 +9682,12 @@ function CardShell({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: shellClass, "data-cimplify-card": true, children });
 }
+
+// src/react/utils/strip-html.ts
+function stripHtmlToText(html) {
+  if (!html) return "";
+  return html.replace(/<[^>]*>/g, " ").replace(/&nbsp;/gi, " ").replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&quot;/gi, '"').replace(/&#0*39;|&apos;/gi, "'").replace(/&#(\d+);/g, (_, n) => String.fromCodePoint(Number(n))).replace(/&#x([0-9a-f]+);/gi, (_, n) => String.fromCodePoint(parseInt(n, 16))).replace(/\s+/g, " ").trim();
+}
 function FoodProductCard({
   product,
   onQuickAdd,
@@ -9698,7 +9718,7 @@ function FoodProductCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3", children: [
         isComposite ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold", children: [
           "From ",
@@ -9837,7 +9857,7 @@ function DigitalProductCard({
         product.event_date && product.venue && " \xB7 ",
         product.venue
       ] }),
-      !isTicket && product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: product.description }),
+      !isTicket && product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
         product.file_type && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: [
@@ -9928,7 +9948,7 @@ function CompositeProductCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: stripHtmlToText(product.description) }),
       groupCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground mt-1 truncate", children: groups.map((g) => g.name).join(" + ") }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold", children: [
@@ -9966,7 +9986,7 @@ function StandardServiceCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[7px] h-[7px] rounded-full bg-emerald-500 animate-pulse" }),
@@ -10018,7 +10038,7 @@ function CompactServiceCard({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : image ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) : null }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14px] font-semibold text-foreground leading-tight truncate", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [
         product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: formatDuration4(product.duration_minutes, product.duration_unit) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-[10.5px] font-medium text-emerald-600", children: [
@@ -10083,7 +10103,7 @@ function ScheduleServiceCard({
       ] }),
       image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) })
     ] }),
-    product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed", children: product.description }),
+    product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed", children: stripHtmlToText(product.description) }),
     displaySlots.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 pt-3 border-t border-border", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: product.general_service_capacity != null && product.general_service_capacity > 1 ? "Upcoming classes" : "Next available" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 flex-wrap", children: displaySlots.map((slot, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -10153,7 +10173,7 @@ function RentalServiceCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
         product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: [
           "Min. ",
@@ -10213,7 +10233,7 @@ function AccommodationCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
       product.general_service_capacity != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0" }) }),
@@ -10284,7 +10304,7 @@ function LeaseServiceCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
       hasTiers && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(VolumePricing, { tiers: product.quantity_pricing }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
@@ -10356,7 +10376,7 @@ function SubscriptionCard({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
       plans.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 space-y-1", children: plans.slice(0, 3).map((plan) => {
         const label = plan.frequency ? plan.frequency.charAt(0).toUpperCase() + plan.frequency.slice(1) : "Standard";
@@ -10516,6 +10536,7 @@ function ProductCard({
     if (ResolvedCard) {
       return /* @__PURE__ */ jsxRuntime.jsx(ResolvedCard, { product, onQuickAdd, renderImage, renderLink });
     }
+    const descriptionPreview = stripHtmlToText(product.description);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -10536,7 +10557,7 @@ function ProductCard({
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-card-body": true, className: cn("p-4 flex flex-col gap-1", classNames?.body), children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-product-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: product.name }),
-        product.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-product-card-description": true, className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description), children: product.description }),
+        descriptionPreview && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-product-card-description": true, className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description), children: descriptionPreview }),
         /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: cn("text-sm font-medium text-foreground mt-1", classNames?.price) })
       ] })
     ] });
@@ -15825,6 +15846,7 @@ exports.WishlistButton = WishlistButton;
 exports.cn = cn;
 exports.roomToResource = roomToResource;
 exports.sanitizeRichTextHtml = sanitizeRichTextHtml;
+exports.stripHtmlToText = stripHtmlToText;
 exports.useActivityState = useActivityState;
 exports.useAds = useAds;
 exports.useAttributeDefinitions = useAttributeDefinitions;

package/dist/react.mjs

@@ -9242,6 +9242,8 @@ var ALLOWED_EMBED_HOSTS = /* @__PURE__ */ new Set([
   "youtube-nocookie.com",
   "player.vimeo.com"
 ]);
+var IFRAME_ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen";
+var SAFE_CLASS_PATTERN = /^cimplify-[a-z0-9-]+$/i;
 var ALLOWED_CSS_PROPERTIES = {
   "text-align": true,
   color: true,
@@ -9318,8 +9320,20 @@ function safeAttrValue(tag, name, value, cssFilter) {
     }
     return "";
   }
+  if (tag === "iframe" && name === "allow") {
+    return IFRAME_ALLOW;
+  }
+  if (name === "class") {
+    return value.split(/\s+/).filter((token) => SAFE_CLASS_PATTERN.test(token)).join(" ");
+  }
   return safeAttrValue$1(tag, name, value, cssFilter);
 }
+function withLinkSafety(html) {
+  return html.replace(/<a\b[^>]*>/gi, (tag) => {
+    if (!/\btarget\s*=\s*["']_blank["']/i.test(tag)) return tag;
+    return /\brel\s*=\s*["'][^"']*["']/i.test(tag) ? tag.replace(/\brel\s*=\s*["'][^"']*["']/i, 'rel="noopener noreferrer"') : tag.replace(/>$/, ' rel="noopener noreferrer">');
+  });
+}
 var FILTER = new FilterXSS({
   whiteList: RICH_TEXT_WHITELIST,
   css: { whiteList: ALLOWED_CSS_PROPERTIES },
@@ -9329,7 +9343,7 @@ var FILTER = new FilterXSS({
   allowCommentTag: false
 });
 function sanitizeRichTextHtml(html) {
-  return FILTER.process(html);
+  return withLinkSafety(FILTER.process(html));
 }
 var RICH_TEXT_PROSE = cn(
   "text-muted-foreground leading-relaxed",
@@ -9663,6 +9677,12 @@ function CardShell({
   }
   return /* @__PURE__ */ jsx("a", { href, className: shellClass, "data-cimplify-card": true, children });
 }
+
+// src/react/utils/strip-html.ts
+function stripHtmlToText(html) {
+  if (!html) return "";
+  return html.replace(/<[^>]*>/g, " ").replace(/&nbsp;/gi, " ").replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&quot;/gi, '"').replace(/&#0*39;|&apos;/gi, "'").replace(/&#(\d+);/g, (_, n) => String.fromCodePoint(Number(n))).replace(/&#x([0-9a-f]+);/gi, (_, n) => String.fromCodePoint(parseInt(n, 16))).replace(/\s+/g, " ").trim();
+}
 function FoodProductCard({
   product,
   onQuickAdd,
@@ -9693,7 +9713,7 @@ function FoodProductCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3", children: [
         isComposite ? /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold", children: [
           "From ",
@@ -9832,7 +9852,7 @@ function DigitalProductCard({
         product.event_date && product.venue && " \xB7 ",
         product.venue
       ] }),
-      !isTicket && product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: product.description }),
+      !isTicket && product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
         /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
         product.file_type && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: [
@@ -9923,7 +9943,7 @@ function CompositeProductCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: stripHtmlToText(product.description) }),
       groupCount > 0 && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-1 truncate", children: groups.map((g) => g.name).join(" + ") }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
         /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold", children: [
@@ -9961,7 +9981,7 @@ function StandardServiceCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
           /* @__PURE__ */ jsx("span", { className: "w-[7px] h-[7px] rounded-full bg-emerald-500 animate-pulse" }),
@@ -10013,7 +10033,7 @@ function CompactServiceCard({
     /* @__PURE__ */ jsx("div", { className: "w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : image ? /* @__PURE__ */ jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) : null }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-foreground leading-tight truncate", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [
         product.duration_minutes != null && /* @__PURE__ */ jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: formatDuration4(product.duration_minutes, product.duration_unit) }),
         /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10.5px] font-medium text-emerald-600", children: [
@@ -10078,7 +10098,7 @@ function ScheduleServiceCard({
       ] }),
       image && /* @__PURE__ */ jsx("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) })
     ] }),
-    product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed", children: product.description }),
+    product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed", children: stripHtmlToText(product.description) }),
     displaySlots.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-3 border-t border-border", children: [
       /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: product.general_service_capacity != null && product.general_service_capacity > 1 ? "Upcoming classes" : "Next available" }),
       /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-wrap", children: displaySlots.map((slot, i) => /* @__PURE__ */ jsx(
@@ -10148,7 +10168,7 @@ function RentalServiceCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
         product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: [
           "Min. ",
@@ -10208,7 +10228,7 @@ function AccommodationCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
       product.general_service_capacity != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground", children: [
         /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0" }) }),
@@ -10279,7 +10299,7 @@ function LeaseServiceCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
       hasTiers && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(VolumePricing, { tiers: product.quantity_pricing }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
@@ -10351,7 +10371,7 @@ function SubscriptionCard({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
-      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: stripHtmlToText(product.description) }),
       tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
       plans.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1", children: plans.slice(0, 3).map((plan) => {
         const label = plan.frequency ? plan.frequency.charAt(0).toUpperCase() + plan.frequency.slice(1) : "Standard";
@@ -10511,6 +10531,7 @@ function ProductCard({
     if (ResolvedCard) {
       return /* @__PURE__ */ jsx(ResolvedCard, { product, onQuickAdd, renderImage, renderLink });
     }
+    const descriptionPreview = stripHtmlToText(product.description);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       imageUrl && /* @__PURE__ */ jsx(
         "div",
@@ -10531,7 +10552,7 @@ function ProductCard({
       ),
       /* @__PURE__ */ jsxs("div", { "data-cimplify-product-card-body": true, className: cn("p-4 flex flex-col gap-1", classNames?.body), children: [
         /* @__PURE__ */ jsx("span", { "data-cimplify-product-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: product.name }),
-        product.description && /* @__PURE__ */ jsx("span", { "data-cimplify-product-card-description": true, className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description), children: product.description }),
+        descriptionPreview && /* @__PURE__ */ jsx("span", { "data-cimplify-product-card-description": true, className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description), children: descriptionPreview }),
         /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: cn("text-sm font-medium text-foreground mt-1", classNames?.price) })
       ] })
     ] });
@@ -15644,4 +15665,4 @@ function SparkleIcon({ className }) {
   );
 }
 
-export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountNav, AccountOrderDetailPage, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckIcon, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, RichText, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountNav, AccountOrderDetailPage, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckIcon, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, RichText, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, sanitizeRichTextHtml, stripHtmlToText, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.63.0",
+  "version": "0.64.1",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/registry/accommodation-card.json

@@ -6,12 +6,13 @@
   "registryDependencies": [
     "price",
     "volume-pricing",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/accommodation-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function AccommodationCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n  const tags = product.tags || [];\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per night\n        </span>\n\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />/night\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {product.description}\n          </p>\n        )}\n\n        {/* Amenity / tag pills */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 4).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Guest capacity */}\n        {product.general_service_capacity != null && (\n          <div className=\"flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground\">\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0\" />\n            </svg>\n            {product.general_service_capacity} guest{product.general_service_capacity > 1 ? \"s\" : \"\"}\n          </div>\n        )}\n\n        {/* Extended stay pricing */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[11px] text-muted-foreground\">\n            {cancellationHours != null && (\n              <span className=\"text-emerald-600 font-medium\">\n                Free cancellation {cancellationHours}h\n              </span>\n            )}\n            {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n              <span>Min. {product.min_order_quantity} nights</span>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Book room &rarr;\n          </button>\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 { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function AccommodationCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n  const tags = product.tags || [];\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per night\n        </span>\n\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />/night\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Amenity / tag pills */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 4).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Guest capacity */}\n        {product.general_service_capacity != null && (\n          <div className=\"flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground\">\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0\" />\n            </svg>\n            {product.general_service_capacity} guest{product.general_service_capacity > 1 ? \"s\" : \"\"}\n          </div>\n        )}\n\n        {/* Extended stay pricing */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[11px] text-muted-foreground\">\n            {cancellationHours != null && (\n              <span className=\"text-emerald-600 font-medium\">\n                Free cancellation {cancellationHours}h\n              </span>\n            )}\n            {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n              <span>Min. {product.min_order_quantity} nights</span>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Book room &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }

package/registry/compact-service-card.json

@@ -5,12 +5,13 @@
   "type": "component",
   "registryDependencies": [
     "price",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/compact-service-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nfunction formatDuration(minutes: number, unit?: string): string {\n  if (unit && unit !== \"minutes\") return `${minutes} ${unit}`;\n  if (minutes >= 60) {\n    const h = Math.floor(minutes / 60);\n    const m = minutes % 60;\n    return m > 0 ? `${h}h ${m}m` : `${h} hr`;\n  }\n  return `${minutes} min`;\n}\n\nexport function CompactServiceCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const hasBillingPlans = product.billing_plans && product.billing_plans.length > 0;\n  const href = `/products/${product.slug}`;\n\n  const content = (\n    <div className=\"flex items-center gap-4 p-3\">\n      {/* Thumbnail */}\n      <div className=\"w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0\">\n        {renderImage ? (\n          renderImage({ src: image, alt: product.name, className: \"w-full h-full object-cover\" })\n        ) : image ? (\n          <img src={image} alt={product.name} className=\"w-full h-full object-cover\" />\n        ) : null}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <h3 className=\"text-[14px] font-semibold text-foreground leading-tight truncate\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12px] text-muted-foreground mt-0.5 truncate\">\n            {product.description}\n          </p>\n        )}\n        <div className=\"flex items-center gap-2 mt-2 flex-wrap\">\n          {product.duration_minutes != null && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              {formatDuration(product.duration_minutes, product.duration_unit)}\n            </span>\n          )}\n          <span className=\"flex items-center gap-1 text-[10.5px] font-medium text-emerald-600\">\n            <span className=\"w-[6px] h-[6px] rounded-full bg-emerald-500\" />\n            Available\n          </span>\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} /> deposit\n            </span>\n          )}\n          {hasBillingPlans && (\n            <span className=\"inline-flex items-center gap-0.5 text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded\">\n              Subscription\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Price + Chevron */}\n      <div className=\"flex items-center gap-2 shrink-0\">\n        <Price amount={product.default_price} className=\"text-sm font-bold\" />\n        <svg className=\"w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </div>\n    </div>\n  );\n\n  const shellClass = cn(\n    \"group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden\",\n    \"shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]\",\n    \"border border-transparent\",\n    \"transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]\",\n    \"hover:-translate-y-[1px] hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)] hover:border-primary/20\",\n    className,\n  );\n\n  if (renderLink) {\n    return renderLink({ href, className: shellClass, children: content });\n  }\n\n  return <a href={href} className={shellClass} data-cimplify-card>{content}</a>;\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nfunction formatDuration(minutes: number, unit?: string): string {\n  if (unit && unit !== \"minutes\") return `${minutes} ${unit}`;\n  if (minutes >= 60) {\n    const h = Math.floor(minutes / 60);\n    const m = minutes % 60;\n    return m > 0 ? `${h}h ${m}m` : `${h} hr`;\n  }\n  return `${minutes} min`;\n}\n\nexport function CompactServiceCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const hasBillingPlans = product.billing_plans && product.billing_plans.length > 0;\n  const href = `/products/${product.slug}`;\n\n  const content = (\n    <div className=\"flex items-center gap-4 p-3\">\n      {/* Thumbnail */}\n      <div className=\"w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0\">\n        {renderImage ? (\n          renderImage({ src: image, alt: product.name, className: \"w-full h-full object-cover\" })\n        ) : image ? (\n          <img src={image} alt={product.name} className=\"w-full h-full object-cover\" />\n        ) : null}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <h3 className=\"text-[14px] font-semibold text-foreground leading-tight truncate\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12px] text-muted-foreground mt-0.5 truncate\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n        <div className=\"flex items-center gap-2 mt-2 flex-wrap\">\n          {product.duration_minutes != null && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              {formatDuration(product.duration_minutes, product.duration_unit)}\n            </span>\n          )}\n          <span className=\"flex items-center gap-1 text-[10.5px] font-medium text-emerald-600\">\n            <span className=\"w-[6px] h-[6px] rounded-full bg-emerald-500\" />\n            Available\n          </span>\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} /> deposit\n            </span>\n          )}\n          {hasBillingPlans && (\n            <span className=\"inline-flex items-center gap-0.5 text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded\">\n              Subscription\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Price + Chevron */}\n      <div className=\"flex items-center gap-2 shrink-0\">\n        <Price amount={product.default_price} className=\"text-sm font-bold\" />\n        <svg className=\"w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </div>\n    </div>\n  );\n\n  const shellClass = cn(\n    \"group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden\",\n    \"shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]\",\n    \"border border-transparent\",\n    \"transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]\",\n    \"hover:-translate-y-[1px] hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)] hover:border-primary/20\",\n    className,\n  );\n\n  if (renderLink) {\n    return renderLink({ href, className: shellClass, children: content });\n  }\n\n  return <a href={href} className={shellClass} data-cimplify-card>{content}</a>;\n}\n"
     }
   ]
 }

package/registry/digital-product-card.json

@@ -5,12 +5,13 @@
   "type": "component",
   "registryDependencies": [
     "price",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/digital-product-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\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 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            {product.description}\n          </p>\n        )}\n\n        <div className=\"flex items-center justify-between mt-2.5\">\n          <Price amount={product.default_price} 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\";\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 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} 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/food-product-card.json

@@ -5,12 +5,13 @@
   "type": "component",
   "registryDependencies": [
     "price",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/food-product-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport { PRODUCT_TYPE } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n\nexport function FoodProductCard({\n  product,\n  onQuickAdd,\n  renderImage,\n  renderLink,\n  className,\n}: CardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const tags = product.tags || [];\n  const isSignature = product.metadata?.is_signature === true;\n  const isNew = product.metadata?.is_new === true;\n  const isComposite = product.type === PRODUCT_TYPE.Composite;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"square\" renderImage={renderImage}>\n        {/* Badges */}\n        {isSignature && (\n          <span className=\"absolute top-3 left-3 inline-flex items-center gap-1 text-[11px] font-semibold tracking-wide bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md\">\n            <svg className=\"w-3 h-3 opacity-70\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M8 .75l1.85 4.95L15 6.2l-3.7 3.2 1.1 5.1L8 12.15 3.6 14.5l1.1-5.1L1 6.2l5.15-.5z\" /></svg>\n            Signature\n          </span>\n        )}\n        {isNew && !isSignature && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-2 py-0.5 rounded-md\">\n            New\n          </span>\n        )}\n        {isComposite && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-violet-50 text-violet-700 border border-violet-200/60 px-2 py-0.5 rounded-md\">\n            Customizable\n          </span>\n        )}\n\n        {/* Quick add */}\n        <QuickAddButton\n          onClick={() => onQuickAdd?.(product)}\n          className=\"absolute bottom-3 right-3\"\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        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {product.description}\n          </p>\n        )}\n        <div className=\"flex items-center justify-between mt-3\">\n          {isComposite ? (\n            <span className=\"text-sm font-bold\">From <Price amount={product.default_price} /></span>\n          ) : (\n            <Price amount={product.default_price} className=\"text-sm font-bold\" />\n          )}\n          {tags.length > 0 && (\n            <div className=\"flex gap-1\">\n              {tags.slice(0, 2).map((tag) => (\n                <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                  {tag}\n                </span>\n              ))}\n            </div>\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 { PRODUCT_TYPE } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n\nexport function FoodProductCard({\n  product,\n  onQuickAdd,\n  renderImage,\n  renderLink,\n  className,\n}: CardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const tags = product.tags || [];\n  const isSignature = product.metadata?.is_signature === true;\n  const isNew = product.metadata?.is_new === true;\n  const isComposite = product.type === PRODUCT_TYPE.Composite;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"square\" renderImage={renderImage}>\n        {/* Badges */}\n        {isSignature && (\n          <span className=\"absolute top-3 left-3 inline-flex items-center gap-1 text-[11px] font-semibold tracking-wide bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md\">\n            <svg className=\"w-3 h-3 opacity-70\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M8 .75l1.85 4.95L15 6.2l-3.7 3.2 1.1 5.1L8 12.15 3.6 14.5l1.1-5.1L1 6.2l5.15-.5z\" /></svg>\n            Signature\n          </span>\n        )}\n        {isNew && !isSignature && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-2 py-0.5 rounded-md\">\n            New\n          </span>\n        )}\n        {isComposite && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-violet-50 text-violet-700 border border-violet-200/60 px-2 py-0.5 rounded-md\">\n            Customizable\n          </span>\n        )}\n\n        {/* Quick add */}\n        <QuickAddButton\n          onClick={() => onQuickAdd?.(product)}\n          className=\"absolute bottom-3 right-3\"\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        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n        <div className=\"flex items-center justify-between mt-3\">\n          {isComposite ? (\n            <span className=\"text-sm font-bold\">From <Price amount={product.default_price} /></span>\n          ) : (\n            <Price amount={product.default_price} className=\"text-sm font-bold\" />\n          )}\n          {tags.length > 0 && (\n            <div className=\"flex gap-1\">\n              {tags.slice(0, 2).map((tag) => (\n                <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                  {tag}\n                </span>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }

package/registry/index.json

@@ -154,7 +154,8 @@
       "registryDependencies": [
         "price",
         "product-sheet",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -174,6 +175,13 @@
       "type": "utility",
       "registryDependencies": []
     },
+    {
+      "name": "strip-html",
+      "title": "stripHtmlToText",
+      "description": "Projects HTML to a single-line plain-text preview for cards and meta descriptions. Not a security boundary — output is rendered as text only.",
+      "type": "utility",
+      "registryDependencies": []
+    },
     {
       "name": "search-input",
       "title": "SearchInput",
@@ -430,7 +438,8 @@
       "type": "component",
       "registryDependencies": [
         "price",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -461,7 +470,8 @@
       "type": "component",
       "registryDependencies": [
         "price",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -471,7 +481,8 @@
       "type": "component",
       "registryDependencies": [
         "price",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -481,7 +492,8 @@
       "type": "component",
       "registryDependencies": [
         "price",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -491,7 +503,8 @@
       "type": "component",
       "registryDependencies": [
         "price",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -501,7 +514,8 @@
       "type": "component",
       "registryDependencies": [
         "price",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -512,7 +526,8 @@
       "registryDependencies": [
         "price",
         "volume-pricing",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -523,7 +538,8 @@
       "registryDependencies": [
         "price",
         "volume-pricing",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {
@@ -533,7 +549,8 @@
       "type": "component",
       "registryDependencies": [
         "price",
-        "cn"
+        "cn",
+        "strip-html"
       ]
     },
     {

package/registry/lease-service-card.json

@@ -6,12 +6,13 @@
   "registryDependencies": [
     "price",
     "volume-pricing",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/lease-service-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst UNIT_LABELS: Record<string, string> = {\n  weeks: \"week\",\n  months: \"mo\",\n  years: \"yr\",\n};\n\nexport function LeaseServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : \"mo\";\n  const tags = product.tags || [];\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per {unit}\n        </span>\n\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />/{unit}\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {product.description}\n          </p>\n        )}\n\n        {/* Tags as amenity pills */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 4).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Volume tiers (lease terms) */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        {/* Info row */}\n        <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n          {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              Min. {product.min_order_quantity} {unit}{product.min_order_quantity > 1 ? \"s\" : \"\"}\n            </span>\n          )}\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} /> deposit\n            </span>\n          )}\n          {cancellationHours != null && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground\">\n              {cancellationHours >= 720 ? `${Math.floor(cancellationHours / 720)} month notice` : `${cancellationHours}h notice`}\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          {product.billing_plans && product.billing_plans.length > 0 && (\n            <span className=\"text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded\">\n              {product.billing_plans[0].frequency} billing\n            </span>\n          )}\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors ml-auto\"\n          >\n            Enquire now &rarr;\n          </button>\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 { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst UNIT_LABELS: Record<string, string> = {\n  weeks: \"week\",\n  months: \"mo\",\n  years: \"yr\",\n};\n\nexport function LeaseServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : \"mo\";\n  const tags = product.tags || [];\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per {unit}\n        </span>\n\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />/{unit}\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Tags as amenity pills */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 4).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Volume tiers (lease terms) */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        {/* Info row */}\n        <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n          {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              Min. {product.min_order_quantity} {unit}{product.min_order_quantity > 1 ? \"s\" : \"\"}\n            </span>\n          )}\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} /> deposit\n            </span>\n          )}\n          {cancellationHours != null && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground\">\n              {cancellationHours >= 720 ? `${Math.floor(cancellationHours / 720)} month notice` : `${cancellationHours}h notice`}\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          {product.billing_plans && product.billing_plans.length > 0 && (\n            <span className=\"text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded\">\n              {product.billing_plans[0].frequency} billing\n            </span>\n          )}\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors ml-auto\"\n          >\n            Enquire now &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }

package/registry/product-card.json

@@ -6,12 +6,13 @@
   "registryDependencies": [
     "price",
     "product-sheet",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "product-card.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback, 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 { Price } from \"@cimplify/sdk/react\";\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\";\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  }) => 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  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  className,\n  classNames,\n}: ProductCardProps): React.ReactElement {\n  const mode = displayMode ?? product.display_mode ?? \"card\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [shouldFetch, setShouldFetch] = useState(false);\n\n  // Prefetch on pointer enter, always fetch when open\n  const { product: productDetails } = useProduct(\n    product.slug ?? product.id,\n    { enabled: shouldFetch || isOpen },\n  );\n\n  const handlePrefetch = useCallback(() => {\n    setShouldFetch(true);\n  }, []);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsOpen(open);\n    if (open) {\n      setShouldFetch(true);\n    }\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    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                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          {product.description && (\n            <span data-cimplify-product-card-description className={cn(\"text-sm text-muted-foreground line-clamp-2\", classNames?.description)}>\n              {product.description}\n            </span>\n          )}\n          <Price amount={product.default_price} 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({ href: linkHref, className: linkClassName, children: cardBody });\n    }\n\n    return (\n      <a\n        href={linkHref}\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        onPointerEnter={handlePrefetch}\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, 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 { Price } from \"@cimplify/sdk/react\";\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  }) => 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  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  className,\n  classNames,\n}: ProductCardProps): React.ReactElement {\n  const mode = displayMode ?? product.display_mode ?? \"card\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [shouldFetch, setShouldFetch] = useState(false);\n\n  // Prefetch on pointer enter, always fetch when open\n  const { product: productDetails } = useProduct(\n    product.slug ?? product.id,\n    { enabled: shouldFetch || isOpen },\n  );\n\n  const handlePrefetch = useCallback(() => {\n    setShouldFetch(true);\n  }, []);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsOpen(open);\n    if (open) {\n      setShouldFetch(true);\n    }\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                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} 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({ href: linkHref, className: linkClassName, children: cardBody });\n    }\n\n    return (\n      <a\n        href={linkHref}\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        onPointerEnter={handlePrefetch}\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"
     }
   ]
 }

package/registry/rental-service-card.json

@@ -5,12 +5,13 @@
   "type": "component",
   "registryDependencies": [
     "price",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/rental-service-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst UNIT_LABELS: Record<string, string> = {\n  minutes: \"min\",\n  hours: \"hr\",\n  days: \"day\",\n  nights: \"night\",\n  weeks: \"week\",\n  months: \"mo\",\n  years: \"yr\",\n};\n\nexport function RentalServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : \"day\";\n  const status = product.inventory_status;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Per-unit pill */}\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per {unit}\n        </span>\n\n        {/* Price */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />/{unit}\n        </span>\n\n        {/* Capacity badge */}\n        {product.general_service_capacity != null && product.general_service_capacity > 1 && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-blue-50/90 text-blue-700 border border-blue-200/50 backdrop-blur px-2 py-0.5 rounded-md\">\n            Up to {product.general_service_capacity} guests\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {product.description}\n          </p>\n        )}\n\n        {/* Info pills */}\n        <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n          {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              Min. {product.min_order_quantity} {unit}{product.min_order_quantity > 1 ? \"s\" : \"\"}\n            </span>\n          )}\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} /> deposit\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          {/* Availability */}\n          {status && (\n            <div className=\"flex items-center gap-1.5 text-[12px]\">\n              <span className={cn(\n                \"w-[7px] h-[7px] rounded-full shrink-0\",\n                status.in_stock ? \"bg-emerald-500\" : \"bg-red-500\",\n              )} />\n              <span className={status.in_stock ? \"text-muted-foreground\" : \"text-red-600\"}>\n                {status.in_stock\n                  ? status.stock_level != null\n                    ? `${status.stock_level} available`\n                    : \"Available\"\n                  : \"Unavailable\"\n                }\n              </span>\n            </div>\n          )}\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Reserve now &rarr;\n          </button>\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 { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage, QuickAddButton } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst UNIT_LABELS: Record<string, string> = {\n  minutes: \"min\",\n  hours: \"hr\",\n  days: \"day\",\n  nights: \"night\",\n  weeks: \"week\",\n  months: \"mo\",\n  years: \"yr\",\n};\n\nexport function RentalServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : \"day\";\n  const status = product.inventory_status;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Per-unit pill */}\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per {unit}\n        </span>\n\n        {/* Price */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />/{unit}\n        </span>\n\n        {/* Capacity badge */}\n        {product.general_service_capacity != null && product.general_service_capacity > 1 && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-blue-50/90 text-blue-700 border border-blue-200/50 backdrop-blur px-2 py-0.5 rounded-md\">\n            Up to {product.general_service_capacity} guests\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Info pills */}\n        <div className=\"flex flex-wrap items-center gap-2 mt-3\">\n          {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              Min. {product.min_order_quantity} {unit}{product.min_order_quantity > 1 ? \"s\" : \"\"}\n            </span>\n          )}\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} /> deposit\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          {/* Availability */}\n          {status && (\n            <div className=\"flex items-center gap-1.5 text-[12px]\">\n              <span className={cn(\n                \"w-[7px] h-[7px] rounded-full shrink-0\",\n                status.in_stock ? \"bg-emerald-500\" : \"bg-red-500\",\n              )} />\n              <span className={status.in_stock ? \"text-muted-foreground\" : \"text-red-600\"}>\n                {status.in_stock\n                  ? status.stock_level != null\n                    ? `${status.stock_level} available`\n                    : \"Available\"\n                  : \"Unavailable\"\n                }\n              </span>\n            </div>\n          )}\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Reserve now &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }

package/registry/rich-text.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "rich-text.tsx",
-      "content": "\"use client\";\n\nimport React, { useMemo } from \"react\";\nimport { FilterXSS, safeAttrValue as baseSafeAttrValue } from \"xss\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n// Hosts allowed for <iframe> embeds. Everything else has its src blanked.\nconst ALLOWED_EMBED_HOSTS = new Set<string>([\n  \"www.youtube.com\",\n  \"youtube.com\",\n  \"www.youtube-nocookie.com\",\n  \"youtube-nocookie.com\",\n  \"player.vimeo.com\",\n]);\n\n// Inline CSS properties we permit (via the xss css filter). Anything else —\n// position, z-index, behaviours, url() exfil vectors — is dropped.\nconst ALLOWED_CSS_PROPERTIES: Record<string, boolean> = {\n  \"text-align\": true,\n  color: true,\n  \"background-color\": true,\n  \"font-weight\": true,\n  \"font-style\": true,\n  \"text-decoration\": true,\n  \"vertical-align\": true,\n  width: true,\n  height: true,\n};\n\nconst STYLEABLE = [\"style\", \"class\"];\n\n/**\n * Allowlist covering rich product copy: rich text, spec and\n * comparison tables, figures, definition lists, collapsible sections, and\n * host-locked video embeds. Tags outside this set are dropped; `javascript:`\n * URLs, event handlers, and unlisted CSS properties are stripped.\n */\nconst RICH_TEXT_WHITELIST: Record<string, string[]> = {\n  p: STYLEABLE,\n  br: [],\n  div: STYLEABLE,\n  section: [\"class\"],\n  span: STYLEABLE,\n  strong: [],\n  b: [],\n  em: [],\n  i: [],\n  u: [],\n  s: [],\n  strike: [],\n  del: [],\n  ins: [],\n  mark: [],\n  small: [],\n  sub: [],\n  sup: [],\n  h1: STYLEABLE,\n  h2: STYLEABLE,\n  h3: STYLEABLE,\n  h4: STYLEABLE,\n  h5: STYLEABLE,\n  h6: STYLEABLE,\n  ul: [\"class\"],\n  ol: [\"start\", \"type\", \"class\"],\n  li: [\"class\"],\n  dl: [\"class\"],\n  dt: [\"class\"],\n  dd: [\"class\"],\n  blockquote: [\"class\"],\n  code: [],\n  pre: [\"class\"],\n  hr: [],\n  a: [\"href\", \"title\", \"target\", \"rel\"],\n  img: [\"src\", \"alt\", \"title\", \"width\", \"height\", \"loading\", \"class\", \"style\"],\n  figure: [\"class\"],\n  figcaption: [\"class\"],\n  details: [],\n  summary: [],\n  table: [\"class\", \"style\"],\n  thead: [],\n  tbody: [],\n  tfoot: [],\n  caption: [],\n  colgroup: [],\n  col: [\"span\", \"style\"],\n  tr: [\"class\"],\n  th: [\"colspan\", \"rowspan\", \"scope\", \"align\", \"class\", \"style\"],\n  td: [\"colspan\", \"rowspan\", \"align\", \"class\", \"style\"],\n  iframe: [\"src\", \"width\", \"height\", \"allow\", \"allowfullscreen\", \"frameborder\", \"title\", \"loading\"],\n};\n\nfunction safeAttrValue(\n  tag: string,\n  name: string,\n  value: string,\n  cssFilter: Parameters<typeof baseSafeAttrValue>[3],\n): string {\n  if (tag === \"iframe\" && name === \"src\") {\n    try {\n      const url = new URL(value);\n      if (url.protocol === \"https:\" && ALLOWED_EMBED_HOSTS.has(url.hostname)) {\n        return value;\n      }\n    } catch {\n      // malformed URL — fall through to blank\n    }\n    return \"\";\n  }\n  return baseSafeAttrValue(tag, name, value, cssFilter);\n}\n\n// A single configured filter instance, reused across every call.\nconst FILTER = new FilterXSS({\n  whiteList: RICH_TEXT_WHITELIST,\n  css: { whiteList: ALLOWED_CSS_PROPERTIES },\n  safeAttrValue,\n  stripIgnoreTag: true,\n  stripIgnoreTagBody: [\"script\", \"style\"],\n  allowCommentTag: false,\n});\n\n/**\n * Sanitize merchant-authored HTML for safe rendering. Runs identically on the\n * Cloudflare Workers edge (SSR) and in the browser — no DOM dependency.\n */\nexport function sanitizeRichTextHtml(html: string): string {\n  return FILTER.process(html);\n}\n\n// Theme-aware prose styling. Wired to the consumer's own design tokens\n// (`foreground`, `muted-foreground`, `primary`, `border`, `muted`) so rich\n// text inherits each storefront's type scale and colours.\nconst RICH_TEXT_PROSE = cn(\n  \"text-muted-foreground leading-relaxed\",\n  \"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0\",\n  \"[&_p]:my-3\",\n  \"[&_h1]:mt-6 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h1]:leading-snug [&_h1]:text-foreground\",\n  \"[&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:leading-snug [&_h2]:text-foreground\",\n  \"[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-foreground\",\n  \"[&_h4]:mt-4 [&_h4]:mb-1.5 [&_h4]:text-sm [&_h4]:font-semibold [&_h4]:text-foreground\",\n  \"[&_h5]:mt-3 [&_h5]:mb-1 [&_h5]:font-semibold [&_h5]:text-foreground\",\n  \"[&_h6]:mt-3 [&_h6]:mb-1 [&_h6]:font-semibold [&_h6]:text-foreground\",\n  \"[&_strong]:font-semibold [&_strong]:text-foreground [&_b]:font-semibold [&_b]:text-foreground\",\n  \"[&_em]:italic [&_i]:italic\",\n  \"[&_u]:underline [&_ins]:underline [&_s]:line-through [&_del]:line-through\",\n  \"[&_mark]:rounded [&_mark]:px-0.5 [&_sub]:align-sub [&_sub]:text-[0.75em] [&_sup]:align-super [&_sup]:text-[0.75em]\",\n  \"[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2\",\n  \"[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1\",\n  \"[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1\",\n  \"[&_li]:pl-1 [&_li>p]:my-0 [&_ul_ul]:my-1 [&_ol_ol]:my-1 [&_ul_ul]:list-[circle]\",\n  \"[&_dl]:my-3 [&_dt]:font-semibold [&_dt]:text-foreground [&_dd]:mb-2 [&_dd]:pl-4\",\n  \"[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic\",\n  \"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]\",\n  \"[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-[0.85em]\",\n  \"[&_pre>code]:bg-transparent [&_pre>code]:p-0\",\n  \"[&_hr]:my-4 [&_hr]:border-border\",\n  \"[&_figure]:my-4 [&_figcaption]:mt-2 [&_figcaption]:text-center [&_figcaption]:text-xs [&_figcaption]:text-muted-foreground\",\n  \"[&_img]:my-3 [&_img]:h-auto [&_img]:max-w-full [&_img]:rounded-md\",\n  \"[&_details]:my-3 [&_details]:rounded-md [&_details]:border [&_details]:border-border [&_details]:p-3\",\n  \"[&_summary]:cursor-pointer [&_summary]:font-medium [&_summary]:text-foreground\",\n  \"[&_table]:my-4 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm\",\n  \"[&_caption]:caption-bottom [&_caption]:mt-2 [&_caption]:text-xs [&_caption]:text-muted-foreground\",\n  \"[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold [&_th]:text-foreground\",\n  \"[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top\",\n  \"[&_iframe]:my-4 [&_iframe]:aspect-video [&_iframe]:w-full [&_iframe]:rounded-md\",\n);\n\nexport interface RichTextProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"dangerouslySetInnerHTML\" | \"children\"> {\n  /** Merchant-authored HTML (e.g. a product description). Sanitized before render. */\n  html?: string | null;\n}\n\n/**\n * RichText — renders sanitized merchant-authored HTML with theme-aware prose\n * styling. Headings, lists, tables, figures, quotes, code, collapsible\n * sections and host-locked embeds all display correctly; scripts, event\n * handlers and unlisted CSS are stripped.\n *\n * Returns `null` when there's no renderable content.\n */\nexport function RichText({ html, className, ...rest }: RichTextProps): React.ReactElement | null {\n  const clean = useMemo(() => (html ? sanitizeRichTextHtml(html) : \"\"), [html]);\n\n  if (!clean) {\n    return null;\n  }\n\n  return (\n    <div\n      data-cimplify-rich-text\n      className={cn(RICH_TEXT_PROSE, className)}\n      dangerouslySetInnerHTML={{ __html: clean }}\n      {...rest}\n    />\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useMemo } from \"react\";\nimport { FilterXSS, safeAttrValue as baseSafeAttrValue } from \"xss\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n// Hosts allowed for <iframe> embeds. Everything else has its src blanked.\nconst ALLOWED_EMBED_HOSTS = new Set<string>([\n  \"www.youtube.com\",\n  \"youtube.com\",\n  \"www.youtube-nocookie.com\",\n  \"youtube-nocookie.com\",\n  \"player.vimeo.com\",\n]);\n\n// Fixed permission policy for embeds. Merchant-supplied `allow` is discarded\n// and replaced with this — a description must never request camera/mic/etc.\nconst IFRAME_ALLOW =\n  \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen\";\n\n// `class` is an unrestricted CSS channel in a Tailwind storefront — a merchant\n// class like `fixed inset-0 z-50` re-enables exactly what the inline-CSS filter\n// below forbids. So `class` values are filtered to this namespace: only the\n// SDK's own `cimplify-*` layout primitives survive; everything else is dropped.\nconst SAFE_CLASS_PATTERN = /^cimplify-[a-z0-9-]+$/i;\n\n// Inline CSS properties we permit (via the xss css filter). Anything else —\n// position, z-index, behaviours, url() exfil vectors — is dropped.\nconst ALLOWED_CSS_PROPERTIES: Record<string, boolean> = {\n  \"text-align\": true,\n  color: true,\n  \"background-color\": true,\n  \"font-weight\": true,\n  \"font-style\": true,\n  \"text-decoration\": true,\n  \"vertical-align\": true,\n  width: true,\n  height: true,\n};\n\nconst STYLEABLE = [\"style\", \"class\"];\n\n/**\n * Allowlist covering rich product copy: rich text, spec and\n * comparison tables, figures, definition lists, collapsible sections, and\n * host-locked video embeds. Tags outside this set are dropped; `javascript:`\n * URLs, event handlers, and unlisted CSS properties are stripped.\n */\nconst RICH_TEXT_WHITELIST: Record<string, string[]> = {\n  p: STYLEABLE,\n  br: [],\n  div: STYLEABLE,\n  section: [\"class\"],\n  span: STYLEABLE,\n  strong: [],\n  b: [],\n  em: [],\n  i: [],\n  u: [],\n  s: [],\n  strike: [],\n  del: [],\n  ins: [],\n  mark: [],\n  small: [],\n  sub: [],\n  sup: [],\n  h1: STYLEABLE,\n  h2: STYLEABLE,\n  h3: STYLEABLE,\n  h4: STYLEABLE,\n  h5: STYLEABLE,\n  h6: STYLEABLE,\n  ul: [\"class\"],\n  ol: [\"start\", \"type\", \"class\"],\n  li: [\"class\"],\n  dl: [\"class\"],\n  dt: [\"class\"],\n  dd: [\"class\"],\n  blockquote: [\"class\"],\n  code: [],\n  pre: [\"class\"],\n  hr: [],\n  a: [\"href\", \"title\", \"target\", \"rel\"],\n  img: [\"src\", \"alt\", \"title\", \"width\", \"height\", \"loading\", \"class\", \"style\"],\n  figure: [\"class\"],\n  figcaption: [\"class\"],\n  details: [],\n  summary: [],\n  table: [\"class\", \"style\"],\n  thead: [],\n  tbody: [],\n  tfoot: [],\n  caption: [],\n  colgroup: [],\n  col: [\"span\", \"style\"],\n  tr: [\"class\"],\n  th: [\"colspan\", \"rowspan\", \"scope\", \"align\", \"class\", \"style\"],\n  td: [\"colspan\", \"rowspan\", \"align\", \"class\", \"style\"],\n  iframe: [\"src\", \"width\", \"height\", \"allow\", \"allowfullscreen\", \"frameborder\", \"title\", \"loading\"],\n};\n\nfunction safeAttrValue(\n  tag: string,\n  name: string,\n  value: string,\n  cssFilter: Parameters<typeof baseSafeAttrValue>[3],\n): string {\n  if (tag === \"iframe\" && name === \"src\") {\n    try {\n      const url = new URL(value);\n      if (url.protocol === \"https:\" && ALLOWED_EMBED_HOSTS.has(url.hostname)) {\n        return value;\n      }\n    } catch {\n      // malformed URL — fall through to blank\n    }\n    return \"\";\n  }\n  if (tag === \"iframe\" && name === \"allow\") {\n    return IFRAME_ALLOW;\n  }\n  if (name === \"class\") {\n    return value\n      .split(/\\s+/)\n      .filter((token) => SAFE_CLASS_PATTERN.test(token))\n      .join(\" \");\n  }\n  return baseSafeAttrValue(tag, name, value, cssFilter);\n}\n\n// Reverse-tabnabbing guard: force `rel=\"noopener noreferrer\"` on any\n// `target=\"_blank\"` anchor. Runs after FILTER.process, whose output has already\n// escaped attribute values — so no raw `>` can appear inside an attribute and a\n// tag-level regex is safe. Deterministic (identical SSR + client).\nfunction withLinkSafety(html: string): string {\n  return html.replace(/<a\\b[^>]*>/gi, (tag) => {\n    if (!/\\btarget\\s*=\\s*[\"']_blank[\"']/i.test(tag)) return tag;\n    return /\\brel\\s*=\\s*[\"'][^\"']*[\"']/i.test(tag)\n      ? tag.replace(/\\brel\\s*=\\s*[\"'][^\"']*[\"']/i, 'rel=\"noopener noreferrer\"')\n      : tag.replace(/>$/, ' rel=\"noopener noreferrer\">');\n  });\n}\n\n// A single configured filter instance, reused across every call.\nconst FILTER = new FilterXSS({\n  whiteList: RICH_TEXT_WHITELIST,\n  css: { whiteList: ALLOWED_CSS_PROPERTIES },\n  safeAttrValue,\n  stripIgnoreTag: true,\n  stripIgnoreTagBody: [\"script\", \"style\"],\n  allowCommentTag: false,\n});\n\n/**\n * Sanitize merchant-authored HTML for safe rendering. Runs identically on the\n * Cloudflare Workers edge (SSR) and in the browser — no DOM dependency.\n */\nexport function sanitizeRichTextHtml(html: string): string {\n  return withLinkSafety(FILTER.process(html));\n}\n\n// Theme-aware prose styling. Wired to the consumer's own design tokens\n// (`foreground`, `muted-foreground`, `primary`, `border`, `muted`) so rich\n// text inherits each storefront's type scale and colours.\nconst RICH_TEXT_PROSE = cn(\n  \"text-muted-foreground leading-relaxed\",\n  \"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0\",\n  \"[&_p]:my-3\",\n  \"[&_h1]:mt-6 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h1]:leading-snug [&_h1]:text-foreground\",\n  \"[&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:leading-snug [&_h2]:text-foreground\",\n  \"[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-foreground\",\n  \"[&_h4]:mt-4 [&_h4]:mb-1.5 [&_h4]:text-sm [&_h4]:font-semibold [&_h4]:text-foreground\",\n  \"[&_h5]:mt-3 [&_h5]:mb-1 [&_h5]:font-semibold [&_h5]:text-foreground\",\n  \"[&_h6]:mt-3 [&_h6]:mb-1 [&_h6]:font-semibold [&_h6]:text-foreground\",\n  \"[&_strong]:font-semibold [&_strong]:text-foreground [&_b]:font-semibold [&_b]:text-foreground\",\n  \"[&_em]:italic [&_i]:italic\",\n  \"[&_u]:underline [&_ins]:underline [&_s]:line-through [&_del]:line-through\",\n  \"[&_mark]:rounded [&_mark]:px-0.5 [&_sub]:align-sub [&_sub]:text-[0.75em] [&_sup]:align-super [&_sup]:text-[0.75em]\",\n  \"[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2\",\n  \"[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1\",\n  \"[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1\",\n  \"[&_li]:pl-1 [&_li>p]:my-0 [&_ul_ul]:my-1 [&_ol_ol]:my-1 [&_ul_ul]:list-[circle]\",\n  \"[&_dl]:my-3 [&_dt]:font-semibold [&_dt]:text-foreground [&_dd]:mb-2 [&_dd]:pl-4\",\n  \"[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:italic\",\n  \"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]\",\n  \"[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-[0.85em]\",\n  \"[&_pre>code]:bg-transparent [&_pre>code]:p-0\",\n  \"[&_hr]:my-4 [&_hr]:border-border\",\n  \"[&_figure]:my-4 [&_figcaption]:mt-2 [&_figcaption]:text-center [&_figcaption]:text-xs [&_figcaption]:text-muted-foreground\",\n  \"[&_img]:my-3 [&_img]:h-auto [&_img]:max-w-full [&_img]:rounded-md\",\n  \"[&_details]:my-3 [&_details]:rounded-md [&_details]:border [&_details]:border-border [&_details]:p-3\",\n  \"[&_summary]:cursor-pointer [&_summary]:font-medium [&_summary]:text-foreground\",\n  \"[&_table]:my-4 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm\",\n  \"[&_caption]:caption-bottom [&_caption]:mt-2 [&_caption]:text-xs [&_caption]:text-muted-foreground\",\n  \"[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold [&_th]:text-foreground\",\n  \"[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top\",\n  \"[&_iframe]:my-4 [&_iframe]:aspect-video [&_iframe]:w-full [&_iframe]:rounded-md\",\n);\n\nexport interface RichTextProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"dangerouslySetInnerHTML\" | \"children\"> {\n  /** Merchant-authored HTML (e.g. a product description). Sanitized before render. */\n  html?: string | null;\n}\n\n/**\n * RichText — renders sanitized merchant-authored HTML with theme-aware prose\n * styling. Headings, lists, tables, figures, quotes, code, collapsible\n * sections and host-locked embeds all display correctly; scripts, event\n * handlers and unlisted CSS are stripped.\n *\n * Returns `null` when there's no renderable content.\n */\nexport function RichText({ html, className, ...rest }: RichTextProps): React.ReactElement | null {\n  const clean = useMemo(() => (html ? sanitizeRichTextHtml(html) : \"\"), [html]);\n\n  if (!clean) {\n    return null;\n  }\n\n  return (\n    <div\n      data-cimplify-rich-text\n      className={cn(RICH_TEXT_PROSE, className)}\n      dangerouslySetInnerHTML={{ __html: clean }}\n      {...rest}\n    />\n  );\n}\n"
     }
   ]
 }

package/registry/schedule-service-card.json

@@ -5,12 +5,13 @@
   "type": "component",
   "registryDependencies": [
     "price",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/schedule-service-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatDuration } from \"../utils/format-duration\";\n\nexport function ScheduleServiceCard({\n  product,\n  slots,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const href = `/products/${product.slug}`;\n  const durationLabel = product.duration_minutes != null\n    ? formatDuration(product.duration_minutes, product.duration_unit)\n    : null;\n\n  const displaySlots = (slots || []).slice(0, 3);\n\n  const shellClass = cn(\n    \"group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden\",\n    \"shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]\",\n    \"transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]\",\n    \"hover:-translate-y-1 hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)]\",\n    className,\n  );\n\n  const inner = (\n    <div className=\"p-4\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex-1 min-w-0\">\n          <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n            {product.name}\n          </h3>\n          <p className=\"text-[12.5px] text-muted-foreground mt-0.5\">\n            {durationLabel && <>{durationLabel} · </>}\n            <Price amount={product.default_price} />\n          </p>\n        </div>\n        {image && (\n          <div className=\"w-14 h-14 rounded-xl overflow-hidden bg-muted shrink-0\">\n            {renderImage ? (\n              renderImage({ src: image, alt: product.name, className: \"w-full h-full object-cover\" })\n            ) : (\n              <img src={image} alt={product.name} className=\"w-full h-full object-cover\" />\n            )}\n          </div>\n        )}\n      </div>\n\n      {product.description && (\n        <p className=\"text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed\">\n          {product.description}\n        </p>\n      )}\n\n      {displaySlots.length > 0 && (\n        <div className=\"mt-4 pt-3 border-t border-border\">\n          <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2\">\n            {product.general_service_capacity != null && product.general_service_capacity > 1\n              ? \"Upcoming classes\"\n              : \"Next available\"\n            }\n          </p>\n          <div className=\"flex gap-2 flex-wrap\">\n            {displaySlots.map((slot, i) => (\n              <button\n                key={i}\n                onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n                className={cn(\n                  \"text-[12.5px] font-medium px-3 py-1.5 rounded-lg transition-all duration-200 ease-out hover:scale-[1.04]\",\n                  i === 0\n                    ? \"bg-primary text-primary-foreground font-semibold shadow-sm\"\n                    : \"bg-muted text-foreground hover:bg-muted/80\",\n                )}\n              >\n                {new Date(slot.start_time).toLocaleString(undefined, {\n                  weekday: \"short\",\n                  hour: \"numeric\",\n                  minute: \"2-digit\",\n                })}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n\n  if (renderLink) {\n    return renderLink({ href, className: shellClass, children: inner });\n  }\n\n  return <a href={href} className={shellClass} data-cimplify-card>{inner}</a>;\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatDuration } from \"../utils/format-duration\";\n\nexport function ScheduleServiceCard({\n  product,\n  slots,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const href = `/products/${product.slug}`;\n  const durationLabel = product.duration_minutes != null\n    ? formatDuration(product.duration_minutes, product.duration_unit)\n    : null;\n\n  const displaySlots = (slots || []).slice(0, 3);\n\n  const shellClass = cn(\n    \"group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden\",\n    \"shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]\",\n    \"transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]\",\n    \"hover:-translate-y-1 hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)]\",\n    className,\n  );\n\n  const inner = (\n    <div className=\"p-4\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex-1 min-w-0\">\n          <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n            {product.name}\n          </h3>\n          <p className=\"text-[12.5px] text-muted-foreground mt-0.5\">\n            {durationLabel && <>{durationLabel} · </>}\n            <Price amount={product.default_price} />\n          </p>\n        </div>\n        {image && (\n          <div className=\"w-14 h-14 rounded-xl overflow-hidden bg-muted shrink-0\">\n            {renderImage ? (\n              renderImage({ src: image, alt: product.name, className: \"w-full h-full object-cover\" })\n            ) : (\n              <img src={image} alt={product.name} className=\"w-full h-full object-cover\" />\n            )}\n          </div>\n        )}\n      </div>\n\n      {product.description && (\n        <p className=\"text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed\">\n          {stripHtmlToText(product.description)}\n        </p>\n      )}\n\n      {displaySlots.length > 0 && (\n        <div className=\"mt-4 pt-3 border-t border-border\">\n          <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2\">\n            {product.general_service_capacity != null && product.general_service_capacity > 1\n              ? \"Upcoming classes\"\n              : \"Next available\"\n            }\n          </p>\n          <div className=\"flex gap-2 flex-wrap\">\n            {displaySlots.map((slot, i) => (\n              <button\n                key={i}\n                onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n                className={cn(\n                  \"text-[12.5px] font-medium px-3 py-1.5 rounded-lg transition-all duration-200 ease-out hover:scale-[1.04]\",\n                  i === 0\n                    ? \"bg-primary text-primary-foreground font-semibold shadow-sm\"\n                    : \"bg-muted text-foreground hover:bg-muted/80\",\n                )}\n              >\n                {new Date(slot.start_time).toLocaleString(undefined, {\n                  weekday: \"short\",\n                  hour: \"numeric\",\n                  minute: \"2-digit\",\n                })}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n\n  if (renderLink) {\n    return renderLink({ href, className: shellClass, children: inner });\n  }\n\n  return <a href={href} className={shellClass} data-cimplify-card>{inner}</a>;\n}\n"
     }
   ]
 }

package/registry/standard-service-card.json

@@ -5,12 +5,13 @@
   "type": "component",
   "registryDependencies": [
     "price",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/standard-service-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product } from \"@cimplify/sdk\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ServiceCardLayoutProps extends CardLayoutProps {\n  slots?: AvailableSlot[];\n  onBook?: (product: Product) => void;\n}\n\nfunction formatDuration(minutes: number, unit?: string): string {\n  if (unit && unit !== \"minutes\") return `${minutes} ${unit}`;\n  if (minutes >= 60) {\n    const h = Math.floor(minutes / 60);\n    const m = minutes % 60;\n    return m > 0 ? `${h}h ${m}m` : `${h} hr${h > 1 ? \"s\" : \"\"}`;\n  }\n  return `${minutes} min`;\n}\n\nexport function StandardServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Duration pill */}\n        {product.duration_minutes != null && (\n          <span className=\"absolute bottom-3 left-3 inline-flex items-center gap-1 text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n            {formatDuration(product.duration_minutes, product.duration_unit)}\n          </span>\n        )}\n\n        {/* Price on image */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {product.description}\n          </p>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[12px] text-muted-foreground\">\n            <span className=\"w-[7px] h-[7px] rounded-full bg-emerald-500 animate-pulse\" />\n            <span>Available</span>\n            {hasDeposit && (\n              <>\n                <span className=\"text-border\">·</span>\n                <span><Price amount={product.deposit_amount!} /> deposit</span>\n              </>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Book now &rarr;\n          </button>\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 { Product } from \"@cimplify/sdk\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ServiceCardLayoutProps extends CardLayoutProps {\n  slots?: AvailableSlot[];\n  onBook?: (product: Product) => void;\n}\n\nfunction formatDuration(minutes: number, unit?: string): string {\n  if (unit && unit !== \"minutes\") return `${minutes} ${unit}`;\n  if (minutes >= 60) {\n    const h = Math.floor(minutes / 60);\n    const m = minutes % 60;\n    return m > 0 ? `${h}h ${m}m` : `${h} hr${h > 1 ? \"s\" : \"\"}`;\n  }\n  return `${minutes} min`;\n}\n\nexport function StandardServiceCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Duration pill */}\n        {product.duration_minutes != null && (\n          <span className=\"absolute bottom-3 left-3 inline-flex items-center gap-1 text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n            {formatDuration(product.duration_minutes, product.duration_unit)}\n          </span>\n        )}\n\n        {/* Price on image */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[12px] text-muted-foreground\">\n            <span className=\"w-[7px] h-[7px] rounded-full bg-emerald-500 animate-pulse\" />\n            <span>Available</span>\n            {hasDeposit && (\n              <>\n                <span className=\"text-border\">·</span>\n                <span><Price amount={product.deposit_amount!} /> deposit</span>\n              </>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Book now &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }

package/registry/strip-html.json

@@ -0,0 +1,13 @@
+{
+  "name": "strip-html",
+  "title": "stripHtmlToText",
+  "description": "Projects HTML to a single-line plain-text preview for cards and meta descriptions. Not a security boundary — output is rendered as text only.",
+  "type": "utility",
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "utils/strip-html.ts",
+      "content": "/**\n * Project HTML to a single-line plain-text preview. NOT a security boundary —\n * output is only ever rendered as text (never as HTML). For card/meta previews\n * where tags must not appear.\n */\nexport function stripHtmlToText(html: string | null | undefined): string {\n  if (!html) return \"\";\n  return html\n    .replace(/<[^>]*>/g, \" \") // strip tags BEFORE decoding entities\n    .replace(/&nbsp;/gi, \" \")\n    .replace(/&amp;/gi, \"&\")\n    .replace(/&lt;/gi, \"<\")\n    .replace(/&gt;/gi, \">\")\n    .replace(/&quot;/gi, '\"')\n    .replace(/&#0*39;|&apos;/gi, \"'\")\n    .replace(/&#(\\d+);/g, (_, n) => String.fromCodePoint(Number(n)))\n    .replace(/&#x([0-9a-f]+);/gi, (_, n) => String.fromCodePoint(parseInt(n, 16)))\n    .replace(/\\s+/g, \" \")\n    .trim();\n}\n"
+    }
+  ]
+}

package/registry/subscription-card.json

@@ -5,12 +5,13 @@
   "type": "component",
   "registryDependencies": [
     "price",
-    "cn"
+    "cn",
+    "strip-html"
   ],
   "files": [
     {
       "path": "cards/subscription-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst FREQUENCY_LABELS: Record<string, string> = {\n  weekly: \"/week\",\n  biweekly: \"/2wk\",\n  monthly: \"/mo\",\n  quarterly: \"/qtr\",\n  annually: \"/yr\",\n};\n\nexport function SubscriptionCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const plans = product.billing_plans || [];\n  const primaryPlan = plans[0];\n  const frequency = primaryPlan?.frequency\n    ? FREQUENCY_LABELS[primaryPlan.frequency] || `/${primaryPlan.frequency}`\n    : \"/mo\";\n  const hasTrial = primaryPlan?.trial_days != null && primaryPlan.trial_days > 0;\n  const tags = product.tags || [];\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Price on image */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />{frequency}\n        </span>\n\n        {/* Trial badge */}\n        {hasTrial && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50/90 text-emerald-700 border border-emerald-200/50 backdrop-blur px-2 py-0.5 rounded-md\">\n            {primaryPlan!.trial_days}-day free trial\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {product.description}\n          </p>\n        )}\n\n        {/* Tags */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 3).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Billing plan options */}\n        {plans.length > 1 && (\n          <div className=\"mt-3 space-y-1\">\n            {plans.slice(0, 3).map((plan) => {\n              const label = plan.frequency\n                ? plan.frequency.charAt(0).toUpperCase() + plan.frequency.slice(1)\n                : \"Standard\";\n              const hasMarkup = plan.markup_type && plan.markup_amount;\n              const isSavings = plan.markup_type === \"percentage\" && plan.markup_amount != null && plan.markup_amount < 0;\n\n              return (\n                <div key={plan.id} className=\"flex items-center justify-between text-[11px]\">\n                  <span className=\"text-muted-foreground\">{label}</span>\n                  <span className=\"font-medium\">\n                    {hasMarkup && isSavings && (\n                      <span className=\"text-emerald-600 mr-1\">Save {Math.abs(plan.markup_amount!)}%</span>\n                    )}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[11px] text-muted-foreground\">\n            {hasTrial && (\n              <span className=\"text-emerald-600 font-medium\">Free trial</span>\n            )}\n            {primaryPlan?.setup_fee != null && primaryPlan.setup_fee > 0 && (\n              <span><Price amount={primaryPlan.setup_fee} /> setup</span>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Subscribe &rarr;\n          </button>\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 { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst FREQUENCY_LABELS: Record<string, string> = {\n  weekly: \"/week\",\n  biweekly: \"/2wk\",\n  monthly: \"/mo\",\n  quarterly: \"/qtr\",\n  annually: \"/yr\",\n};\n\nexport function SubscriptionCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const plans = product.billing_plans || [];\n  const primaryPlan = plans[0];\n  const frequency = primaryPlan?.frequency\n    ? FREQUENCY_LABELS[primaryPlan.frequency] || `/${primaryPlan.frequency}`\n    : \"/mo\";\n  const hasTrial = primaryPlan?.trial_days != null && primaryPlan.trial_days > 0;\n  const tags = product.tags || [];\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        {/* Price on image */}\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />{frequency}\n        </span>\n\n        {/* Trial badge */}\n        {hasTrial && (\n          <span className=\"absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50/90 text-emerald-700 border border-emerald-200/50 backdrop-blur px-2 py-0.5 rounded-md\">\n            {primaryPlan!.trial_days}-day free trial\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Tags */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 3).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Billing plan options */}\n        {plans.length > 1 && (\n          <div className=\"mt-3 space-y-1\">\n            {plans.slice(0, 3).map((plan) => {\n              const label = plan.frequency\n                ? plan.frequency.charAt(0).toUpperCase() + plan.frequency.slice(1)\n                : \"Standard\";\n              const hasMarkup = plan.markup_type && plan.markup_amount;\n              const isSavings = plan.markup_type === \"percentage\" && plan.markup_amount != null && plan.markup_amount < 0;\n\n              return (\n                <div key={plan.id} className=\"flex items-center justify-between text-[11px]\">\n                  <span className=\"text-muted-foreground\">{label}</span>\n                  <span className=\"font-medium\">\n                    {hasMarkup && isSavings && (\n                      <span className=\"text-emerald-600 mr-1\">Save {Math.abs(plan.markup_amount!)}%</span>\n                    )}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[11px] text-muted-foreground\">\n            {hasTrial && (\n              <span className=\"text-emerald-600 font-medium\">Free trial</span>\n            )}\n            {primaryPlan?.setup_fee != null && primaryPlan.setup_fee > 0 && (\n              <span><Price amount={primaryPlan.setup_fee} /> setup</span>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Subscribe &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }