@vendure-platform/create 0.5.0 → 0.5.2

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

@@ -1,31 +1,47 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback, useTransition, type ReactNode } from 'react';
-import { useTranslations } from 'next-intl';
-import { Input } from '@/components/ui/input';
+import { Price } from '@/components/commerce/price';
 import { Button } from '@/components/ui/button';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
-import { Price } from '@/components/commerce/price';
-import { ShoppingCart, CheckCircle2, ChevronDown, Info, AlertCircle, Loader2, Minus, Plus } from 'lucide-react';
-import { toast } from 'sonner';
+import { Switch } from '@/components/ui/switch';
 import type {
-    ConfiguratorSystem,
-    ConfiguratorModule,
-    ConfiguratorField,
     ConfigurationEvaluation,
+    ConfiguratorField,
+    ConfiguratorModule,
+    ConfiguratorSystem,
     EvaluatedField,
     EvaluatedLine,
 } from '@/lib/vendure/queries';
+import {
+    AlertCircle,
+    CheckCircle2,
+    ChevronDown,
+    Info,
+    Loader2,
+    Minus,
+    Plus,
+    ShoppingCart,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useRef, useState, useTransition, type ReactNode } from 'react';
+import { toast } from 'sonner';
 
 interface ConfiguratorFormProps {
     system: ConfiguratorSystem;
     productName: string;
     currencyCode?: string;
-    evaluateAction: (systemId: string, values: { fieldRef: string; value: string }[]) => Promise<{ data?: ConfigurationEvaluation; error?: string }>;
-    addToOrderAction: (systemId: string, values: { fieldRef: string; value: string }[], name?: string) => Promise<{ success: boolean; error?: string }>;
+    evaluateAction: (
+        systemId: string,
+        values: { fieldRef: string; value: string }[],
+    ) => Promise<{ data?: ConfigurationEvaluation; error?: string }>;
+    addToOrderAction: (
+        systemId: string,
+        values: { fieldRef: string; value: string }[],
+        name?: string,
+    ) => Promise<{ success: boolean; error?: string }>;
     children?: ReactNode;
 }
 
@@ -33,7 +49,14 @@ function buildFieldRef(moduleCode: string, fieldCode: string) {
     return `${moduleCode}.${fieldCode}`;
 }
 
