@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

package/dist/assets/storefront/src/components/commerce/account-sidebar.tsx

@@ -1,20 +1,22 @@
 'use client';
 
-import {Link, usePathname} from '@/i18n/navigation';
-import { useTranslations } from 'next-intl';
-import { LayoutGrid } from 'lucide-react';
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from '@/components/ui/sheet';
 import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Link, usePathname } from '@/i18n/navigation';
 import { cn } from '@/lib/utils';
-import { type NavItem, personalNavItems, getVisibleCompanyItems } from './account-nav-items';
+import { LayoutGrid } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { getVisibleCompanyItems, type NavItem, personalNavItems } from './account-nav-items';
 
-function NavLink({ item, pathname, t }: { item: NavItem; pathname: string; t: ReturnType<typeof useTranslations<'Account'>> }) {
+function NavLink({
+    item,
+    pathname,
+    t,
+}: {
+    item: NavItem;
+    pathname: string;
+    t: ReturnType<typeof useTranslations<'Account'>>;
+}) {
     const isActive = item.exact
         ? pathname === item.href
         : pathname === item.href || pathname.startsWith(item.href + '/');
@@ -24,9 +26,7 @@ function NavLink({ item, pathname, t }: { item: NavItem; pathname: string; t: Re
             prefetch={true}
             className={cn(
                 'flex items-center gap-3 px-3 py-2 text-sm rounded-md transition-colors',
-                isActive
-                    ? 'bg-primary/10 text-primary font-medium'
-                    : 'text-foreground hover:bg-muted',
+                isActive ? 'bg-primary/10 text-primary font-medium' : 'text-foreground hover:bg-muted',
             )}
         >
             <item.icon className="h-4 w-4" />
@@ -46,14 +46,12 @@ function AccountNavLinks({
     pathname: string;
     t: ReturnType<typeof useTranslations<'Account'>>;
 }) {
-    const visibleCompanyItems = hasCompany
-        ? getVisibleCompanyItems(permissions)
-        : [];
+    const visibleCompanyItems = hasCompany ? getVisibleCompanyItems(permissions) : [];
 
     return (
         <nav className="space-y-1">
             <h2 className="font-semibold text-sm pb-2">{t('sidebar.accountHeading')}</h2>
-            {personalNavItems.map(item => (
+            {personalNavItems.map((item) => (
                 <NavLink key={item.href} item={item} pathname={pathname} t={t} />
             ))}
             {visibleCompanyItems.length > 0 && (
@@ -63,7 +61,7 @@ function AccountNavLinks({
                             {t('sidebar.companySection')}
                         </span>
                     </div>
-                    {visibleCompanyItems.map(item => (
+                    {visibleCompanyItems.map((item) => (
                         <NavLink key={item.href} item={item} pathname={pathname} t={t} />
                     ))}
                 </>
@@ -85,7 +83,12 @@ export function AccountSidebar({ permissions, hasCompany }: AccountSidebarProps)
         <>
             {/* Desktop: sticky sidebar */}
             <div className="hidden lg:block sticky top-20">
-                <AccountNavLinks permissions={permissions} hasCompany={hasCompany} pathname={pathname} t={t} />
+                <AccountNavLinks
+                    permissions={permissions}
+                    hasCompany={hasCompany}
+                    pathname={pathname}
+                    t={t}
+                />
             </div>
 
             {/* Mobile: sheet trigger */}
@@ -102,7 +105,12 @@ export function AccountSidebar({ permissions, hasCompany }: AccountSidebarProps)
                             <SheetTitle>{t('sidebar.accountHeading')}</SheetTitle>
                         </SheetHeader>
                         <div className="px-4 pb-4">
-                            <AccountNavLinks permissions={permissions} hasCompany={hasCompany} pathname={pathname} t={t} />
+                            <AccountNavLinks
+                                permissions={permissions}
+                                hasCompany={hasCompany}
+                                pathname={pathname}
+                                t={t}
+                            />
                         </div>
                     </SheetContent>
                 </Sheet>

package/dist/assets/storefront/src/components/commerce/active-filters.tsx

@@ -1,11 +1,11 @@
 'use client';
 
+import { usePathname, useRouter } from '@/i18n/navigation';
 import { formatPrice } from '@/lib/format';
 import { RESERVED_PARAMS } from '@/lib/search-helpers';
 import { X } from 'lucide-react';
 import { useLocale } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
-import { usePathname, useRouter } from '@/i18n/navigation';
 
 interface FacetValueInfo {
     code: string;

package/dist/assets/storefront/src/components/commerce/add-to-shared-cart.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import {useState, useTransition} from 'react';
-import {useRouter} from '@/i18n/navigation';
-import {toast} from 'sonner';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Textarea} from '@/components/ui/textarea';
-import {Label} from '@/components/ui/label';
+import {
+    addItemsToSharedCart,
+    fetchEditableOpenSharedCarts,
+    shareMyCart,
+    type EditableSharedCart,
+} from '@/app/[locale]/account/shared-carts/actions';
+import { Button } from '@/components/ui/button';
 import {
     Dialog,
     DialogContent,
@@ -23,15 +23,15 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {Users, Plus, Loader2, ChevronDown} from 'lucide-react';
-import {
-    fetchEditableOpenSharedCarts,
-    addItemsToSharedCart,
-    shareMyCart,
-    type EditableSharedCart,
-} from '@/app/[locale]/account/shared-carts/actions';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { useRouter } from '@/i18n/navigation';
+import { ChevronDown, Loader2, Plus, Users } from 'lucide-react';
+import { useState, useTransition } from 'react';
+import { toast } from 'sonner';
 
-type CartLine = {productVariantId: string; quantity: number};
+type CartLine = { productVariantId: string; quantity: number };
 
 export function AddToSharedCart({
     lines,
@@ -61,7 +61,7 @@ export function AddToSharedCart({
     function loadCarts(open: boolean) {
         if (!open || carts !== null) return;
         setIsLoading(true);
-        fetchEditableOpenSharedCarts().then(result => {
+        fetchEditableOpenSharedCarts().then((result) => {
             setCarts(result);
             setIsLoading(false);
         });
@@ -77,7 +77,7 @@ export function AddToSharedCart({
             }
             toast.success(`Added to “${cart.name}”`, {
                 description: 'Personal discounts don’t apply to shared carts — priced at your company rate.',
-                action: {label: 'View', onClick: () => router.push(`/account/shared-carts/${cart.id}`)},
+                action: { label: 'View', onClick: () => router.push(`/account/shared-carts/${cart.id}`) },
             });
         });
     }
@@ -88,8 +88,17 @@ export function AddToSharedCart({
         <>
             <DropdownMenu onOpenChange={loadCarts}>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size={size} disabled={disabled || isPending} className={className ?? 'gap-2'}>
-                        {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Users className="h-4 w-4" />}
+                    <Button
+                        variant="outline"
+                        size={size}
+                        disabled={disabled || isPending}
+                        className={className ?? 'gap-2'}
+                    >
+                        {isPending ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                            <Users className="h-4 w-4" />
+                        )}
                         {label}
                         <ChevronDown className="h-4 w-4 opacity-60" />
                     </Button>
@@ -105,8 +114,12 @@ export function AddToSharedCart({
                     ) : (
                         <>
                             {hasCarts &&
-                                carts.map(cart => (
-                                    <DropdownMenuItem key={cart.id} onSelect={() => add(cart)} disabled={isPending}>
+                                carts.map((cart) => (
+                                    <DropdownMenuItem
+                                        key={cart.id}
+                                        onSelect={() => add(cart)}
+                                        disabled={isPending}
+                                    >
                                         <Users className="h-4 w-4 mr-2 opacity-70" />
                                         <span className="truncate">{cart.name}</span>
                                     </DropdownMenuItem>
@@ -114,7 +127,10 @@ export function AddToSharedCart({
                             {canCreate ? (
                                 <>
                                     {hasCarts && <DropdownMenuSeparator />}
-                                    <DropdownMenuItem onSelect={() => setCreateOpen(true)} disabled={isPending}>
+                                    <DropdownMenuItem
+                                        onSelect={() => setCreateOpen(true)}
+                                        disabled={isPending}
+                                    >
                                         <Plus className="h-4 w-4 mr-2" />
                                         Create new shared cart
                                     </DropdownMenuItem>
@@ -181,8 +197,9 @@ function CreateSharedCartDialog({
                     <DialogHeader>
                         <DialogTitle>Create a shared cart</DialogTitle>
                         <DialogDescription>
-                            Start a new shared cart with {lines.length} {lines.length === 1 ? 'item' : 'items'} so colleagues
-                            can build the order with you.
+                            Start a new shared cart with {lines.length}{' '}
+                            {lines.length === 1 ? 'item' : 'items'} so colleagues can build the order with
+                            you.
                         </DialogDescription>
                     </DialogHeader>
                     <div className="space-y-4 py-4">
@@ -191,7 +208,7 @@ function CreateSharedCartDialog({
                             <Input
                                 id="create-shared-cart-name"
                                 value={name}
-                                onChange={e => setName(e.target.value)}
+                                onChange={(e) => setName(e.target.value)}
                                 maxLength={255}
                                 required
                                 autoFocus
@@ -202,7 +219,7 @@ function CreateSharedCartDialog({
                             <Textarea
                                 id="create-shared-cart-description"
                                 value={description}
-                                onChange={e => setDescription(e.target.value)}
+                                onChange={(e) => setDescription(e.target.value)}
                                 rows={3}
                                 maxLength={1000}
                                 placeholder="What is this cart for?"
@@ -210,7 +227,12 @@ function CreateSharedCartDialog({
                         </div>
                     </div>
                     <DialogFooter>
-                        <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={isPending}>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={() => onOpenChange(false)}
+                            disabled={isPending}
+                        >
                             Cancel
                         </Button>
                         <Button type="submit" disabled={!name.trim() || isPending}>

package/dist/assets/storefront/src/components/commerce/approval-decision-form.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import {useState, useTransition} from 'react';
-import {Button} from '@/components/ui/button';
-import {Textarea} from '@/components/ui/textarea';
-import {CheckCircle, XCircle} from 'lucide-react';
-import {submitApprovalDecision} from '@/app/[locale]/account/approvals/actions';
+import { submitApprovalDecision } from '@/app/[locale]/account/approvals/actions';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { CheckCircle, XCircle } from 'lucide-react';
+import { useState, useTransition } from 'react';
 
 interface ApprovalDecisionFormProps {
     approvalRequestId: string;
 }
 
-export function ApprovalDecisionForm({approvalRequestId}: ApprovalDecisionFormProps) {
+export function ApprovalDecisionForm({ approvalRequestId }: ApprovalDecisionFormProps) {
     const [comment, setComment] = useState('');
     const [isPending, startTransition] = useTransition();
     const [result, setResult] = useState<{ success: boolean; message?: string } | null>(null);
@@ -47,12 +47,8 @@ export function ApprovalDecisionForm({approvalRequestId}: ApprovalDecisionFormPr
                 <p className="text-sm text-red-600">{result.message || 'An error occurred'}</p>
             )}
             <div className="flex gap-2">
-                <Button
-                    size="sm"
-                    onClick={() => handleDecision('APPROVED')}
-                    disabled={isPending}
-                >
-                    <CheckCircle className="h-4 w-4 mr-1"/>
+                <Button size="sm" onClick={() => handleDecision('APPROVED')} disabled={isPending}>
+                    <CheckCircle className="h-4 w-4 mr-1" />
                     Approve
                 </Button>
                 <Button
@@ -61,7 +57,7 @@ export function ApprovalDecisionForm({approvalRequestId}: ApprovalDecisionFormPr
                     onClick={() => handleDecision('REJECTED')}
                     disabled={isPending}
                 >
-                    <XCircle className="h-4 w-4 mr-1"/>
+                    <XCircle className="h-4 w-4 mr-1" />
                     Reject
                 </Button>
             </div>

package/dist/assets/storefront/src/components/commerce/approval-status-badge.tsx

@@ -1,36 +1,44 @@
-import {Badge} from '@/components/ui/badge';
+import { Badge } from '@/components/ui/badge';
 import {
-    Clock,
+    Ban,
     CheckCircle,
-    XCircle,
+    Clock,
     Loader2,
-    Ban,
-    Timer,
     MessageSquare,
+    Timer,
+    XCircle,
     type LucideIcon,
 } from 'lucide-react';
 
 const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
-    PENDING: {color: 'bg-gray-100 text-gray-800', label: 'Pending', icon: Clock},
-    IN_PROGRESS: {color: 'bg-blue-100 text-blue-800', label: 'In Progress', icon: Loader2},
-    APPROVED: {color: 'bg-green-100 text-green-800', label: 'Approved', icon: CheckCircle},
-    REJECTED: {color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle},
-    CANCELLED: {color: 'bg-gray-100 text-gray-500', label: 'Cancelled', icon: Ban},
-    EXPIRED: {color: 'bg-yellow-100 text-yellow-800', label: 'Expired', icon: Timer},
-    CHANGES_REQUESTED: {color: 'bg-orange-100 text-orange-800', label: 'Changes Requested', icon: MessageSquare},
+    PENDING: { color: 'bg-gray-100 text-gray-800', label: 'Pending', icon: Clock },
+    IN_PROGRESS: { color: 'bg-blue-100 text-blue-800', label: 'In Progress', icon: Loader2 },
+    APPROVED: { color: 'bg-green-100 text-green-800', label: 'Approved', icon: CheckCircle },
+    REJECTED: { color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle },
+    CANCELLED: { color: 'bg-gray-100 text-gray-500', label: 'Cancelled', icon: Ban },
+    EXPIRED: { color: 'bg-yellow-100 text-yellow-800', label: 'Expired', icon: Timer },
+    CHANGES_REQUESTED: {
+        color: 'bg-orange-100 text-orange-800',
+        label: 'Changes Requested',
+        icon: MessageSquare,
+    },
 };
 
 interface ApprovalStatusBadgeProps {
     status: string;
 }
 
-export function ApprovalStatusBadge({status}: ApprovalStatusBadgeProps) {
-    const config = STATUS_CONFIG[status] || {color: 'bg-gray-100 text-gray-800', label: status, icon: Clock};
+export function ApprovalStatusBadge({ status }: ApprovalStatusBadgeProps) {
+    const config = STATUS_CONFIG[status] || {
+        color: 'bg-gray-100 text-gray-800',
+        label: status,
+        icon: Clock,
+    };
     const Icon = config.icon;
 
     return (
         <Badge className={config.color} variant="secondary">
-            <Icon className="h-3 w-3 mr-1"/>
+            <Icon className="h-3 w-3 mr-1" />
             {config.label}
         </Badge>
     );

package/dist/assets/storefront/src/components/commerce/business-unit-switcher.tsx

@@ -1,23 +1,23 @@
 'use client';
 
-import {useTransition} from 'react';
+import { switchBusinessUnitAction } from '@/components/layout/navbar/actions';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {Button} from '@/components/ui/button';
-import {Building2, Check, ChevronDown} from 'lucide-react';
-import {switchBusinessUnitAction} from '@/components/layout/navbar/actions';
+import { Building2, Check, ChevronDown } from 'lucide-react';
+import { useTransition } from 'react';
 interface BusinessUnitSwitcherProps {
     businessUnits: Array<{ id: string; name: string }>;
     activeBusinessUnitId: string | null;
 }
 
-export function BusinessUnitSwitcher({businessUnits, activeBusinessUnitId}: BusinessUnitSwitcherProps) {
+export function BusinessUnitSwitcher({ businessUnits, activeBusinessUnitId }: BusinessUnitSwitcherProps) {
     const [isPending, startTransition] = useTransition();
-    const activeBu = businessUnits.find(bu => bu.id === activeBusinessUnitId);
+    const activeBu = businessUnits.find((bu) => bu.id === activeBusinessUnitId);
 
     if (businessUnits.length <= 1) {
         return null;
@@ -28,14 +28,14 @@ export function BusinessUnitSwitcher({businessUnits, activeBusinessUnitId}: Busi
             <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm" className="w-full justify-between" disabled={isPending}>
                     <span className="flex items-center gap-2">
-                        <Building2 className="h-4 w-4"/>
-                        {isPending ? 'Switching...' : (activeBu?.name ?? 'Select Unit')}
+                        <Building2 className="h-4 w-4" />
+                        {isPending ? 'Switching...' : activeBu?.name ?? 'Select Unit'}
                     </span>
-                    <ChevronDown className="h-3 w-3"/>
+                    <ChevronDown className="h-3 w-3" />
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start">
-                {businessUnits.map(bu => (
+                {businessUnits.map((bu) => (
                     <DropdownMenuItem
                         key={bu.id}
                         onClick={() => {
@@ -45,7 +45,7 @@ export function BusinessUnitSwitcher({businessUnits, activeBusinessUnitId}: Busi
                         }}
                     >
                         <span className="flex items-center gap-2">
-                            {bu.id === activeBusinessUnitId && <Check className="h-3 w-3"/>}
+                            {bu.id === activeBusinessUnitId && <Check className="h-3 w-3" />}
                             {bu.name}
                         </span>
                     </DropdownMenuItem>

package/dist/assets/storefront/src/components/commerce/catalog-search-bar.tsx

@@ -3,11 +3,11 @@
 import { InstantSearchDropdown } from '@/components/commerce/instant-search-dropdown';
 import { Input } from '@/components/ui/input';
 import { KbdShortcut } from '@/components/ui/kbd-shortcut';
+import { useRouter } from '@/i18n/navigation';
 import { useSearchBar } from '@/lib/search-bar-context';
 import { Search } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useRouter } from '@/i18n/navigation';
+import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
 
 export function CatalogSearchBar() {

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

@@ -1,12 +1,12 @@
-import {Link} from '@/i18n/navigation';
-import { ArrowRight } from 'lucide-react';
-import { cacheLife, cacheTag } from 'next/cache';
-import {getTranslations} from 'next-intl/server';
-import { publicClient } from '@/lib/vendure/api';
-import { SearchProductsQuery } from '@/lib/vendure/queries';
+import { ProductCard } from '@/components/commerce/product-card';
 import { readFragment } from '@/graphql';
+import { Link } from '@/i18n/navigation';
+import { publicClient } from '@/lib/vendure/api';
 import { ProductCardFragment } from '@/lib/vendure/fragments';
-import { ProductCard } from '@/components/commerce/product-card';
+import { SearchProductsQuery } from '@/lib/vendure/queries';
+import { ArrowRight } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
+import { cacheLife, cacheTag } from 'next/cache';
 const PRODUCTS_PER_SECTION = 4;
 
 interface CategoryProductSectionProps {
@@ -21,19 +21,28 @@ async function getCollectionPreviewProducts(slug: string, locale: string, channe
     cacheLife('hours');
     cacheTag(`collection-preview-${slug}-${locale}${channelToken ? `-${channelToken}` : ''}`);
 
-    const [result, error] = await publicClient.query(SearchProductsQuery, {
-        input: {
-            collectionSlug: slug,
-            take: PRODUCTS_PER_SECTION,
-            skip: 0,
-            groupByProduct: true,
+    const [result, error] = await publicClient.query(
+        SearchProductsQuery,
+        {
+            input: {
+                collectionSlug: slug,
+                take: PRODUCTS_PER_SECTION,
+                skip: 0,
+                groupByProduct: true,
+            },
         },
-    }, {languageCode: locale, ...(channelToken ? {channelToken} : {})});
+        { languageCode: locale, ...(channelToken ? { channelToken } : {}) },
+    );
     if (error) return [];
     return result.data.search.items;
 }
 
-export async function CategoryProductSection({ name, slug, locale, channelToken }: CategoryProductSectionProps) {
+export async function CategoryProductSection({
+    name,
+    slug,
+    locale,
+    channelToken,
+}: CategoryProductSectionProps) {
     const [products, t] = await Promise.all([
         getCollectionPreviewProducts(slug, locale, channelToken),
         getTranslations('Catalog'),
@@ -61,7 +70,10 @@ export async function CategoryProductSection({ name, slug, locale, channelToken
             </div>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 {products.map((product) => (
-                    <ProductCard key={readFragment(ProductCardFragment, product).productId} product={product} />
+                    <ProductCard
+                        key={readFragment(ProductCardFragment, product).productId}
+                        product={product}
+                    />
                 ))}
             </div>
         </section>

package/dist/assets/storefront/src/components/commerce/category-sidebar.tsx

@@ -1,20 +1,14 @@
 'use client';
 
-import Image from 'next/image';
-import {useTranslations} from 'next-intl';
-import {Link, usePathname} from '@/i18n/navigation';
-import { ChevronRight, Layers, LayoutGrid } from 'lucide-react';
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from '@/components/ui/sheet';
 import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import type { ResultOf } from '@/graphql';
+import { Link, usePathname } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
 import type { GetTopCollectionsQuery } from '@/lib/vendure/queries';
+import { ChevronRight, Layers, LayoutGrid } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
 
 type Collection = ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
 
@@ -22,7 +16,17 @@ interface CategorySidebarProps {
     collections: Collection[];
 }
 
-function CategoryLinks({ collections, pathname, categoriesLabel, viewAllLabel }: { collections: Collection[]; pathname: string; categoriesLabel: string; viewAllLabel: string }) {
+function CategoryLinks({
+    collections,
+    pathname,
+    categoriesLabel,
+    viewAllLabel,
+}: {
+    collections: Collection[];
+    pathname: string;
+    categoriesLabel: string;
+    viewAllLabel: string;
+}) {
     return (
         <nav className="space-y-1">
             <h2 className="font-semibold text-sm pb-2 flex items-center gap-2">
@@ -33,9 +37,8 @@ function CategoryLinks({ collections, pathname, categoriesLabel, viewAllLabel }:
                 const href = `/collection/${collection.slug}`;
                 const isActive = pathname === href;
                 const hasChildren = collection.children && collection.children.length > 0;
-                const childActive = hasChildren && collection.children!.some(
-                    (c) => pathname === `/collection/${c.slug}`,
-                );
+                const childActive =
+                    hasChildren && collection.children!.some((c) => pathname === `/collection/${c.slug}`);
 
                 return (
                     <div key={collection.id}>
@@ -106,7 +109,12 @@ export function CategorySidebar({ collections }: CategorySidebarProps) {
         <>
             {/* Desktop: sticky sidebar */}
             <div className="hidden lg:block sticky top-20">
-                <CategoryLinks collections={collections} pathname={pathname} categoriesLabel={t('categories')} viewAllLabel={t('viewAll')} />
+                <CategoryLinks
+                    collections={collections}
+                    pathname={pathname}
+                    categoriesLabel={t('categories')}
+                    viewAllLabel={t('viewAll')}
+                />
             </div>
 
             {/* Mobile: sheet trigger */}
@@ -123,7 +131,12 @@ export function CategorySidebar({ collections }: CategorySidebarProps) {
                             <SheetTitle>{t('categories')}</SheetTitle>
                         </SheetHeader>
                         <div className="px-4 pb-4">
-                            <CategoryLinks collections={collections} pathname={pathname} categoriesLabel={t('categories')} viewAllLabel={t('viewAll')} />
+                            <CategoryLinks
+                                collections={collections}
+                                pathname={pathname}
+                                categoriesLabel={t('categories')}
+                                viewAllLabel={t('viewAll')}
+                            />
                         </div>
                     </SheetContent>
                 </Sheet>

package/dist/assets/storefront/src/components/commerce/collection-hero-banner.tsx

@@ -6,7 +6,7 @@ interface CollectionHeroBannerProps {
     imageUrl: string;
 }
 
-export function CollectionHeroBanner({name, description, imageUrl}: CollectionHeroBannerProps) {
+export function CollectionHeroBanner({ name, description, imageUrl }: CollectionHeroBannerProps) {
     return (
         <section className="relative overflow-hidden rounded-lg mb-6 aspect-[21/9] lg:aspect-[14/3]">
             <Image
@@ -22,9 +22,7 @@ export function CollectionHeroBanner({name, description, imageUrl}: CollectionHe
                 className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10"
             />
             <div className="absolute inset-x-0 bottom-0 p-6 md:p-8 text-white">
-                <h1 className="text-2xl md:text-4xl font-bold tracking-tight drop-shadow">
-                    {name}
-                </h1>
+                <h1 className="text-2xl md:text-4xl font-bold tracking-tight drop-shadow">{name}</h1>
                 {description && (
                     <p className="mt-2 max-w-2xl text-sm md:text-base text-white/80 line-clamp-2 drop-shadow">
                         {description}