@cimplify/sdk 0.71.0 → 0.73.0

package/registry/date-slot-picker.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "date-slot-picker.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */\n  schedulingMode?: SchedulingMode;\n  /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Forwarded to `<SlotPicker>` — value for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Forwarded to `<SlotPicker>` — hide slots already in the past. Default: true. */\n  hideElapsedSlots?: boolean;\n  /** Forwarded to `<SlotPicker>` — minimum lead time in minutes. Default: 0. */\n  minLeadMinutes?: number;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  schedulingMode,\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n    >\n      <div\n        data-cimplify-date-nav\n        className={cn(\"flex items-center justify-end gap-2\", classNames?.nav)}\n      >\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          aria-label=\"Previous dates\"\n          data-cimplify-date-nav-prev\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40\",\n            classNames?.navButton,\n          )}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          aria-label=\"Next dates\"\n          data-cimplify-date-nav-next\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n            classNames?.navButton,\n          )}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List\n        data-cimplify-date-strip\n        className={cn(\"grid grid-cols-7 gap-1 sm:gap-2\", classNames?.dateStrip)}\n      >\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={cn(\n                \"flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40\",\n                classNames?.dateButton,\n              )}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={cn(\"h-32 rounded-md bg-muted/40 animate-pulse\", classNames?.loading)}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n          schedulingMode={schedulingMode}\n          durationUnit={durationUnit}\n          durationValue={durationValue}\n          hideElapsedSlots={hideElapsedSlots}\n          minLeadMinutes={minLeadMinutes}\n        />\n      </div>\n    </Tabs.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  /** Currency the slot prices are denominated in. */\n  currency?: CurrencyCode;\n  /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */\n  schedulingMode?: SchedulingMode;\n  /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Forwarded to `<SlotPicker>` — value for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Forwarded to `<SlotPicker>` — hide slots already in the past. Default: true. */\n  hideElapsedSlots?: boolean;\n  /** Forwarded to `<SlotPicker>` — minimum lead time in minutes. Default: 0. */\n  minLeadMinutes?: number;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  currency,\n  schedulingMode,\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n    >\n      <div\n        data-cimplify-date-nav\n        className={cn(\"flex items-center justify-end gap-2\", classNames?.nav)}\n      >\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          aria-label=\"Previous dates\"\n          data-cimplify-date-nav-prev\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40\",\n            classNames?.navButton,\n          )}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          aria-label=\"Next dates\"\n          data-cimplify-date-nav-next\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n            classNames?.navButton,\n          )}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List\n        data-cimplify-date-strip\n        className={cn(\"grid grid-cols-7 gap-1 sm:gap-2\", classNames?.dateStrip)}\n      >\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={cn(\n                \"flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40\",\n                classNames?.dateButton,\n              )}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={cn(\"h-32 rounded-md bg-muted/40 animate-pulse\", classNames?.loading)}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n          currency={currency}\n          schedulingMode={schedulingMode}\n          durationUnit={durationUnit}\n          durationValue={durationValue}\n          hideElapsedSlots={hideElapsedSlots}\n          minLeadMinutes={minLeadMinutes}\n        />\n      </div>\n    </Tabs.Root>\n  );\n}\n"
     }
   ]
 }

package/registry/default-product-layout.json

@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "layouts/default-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { resolveGallery } from \"../../gallery\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { AvailabilityBadge } from \"@cimplify/sdk/react\";\nimport { SaleBadge } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function DefaultProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const [selectedVariantId, setSelectedVariantId] = React.useState<string | undefined>();\n  const images = resolveGallery(product, selectedVariantId);\n  const hasRange = (product.quantity_pricing && product.quantity_pricing.length > 1)\n    || (product.variants && product.variants.length > 1);\n  const onSale = isOnSale(product);\n  const hasPhysicalDetails = product.sku || product.vendor || product.material;\n\n  return (\n    <div data-cimplify-product-layout=\"default\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Brand + Tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {product.vendor && (\n                <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-widest\">\n                  {product.vendor}\n                </span>\n              )}\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name */}\n            <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n              {product.name}\n            </h1>\n\n            {/* Price */}\n            <div className=\"flex items-baseline gap-3\">\n              {hasRange ? (\n                <PriceRange product={product} className=\"text-2xl font-extrabold\" />\n              ) : onSale ? (\n                <>\n                  <Price amount={product.default_price} className=\"text-2xl font-extrabold\" />\n                  <Price amount={getBasePrice(product)} className=\"text-lg text-muted-foreground line-through\" />\n                  <span className=\"text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5\">\n                    Save {getDiscountPercentage(product)}%\n                  </span>\n                </>\n              ) : (\n                <Price amount={product.default_price} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Physical product details */}\n            {hasPhysicalDetails && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.sku && <p>SKU: <span className=\"font-mono text-foreground\">{product.sku}</span></p>}\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.material && <p>Material: <span className=\"text-foreground\">{product.material}</span></p>}\n                {product.vendor && <p>Brand: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {(product.length_mm || product.width_mm || product.height_mm) && (\n                  <p>Dimensions: <span className=\"text-foreground\">\n                    {[product.length_mm, product.width_mm, product.height_mm]\n                      .filter(Boolean)\n                      .map((d) => `${(d! / 10).toFixed(1)} cm`)\n                      .join(\" x \")}\n                  </span></p>\n                )}\n                {product.item_condition && product.item_condition !== \"new\" && (\n                  <p>Condition: <span className=\"text-foreground capitalize\">{product.item_condition}</span></p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              onVariantChange={(variantId) => setSelectedVariantId(variantId)}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { resolveGallery } from \"../../gallery\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { AvailabilityBadge } from \"@cimplify/sdk/react\";\nimport { SaleBadge } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage, getProductCurrency } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function DefaultProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const [selectedVariantId, setSelectedVariantId] = React.useState<string | undefined>();\n  const images = resolveGallery(product, selectedVariantId);\n  const currency = getProductCurrency(product);\n  const hasRange = (product.quantity_pricing && product.quantity_pricing.length > 1)\n    || (product.variants && product.variants.length > 1);\n  const onSale = isOnSale(product);\n  const hasPhysicalDetails = product.sku || product.vendor || product.material;\n\n  return (\n    <div data-cimplify-product-layout=\"default\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Brand + Tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {product.vendor && (\n                <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-widest\">\n                  {product.vendor}\n                </span>\n              )}\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name */}\n            <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n              {product.name}\n            </h1>\n\n            {/* Price */}\n            <div className=\"flex items-baseline gap-3\">\n              {hasRange ? (\n                <PriceRange product={product} currency={currency} className=\"text-2xl font-extrabold\" />\n              ) : onSale ? (\n                <>\n                  <Price amount={product.default_price} currency={currency} className=\"text-2xl font-extrabold\" />\n                  <Price amount={getBasePrice(product)} currency={currency} className=\"text-lg text-muted-foreground line-through\" />\n                  <span className=\"text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5\">\n                    Save {getDiscountPercentage(product)}%\n                  </span>\n                </>\n              ) : (\n                <Price amount={product.default_price} currency={currency} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Physical product details */}\n            {hasPhysicalDetails && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.sku && <p>SKU: <span className=\"font-mono text-foreground\">{product.sku}</span></p>}\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.material && <p>Material: <span className=\"text-foreground\">{product.material}</span></p>}\n                {product.vendor && <p>Brand: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {(product.length_mm || product.width_mm || product.height_mm) && (\n                  <p>Dimensions: <span className=\"text-foreground\">\n                    {[product.length_mm, product.width_mm, product.height_mm]\n                      .filter(Boolean)\n                      .map((d) => `${(d! / 10).toFixed(1)} cm`)\n                      .join(\" x \")}\n                  </span></p>\n                )}\n                {product.item_condition && product.item_condition !== \"new\" && (\n                  <p>Condition: <span className=\"text-foreground capitalize\">{product.item_condition}</span></p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              onVariantChange={(variantId) => setSelectedVariantId(variantId)}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/digital-product-card.json

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

package/registry/digital-product-layout.json

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