-export function ConfiguratorForm({ system, productName, currencyCode, evaluateAction, addToOrderAction, children }: ConfiguratorFormProps) {
+export function ConfiguratorForm({
+    system,
+    productName,
+    currencyCode,
+    evaluateAction,
+    addToOrderAction,
+    children,
+}: ConfiguratorFormProps) {
     const t = useTranslations('Configurator');
     const [values, setValues] = useState<Record<string, string>>(() => {
         const initial: Record<string, string> = {};
@@ -52,7 +75,7 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
     const [isAdding, startAddTransition] = useTransition();
     const [isAdded, setIsAdded] = useState(false);
     const [expandedModules, setExpandedModules] = useState<Set<string>>(() => {
-        return new Set(system.modules.map(m => m.code));
+        return new Set(system.modules.map((m) => m.code));
     });
     const [bomDrawerOpen, setBomDrawerOpen] = useState(false);
     const evalTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -79,7 +102,7 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
     }, [values, system.id, evaluateAction, fieldValueEntries]);
 
     const handleFieldChange = (moduleCode: string, fieldCode: string, value: string) => {
-        setValues(prev => ({ ...prev, [buildFieldRef(moduleCode, fieldCode)]: value }));
+        setValues((prev) => ({ ...prev, [buildFieldRef(moduleCode, fieldCode)]: value }));
     };
 
     const handleAddToOrder = () => {
@@ -97,7 +120,7 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
     };
 
     const toggleModule = (code: string) => {
-        setExpandedModules(prev => {
+        setExpandedModules((prev) => {
             const next = new Set(prev);
             if (next.has(code)) next.delete(code);
             else next.add(code);
@@ -131,8 +154,8 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
         }
     }
     const allErrors = [
-        ...systemErrors.map(e => e.message),
-        ...fieldIssues.map(e => `${e.fieldName}: ${e.message}`),
+        ...systemErrors.map((e) => e.message),
+        ...fieldIssues.map((e) => `${e.fieldName}: ${e.message}`),
     ];
     const hasErrors = allErrors.length > 0;
 
@@ -159,9 +182,7 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
                 <div className="lg:col-span-3">
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                         {/* Image + description — sticky */}
-                        <div className="md:sticky md:top-20 md:self-start space-y-5">
-                            {children}
-                        </div>
+                        <div className="md:sticky md:top-20 md:self-start space-y-5">{children}</div>
 
                         {/* Configurator form */}
                         <div>
@@ -170,7 +191,11 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
                                 {lines.length > 0 && (
                                     <div className="flex items-center gap-2">
                                         <span className="text-3xl font-bold text-primary">
-                                            <Price value={totalPrice} currencyCode={currencyCode} taxLabel="excl" />
+                                            <Price
+                                                value={totalPrice}
+                                                currencyCode={currencyCode}
+                                                taxLabel="excl"
+                                            />
                                         </span>
                                     </div>
                                 )}
@@ -179,7 +204,10 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
                             {allErrors.length > 0 && (
                                 <div className="mt-4 space-y-2">
                                     {allErrors.map((msg, i) => (
-                                        <div key={i} className="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 flex items-start gap-2">
+                                        <div
+                                            key={i}
+                                            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 flex items-start gap-2"
+                                        >
                                             <AlertCircle className="w-4 h-4 mt-0.5 shrink-0 text-red-500" />
                                             <p className="text-sm text-red-800">{msg}</p>
                                         </div>
@@ -201,7 +229,6 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
                                     />
                                 ))}
                             </div>
-
                         </div>
                     </div>
                 </div>
@@ -211,9 +238,7 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
             <div className="lg:hidden fixed bottom-0 inset-x-0 z-40 border-t border-border bg-background shadow-[0_-4px_12px_rgba(0,0,0,0.05)]">
                 <div className="flex items-center justify-between px-4 py-3">
                     <div>
-                        <p className="text-xs text-muted-foreground">
-                            {t('items', { count: lines.length })}
-                        </p>
+                        <p className="text-xs text-muted-foreground">{t('items', { count: lines.length })}</p>
                         <p className="text-lg font-bold">
                             <Price value={totalPrice} currencyCode={currencyCode} />
                         </p>
@@ -230,11 +255,20 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
                             onClick={handleAddToOrder}
                         >
                             {isAdded ? (
-                                <><CheckCircle2 className="mr-1.5 h-4 w-4" />{t('addedToCart')}</>
+                                <>
+                                    <CheckCircle2 className="mr-1.5 h-4 w-4" />
+                                    {t('addedToCart')}
+                                </>
                             ) : isAdding ? (
-                                <><Loader2 className="mr-1.5 h-4 w-4 animate-spin" />{t('adding')}</>
+                                <>
+                                    <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                                    {t('adding')}
+                                </>
                             ) : (
-                                <><ShoppingCart className="mr-1.5 h-4 w-4" />{t('addToCart')}</>
+                                <>
+                                    <ShoppingCart className="mr-1.5 h-4 w-4" />
+                                    {t('addToCart')}
+                                </>
                             )}
                         </Button>
                     </div>
@@ -249,15 +283,25 @@ export function ConfiguratorForm({ system, productName, currencyCode, evaluateAc
                     </DrawerHeader>
                     <div className="px-4 pb-6 overflow-y-auto max-h-[60vh]">
                         {lines.map((line, i) => (
-                            <div key={line.sourceKey ?? i} className="flex items-center justify-between py-2.5 border-b border-border last:border-0">
+                            <div
+                                key={line.sourceKey ?? i}
+                                className="flex items-center justify-between py-2.5 border-b border-border last:border-0"
+                            >
                                 <div className="min-w-0 flex-1">
                                     <p className="text-sm font-medium">{line.productVariant.name}</p>
-                                    <p className="text-[11px] text-muted-foreground font-mono">{line.productVariant.sku}</p>
+                                    <p className="text-[11px] text-muted-foreground font-mono">
+                                        {line.productVariant.sku}
+                                    </p>
                                 </div>
                                 <div className="flex items-center gap-3 shrink-0 ml-3">
-                                    <span className="text-xs text-muted-foreground font-mono">×{line.quantity}</span>
+                                    <span className="text-xs text-muted-foreground font-mono">
+                                        ×{line.quantity}
+                                    </span>
                                     <span className="text-sm font-mono tabular-nums">
-                                        <Price value={line.productVariant.priceWithTax * line.quantity} currencyCode={currencyCode} />
+                                        <Price
+                                            value={line.productVariant.priceWithTax * line.quantity}
+                                            currencyCode={currencyCode}
+                                        />
                                     </span>
                                 </div>
                             </div>
@@ -308,7 +352,9 @@ function BomSidebar({
                             {lines.length}
                         </span>
                     )}
-                    {isEvaluating && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground ml-auto" />}
+                    {isEvaluating && (
+                        <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground ml-auto" />
+                    )}
                 </div>
 
                 {lines.length > 0 ? (
@@ -317,21 +363,28 @@ function BomSidebar({
                             <div key={line.sourceKey ?? i} className="py-2">
                                 <div className="flex items-start justify-between gap-2">
                                     <div className="min-w-0 flex-1">
-                                        <p className="text-sm font-medium leading-tight">{line.productVariant.name}</p>
-                                        <p className="text-[11px] text-muted-foreground font-mono mt-0.5">{line.productVariant.sku}</p>
+                                        <p className="text-sm font-medium leading-tight">
+                                            {line.productVariant.name}
+                                        </p>
+                                        <p className="text-[11px] text-muted-foreground font-mono mt-0.5">
+                                            {line.productVariant.sku}
+                                        </p>
                                     </div>
-                                    <span className="text-xs text-muted-foreground font-mono tabular-nums shrink-0">×{line.quantity}</span>
+                                    <span className="text-xs text-muted-foreground font-mono tabular-nums shrink-0">
+                                        ×{line.quantity}
+                                    </span>
                                 </div>
                                 <p className="text-sm font-mono tabular-nums text-right mt-0.5">
-                                    <Price value={line.productVariant.priceWithTax * line.quantity} currencyCode={currencyCode} />
+                                    <Price
+                                        value={line.productVariant.priceWithTax * line.quantity}
+                                        currencyCode={currencyCode}
+                                    />
                                 </p>
                             </div>
                         ))}
                     </div>
                 ) : (
-                    <p className="text-sm text-muted-foreground py-4">
-                        {t('emptyBom')}
-                    </p>
+                    <p className="text-sm text-muted-foreground py-4">{t('emptyBom')}</p>
                 )}
             </div>
 
@@ -350,11 +403,20 @@ function BomSidebar({
                         onClick={onAddToOrder}
                     >
                         {isAdded ? (
-                            <><CheckCircle2 className="mr-2 h-5 w-5" />{t('addedToCart')}</>
+                            <>
+                                <CheckCircle2 className="mr-2 h-5 w-5" />
+                                {t('addedToCart')}
+                            </>
                         ) : isAdding ? (
-                            <><Loader2 className="mr-2 h-5 w-5 animate-spin" />{t('adding')}</>
+                            <>
+                                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                                {t('adding')}
+                            </>
                         ) : (
-                            <><ShoppingCart className="mr-2 h-5 w-5" />{t('addToCart')}</>
+                            <>
+                                <ShoppingCart className="mr-2 h-5 w-5" />
+                                {t('addToCart')}
+                            </>
                         )}
                     </Button>
                 </div>
@@ -384,21 +446,21 @@ function ModuleSection({
 }) {
     const t = useTranslations('Configurator');
     const visibleFields = mod.fields
-        .filter(f => {
+        .filter((f) => {
             const ef = evalFieldMap.get(buildFieldRef(mod.code, f.code));
             return !ef?.hidden;
         })
         .sort((a, b) => a.sortOrder - b.sortOrder);
 
     const allFilled = visibleFields
-        .filter(f => f.required)
-        .every(f => {
+        .filter((f) => f.required)
+        .every((f) => {
             const val = values[buildFieldRef(mod.code, f.code)];
             return val != null && val !== '';
         });
 
     const summaryParts = visibleFields
-        .map(f => {
+        .map((f) => {
             const val = values[buildFieldRef(mod.code, f.code)];
             if (!val) return null;
             if (f.fieldType === 'BOOL') return val === 'true' ? f.name : null;
@@ -409,17 +471,23 @@ function ModuleSection({
     const summary = summaryParts.slice(0, 3).join(', ');
 
     return (
-        <section className={`border border-border rounded-lg overflow-hidden transition-shadow ${expanded ? 'ring-1 ring-primary/20' : ''}`}>
+        <section
+            className={`border border-border rounded-lg overflow-hidden transition-shadow ${
+                expanded ? 'ring-1 ring-primary/20' : ''
+            }`}
+        >
             <button
                 type="button"
                 onClick={onToggle}
                 className="w-full flex items-center gap-2.5 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
             >
-                <div className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 ${
-                    allFilled && summaryParts.length > 0
-                        ? 'bg-primary text-white'
-                        : 'border-2 border-muted-foreground/30 text-muted-foreground'
-                }`}>
+                <div
+                    className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 ${
+                        allFilled && summaryParts.length > 0
+                            ? 'bg-primary text-white'
+                            : 'border-2 border-muted-foreground/30 text-muted-foreground'
+                    }`}
+                >
                     {allFilled && summaryParts.length > 0 ? (
                         <CheckCircle2 className="w-3 h-3" />
                     ) : (
@@ -427,26 +495,44 @@ function ModuleSection({
                     )}
                 </div>
                 <div className="flex-1 min-w-0">
-                    <h2 className={`text-sm font-semibold ${allFilled && summaryParts.length > 0 ? 'text-foreground' : expanded ? 'text-foreground' : 'text-muted-foreground'}`}>
+                    <h2
+                        className={`text-sm font-semibold ${
+                            allFilled && summaryParts.length > 0
+                                ? 'text-foreground'
+                                : expanded
+                                ? 'text-foreground'
+                                : 'text-muted-foreground'
+                        }`}
+                    >
                         {mod.name}
-                        {mod.optional && <span className="ml-1.5 text-xs font-normal text-muted-foreground">{t('optional')}</span>}
+                        {mod.optional && (
+                            <span className="ml-1.5 text-xs font-normal text-muted-foreground">
+                                {t('optional')}
+                            </span>
+                        )}
                     </h2>
                 </div>
                 {!expanded && summary && (
-                    <span className="text-xs text-muted-foreground hidden sm:inline truncate max-w-32">{summary}</span>
+                    <span className="text-xs text-muted-foreground hidden sm:inline truncate max-w-32">
+                        {summary}
+                    </span>
                 )}
-                <ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${expanded ? 'rotate-180' : ''}`} />
+                <ChevronDown
+                    className={`w-4 h-4 text-muted-foreground transition-transform ${
+                        expanded ? 'rotate-180' : ''
+                    }`}
+                />
             </button>
             {expanded && (
                 <div className="px-4 pb-4 pt-2 space-y-3.5 border-t border-border">
-                    {visibleFields.map(field => (
+                    {visibleFields.map((field) => (
                         <FieldInput
                             key={field.id}
                             field={field}
                             moduleCode={mod.code}
                             value={values[buildFieldRef(mod.code, field.code)] ?? ''}
                             evalField={evalFieldMap.get(buildFieldRef(mod.code, field.code))}
-                            onChange={val => onFieldChange(mod.code, field.code, val)}
+                            onChange={(val) => onFieldChange(mod.code, field.code, val)}
                         />
                     ))}
                 </div>
@@ -480,7 +566,7 @@ function FieldInput({
                     <Label className="text-sm font-medium">{field.name}</Label>
                     <Switch
                         checked={value === 'true'}
-                        onCheckedChange={checked => onChange(checked ? 'true' : 'false')}
+                        onCheckedChange={(checked) => onChange(checked ? 'true' : 'false')}
                     />
                 </div>
             ) : (
@@ -494,15 +580,22 @@ function FieldInput({
                     ) : field.fieldType === 'SELECT' || field.fieldType === 'DYNAMIC_SELECT' ? (
                         <SelectInput field={field} value={value} evalField={evalField} onChange={onChange} />
                     ) : (
-                        <Input value={value} onChange={e => onChange(e.target.value)} />
+                        <Input value={value} onChange={(e) => onChange(e.target.value)} />
                     )}
                 </>
             )}
 
             {messages.map((msg, i) => (
-                <p key={i} className={`text-xs flex items-center gap-1 ${
-                    msg.type === 'error' ? 'text-red-600' : msg.type === 'warning' ? 'text-amber-600' : 'text-muted-foreground'
-                }`}>
+                <p
+                    key={i}
+                    className={`text-xs flex items-center gap-1 ${
+                        msg.type === 'error'
+                            ? 'text-red-600'
+                            : msg.type === 'warning'
+                            ? 'text-amber-600'
+                            : 'text-muted-foreground'
+                    }`}
+                >
                     <Info className="w-3 h-3 shrink-0" />
                     {msg.message}
                 </p>
@@ -512,20 +605,37 @@ function FieldInput({
                 <p className="text-xs text-muted-foreground font-mono tabular-nums">
                     {field.min && field.max
                         ? t('range', {
-                            min: `${Number(field.min).toLocaleString()}`,
-                            max: `${Number(field.max).toLocaleString()}${field.unit ? ` ${field.unit}` : ''}`,
-                        })
+                              min: `${Number(field.min).toLocaleString()}`,
+                              max: `${Number(field.max).toLocaleString()}${
+                                  field.unit ? ` ${field.unit}` : ''
+                              }`,
+                          })
                         : field.min
-                        ? t('min', { value: `${Number(field.min).toLocaleString()}${field.unit ? ` ${field.unit}` : ''}` })
-                        : t('max', { value: `${Number(field.max).toLocaleString()}${field.unit ? ` ${field.unit}` : ''}` })
-                    }
+                        ? t('min', {
+                              value: `${Number(field.min).toLocaleString()}${
+                                  field.unit ? ` ${field.unit}` : ''
+                              }`,
+                          })
+                        : t('max', {
+                              value: `${Number(field.max).toLocaleString()}${
+                                  field.unit ? ` ${field.unit}` : ''
+                              }`,
+                          })}
                 </p>
             )}
         </div>
     );
 }
 
-function NumberInput({ field, value, onChange }: { field: ConfiguratorField; value: string; onChange: (v: string) => void }) {
+function NumberInput({
+    field,
+    value,
+    onChange,
+}: {
+    field: ConfiguratorField;
+    value: string;
+    onChange: (v: string) => void;
+}) {
     const step = field.unit === 'mm' ? 100 : 1;
     const min = field.min ? Number(field.min) : undefined;
     const max = field.max ? Number(field.max) : undefined;
@@ -553,7 +663,7 @@ function NumberInput({ field, value, onChange }: { field: ConfiguratorField; val
                 min={min}
                 max={max}
                 step={step}
-                onChange={e => onChange(e.target.value)}
+                onChange={(e) => onChange(e.target.value)}
                 className="flex-1 h-9 px-3 text-sm focus:outline-none bg-transparent font-mono tabular-nums text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
             />
             <button
@@ -585,8 +695,8 @@ function SelectInput({
 }) {
     const t = useTranslations('Configurator');
     const options = evalField?.availableOptions?.length
-        ? evalField.availableOptions.map(o => ({ value: o.value, label: o.label ?? o.value }))
-        : (field.options ?? []).map(o => ({ value: o.code, label: o.label }));
+        ? evalField.availableOptions.map((o) => ({ value: o.value, label: o.label ?? o.value }))
+        : (field.options ?? []).map((o) => ({ value: o.code, label: o.label }));
 
     return (
         <Select value={value || undefined} onValueChange={onChange}>
@@ -594,7 +704,7 @@ function SelectInput({
                 <SelectValue placeholder={t('selectPlaceholder', { field: field.name.toLowerCase() })} />
             </SelectTrigger>
             <SelectContent>
-                {options.map(opt => (
+                {options.map((opt) => (
                     <SelectItem key={opt.value} value={opt.value}>
                         {opt.label}
                     </SelectItem>
@@ -603,4 +713,3 @@ function SelectInput({
         </Select>
     );
 }
-

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

@@ -1,32 +1,21 @@
 'use client';
 
-import { use, useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { useSearchParams } from 'next/navigation';
-import { usePathname, useRouter } from '@/i18n/navigation';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
-} from '@/components/ui/accordion';
-import {
-    Sheet,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from '@/components/ui/sheet';
-import { SlidersHorizontal, Layers, ListTree, Tag } from 'lucide-react';
-import { type SearchProductsResult } from '@/lib/vendure/queries';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { usePathname, useRouter } from '@/i18n/navigation';
 import { RESERVED_PARAMS, STRUCTURAL_PARAMS } from '@/lib/search-helpers';
+import { type SearchProductsResult } from '@/lib/vendure/queries';
+import { Layers, ListTree, SlidersHorizontal, Tag } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { use, useState } from 'react';
 import { ActiveFilters } from './active-filters';
 import { PriceRangeFilter } from './price-range-filter';
-import { Switch } from '@/components/ui/switch';
 
 const VISIBLE_COUNT = 6;
 
@@ -79,9 +68,9 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
     const activeFilterCount =
         [...searchParams.entries()]
             .filter(([key]) => !RESERVED_PARAMS.has(key))
-            .reduce((n, [, v]) => n + v.split(',').length, 0)
-        + (searchParams.has('priceMin') || searchParams.has('priceMax') ? 1 : 0)
-        + (searchParams.get('inStock') === 'true' ? 1 : 0);
+            .reduce((n, [, v]) => n + v.split(',').length, 0) +
+        (searchParams.has('priceMin') || searchParams.has('priceMax') ? 1 : 0) +
+        (searchParams.get('inStock') === 'true' ? 1 : 0);
 
     const toggleFacet = (facetCode: string, valueCode: string) => {
         const params = new URLSearchParams(searchParams);
@@ -143,7 +132,9 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
                     variant="ghost"
                     size="sm"
                     onClick={clearFilters}
-                    className={`h-7 text-xs text-muted-foreground hover:text-foreground ${!hasActiveFilters ? 'invisible' : ''}`}
+                    className={`h-7 text-xs text-muted-foreground hover:text-foreground ${
+                        !hasActiveFilters ? 'invisible' : ''
+                    }`}
                 >
                     {t('clearAll')}
                 </Button>
@@ -155,11 +146,7 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
                 <Label htmlFor="in-stock-toggle" className="text-sm font-normal cursor-pointer">
                     {t('inStockOnly')}
                 </Label>
-                <Switch
-                    id="in-stock-toggle"
-                    checked={isInStock}
-                    onCheckedChange={toggleInStock}
-                />
+                <Switch id="in-stock-toggle" checked={isInStock} onCheckedChange={toggleInStock} />
             </div>
 
             <PriceRangeFilter min={prices.range.min} max={prices.range.max} />
@@ -167,9 +154,12 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
             <Accordion type="multiple" defaultValue={defaultOpen}>
                 {facetGroups.map((facet) => {
                     const facetNameLower = facet.name.toLowerCase();
-                    const FacetIcon = facetNameLower.includes('subcategory') ? ListTree
-                        : facetNameLower.includes('category') ? Layers
-                        : facetNameLower.includes('brand') ? Tag
+                    const FacetIcon = facetNameLower.includes('subcategory')
+                        ? ListTree
+                        : facetNameLower.includes('category')
+                        ? Layers
+                        : facetNameLower.includes('brand')
+                        ? Tag
                         : SlidersHorizontal;
 
                     const selectedValues = searchParams.get(facet.code)?.split(',') ?? [];
@@ -200,9 +190,7 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
     return (
         <>
             {/* Desktop: sticky sidebar */}
-            <div className="hidden lg:block sticky top-20">
-                {filterContent}
-            </div>
+            <div className="hidden lg:block sticky top-20">{filterContent}</div>
 
             {/* Mobile: sheet trigger */}
             <div className="lg:hidden">
@@ -212,9 +200,7 @@ export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
                             <SlidersHorizontal className="h-4 w-4" />
                             {t('filtersButton')}
                             {hasActiveFilters && (
-                                <Badge className="h-5 min-w-5 px-1.5 text-[10px]">
-                                    {activeFilterCount}
-                                </Badge>
+                                <Badge className="h-5 min-w-5 px-1.5 text-[10px]">{activeFilterCount}</Badge>
                             )}
                         </Button>
                     </SheetTrigger>
@@ -261,12 +247,8 @@ function FacetValueList({
                             htmlFor={`facet-${facetCode}-${value.code}`}
                             className="text-sm font-normal cursor-pointer flex-1 flex items-center justify-between"
                         >
-                            <span className={isChecked ? 'text-foreground' : ''}>
-                                {value.name}
-                            </span>
-                            <span className="text-xs text-muted-foreground tabular-nums">
-                                {value.count}
-                            </span>
+                            <span className={isChecked ? 'text-foreground' : ''}>{value.name}</span>
+                            <span className="text-xs text-muted-foreground tabular-nums">{value.count}</span>
                         </Label>
                     </div>
                 );
@@ -276,9 +258,7 @@ function FacetValueList({
                     onClick={() => setExpanded(!expanded)}
                     className="text-xs text-primary hover:text-primary/80 pt-1"
                 >
-                    {expanded
-                        ? t('showLess')
-                        : t('moreCount', { count: values.length - VISIBLE_COUNT })}
+                    {expanded ? t('showLess') : t('moreCount', { count: values.length - VISIBLE_COUNT })}
                 </button>
             )}
         </div>