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

package/dist/assets/storefront/src/components/commerce/company-state-badge.tsx

@@ -1,31 +1,25 @@
-import {Badge} from '@/components/ui/badge';
-import {
-    Clock,
-    CheckCircle,
-    XCircle,
-    Ban,
-    type LucideIcon,
-} from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Ban, CheckCircle, Clock, XCircle, type LucideIcon } from 'lucide-react';
 
 const STATE_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
-    Pending: {color: 'bg-amber-100 text-amber-800', label: 'Pending', icon: Clock},
-    Active: {color: 'bg-green-100 text-green-800', label: 'Active', icon: CheckCircle},
-    Suspended: {color: 'bg-red-100 text-red-800', label: 'Suspended', icon: XCircle},
-    Denied: {color: 'bg-red-100 text-red-800', label: 'Denied', icon: Ban},
-    Closed: {color: 'bg-gray-100 text-gray-500', label: 'Closed', icon: Ban},
+    Pending: { color: 'bg-amber-100 text-amber-800', label: 'Pending', icon: Clock },
+    Active: { color: 'bg-green-100 text-green-800', label: 'Active', icon: CheckCircle },
+    Suspended: { color: 'bg-red-100 text-red-800', label: 'Suspended', icon: XCircle },
+    Denied: { color: 'bg-red-100 text-red-800', label: 'Denied', icon: Ban },
+    Closed: { color: 'bg-gray-100 text-gray-500', label: 'Closed', icon: Ban },
 };
 
 interface CompanyStateBadgeProps {
     state: string;
 }
 
-export function CompanyStateBadge({state}: CompanyStateBadgeProps) {
-    const config = STATE_CONFIG[state] || {color: 'bg-gray-100 text-gray-800', label: state, icon: Clock};
+export function CompanyStateBadge({ state }: CompanyStateBadgeProps) {
+    const config = STATE_CONFIG[state] || { color: 'bg-gray-100 text-gray-800', label: state, 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/company-switcher.tsx

@@ -1,25 +1,25 @@
 'use client';
 
-import {useTransition} from 'react';
+import { switchCompanyAction } 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 {Building, Check, ChevronDown} from 'lucide-react';
-import {switchCompanyAction} from '@/components/layout/navbar/actions';
-import type {CompanyUserCompany} from '@/lib/vendure/queries';
+import type { CompanyUserCompany } from '@/lib/vendure/queries';
+import { Building, Check, ChevronDown } from 'lucide-react';
+import { useTransition } from 'react';
 
 interface CompanySwitcherProps {
     companies: CompanyUserCompany[];
     activeCompanyId: string;
 }
 
-export function CompanySwitcher({companies, activeCompanyId}: CompanySwitcherProps) {
+export function CompanySwitcher({ companies, activeCompanyId }: CompanySwitcherProps) {
     const [isPending, startTransition] = useTransition();
-    const activeCompany = companies.find(c => c.id === activeCompanyId);
+    const activeCompany = companies.find((c) => c.id === activeCompanyId);
 
     if (companies.length <= 1) {
         return null;
@@ -30,14 +30,14 @@ export function CompanySwitcher({companies, activeCompanyId}: CompanySwitcherPro
             <DropdownMenuTrigger asChild>
                 <Button variant="ghost" size="sm" className="w-full justify-between" disabled={isPending}>
                     <span className="flex items-center gap-2">
-                        <Building className="h-4 w-4"/>
-                        {isPending ? 'Switching...' : (activeCompany?.name ?? 'Select Company')}
+                        <Building className="h-4 w-4" />
+                        {isPending ? 'Switching...' : activeCompany?.name ?? 'Select Company'}
                     </span>
-                    <ChevronDown className="h-3 w-3"/>
+                    <ChevronDown className="h-3 w-3" />
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start">
-                {companies.map(company => (
+                {companies.map((company) => (
                     <DropdownMenuItem
                         key={company.id}
                         onClick={() => {
@@ -47,7 +47,7 @@ export function CompanySwitcher({companies, activeCompanyId}: CompanySwitcherPro
                         }}
                     >
                         <span className="flex items-center gap-2">
-                            {company.id === activeCompanyId && <Check className="h-3 w-3"/>}
+                            {company.id === activeCompanyId && <Check className="h-3 w-3" />}
                             {company.name}
                         </span>
                     </DropdownMenuItem>

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>
     );
 }
-