package/registry/food-product-card.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "cards/food-product-card.tsx",
-      "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"
+      "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 { getProductCurrency } from \"@cimplify/sdk\";\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 currency = getProductCurrency(product);\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} currency={currency} /></span>\n          ) : (\n            <Price amount={product.default_price} currency={currency} 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/food-product-layout.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "layouts/food-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  MetadataStringList,\n  CustomAttributesTable,\n  TagPills,\n  getMetadataStringList,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n\nexport function FoodProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const tags = product.tags || [];\n  const ingredients = getMetadataStringList(product.metadata, \"ingredients\");\n  const pairings = getMetadataStringList(product.metadata, \"pairings\");\n\n  return (\n    <div data-cimplify-product-layout=\"food\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags + Allergens */}\n            <div className=\"flex flex-wrap gap-1.5\">\n              {tags.map((tag) => (\n                <span key={tag} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full\">\n                  {tag}\n                </span>\n              ))}\n              {product.allergies && product.allergies.map((allergy) => (\n                <span key={allergy} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded-full\">\n                  Contains {allergy}\n                </span>\n              ))}\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-bold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} className=\"text-2xl font-semibold mt-2 block\" />\n            </div>\n\n            {/* Quick stats */}\n            {(product.calories != null || product.preparation_time_minutes != null) && (\n              <div data-cimplify-product-layout-stats className=\"flex flex-wrap gap-4 py-3 border-y border-border\">\n                {product.preparation_time_minutes != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.preparation_time_minutes} min</strong> prep time\n                  </span>\n                )}\n                {product.calories != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.calories}</strong> calories\n                  </span>\n                )}\n              </div>\n            )}\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Ingredients + Pairings */}\n            {(ingredients.length > 0 || pairings.length > 0) && (\n              <div className=\"grid sm:grid-cols-2 gap-4\">\n                <MetadataStringList items={ingredients} label=\"Key Ingredients\" />\n                <MetadataStringList items={pairings} label=\"Pairings\" />\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (variants, add-ons, composites, bundles, billing, volume) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"You may also enjoy\"\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  MetadataStringList,\n  CustomAttributesTable,\n  TagPills,\n  getMetadataStringList,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice, getProductCurrency } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\n\nexport function FoodProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const images = product.images || (product.image_url ? [product.image_url] : []);\n  const currency = getProductCurrency(product);\n  const tags = product.tags || [];\n  const ingredients = getMetadataStringList(product.metadata, \"ingredients\");\n  const pairings = getMetadataStringList(product.metadata, \"pairings\");\n\n  return (\n    <div data-cimplify-product-layout=\"food\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Tags + Allergens */}\n            <div className=\"flex flex-wrap gap-1.5\">\n              {tags.map((tag) => (\n                <span key={tag} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full\">\n                  {tag}\n                </span>\n              ))}\n              {product.allergies && product.allergies.map((allergy) => (\n                <span key={allergy} className=\"inline-flex items-center gap-1 px-2.5 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded-full\">\n                  Contains {allergy}\n                </span>\n              ))}\n            </div>\n\n            {/* Name + Price */}\n            <div>\n              <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-bold tracking-tight\">\n                {product.name}\n              </h1>\n              <Price amount={product.default_price} currency={currency} className=\"text-2xl font-semibold mt-2 block\" />\n            </div>\n\n            {/* Quick stats */}\n            {(product.calories != null || product.preparation_time_minutes != null) && (\n              <div data-cimplify-product-layout-stats className=\"flex flex-wrap gap-4 py-3 border-y border-border\">\n                {product.preparation_time_minutes != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.preparation_time_minutes} min</strong> prep time\n                  </span>\n                )}\n                {product.calories != null && (\n                  <span className=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n                    <strong className=\"text-foreground\">{product.calories}</strong> calories\n                  </span>\n                )}\n              </div>\n            )}\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Ingredients + Pairings */}\n            {(ingredients.length > 0 || pairings.length > 0) && (\n              <div className=\"grid sm:grid-cols-2 gap-4\">\n                <MetadataStringList items={ingredients} label=\"Key Ingredients\" />\n                <MetadataStringList items={pairings} label=\"Pairings\" />\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Customizer (variants, add-ons, composites, bundles, billing, volume) */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n          title=\"You may also enjoy\"\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/lease-service-card.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "cards/lease-service-card.tsx",
-      "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"
+      "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 { getProductCurrency } from \"@cimplify/sdk\";\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 currency = getProductCurrency(product);\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} currency={currency} />/{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!} currency={currency} /> 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/price-range.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "price-range.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { getPriceRange, formatPriceRange } from \"@cimplify/sdk\";\nimport { useOptionalCimplify } from \"@cimplify/sdk/react\";\n\nexport interface PriceRangeProps {\n  product: Product | ProductWithDetails;\n  currency?: CurrencyCode;\n  className?: string;\n}\n\nexport function PriceRange({ product, currency, className }: PriceRangeProps): React.ReactElement | null {\n  const context = useOptionalCimplify();\n  const resolvedCurrency = currency ?? (context?.displayCurrency as CurrencyCode | undefined) ?? \"USD\";\n  const range = getPriceRange(product);\n\n  if (!range) return null;\n\n  return (\n    <span data-cimplify-price-range className={className}>\n      {formatPriceRange(range.min, range.max, resolvedCurrency)}\n    </span>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { getPriceRange, formatPriceRange, getProductCurrency } from \"@cimplify/sdk\";\n\nexport interface PriceRangeProps {\n  product: Product | ProductWithDetails;\n  currency?: CurrencyCode;\n  className?: string;\n}\n\nexport function PriceRange({ product, currency, className }: PriceRangeProps): React.ReactElement | null {\n  const resolvedCurrency = currency ?? getProductCurrency(product);\n  const range = getPriceRange(product);\n\n  if (!range) return null;\n\n  return (\n    <span data-cimplify-price-range className={className}>\n      {formatPriceRange(range.min, range.max, resolvedCurrency)}\n    </span>\n  );\n}\n"
     }
   ]
 }

package/registry/price.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "price.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport { formatPrice } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useOptionalCimplify } from \"@cimplify/sdk/react\";\n\nexport interface PriceProps {\n  /** The amount in base (business) currency. */\n  amount: number | string;\n  /** Explicit currency — skips provider lookup when provided. */\n  currency?: CurrencyCode;\n  /** Optional CSS class name for the wrapping span. */\n  className?: string;\n  /** Optional prefix rendered before the formatted price (e.g. \"+\"). */\n  prefix?: string;\n}\n\n/**\n * Price — renders a formatted price value.\n *\n * When used inside CimplifyProvider: reads displayCurrency and convertPrice\n * from context for FX conversion.\n *\n * When used outside a provider (or with explicit `currency` prop): formats\n * directly — no provider required. Works in any React environment.\n */\nexport function Price({ amount, currency, className, prefix }: PriceProps): React.ReactElement {\n  const context = useOptionalCimplify();\n  const resolvedCurrency = currency ?? (context?.displayCurrency as CurrencyCode | undefined) ?? \"USD\";\n  const convertedAmount = !currency && context?.convertPrice ? context.convertPrice(amount) : amount;\n  const resolvedAmount = typeof convertedAmount === \"string\" ? parseFloat(convertedAmount) || 0 : convertedAmount;\n\n  return (\n    <span className={className}>\n      {prefix}\n      {formatPrice(resolvedAmount, resolvedCurrency)}\n    </span>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { formatPrice } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useOptionalCimplify } from \"@cimplify/sdk/react\";\n\nexport interface PriceProps {\n  /** The amount, denominated in `currency` (or the business base currency). */\n  amount: number | string;\n  /**\n   * Currency the `amount` is denominated in. Pass the product/order currency\n   * so the value renders correctly during SSR — before the provider has\n   * loaded the business client-side. Falls back to the provider's base\n   * currency, then USD.\n   */\n  currency?: CurrencyCode;\n  /** Optional CSS class name for the wrapping span. */\n  className?: string;\n  /** Optional prefix rendered before the formatted price (e.g. \"+\"). */\n  prefix?: string;\n  /**\n   * Apply the provider's FX display-currency override when one is active.\n   * Default true. The conversion is a post-hydration enhancement: it only\n   * engages once an FX rate has loaded client-side, so SSR and first-paint\n   * output always match and no currency flash occurs.\n   */\n  convert?: boolean;\n}\n\n/**\n * Price — renders a formatted price value.\n *\n * Currency is resolved from the `currency` prop (the amount's source currency),\n * falling back to the provider's base currency, then USD. Because the source\n * currency comes from data rather than the client-only provider bootstrap, an\n * explicit `currency` renders correctly during SSR.\n *\n * FX display-currency conversion (when a user picks a non-base display\n * currency) is layered on top after hydration, and only when the source is the\n * base currency the FX rate is computed from. It never affects the server or\n * first-paint render, so there is no hydration mismatch.\n */\nexport function Price({\n  amount,\n  currency,\n  className,\n  prefix,\n  convert = true,\n}: PriceProps): React.ReactElement {\n  const context = useOptionalCimplify();\n  const sourceCurrency =\n    currency ?? (context?.baseCurrency as CurrencyCode | undefined) ?? \"USD\";\n\n  const fxActive =\n    convert &&\n    context?.fxRate != null &&\n    context.displayCurrency !== sourceCurrency &&\n    sourceCurrency === context.baseCurrency;\n\n  const resolvedCurrency = (fxActive ? context!.displayCurrency : sourceCurrency) as CurrencyCode;\n  const resolvedAmount = fxActive\n    ? context!.convertPrice(amount)\n    : typeof amount === \"string\"\n      ? parseFloat(amount) || 0\n      : amount;\n\n  return (\n    <span className={className}>\n      {prefix}\n      {formatPrice(resolvedAmount, resolvedCurrency)}\n    </span>\n  );\n}\n"
     }
   ]
 }

