@vendure-platform/create 0.5.0 → 0.5.1

package/dist/assets/storefront/src/components/commerce/packaging-unit-selector.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { Label } from '@/components/ui/label';
 import { Price } from '@/components/commerce/price';
-import { Badge } from '@/components/ui/badge';
-import { Package } from 'lucide-react';
 import type { PriceTier } from '@/components/commerce/price-tiers';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
 import type { PackagingUnitOption } from '@/lib/vendure/queries';
+import { Package } from 'lucide-react';
 
 interface PackagingUnitSelectorProps {
     packagingUnits: PackagingUnitOption[];
@@ -22,7 +22,11 @@ interface PackagingUnitSelectorProps {
  * Returns the per-piece price for the given effective base-unit quantity.
  * Falls back to basePrice if no tier matches.
  */
-function getTierAdjustedPiecePrice(basePrice: number, tiers: PriceTier[] | undefined, effectivePieces: number): number {
+function getTierAdjustedPiecePrice(
+    basePrice: number,
+    tiers: PriceTier[] | undefined,
+    effectivePieces: number,
+): number {
     if (!tiers || tiers.length === 0) return basePrice;
     let price = basePrice;
     for (const tier of tiers) {
@@ -44,7 +48,7 @@ export function PackagingUnitSelector({
     if (packagingUnits.length === 0) return null;
 
     const sortedTiers = priceTiers
-        ? [...priceTiers].filter(t => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!)
+        ? [...priceTiers].filter((t) => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!)
         : undefined;
 
     return (
@@ -62,9 +66,15 @@ export function PackagingUnitSelector({
                     // Prefer the packaging-unit's own tier ladder so any
                     // packaging-unit-gated discounts are reflected on the card.
                     const puTiers = pu.priceTiers
-                        ? [...pu.priceTiers].filter(t => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!)
+                        ? [...pu.priceTiers]
+                              .filter((t) => t.minQuantity != null)
+                              .sort((a, b) => a.minQuantity! - b.minQuantity!)
                         : sortedTiers;
-                    const perPiecePrice = getTierAdjustedPiecePrice(baseVariantPrice, puTiers, effectivePieces);
+                    const perPiecePrice = getTierAdjustedPiecePrice(
+                        baseVariantPrice,
+                        puTiers,
+                        effectivePieces,
+                    );
                     const displayPrice = Math.round(perPiecePrice * pu.conversionFactor);
 
                     const stockLevel = pu.effectiveStockLevel;
@@ -80,8 +90,8 @@ export function PackagingUnitSelector({
                                 isSelected
                                     ? 'border-primary bg-primary/5'
                                     : isOutOfStock
-                                      ? 'border-muted opacity-50 cursor-not-allowed'
-                                      : 'border-muted bg-popover hover:bg-accent hover:text-accent-foreground cursor-pointer'
+                                    ? 'border-muted opacity-50 cursor-not-allowed'
+                                    : 'border-muted bg-popover hover:bg-accent hover:text-accent-foreground cursor-pointer'
                             }`}
                         >
                             <div className="flex items-center gap-2 w-full">
@@ -91,10 +101,7 @@ export function PackagingUnitSelector({
                                         : `${pu.packagingUnit.name} (${pu.conversionFactor} pcs)`}
                                 </span>
                                 {pu.isBaseUnit && (
-                                    <Badge
-                                        variant="secondary"
-                                        className="text-[10px] px-1.5 py-0"
-                                    >
+                                    <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
                                         Base
                                     </Badge>
                                 )}
@@ -102,16 +109,14 @@ export function PackagingUnitSelector({
 
                             <div className="flex items-center gap-2 text-xs text-muted-foreground">
                                 <span className="font-medium text-foreground">
-                                    <Price
-                                        value={displayPrice}
-                                        currencyCode={currencyCode}
-                                    />
+                                    <Price value={displayPrice} currencyCode={currencyCode} />
                                 </span>
                                 {pu.conversionFactor > 1 && (
                                     <>
                                         <span>·</span>
                                         <span>
-                                            <Price value={perPiecePrice} currencyCode={currencyCode} />/pc
+                                            <Price value={perPiecePrice} currencyCode={currencyCode} />
+                                            /pc
                                         </span>
                                     </>
                                 )}
@@ -124,20 +129,16 @@ export function PackagingUnitSelector({
                                             isOutOfStock
                                                 ? 'text-red-600'
                                                 : stockLevel < 10
-                                                  ? 'text-amber-600'
-                                                  : 'text-emerald-600'
+                                                ? 'text-amber-600'
+                                                : 'text-emerald-600'
                                         }
                                     >
-                                        {isOutOfStock
-                                            ? 'Out of stock'
-                                            : `${stockLevel} available`}
+                                        {isOutOfStock ? 'Out of stock' : `${stockLevel} available`}
                                     </span>
                                 )}
                                 {pu.minQuantity > 1 && (
                                     <>
-                                        {stockLevel !== null && (
-                                            <span>·</span>
-                                        )}
+                                        {stockLevel !== null && <span>·</span>}
                                         <span>Min. {pu.minQuantity}</span>
                                     </>
                                 )}

package/dist/assets/storefront/src/components/commerce/permission-gate.tsx

@@ -1,5 +1,5 @@
-import type {ReactNode} from 'react';
-import {getCompanyAccount} from '@/lib/vendure/actions';
+import { getCompanyAccount } from '@/lib/vendure/actions';
+import type { ReactNode } from 'react';
 
 interface PermissionGateProps {
     permission: string | string[];
@@ -7,14 +7,14 @@ interface PermissionGateProps {
     fallback?: ReactNode;
 }
 
-export async function PermissionGate({permission, children, fallback = null}: PermissionGateProps) {
+export async function PermissionGate({ permission, children, fallback = null }: PermissionGateProps) {
     const companyAccount = await getCompanyAccount();
 
     if (!companyAccount) return fallback;
 
     const permissions = companyAccount.permissions;
     const required = Array.isArray(permission) ? permission : [permission];
-    const hasPermission = required.some(p => permissions.includes(p));
+    const hasPermission = required.some((p) => permissions.includes(p));
 
     return hasPermission ? <>{children}</> : <>{fallback}</>;
 }

package/dist/assets/storefront/src/components/commerce/price-range-filter.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { useState, useCallback, useEffect } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { usePathname, useRouter } from '@/i18n/navigation';
-import { useTranslations } from 'next-intl';
-import { Slider } from '@/components/ui/slider';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
 
 interface PriceRangeFilterProps {
     min: number;

package/dist/assets/storefront/src/components/commerce/price-tiers.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import {ResultOf} from '@/graphql';
-import {GetProductDetailQuery} from '@/lib/vendure/queries';
-import {Price} from '@/components/commerce/price';
-import {useTranslations} from 'next-intl';
+import { Price } from '@/components/commerce/price';
+import { ResultOf } from '@/graphql';
+import { GetProductDetailQuery } from '@/lib/vendure/queries';
+import { useTranslations } from 'next-intl';
 
 type ProductVariant = NonNullable<ResultOf<typeof GetProductDetailQuery>['product']>['variants'][number];
 export type PriceTier = NonNullable<ProductVariant['priceTiers']>[number];
@@ -20,10 +20,18 @@ interface PriceTiersProps {
     currencyCode?: string;
 }
 
-export function PriceTiers({tiers, basePrice, quantity = 1, onTierClick, conversionFactor = 1, unitName, currencyCode}: PriceTiersProps) {
+export function PriceTiers({
+    tiers,
+    basePrice,
+    quantity = 1,
+    onTierClick,
+    conversionFactor = 1,
+    unitName,
+    currencyCode,
+}: PriceTiersProps) {
     const t = useTranslations('Product');
     const sorted = [...tiers]
-        .filter(t => t.minQuantity != null)
+        .filter((t) => t.minQuantity != null)
         .sort((a, b) => a.minQuantity! - b.minQuantity!);
 
     if (sorted.length < 2) {
@@ -35,18 +43,23 @@ export function PriceTiers({tiers, basePrice, quantity = 1, onTierClick, convers
     const hasPackagingUnit = conversionFactor > 1 && unitName;
 
     // Find the active tier based on effective base-unit quantity
-    const activeTierIndex = sorted.reduce((activeIdx, tier, idx) =>
-        effectiveQuantity >= tier.minQuantity! ? idx : activeIdx
-    , -1);
+    const activeTierIndex = sorted.reduce(
+        (activeIdx, tier, idx) => (effectiveQuantity >= tier.minQuantity! ? idx : activeIdx),
+        -1,
+    );
 
     return (
         <div className="rounded-lg border bg-muted/30 p-4">
-            <h3 className="text-sm font-semibold mb-3">{t('volumePricing')} <span className="text-[10px] font-normal text-muted-foreground">{t('volumePricingExclTax')}</span></h3>
+            <h3 className="text-sm font-semibold mb-3">
+                {t('volumePricing')}{' '}
+                <span className="text-[10px] font-normal text-muted-foreground">
+                    {t('volumePricingExclTax')}
+                </span>
+            </h3>
             <div className="space-y-1">
                 {sorted.map((tier, idx) => {
-                    const savings = tier.price < basePrice
-                        ? Math.round((1 - tier.price / basePrice) * 100)
-                        : 0;
+                    const savings =
+                        tier.price < basePrice ? Math.round((1 - tier.price / basePrice) * 100) : 0;
                     const isActive = idx === activeTierIndex;
                     const isClickable = !!onTierClick && !hasPackagingUnit;
                     const packagePrice = hasPackagingUnit ? Math.round(tier.price * conversionFactor) : null;
@@ -61,31 +74,35 @@ export function PriceTiers({tiers, basePrice, quantity = 1, onTierClick, convers
                                 isActive
                                     ? 'bg-primary/15 ring-1 ring-primary/30 font-medium'
                                     : isClickable
-                                        ? 'hover:bg-muted cursor-pointer'
-                                        : ''
+                                    ? 'hover:bg-muted cursor-pointer'
+                                    : ''
                             } ${!isClickable ? 'cursor-default' : ''}`}
-                            aria-label={`${t('unitsPlus', {qty: tier.minQuantity!})} at ${(tier.price / 100).toFixed(2)} ${t('eachUnit')}${isActive ? ' (current tier)' : ''}`}
+                            aria-label={`${t('unitsPlus', { qty: tier.minQuantity! })} at ${(
+                                tier.price / 100
+                            ).toFixed(2)} ${t('eachUnit')}${isActive ? ' (current tier)' : ''}`}
                             aria-current={isActive ? 'true' : undefined}
                         >
                             <span className={isActive ? 'text-primary' : 'text-muted-foreground'}>
-                                {t('unitsPlus', {qty: tier.minQuantity!})}
+                                {t('unitsPlus', { qty: tier.minQuantity! })}
                             </span>
                             <div className="flex items-center gap-2">
                                 {savings > 0 && (
                                     <span className="text-xs text-green-600 font-medium">
-                                        {t('savePercent', {percent: savings})}
+                                        {t('savePercent', { percent: savings })}
                                     </span>
                                 )}
                                 {packagePrice != null ? (
                                     <span className="font-medium">
-                                        <Price value={packagePrice} currencyCode={currencyCode}/>
+                                        <Price value={packagePrice} currencyCode={currencyCode} />
                                         <span className="text-xs text-muted-foreground font-normal ml-1">
-                                            (<Price value={tier.price} currencyCode={currencyCode}/>{t('perPiece')})
+                                            (<Price value={tier.price} currencyCode={currencyCode} />
+                                            {t('perPiece')})
                                         </span>
                                     </span>
                                 ) : (
                                     <span className="font-medium">
-                                        <Price value={tier.price} currencyCode={currencyCode}/> {t('eachUnit')}
+                                        <Price value={tier.price} currencyCode={currencyCode} />{' '}
+                                        {t('eachUnit')}
                                     </span>
                                 )}
                             </div>

package/dist/assets/storefront/src/components/commerce/price.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import {useLocale, useTranslations} from 'next-intl';
-import {toIntlLocale} from '@/i18n/locale-utils';
+import { toIntlLocale } from '@/i18n/locale-utils';
+import { useLocale, useTranslations } from 'next-intl';
 
 interface PriceProps {
     value: number;
@@ -10,7 +10,7 @@ interface PriceProps {
     taxLabel?: 'excl' | 'incl';
 }
 
-export function Price({value, currencyCode = 'EUR', taxLabel}: PriceProps) {
+export function Price({ value, currencyCode = 'EUR', taxLabel }: PriceProps) {
     const locale = useLocale();
     const t = useTranslations('Price');
     return (

package/dist/assets/storefront/src/components/commerce/product-card-list.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useRef } from 'react';
-import Image from 'next/image';
-import {Link} from '@/i18n/navigation';
-import { FragmentOf, readFragment } from '@/graphql';
-import { ProductCardFragment } from '@/lib/vendure/fragments';
 import { Price } from '@/components/commerce/price';
 import { Badge } from '@/components/ui/badge';
+import { FragmentOf, readFragment } from '@/graphql';
+import { Link } from '@/i18n/navigation';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import Image from 'next/image';
+import { useRef } from 'react';
 import { HighlightedText } from './highlighted-text';
 import { ProductListExpansion, prefetchProduct } from './product-list-expansion';
 
@@ -78,18 +78,22 @@ export function ProductCardList({ product: productProp, isExpanded, onToggle }:
                         />
                     )}
                     {product.sku && (
-                        <p className="text-xs text-muted-foreground font-mono mt-0.5">
-                            {product.sku}
-                        </p>
+                        <p className="text-xs text-muted-foreground font-mono mt-0.5">{product.sku}</p>
                     )}
                 </div>
                 <div className="flex items-center gap-4 flex-shrink-0">
                     {product.inStock ? (
-                        <Badge variant="secondary" className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider">
+                        <Badge
+                            variant="secondary"
+                            className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider"
+                        >
                             In Stock
                         </Badge>
                     ) : (
-                        <Badge variant="secondary" className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider">
+                        <Badge
+                            variant="secondary"
+                            className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider"
+                        >
                             Out of Stock
                         </Badge>
                     )}
@@ -97,13 +101,26 @@ export function ProductCardList({ product: productProp, isExpanded, onToggle }:
                         {product.price.__typename === 'PriceRange' ? (
                             product.price.min !== product.price.max ? (
                                 <>
-                                    from <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                                    from{' '}
+                                    <Price
+                                        value={product.price.min}
+                                        currencyCode={product.currencyCode}
+                                        taxLabel="excl"
+                                    />
                                 </>
                             ) : (
-                                <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                                <Price
+                                    value={product.price.min}
+                                    currencyCode={product.currencyCode}
+                                    taxLabel="excl"
+                                />
                             )
                         ) : product.price.__typename === 'SinglePrice' ? (
-                            <Price value={product.price.value} currencyCode={product.currencyCode} taxLabel="excl" />
+                            <Price
+                                value={product.price.value}
+                                currencyCode={product.currencyCode}
+                                taxLabel="excl"
+                            />
                         ) : null}
                     </p>
                     {isExpanded ? (
@@ -114,7 +131,11 @@ export function ProductCardList({ product: productProp, isExpanded, onToggle }:
                 </div>
             </div>
             {isExpanded && (
-                <ProductListExpansion slug={product.slug} productName={product.productName} currencyCode={product.currencyCode} />
+                <ProductListExpansion
+                    slug={product.slug}
+                    productName={product.productName}
+                    currencyCode={product.currencyCode}
+                />
             )}
         </div>
     );

package/dist/assets/storefront/src/components/commerce/product-card.tsx

@@ -1,12 +1,12 @@
-import Image from 'next/image';
-import {useTranslations} from 'next-intl';
-import {Package} from 'lucide-react';
-import { FragmentOf, readFragment } from '@/graphql';
-import { ProductCardFragment } from '@/lib/vendure/fragments';
 import { Price } from '@/components/commerce/price';
-import { Suspense } from 'react';
 import { PrefetchLink } from '@/components/shared/prefetch-link';
 import { Badge } from '@/components/ui/badge';
+import { FragmentOf, readFragment } from '@/graphql';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { Package } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { Suspense } from 'react';
 import { HighlightedText } from './highlighted-text';
 
 interface ProductCardProps {
@@ -42,11 +42,17 @@ export function ProductCard({ product: productProp }: ProductCardProps) {
                 {/* Stock badge overlay */}
                 <div className="absolute top-2 right-2">
                     {product.inStock ? (
-                        <Badge variant="secondary" className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider">
+                        <Badge
+                            variant="secondary"
+                            className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider"
+                        >
                             {t('inStock')}
                         </Badge>
                     ) : (
-                        <Badge variant="secondary" className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider">
+                        <Badge
+                            variant="secondary"
+                            className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider"
+                        >
                             {t('outOfStock')}
                         </Badge>
                     )}
@@ -63,23 +69,32 @@ export function ProductCard({ product: productProp }: ProductCardProps) {
                         className="text-xs text-muted-foreground line-clamp-2"
                     />
                 )}
-                {product.sku && (
-                    <p className="text-xs text-muted-foreground font-mono">
-                        {product.sku}
-                    </p>
-                )}
+                {product.sku && <p className="text-xs text-muted-foreground font-mono">{product.sku}</p>}
                 <Suspense fallback={<div className="h-6 w-28 rounded bg-muted" />}>
                     <p className="text-base font-bold">
                         {product.price.__typename === 'PriceRange' ? (
                             product.price.min !== product.price.max ? (
                                 <>
-                                    {t('from')} <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                                    {t('from')}{' '}
+                                    <Price
+                                        value={product.price.min}
+                                        currencyCode={product.currencyCode}
+                                        taxLabel="excl"
+                                    />
                                 </>
                             ) : (
-                                <Price value={product.price.min} currencyCode={product.currencyCode} taxLabel="excl" />
+                                <Price
+                                    value={product.price.min}
+                                    currencyCode={product.currencyCode}
+                                    taxLabel="excl"
+                                />
                             )
                         ) : product.price.__typename === 'SinglePrice' ? (
-                            <Price value={product.price.value} currencyCode={product.currencyCode} taxLabel="excl" />
+                            <Price
+                                value={product.price.value}
+                                currencyCode={product.currencyCode}
+                                taxLabel="excl"
+                            />
                         ) : null}
                     </p>
                 </Suspense>

package/dist/assets/storefront/src/components/commerce/product-carousel.tsx

@@ -1,17 +1,23 @@
 'use client';
 
-import {ProductCard} from "@/components/commerce/product-card";
-import {Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious,} from "@/components/ui/carousel";
-import {FragmentOf} from "@/graphql";
-import {ProductCardFragment} from "@/lib/vendure/fragments";
-import {useId} from "react";
+import { ProductCard } from '@/components/commerce/product-card';
+import {
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselNext,
+    CarouselPrevious,
+} from '@/components/ui/carousel';
+import { FragmentOf } from '@/graphql';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { useId } from 'react';
 
 interface ProductCarouselClientProps {
     title: string;
     products: Array<FragmentOf<typeof ProductCardFragment>>;
 }
 
-export function ProductCarousel({title, products}: ProductCarouselClientProps) {
+export function ProductCarousel({ title, products }: ProductCarouselClientProps) {
     const id = useId();
 
     return (
@@ -20,21 +26,23 @@ export function ProductCarousel({title, products}: ProductCarouselClientProps) {
                 <h2 className="text-3xl md:text-4xl font-bold mb-8">{title}</h2>
                 <Carousel
                     opts={{
-                        align: "start",
+                        align: 'start',
                         loop: true,
                     }}
                     className="w-full"
                 >
                     <CarouselContent className="-ml-2 md:-ml-4">
                         {products.map((product, i) => (
-                            <CarouselItem key={id + i}
-                                          className="pl-2 md:pl-4 basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4">
-                                <ProductCard product={product}/>
+                            <CarouselItem
+                                key={id + i}
+                                className="pl-2 md:pl-4 basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
+                            >
+                                <ProductCard product={product} />
                             </CarouselItem>
                         ))}
                     </CarouselContent>
-                    <CarouselPrevious className="hidden md:flex"/>
-                    <CarouselNext className="hidden md:flex"/>
+                    <CarouselPrevious className="hidden md:flex" />
+                    <CarouselNext className="hidden md:flex" />
                 </Carousel>
             </div>
         </section>

package/dist/assets/storefront/src/components/commerce/product-grid.tsx

@@ -1,10 +1,10 @@
 import { Pagination } from '@/components/shared/pagination';
-import { SortDropdown } from './sort-dropdown';
-import { ProductViewSwitcher } from './product-view-switcher';
+import { EmptyState } from '@/components/ui/empty-state';
 import { type SearchProductsResult } from '@/lib/vendure/queries';
-import {getTranslations} from 'next-intl/server';
 import { PackageSearch } from 'lucide-react';
-import {EmptyState} from '@/components/ui/empty-state';
+import { getTranslations } from 'next-intl/server';
+import { ProductViewSwitcher } from './product-view-switcher';
+import { SortDropdown } from './sort-dropdown';
 
 interface ProductGridProps {
     productDataPromise: SearchProductsResult;
@@ -14,11 +14,14 @@ interface ProductGridProps {
     emptyMessage?: string;
 }
 
-export async function ProductGrid({ productDataPromise, currentPage, take, view, emptyMessage }: ProductGridProps) {
-    const [result, t] = await Promise.all([
-        productDataPromise,
-        getTranslations('Catalog'),
-    ]);
+export async function ProductGrid({
+    productDataPromise,
+    currentPage,
+    take,
+    view,
+    emptyMessage,
+}: ProductGridProps) {
+    const [result, t] = await Promise.all([productDataPromise, getTranslations('Catalog')]);
 
     const searchResult = result.data.search;
     const totalPages = Math.ceil(searchResult.totalItems / take);
@@ -29,7 +32,7 @@ export async function ProductGrid({ productDataPromise, currentPage, take, view,
                 icon={PackageSearch}
                 heading={t('noProductsFound')}
                 body={emptyMessage ?? t('emptySearchMessage')}
-                action={{label: t('browseAllProducts'), href: '/'}}
+                action={{ label: t('browseAllProducts'), href: '/' }}
             />
         );
     }
@@ -46,9 +49,7 @@ export async function ProductGrid({ productDataPromise, currentPage, take, view,
                 <SortDropdown />
             </ProductViewSwitcher>
 
-            {totalPages > 1 && (
-                <Pagination currentPage={currentPage} totalPages={totalPages} />
-            )}
+            {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} />}
         </div>
     );
 }

package/dist/assets/storefront/src/components/commerce/product-image-carousel.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useState } from 'react';
-import Image from 'next/image';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import type { ProductDetail } from '@/lib/vendure/queries';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useState } from 'react';
 
 export interface ProductImageCarouselProps {
     images: ProductDetail['assets'];
@@ -50,7 +50,7 @@ export function ProductImageCarousel({ images, selectedIndex, onIndexChange }: P
                 {/* Preview image — always rendered, acts as placeholder */}
                 <Image
                     src={currentImage.preview}
-                    alt={t('productImageAlt', {index: currentIndex + 1})}
+                    alt={t('productImageAlt', { index: currentIndex + 1 })}
                     fill
                     className="object-cover"
                     sizes="(max-width: 1024px) 100vw, 50vw"
@@ -59,9 +59,11 @@ export function ProductImageCarousel({ images, selectedIndex, onIndexChange }: P
                 {/* Source image — layered on top, fades in when loaded */}
                 <Image
                     src={currentImage.source}
-                    alt={t('productImageAlt', {index: currentIndex + 1})}
+                    alt={t('productImageAlt', { index: currentIndex + 1 })}
                     fill
-                    className={`object-cover transition-opacity duration-300 ${sourceLoaded ? 'opacity-100' : 'opacity-0'}`}
+                    className={`object-cover transition-opacity duration-300 ${
+                        sourceLoaded ? 'opacity-100' : 'opacity-0'
+                    }`}
                     sizes="(max-width: 1024px) 100vw, 50vw"
                     onLoad={() => {
                         setLoadedSources((prev) => new Set(prev).add(currentIndex));
@@ -113,7 +115,7 @@ export function ProductImageCarousel({ images, selectedIndex, onIndexChange }: P
                         >
                             <Image
                                 src={image.preview}
-                                alt={t('thumbnailAlt', {index: index + 1})}
+                                alt={t('thumbnailAlt', { index: index + 1 })}
                                 fill
                                 className="object-cover"
                                 sizes="25vw"