package/registry/product-card.json

@@ -12,7 +12,7 @@
   "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\";\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"
+      "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 { getProductCurrency } from \"@cimplify/sdk\";\nimport { ProductSheet } from \"@cimplify/sdk/react\";\nimport { CardVariant } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { FoodProductCard } from \"@cimplify/sdk/react\";\nimport { RetailProductCard } from \"@cimplify/sdk/react\";\nimport { WholesaleProductCard } from \"@cimplify/sdk/react\";\nimport { DigitalProductCard } from \"@cimplify/sdk/react\";\nimport { StandardServiceCard } from \"@cimplify/sdk/react\";\nimport { RentalServiceCard } from \"@cimplify/sdk/react\";\nimport { AccommodationCard } from \"@cimplify/sdk/react\";\nimport { LeaseServiceCard } from \"@cimplify/sdk/react\";\nimport { SubscriptionCard } from \"@cimplify/sdk/react\";\nimport { BundleProductCard } from \"./cards/bundle-product-card\";\nimport { CompositeProductCard } from \"./cards/composite-product-card\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\n\nconst ASPECT_STYLES: Record<string, React.CSSProperties> = {\n  square: { aspectRatio: \"1/1\" },\n  \"4/3\": { aspectRatio: \"4/3\" },\n  \"16/10\": { aspectRatio: \"16/10\" },\n  \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nexport interface ProductCardClassNames {\n  root?: string;\n  imageContainer?: string;\n  image?: string;\n  body?: string;\n  name?: string;\n  description?: string;\n  price?: string;\n  badges?: string;\n  badge?: string;\n  modal?: string;\n  modalOverlay?: string;\n}\n\nexport interface ProductCardProps {\n  /** The product to display. */\n  product: Product;\n  /** Display mode: \"card\" opens a modal, \"page\" renders as a link. Auto-detected from product.display_mode. */\n  displayMode?: \"card\" | \"page\";\n  /** Explicit card variant. Auto-detected from product data when omitted. */\n  variant?: CardVariant;\n  /** Per-slug card map. Highest priority — maps a product slug to a custom card component. */\n  cards?: Record<string, React.ComponentType<CardLayoutProps>>;\n  /** Link href for page mode. Default: `/menu/${product.slug}` */\n  href?: string;\n  /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */\n  renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: {\n    src: string;\n    alt: string;\n    className?: string;\n  }) => React.ReactNode;\n  /** Custom link renderer for page mode (e.g. Next.js Link). */\n  renderLink?: (props: {\n    href: string;\n    className?: string;\n    children: React.ReactNode;\n  }) => 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} currency={getProductCurrency(product)} className={cn(\"text-sm font-medium text-foreground mt-1\", classNames?.price)} />\n        </div>\n      </>\n    );\n  })();\n\n  // Page mode — render as a link\n  if (mode === \"page\") {\n    const linkHref = href ?? `/menu/${product.slug}`;\n    const linkClassName = cn(\"group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\", className, classNames?.root);\n\n    if (renderLink) {\n      return renderLink({ 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/product-customizer.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "product-customizer.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from \"react\";\nimport { Button } from \"@base-ui/react/button\";\nimport type {\n  ProductWithDetails,\n  VariantView,\n  AddOnOption,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport type { ProductBillingPlan } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport { parsePrice, getUnitPriceAtQuantity } from \"@cimplify/sdk\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { useCart, useQuote } from \"@cimplify/sdk/react\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { VariantSelector } from \"@cimplify/sdk/react\";\nimport { AddOnSelector } from \"@cimplify/sdk/react\";\nimport { CompositeSelector } from \"@cimplify/sdk/react\";\nimport { BundleSelector } from \"@cimplify/sdk/react\";\nimport { BillingPlanSelector } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { CustomerInputFields } from \"./customer-input-fields\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductCustomizerClassNames {\n  root?: string;\n  actions?: string;\n  submitButton?: string;\n  submitButtonAdded?: string;\n  validation?: string;\n  specialInstructions?: string;\n  depositInfo?: string;\n  allergens?: string;\n  duration?: string;\n}\n\nexport interface ProductCustomizerProps {\n  product: ProductWithDetails;\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Lets the parent swap its gallery for `variant.images` on selection. */\n  onVariantChange?: (\n    variantId: string | undefined,\n    variant: VariantView | undefined,\n  ) => void;\n  showSpecialInstructions?: boolean;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\nexport function ProductCustomizer({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\n  className,\n  classNames,\n}: ProductCustomizerProps): React.ReactElement {\n  const [quantity, setQuantity] = useState(product.min_order_quantity ?? 1);\n  const [isAdded, setIsAdded] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>();\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>();\n  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = useState<string[]>([]);\n\n  const [compositeSelections, setCompositeSelections] = useState<ComponentSelectionInput[]>([]);\n  const [compositePrice, setCompositePrice] = useState<CompositePriceResult | null>(null);\n  const [compositeReady, setCompositeReady] = useState(false);\n\n  const [bundleSelections, setBundleSelections] = useState<BundleSelectionInput[]>([]);\n  const [bundleTotalPrice, setBundleTotalPrice] = useState<number | null>(null);\n  const [bundleReady, setBundleReady] = useState(false);\n  const [selectedBillingPlan, setSelectedBillingPlan] = useState<ProductBillingPlan | null>(null);\n  const [customerInputValues, setCustomerInputValues] = useState<Record<string, unknown>>({});\n  const [specialInstructions, setSpecialInstructions] = useState(\"\");\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n\n  const cart = useCart();\n\n  const productType = product.type || \"product\";\n  const isComposite = productType === \"composite\";\n  const isBundle = productType === \"bundle\";\n  const isDigital = productType === \"digital\";\n  const isService = productType === \"service\";\n  const isStandard = !isComposite && !isBundle;\n\n  const hasVariants = isStandard && product.variants && product.variants.length > 0;\n  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;\n\n  useEffect(() => {\n    setQuantity(product.min_order_quantity ?? 1);\n    setIsAdded(false);\n    setIsSubmitting(false);\n    setSelectedVariantId(undefined);\n    setSelectedVariant(undefined);\n    setSelectedAddOnOptionIds([]);\n    setCompositeSelections([]);\n    setCompositePrice(null);\n    setCompositeReady(false);\n    setBundleSelections([]);\n    setBundleTotalPrice(null);\n    setBundleReady(false);\n    setSelectedBillingPlan(null);\n    setCustomerInputValues({});\n    setSpecialInstructions(\"\");\n    setSelectedSlot(null);\n  }, [product.id, product.min_order_quantity]);\n\n  const selectedAddOnOptions = useMemo(() => {\n    if (!product.add_ons) return [];\n    const options: AddOnOption[] = [];\n    for (const addOn of product.add_ons) {\n      for (const option of addOn.options) {\n        if (selectedAddOnOptionIds.includes(option.id)) {\n          options.push(option);\n        }\n      }\n    }\n    return options;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const normalizedAddOnOptionIds = useMemo(() => {\n    if (selectedAddOnOptionIds.length === 0) return [];\n    return Array.from(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).sort();\n  }, [selectedAddOnOptionIds]);\n\n  const localTotalPrice = useMemo(() => {\n    if (isComposite && compositePrice) {\n      return parsePrice(compositePrice.final_price) * quantity;\n    }\n\n    if (isBundle && bundleTotalPrice != null) {\n      return bundleTotalPrice * quantity;\n    }\n\n    let price = parsePrice(product.default_price);\n\n    if (selectedVariant?.price_adjustment) {\n      price += parsePrice(selectedVariant.price_adjustment);\n    }\n\n    for (const option of selectedAddOnOptions) {\n      if (option.default_price) {\n        price += parsePrice(option.default_price);\n      }\n    }\n\n    return price * quantity;\n  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice, isBundle, bundleTotalPrice]);\n\n  const requiredAddOnsSatisfied = useMemo(() => {\n    if (!product.add_ons) return true;\n\n    for (const addOn of product.add_ons) {\n      if (addOn.is_required) {\n        const selectedInGroup = selectedAddOnOptionIds.filter((id) =>\n          addOn.options.some((opt) => opt.id === id),\n        ).length;\n\n        const minRequired = addOn.min_selections || 1;\n        if (selectedInGroup < minRequired) {\n          return false;\n        }\n      }\n    }\n    return true;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const quoteInput = useMemo(\n    () => ({\n      productId: product.id,\n      quantity,\n      variantId: selectedVariantId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      compositeSelections: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds, isBundle, bundleSelections, isComposite, compositeSelections],\n  );\n\n  const requiredInputsSatisfied = useMemo(() => {\n    if (!product.input_fields || product.input_fields.length === 0) return true;\n    return product.input_fields.every((field) => {\n      if (!field.is_required) return true;\n      const val = customerInputValues[field.id];\n      return val !== undefined && val !== \"\" && val !== null;\n    });\n  }, [product.input_fields, customerInputValues]);\n\n  const quoteEnabled = isComposite\n    ? compositeReady && requiredInputsSatisfied\n    : isBundle\n      ? bundleReady && requiredInputsSatisfied\n      : requiredAddOnsSatisfied && requiredInputsSatisfied;\n\n  const { quote } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quoteId = quote?.quote_id;\n  const quotedTotalPrice = useMemo(() => {\n    if (!quote) return undefined;\n\n    const priceInfo = quote.quoted_total_price_info ?? quote.final_price_info;\n    const perUnit = priceInfo.pre_tax_price;\n    if (perUnit === undefined || perUnit === null) return undefined;\n    return parsePrice(perUnit) * quantity;\n  }, [quote, quantity]);\n\n  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setSelectedVariantId(variantId);\n      setSelectedVariant(variant);\n      onVariantChange?.(variantId, variant);\n    },\n    [onVariantChange],\n  );\n\n  const addedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(addedTimerRef.current), []);\n\n  const handleAddToCart = useCallback(async () => {\n    if (isSubmitting) return;\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? { id: selectedVariant.id, name: selectedVariant.name || \"\", price_adjustment: selectedVariant.price_adjustment }\n        : undefined,\n      quoteId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions: selectedAddOnOptions.length > 0\n        ? selectedAddOnOptions.map((opt) => ({\n            id: opt.id,\n            name: opt.name,\n            add_on_id: opt.add_on_id,\n            default_price: opt.default_price,\n          }))\n        : undefined,\n      compositeSelections: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      billingPlanId: selectedBillingPlan?.id,\n      ...(isService && selectedSlot\n        ? {\n            scheduledStart: selectedSlot.start_time,\n            scheduledEnd: selectedSlot.end_time,\n            staffId: selectedSlot.available_staff?.[0]?.staff_id,\n            resourceId: selectedSlot.available_resources?.[0]?.resource_id,\n          }\n        : {}),\n      customerInputs: Object.keys(customerInputValues).length > 0\n        ? Object.entries(customerInputValues)\n            .filter(([, v]) => v !== undefined && v !== \"\")\n            .map(([fieldId, value]) => ({ field_id: fieldId, value }))\n        : undefined,\n      specialInstructions: specialInstructions.trim() || undefined,\n    };\n\n    try {\n      if (onAddToCart) {\n        await onAddToCart(product, quantity, options);\n      } else {\n        await cart.addItem(product, quantity, options);\n      }\n      setIsAdded(true);\n      clearTimeout(addedTimerRef.current);\n      addedTimerRef.current = setTimeout(() => {\n        setIsAdded(false);\n        setQuantity(product.min_order_quantity ?? 1);\n      }, 2000);\n    } catch {\n      // Caller handles errors via onAddToCart or cart hook error state\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, isSubmitting, onAddToCart, cart]);\n\n  return (\n    <div data-cimplify-customizer className={cn(\"space-y-6\", className, classNames?.root)}>\n      {isComposite && product.groups && product.composite_id && (\n        <CompositeSelector\n          compositeId={product.composite_id}\n          groups={product.groups}\n          onSelectionsChange={setCompositeSelections}\n          onPriceChange={setCompositePrice}\n          onReady={setCompositeReady}\n          skipPriceFetch\n        />\n      )}\n\n      {isBundle && product.components && (\n        <BundleSelector\n          components={product.components}\n          bundlePrice={product.bundle_price}\n          discountValue={product.discount_value}\n          pricingType={product.pricing_type}\n          onSelectionsChange={setBundleSelections}\n          onPriceChange={setBundleTotalPrice}\n          onReady={setBundleReady}\n        />\n      )}\n\n      {isService && (\n        <DateSlotPicker\n          serviceId={product.id}\n          selectedSlot={selectedSlot}\n          onSlotSelect={(slot) => setSelectedSlot(slot)}\n          participantCount={quantity}\n        />\n      )}\n\n      {hasVariants && (\n        <VariantSelector\n          variants={product.variants!}\n          variantAxes={product.variant_axes}\n          basePrice={product.default_price}\n          selectedVariantId={selectedVariantId}\n          onVariantChange={handleVariantChange}\n          productName={product.name}\n        />\n      )}\n\n      {hasAddOns && (\n        <AddOnSelector\n          addOns={product.add_ons!}\n          selectedOptions={selectedAddOnOptionIds}\n          onOptionsChange={setSelectedAddOnOptionIds}\n        />\n      )}\n\n      {/* Billing plans */}\n      {product.billing_plans && product.billing_plans.length > 0 && (\n        <BillingPlanSelector\n          productId={product.id}\n          plans={product.billing_plans}\n          onPlanSelect={setSelectedBillingPlan}\n          selectedPlanId={selectedBillingPlan?.id ?? null}\n          showOneTimePurchase\n        />\n      )}\n\n      {/* Volume pricing tiers */}\n      {product.quantity_pricing && product.quantity_pricing.length > 1 && (\n        <VolumePricing\n          tiers={product.quantity_pricing}\n          currentQuantity={quantity}\n        />\n      )}\n\n      {/* Customer input fields */}\n      {product.input_fields && product.input_fields.length > 0 && (\n        <CustomerInputFields\n          fields={product.input_fields}\n          values={customerInputValues}\n          onChange={setCustomerInputValues}\n        />\n      )}\n\n      {/* Deposit info for service products */}\n      {product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount && (\n        <div data-cimplify-customizer-deposit className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}>\n          {product.deposit_type === \"fixed\" ? (\n            <span>Deposit required: <Price amount={product.deposit_amount} /></span>\n          ) : (\n            <span>Deposit required: {parsePrice(product.deposit_amount)}%</span>\n          )}\n        </div>\n      )}\n\n      {/* Allergens */}\n      {product.allergies && product.allergies.length > 0 && (\n        <div data-cimplify-customizer-allergens className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}>\n          {product.allergies.map((allergen) => (\n            <span\n              key={allergen}\n              data-cimplify-allergen-tag\n              className=\"inline-block text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground\"\n            >\n              {allergen}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Service duration */}\n      {isService && product.duration_minutes != null && (\n        <div data-cimplify-customizer-duration className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}>\n          Duration: {formatDuration(product.duration_minutes, product.duration_unit)}\n        </div>\n      )}\n\n      {/* Special instructions */}\n      {showSpecialInstructions && !isDigital && (\n        <div data-cimplify-customizer-special-instructions>\n          <textarea\n            value={specialInstructions}\n            onChange={(e) => setSpecialInstructions(e.target.value)}\n            placeholder=\"Special instructions (e.g., no onions, extra sauce)\"\n            rows={2}\n            data-cimplify-customizer-textarea\n            className={cn(\n              \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring resize-none\",\n              classNames?.specialInstructions,\n            )}\n          />\n        </div>\n      )}\n\n      <div\n        data-cimplify-customizer-actions\n        className={cn(\"pt-4 border-t border-border\", classNames?.actions)}\n      >\n        {!quoteEnabled && (\n          <p\n            id=\"cimplify-customizer-validation\"\n            data-cimplify-customizer-validation\n            className={cn(\"text-sm text-destructive mb-3\", classNames?.validation)}\n          >\n            Please select all required options\n          </p>\n        )}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <QuantitySelector\n              value={quantity}\n              onChange={setQuantity}\n              min={product.min_order_quantity ?? 1}\n            />\n            {product.min_order_quantity && product.min_order_quantity > 1 && (\n              <span data-cimplify-customizer-min-hint className=\"text-xs text-muted-foreground text-center\">\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div data-cimplify-customizer-unit-price className=\"text-sm text-muted-foreground text-right shrink-0\">\n              <Price amount={getUnitPriceAtQuantity(product.quantity_pricing, quantity, parsePrice(product.default_price))} className=\"font-medium text-foreground\" /> ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteEnabled}\n            aria-describedby={!quoteEnabled ? \"cimplify-customizer-validation\" : undefined}\n            data-cimplify-customizer-submit\n            className={cn(\n              \"flex-1 h-14 text-base bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-full\",\n              isAdded && classNames?.submitButtonAdded,\n              classNames?.submitButton,\n            )}\n          >\n            {isAdded ? \"Added to Cart\" : (\n              <>\n                Add to Cart &middot; <Price amount={displayTotalPrice} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from \"react\";\nimport { Button } from \"@base-ui/react/button\";\nimport type {\n  ProductWithDetails,\n  VariantView,\n  AddOnOption,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport type { ProductBillingPlan } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport { parsePrice, getUnitPriceAtQuantity, getProductCurrency } from \"@cimplify/sdk\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { useCart, useQuote } from \"@cimplify/sdk/react\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { VariantSelector } from \"@cimplify/sdk/react\";\nimport { AddOnSelector } from \"@cimplify/sdk/react\";\nimport { CompositeSelector } from \"@cimplify/sdk/react\";\nimport { BundleSelector } from \"@cimplify/sdk/react\";\nimport { BillingPlanSelector } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { CustomerInputFields } from \"./customer-input-fields\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductCustomizerClassNames {\n  root?: string;\n  actions?: string;\n  submitButton?: string;\n  submitButtonAdded?: string;\n  validation?: string;\n  specialInstructions?: string;\n  depositInfo?: string;\n  allergens?: string;\n  duration?: string;\n}\n\nexport interface ProductCustomizerProps {\n  product: ProductWithDetails;\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Lets the parent swap its gallery for `variant.images` on selection. */\n  onVariantChange?: (\n    variantId: string | undefined,\n    variant: VariantView | undefined,\n  ) => void;\n  showSpecialInstructions?: boolean;\n  className?: string;\n  classNames?: ProductCustomizerClassNames;\n}\n\nexport function ProductCustomizer({\n  product,\n  onAddToCart,\n  onVariantChange,\n  showSpecialInstructions = true,\n  className,\n  classNames,\n}: ProductCustomizerProps): React.ReactElement {\n  const [quantity, setQuantity] = useState(product.min_order_quantity ?? 1);\n  const [isAdded, setIsAdded] = useState(false);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>();\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>();\n  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = useState<string[]>([]);\n\n  const [compositeSelections, setCompositeSelections] = useState<ComponentSelectionInput[]>([]);\n  const [compositePrice, setCompositePrice] = useState<CompositePriceResult | null>(null);\n  const [compositeReady, setCompositeReady] = useState(false);\n\n  const [bundleSelections, setBundleSelections] = useState<BundleSelectionInput[]>([]);\n  const [bundleTotalPrice, setBundleTotalPrice] = useState<number | null>(null);\n  const [bundleReady, setBundleReady] = useState(false);\n  const [selectedBillingPlan, setSelectedBillingPlan] = useState<ProductBillingPlan | null>(null);\n  const [customerInputValues, setCustomerInputValues] = useState<Record<string, unknown>>({});\n  const [specialInstructions, setSpecialInstructions] = useState(\"\");\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n\n  const cart = useCart();\n\n  const currency = getProductCurrency(product);\n  const productType = product.type || \"product\";\n  const isComposite = productType === \"composite\";\n  const isBundle = productType === \"bundle\";\n  const isDigital = productType === \"digital\";\n  const isService = productType === \"service\";\n  const isStandard = !isComposite && !isBundle;\n\n  const hasVariants = isStandard && product.variants && product.variants.length > 0;\n  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;\n\n  useEffect(() => {\n    setQuantity(product.min_order_quantity ?? 1);\n    setIsAdded(false);\n    setIsSubmitting(false);\n    setSelectedVariantId(undefined);\n    setSelectedVariant(undefined);\n    setSelectedAddOnOptionIds([]);\n    setCompositeSelections([]);\n    setCompositePrice(null);\n    setCompositeReady(false);\n    setBundleSelections([]);\n    setBundleTotalPrice(null);\n    setBundleReady(false);\n    setSelectedBillingPlan(null);\n    setCustomerInputValues({});\n    setSpecialInstructions(\"\");\n    setSelectedSlot(null);\n  }, [product.id, product.min_order_quantity]);\n\n  const selectedAddOnOptions = useMemo(() => {\n    if (!product.add_ons) return [];\n    const options: AddOnOption[] = [];\n    for (const addOn of product.add_ons) {\n      for (const option of addOn.options) {\n        if (selectedAddOnOptionIds.includes(option.id)) {\n          options.push(option);\n        }\n      }\n    }\n    return options;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const normalizedAddOnOptionIds = useMemo(() => {\n    if (selectedAddOnOptionIds.length === 0) return [];\n    return Array.from(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).sort();\n  }, [selectedAddOnOptionIds]);\n\n  const localTotalPrice = useMemo(() => {\n    if (isComposite && compositePrice) {\n      return parsePrice(compositePrice.final_price) * quantity;\n    }\n\n    if (isBundle && bundleTotalPrice != null) {\n      return bundleTotalPrice * quantity;\n    }\n\n    let price = parsePrice(product.default_price);\n\n    if (selectedVariant?.price_adjustment) {\n      price += parsePrice(selectedVariant.price_adjustment);\n    }\n\n    for (const option of selectedAddOnOptions) {\n      if (option.default_price) {\n        price += parsePrice(option.default_price);\n      }\n    }\n\n    return price * quantity;\n  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice, isBundle, bundleTotalPrice]);\n\n  const requiredAddOnsSatisfied = useMemo(() => {\n    if (!product.add_ons) return true;\n\n    for (const addOn of product.add_ons) {\n      if (addOn.is_required) {\n        const selectedInGroup = selectedAddOnOptionIds.filter((id) =>\n          addOn.options.some((opt) => opt.id === id),\n        ).length;\n\n        const minRequired = addOn.min_selections || 1;\n        if (selectedInGroup < minRequired) {\n          return false;\n        }\n      }\n    }\n    return true;\n  }, [product.add_ons, selectedAddOnOptionIds]);\n\n  const quoteInput = useMemo(\n    () => ({\n      productId: product.id,\n      quantity,\n      variantId: selectedVariantId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      compositeSelections: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n    }),\n    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds, isBundle, bundleSelections, isComposite, compositeSelections],\n  );\n\n  const requiredInputsSatisfied = useMemo(() => {\n    if (!product.input_fields || product.input_fields.length === 0) return true;\n    return product.input_fields.every((field) => {\n      if (!field.is_required) return true;\n      const val = customerInputValues[field.id];\n      return val !== undefined && val !== \"\" && val !== null;\n    });\n  }, [product.input_fields, customerInputValues]);\n\n  const quoteEnabled = isComposite\n    ? compositeReady && requiredInputsSatisfied\n    : isBundle\n      ? bundleReady && requiredInputsSatisfied\n      : requiredAddOnsSatisfied && requiredInputsSatisfied;\n\n  const { quote } = useQuote(quoteInput, {\n    enabled: quoteEnabled,\n  });\n\n  const quoteId = quote?.quote_id;\n  const quotedTotalPrice = useMemo(() => {\n    if (!quote) return undefined;\n\n    const priceInfo = quote.quoted_total_price_info ?? quote.final_price_info;\n    const perUnit = priceInfo.pre_tax_price;\n    if (perUnit === undefined || perUnit === null) return undefined;\n    return parsePrice(perUnit) * quantity;\n  }, [quote, quantity]);\n\n  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;\n\n  const handleVariantChange = useCallback(\n    (variantId: string | undefined, variant: VariantView | undefined) => {\n      setSelectedVariantId(variantId);\n      setSelectedVariant(variant);\n      onVariantChange?.(variantId, variant);\n    },\n    [onVariantChange],\n  );\n\n  const addedTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(addedTimerRef.current), []);\n\n  const handleAddToCart = useCallback(async () => {\n    if (isSubmitting) return;\n\n    setIsSubmitting(true);\n\n    const options: AddToCartOptions = {\n      variantId: selectedVariantId,\n      variant: selectedVariant\n        ? { id: selectedVariant.id, name: selectedVariant.name || \"\", price_adjustment: selectedVariant.price_adjustment }\n        : undefined,\n      quoteId,\n      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : undefined,\n      addOnOptions: selectedAddOnOptions.length > 0\n        ? selectedAddOnOptions.map((opt) => ({\n            id: opt.id,\n            name: opt.name,\n            add_on_id: opt.add_on_id,\n            default_price: opt.default_price,\n          }))\n        : undefined,\n      compositeSelections: isComposite && compositeSelections.length > 0 ? compositeSelections : undefined,\n      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : undefined,\n      billingPlanId: selectedBillingPlan?.id,\n      ...(isService && selectedSlot\n        ? {\n            scheduledStart: selectedSlot.start_time,\n            scheduledEnd: selectedSlot.end_time,\n            staffId: selectedSlot.available_staff?.[0]?.staff_id,\n            resourceId: selectedSlot.available_resources?.[0]?.resource_id,\n          }\n        : {}),\n      customerInputs: Object.keys(customerInputValues).length > 0\n        ? Object.entries(customerInputValues)\n            .filter(([, v]) => v !== undefined && v !== \"\")\n            .map(([fieldId, value]) => ({ field_id: fieldId, value }))\n        : undefined,\n      specialInstructions: specialInstructions.trim() || undefined,\n    };\n\n    try {\n      if (onAddToCart) {\n        await onAddToCart(product, quantity, options);\n      } else {\n        await cart.addItem(product, quantity, options);\n      }\n      setIsAdded(true);\n      clearTimeout(addedTimerRef.current);\n      addedTimerRef.current = setTimeout(() => {\n        setIsAdded(false);\n        setQuantity(product.min_order_quantity ?? 1);\n      }, 2000);\n    } catch {\n      // Caller handles errors via onAddToCart or cart hook error state\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, isSubmitting, onAddToCart, cart]);\n\n  return (\n    <div data-cimplify-customizer className={cn(\"space-y-6\", className, classNames?.root)}>\n      {isComposite && product.groups && product.composite_id && (\n        <CompositeSelector\n          compositeId={product.composite_id}\n          groups={product.groups}\n          currency={currency}\n          onSelectionsChange={setCompositeSelections}\n          onPriceChange={setCompositePrice}\n          onReady={setCompositeReady}\n          skipPriceFetch\n        />\n      )}\n\n      {isBundle && product.components && (\n        <BundleSelector\n          components={product.components}\n          bundlePrice={product.bundle_price}\n          discountValue={product.discount_value}\n          pricingType={product.pricing_type}\n          currency={currency}\n          onSelectionsChange={setBundleSelections}\n          onPriceChange={setBundleTotalPrice}\n          onReady={setBundleReady}\n        />\n      )}\n\n      {isService && (\n        <DateSlotPicker\n          serviceId={product.id}\n          selectedSlot={selectedSlot}\n          onSlotSelect={(slot) => setSelectedSlot(slot)}\n          participantCount={quantity}\n          currency={currency}\n        />\n      )}\n\n      {hasVariants && (\n        <VariantSelector\n          variants={product.variants!}\n          variantAxes={product.variant_axes}\n          basePrice={product.default_price}\n          currency={currency}\n          selectedVariantId={selectedVariantId}\n          onVariantChange={handleVariantChange}\n          productName={product.name}\n        />\n      )}\n\n      {hasAddOns && (\n        <AddOnSelector\n          addOns={product.add_ons!}\n          selectedOptions={selectedAddOnOptionIds}\n          onOptionsChange={setSelectedAddOnOptionIds}\n          currency={currency}\n        />\n      )}\n\n      {/* Billing plans */}\n      {product.billing_plans && product.billing_plans.length > 0 && (\n        <BillingPlanSelector\n          productId={product.id}\n          plans={product.billing_plans}\n          currency={currency}\n          onPlanSelect={setSelectedBillingPlan}\n          selectedPlanId={selectedBillingPlan?.id ?? null}\n          showOneTimePurchase\n        />\n      )}\n\n      {/* Volume pricing tiers */}\n      {product.quantity_pricing && product.quantity_pricing.length > 1 && (\n        <VolumePricing\n          tiers={product.quantity_pricing}\n          currentQuantity={quantity}\n          currency={currency}\n        />\n      )}\n\n      {/* Customer input fields */}\n      {product.input_fields && product.input_fields.length > 0 && (\n        <CustomerInputFields\n          fields={product.input_fields}\n          values={customerInputValues}\n          onChange={setCustomerInputValues}\n          currency={currency}\n        />\n      )}\n\n      {/* Deposit info for service products */}\n      {product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount && (\n        <div data-cimplify-customizer-deposit className={cn(\"text-sm text-muted-foreground\", classNames?.depositInfo)}>\n          {product.deposit_type === \"fixed\" ? (\n            <span>Deposit required: <Price amount={product.deposit_amount} currency={currency} /></span>\n          ) : (\n            <span>Deposit required: {parsePrice(product.deposit_amount)}%</span>\n          )}\n        </div>\n      )}\n\n      {/* Allergens */}\n      {product.allergies && product.allergies.length > 0 && (\n        <div data-cimplify-customizer-allergens className={cn(\"flex flex-wrap gap-1.5\", classNames?.allergens)}>\n          {product.allergies.map((allergen) => (\n            <span\n              key={allergen}\n              data-cimplify-allergen-tag\n              className=\"inline-block text-xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground\"\n            >\n              {allergen}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Service duration */}\n      {isService && product.duration_minutes != null && (\n        <div data-cimplify-customizer-duration className={cn(\"text-sm text-muted-foreground\", classNames?.duration)}>\n          Duration: {formatDuration(product.duration_minutes, product.duration_unit)}\n        </div>\n      )}\n\n      {/* Special instructions */}\n      {showSpecialInstructions && !isDigital && (\n        <div data-cimplify-customizer-special-instructions>\n          <textarea\n            value={specialInstructions}\n            onChange={(e) => setSpecialInstructions(e.target.value)}\n            placeholder=\"Special instructions (e.g., no onions, extra sauce)\"\n            rows={2}\n            data-cimplify-customizer-textarea\n            className={cn(\n              \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring resize-none\",\n              classNames?.specialInstructions,\n            )}\n          />\n        </div>\n      )}\n\n      <div\n        data-cimplify-customizer-actions\n        className={cn(\"pt-4 border-t border-border\", classNames?.actions)}\n      >\n        {!quoteEnabled && (\n          <p\n            id=\"cimplify-customizer-validation\"\n            data-cimplify-customizer-validation\n            className={cn(\"text-sm text-destructive mb-3\", classNames?.validation)}\n          >\n            Please select all required options\n          </p>\n        )}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <QuantitySelector\n              value={quantity}\n              onChange={setQuantity}\n              min={product.min_order_quantity ?? 1}\n            />\n            {product.min_order_quantity && product.min_order_quantity > 1 && (\n              <span data-cimplify-customizer-min-hint className=\"text-xs text-muted-foreground text-center\">\n                Min. {product.min_order_quantity}\n              </span>\n            )}\n          </div>\n\n          {product.quantity_pricing && product.quantity_pricing.length > 0 && (\n            <div data-cimplify-customizer-unit-price className=\"text-sm text-muted-foreground text-right shrink-0\">\n              <Price amount={getUnitPriceAtQuantity(product.quantity_pricing, quantity, parsePrice(product.default_price))} currency={currency} className=\"font-medium text-foreground\" /> ea.\n            </div>\n          )}\n\n          <Button\n            onClick={handleAddToCart}\n            disabled={isAdded || isSubmitting || !quoteEnabled}\n            aria-describedby={!quoteEnabled ? \"cimplify-customizer-validation\" : undefined}\n            data-cimplify-customizer-submit\n            className={cn(\n              \"flex-1 h-14 text-base bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-full\",\n              isAdded && classNames?.submitButtonAdded,\n              classNames?.submitButton,\n            )}\n          >\n            {isAdded ? \"Added to Cart\" : (\n              <>\n                Add to Cart &middot; <Price amount={displayTotalPrice} currency={currency} />\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/product-image-gallery.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "product-image-gallery.tsx",
-      "content": "\"use client\";\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio } from \"@base-ui/react/radio\";\n\nexport interface ProductImageGalleryProps {\n  images: string[];\n  productName: string;\n  aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n  className?: string;\n}\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\n/**\n * ProductImageGallery — main image + thumbnail strip.\n *\n * Uses plain `<img>` for framework-agnostic rendering (not Next.js Image).\n */\nexport function ProductImageGallery({\n  images,\n  productName,\n  aspectRatio = \"4/3\",\n  className,\n}: ProductImageGalleryProps): React.ReactElement | null {\n  const normalizedImages = useMemo(\n    () =>\n      images.filter(\n        (image): image is string =>\n          typeof image === \"string\" && image.trim().length > 0,\n      ),\n    [images],\n  );\n\n  const [selectedImage, setSelectedImage] = useState(0);\n\n  useEffect(() => {\n    setSelectedImage(0);\n  }, [normalizedImages.length, productName]);\n\n  if (normalizedImages.length === 0) {\n    return null;\n  }\n\n  const activeImage = normalizedImages[selectedImage] || normalizedImages[0];\n\n  return (\n    <div data-cimplify-image-gallery className={className}>\n      <div\n        data-cimplify-image-gallery-main\n        style={{ position: \"relative\", overflow: \"hidden\", ...ASPECT_STYLES[aspectRatio] }}\n      >\n        <img\n          src={activeImage}\n          alt={productName}\n          style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n          data-cimplify-image-gallery-active\n        />\n      </div>\n\n      {normalizedImages.length > 1 && (\n        <RadioGroup\n          aria-label={`${productName} image thumbnails`}\n          value={String(selectedImage)}\n          onValueChange={(value) => setSelectedImage(Number(value))}\n          data-cimplify-image-gallery-thumbnails\n          style={{ display: \"flex\", gap: \"0.5rem\", marginTop: \"0.75rem\" }}\n        >\n          {normalizedImages.map((image, index) => {\n            const isSelected = selectedImage === index;\n            return (\n              <Radio.Root\n                key={`${image}-${index}`}\n                value={String(index)}\n                                data-cimplify-image-gallery-thumb\n                data-selected={isSelected || undefined}\n                style={{\n                  width: \"4rem\",\n                  height: \"4rem\",\n                  overflow: \"hidden\",\n                  padding: 0,\n                  border: \"none\",\n                  cursor: \"pointer\",\n                }}\n              >\n                <img\n                  src={image}\n                  alt=\"\"\n                  style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n                />\n              </Radio.Root>\n            );\n          })}\n        </RadioGroup>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio } from \"@base-ui/react/radio\";\n\nexport interface ProductImageGalleryProps {\n  images: string[];\n  productName: string;\n  aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n  className?: string;\n}\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\n/**\n * ProductImageGallery — main image + thumbnail strip.\n *\n * Uses plain `<img>` for framework-agnostic rendering (not Next.js Image).\n */\nexport function ProductImageGallery({\n  images,\n  productName,\n  aspectRatio = \"4/3\",\n  className,\n}: ProductImageGalleryProps): React.ReactElement | null {\n  const normalizedImages = useMemo(\n    () =>\n      images.filter(\n        (image): image is string =>\n          typeof image === \"string\" && image.trim().length > 0,\n      ),\n    [images],\n  );\n\n  const [selectedImage, setSelectedImage] = useState(0);\n  const [fadeIn, setFadeIn] = useState(true);\n\n  useEffect(() => {\n    setSelectedImage(0);\n  }, [normalizedImages.length, productName]);\n\n  // Cross-fade the main image whenever the selection changes (thumbnail click\n  // or a variant swapping in its own gallery).\n  useEffect(() => {\n    setFadeIn(false);\n    const id = requestAnimationFrame(() => setFadeIn(true));\n    return () => cancelAnimationFrame(id);\n  }, [selectedImage]);\n\n  if (normalizedImages.length === 0) {\n    return null;\n  }\n\n  const activeImage = normalizedImages[selectedImage] || normalizedImages[0];\n\n  return (\n    <div data-cimplify-image-gallery className={className}>\n      <div\n        data-cimplify-image-gallery-main\n        style={{ position: \"relative\", overflow: \"hidden\", ...ASPECT_STYLES[aspectRatio] }}\n      >\n        <img\n          src={activeImage}\n          alt={productName}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n            objectFit: \"cover\",\n            opacity: fadeIn ? 1 : 0,\n            transition: \"opacity 300ms ease\",\n          }}\n          data-cimplify-image-gallery-active\n        />\n      </div>\n\n      {normalizedImages.length > 1 && (\n        <RadioGroup\n          aria-label={`${productName} image thumbnails`}\n          value={String(selectedImage)}\n          onValueChange={(value) => setSelectedImage(Number(value))}\n          data-cimplify-image-gallery-thumbnails\n          style={{ display: \"flex\", gap: \"0.5rem\", marginTop: \"0.75rem\" }}\n        >\n          {normalizedImages.map((image, index) => {\n            const isSelected = selectedImage === index;\n            return (\n              <Radio.Root\n                key={`${image}-${index}`}\n                value={String(index)}\n                                data-cimplify-image-gallery-thumb\n                data-selected={isSelected || undefined}\n                style={{\n                  width: \"4rem\",\n                  height: \"4rem\",\n                  overflow: \"hidden\",\n                  padding: 0,\n                  border: \"none\",\n                  cursor: \"pointer\",\n                }}\n              >\n                <img\n                  src={image}\n                  alt=\"\"\n                  style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n                />\n              </Radio.Root>\n            );\n          })}\n        </RadioGroup>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/product-sheet.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "product-sheet.tsx",
-      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport type { Product, ProductWithDetails, VariantView } from \"@cimplify/sdk\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductSheetClassNames {\n  root?: string;\n  image?: string;\n  header?: string;\n  name?: string;\n  price?: string;\n  description?: string;\n  customizer?: string;\n  loading?: string;\n}\n\nexport interface ProductSheetProps {\n  /** A slim Product (triggers lazy-fetch) or a fully-loaded ProductWithDetails. */\n  product: Product | ProductWithDetails;\n  /** Called when the sheet should close. */\n  onClose?: () => void;\n  /** Override the default add-to-cart behavior. */\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\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  className?: string;\n  classNames?: ProductSheetClassNames;\n}\n\nfunction isProductWithDetails(\n  product: Product | ProductWithDetails,\n): product is ProductWithDetails {\n  return \"variants\" in product;\n}\n\n/**\n * ProductSheet — full product detail view composing gallery, header, and customizer.\n *\n * When given a slim `Product`, it lazy-fetches the full details via `useProduct`.\n * When given a `ProductWithDetails`, it skips the fetch entirely.\n */\nexport function ProductSheet({\n  product,\n  onClose,\n  onAddToCart,\n  renderImage,\n  className,\n  classNames,\n}: ProductSheetProps): React.ReactElement {\n  const needsFetch = !isProductWithDetails(product);\n  const { product: fetched, isLoading } = useProduct(\n    product.slug ?? product.id,\n    { enabled: needsFetch },\n  );\n  const fullProduct = needsFetch ? fetched : (product as ProductWithDetails);\n\n  // Loading state\n  if (isLoading && !fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div\n          data-cimplify-product-sheet-skeleton\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"1rem\",\n          }}\n        >\n          <div\n            style={{\n              aspectRatio: \"4/3\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.5rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1.5rem\",\n              width: \"60%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1rem\",\n              width: \"30%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (!fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        className={cn(className, classNames?.root)}\n      >\n        <p>Product not found.</p>\n      </div>\n    );\n  }\n\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>(\n    undefined,\n  );\n\n  const variantImages = selectedVariant?.images?.filter(Boolean) ?? [];\n  const productImages: string[] = [];\n  if (fullProduct.images && fullProduct.images.length > 0) {\n    productImages.push(...fullProduct.images.filter(Boolean));\n  } else if (fullProduct.image_url) {\n    productImages.push(fullProduct.image_url);\n  }\n  const images: string[] =\n    variantImages.length > 0 ? variantImages : productImages;\n\n  const hasMultipleImages = images.length > 1;\n  const singleImage = images[0];\n\n  return (\n    <div\n      data-cimplify-product-sheet\n      className={cn(className, classNames?.root)}\n      style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}\n    >\n      {/* Image area */}\n      {hasMultipleImages ? (\n        <ProductImageGallery\n          images={images}\n          productName={fullProduct.name}\n          className={classNames?.image}\n        />\n      ) : singleImage ? (\n        <div data-cimplify-product-sheet-image className={classNames?.image}>\n          {renderImage ? (\n            renderImage({ src: singleImage, alt: fullProduct.name })\n          ) : (\n            <img\n              src={singleImage}\n              alt={fullProduct.name}\n              style={{ width: \"100%\", height: \"auto\", objectFit: \"cover\" }}\n            />\n          )}\n        </div>\n      ) : null}\n\n      {/* Header */}\n      <div data-cimplify-product-sheet-header className={classNames?.header}>\n        <h2\n          data-cimplify-product-sheet-name\n          className={classNames?.name}\n          style={{ margin: 0 }}\n        >\n          {fullProduct.name}\n        </h2>\n        <Price\n          amount={fullProduct.default_price}\n          className={classNames?.price}\n        />\n      </div>\n\n      {/* Description — merchant-authored HTML from the catalogue. */}\n      <RichText\n        html={fullProduct.description}\n        data-cimplify-product-sheet-description\n        className={cn(\"text-sm\", classNames?.description)}\n      />\n\n      {/* Customizer */}\n      <ProductCustomizer\n        product={fullProduct}\n        onAddToCart={onAddToCart}\n        onVariantChange={(_id, variant) => setSelectedVariant(variant)}\n        className={classNames?.customizer}\n      />\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport type { Product, ProductWithDetails, VariantView } from \"@cimplify/sdk\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface ProductSheetClassNames {\n  root?: string;\n  image?: string;\n  header?: string;\n  name?: string;\n  price?: string;\n  description?: string;\n  customizer?: string;\n  loading?: string;\n}\n\nexport interface ProductSheetProps {\n  /** A slim Product (triggers lazy-fetch) or a fully-loaded ProductWithDetails. */\n  product: Product | ProductWithDetails;\n  /** Called when the sheet should close. */\n  onClose?: () => void;\n  /** Override the default add-to-cart behavior. */\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\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  className?: string;\n  classNames?: ProductSheetClassNames;\n}\n\nfunction isProductWithDetails(\n  product: Product | ProductWithDetails,\n): product is ProductWithDetails {\n  return \"variants\" in product;\n}\n\n/**\n * ProductSheet — full product detail view composing gallery, header, and customizer.\n *\n * When given a slim `Product`, it lazy-fetches the full details via `useProduct`.\n * When given a `ProductWithDetails`, it skips the fetch entirely.\n */\nexport function ProductSheet({\n  product,\n  onClose,\n  onAddToCart,\n  renderImage,\n  className,\n  classNames,\n}: ProductSheetProps): React.ReactElement {\n  const needsFetch = !isProductWithDetails(product);\n  const { product: fetched, isLoading } = useProduct(\n    product.slug ?? product.id,\n    { enabled: needsFetch },\n  );\n  const fullProduct = needsFetch ? fetched : (product as ProductWithDetails);\n\n  // Loading state\n  if (isLoading && !fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div\n          data-cimplify-product-sheet-skeleton\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"1rem\",\n          }}\n        >\n          <div\n            style={{\n              aspectRatio: \"4/3\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.5rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1.5rem\",\n              width: \"60%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n          <div\n            style={{\n              height: \"1rem\",\n              width: \"30%\",\n              backgroundColor: \"rgba(0,0,0,0.06)\",\n              borderRadius: \"0.25rem\",\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (!fullProduct) {\n    return (\n      <div\n        data-cimplify-product-sheet\n        className={cn(className, classNames?.root)}\n      >\n        <p>Product not found.</p>\n      </div>\n    );\n  }\n\n  const [selectedVariant, setSelectedVariant] = useState<VariantView | undefined>(\n    undefined,\n  );\n\n  const variantImages = selectedVariant?.images?.filter(Boolean) ?? [];\n  const productImages: string[] = [];\n  if (fullProduct.images && fullProduct.images.length > 0) {\n    productImages.push(...fullProduct.images.filter(Boolean));\n  } else if (fullProduct.image_url) {\n    productImages.push(fullProduct.image_url);\n  }\n  const images: string[] =\n    variantImages.length > 0 ? variantImages : productImages;\n\n  const hasMultipleImages = images.length > 1;\n  const singleImage = images[0];\n\n  return (\n    <div\n      data-cimplify-product-sheet\n      className={cn(className, classNames?.root)}\n      style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}\n    >\n      {/* Image area */}\n      {hasMultipleImages ? (\n        <ProductImageGallery\n          images={images}\n          productName={fullProduct.name}\n          className={classNames?.image}\n        />\n      ) : singleImage ? (\n        <div data-cimplify-product-sheet-image className={classNames?.image}>\n          {renderImage ? (\n            renderImage({ src: singleImage, alt: fullProduct.name })\n          ) : (\n            <img\n              src={singleImage}\n              alt={fullProduct.name}\n              style={{ width: \"100%\", height: \"auto\", objectFit: \"cover\" }}\n            />\n          )}\n        </div>\n      ) : null}\n\n      {/* Header */}\n      <div data-cimplify-product-sheet-header className={classNames?.header}>\n        <h2\n          data-cimplify-product-sheet-name\n          className={classNames?.name}\n          style={{ margin: 0 }}\n        >\n          {fullProduct.name}\n        </h2>\n        <Price\n          amount={fullProduct.default_price}\n          currency={getProductCurrency(fullProduct)}\n          className={classNames?.price}\n        />\n      </div>\n\n      {/* Description — merchant-authored HTML from the catalogue. */}\n      <RichText\n        html={fullProduct.description}\n        data-cimplify-product-sheet-description\n        className={cn(\"text-sm\", classNames?.description)}\n      />\n\n      {/* Customizer */}\n      <ProductCustomizer\n        product={fullProduct}\n        onAddToCart={onAddToCart}\n        onVariantChange={(_id, variant) => setSelectedVariant(variant)}\n        className={classNames?.customizer}\n      />\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/rental-service-card.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "cards/rental-service-card.tsx",
-      "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"
+      "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 { getProductCurrency } from \"@cimplify/sdk\";\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 currency = getProductCurrency(product);\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} currency={currency} />/{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!} currency={currency} /> 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"
     }
   ]
 }