@voyantjs/products-ui 0.101.2 → 0.102.0

package/dist/components/product-detail/product-departure-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-departure-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-departure-form.tsx"],"names":[],"mappings":"AA8EA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;IACpD,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAuDD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAwWzF"}
+{"version":3,"file":"product-departure-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-departure-form.tsx"],"names":[],"mappings":"AA+EA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;IACpD,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAuDD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAgZzF"}

package/dist/components/product-detail/product-departure-form.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProductResourceTemplates } from "@voyantjs/availability-react";
 import { formatMessage } from "@voyantjs/i18n";
 import { useProductItineraries } from "@voyantjs/products-react";
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
 import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
 import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { DatePicker } from "./date-picker.js";
@@ -119,6 +120,25 @@ export function DepartureForm({ productId, slot, onSuccess, onCancel }) {
     const { data: itineraryData } = useProductItineraries(productId);
     const itineraries = itineraryData?.data ?? [];
     const defaultItinerary = itineraries.find((itinerary) => itinerary.isDefault) ?? itineraries[0];
+    // Suggested pax = total physical capacity of the configured departure
+    // inventory (each room/seat type's count × its capacity, e.g. 20 doubles
+    // sleeping 2 = 40). Lets a new departure inherit capacity from the rooms the
+    // operator already set up, while staying editable for an override.
+    const { data: resourceTemplateData } = useProductResourceTemplates({ productId });
+    const suggestedPax = useMemo(() => (resourceTemplateData?.data ?? []).reduce((optionTotal, option) => optionTotal +
+        option.templates.reduce((sum, template) => sum + (template.defaultCount ?? 0) * template.capacity, 0), 0), [resourceTemplateData?.data]);
+    // Pre-fill capacity once for a brand-new departure, only while the field is
+    // still untouched — never clobber an edit or an existing slot's value.
+    const prefilledPaxRef = useRef(false);
+    useEffect(() => {
+        if (isEditing || prefilledPaxRef.current || suggestedPax <= 0)
+            return;
+        const current = form.getValues("initialPax");
+        if (current === "" || current == null) {
+            form.setValue("initialPax", suggestedPax);
+            prefilledPaxRef.current = true;
+        }
+    }, [isEditing, suggestedPax, form]);
     const nights = (() => {
         if (!startDate || !endDate || typeof endDate !== "string" || endDate.length === 0)
             return 0;
@@ -213,5 +233,5 @@ export function DepartureForm({ productId, slot, onSuccess, onCancel }) {
                                 }, children: [_jsx(ComboboxInput, { placeholder: departureMessages.timezoneSearchPlaceholder, className: "w-full" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: departureMessages.timezoneEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
                                                         const tz = TIMEZONE_OPTIONS.find((t) => t.id === id);
                                                         return (_jsxs(ComboboxItem, { value: id, children: [_jsx("span", { className: "font-mono text-xs", children: id }), tz ? (_jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: tz.label })) : null] }, id));
-                                                    } }) })] })] }), form.formState.errors.timezone && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.timezone.message }))] })] }), _jsxs("fieldset", { className: "grid gap-3", children: [_jsx("legend", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: departureMessages.availabilityLegend }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.statusLabel }), _jsxs(Select, { value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), items: slotStatuses, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: slotStatuses.map((s) => (_jsx(SelectItem, { value: s.value, children: s.label }, s.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.capacityLabel }), _jsx(Input, { ...form.register("initialPax"), type: "number", min: "0", step: "1", placeholder: "0", disabled: unlimited })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "unlimited", checked: unlimited, onCheckedChange: (c) => form.setValue("unlimited", c) }), _jsx(Label, { htmlFor: "unlimited", className: "font-normal cursor-pointer", children: departureMessages.unlimitedLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes"), placeholder: departureMessages.notesPlaceholder })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? productMessages.saveChanges : departureMessages.create] })] })] }));
+                                                    } }) })] })] }), form.formState.errors.timezone && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.timezone.message }))] })] }), _jsxs("fieldset", { className: "grid gap-3", children: [_jsx("legend", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: departureMessages.availabilityLegend }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.statusLabel }), _jsxs(Select, { value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), items: slotStatuses, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: slotStatuses.map((s) => (_jsx(SelectItem, { value: s.value, children: s.label }, s.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.capacityLabel }), _jsx(Input, { ...form.register("initialPax"), type: "number", min: "0", step: "1", placeholder: "0", disabled: unlimited }), !unlimited && suggestedPax > 0 ? (_jsx("button", { type: "button", onClick: () => form.setValue("initialPax", suggestedPax), className: "text-left text-xs text-muted-foreground hover:text-foreground", children: formatMessage(departureMessages.capacityAutoHint, { count: suggestedPax }) })) : null] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "unlimited", checked: unlimited, onCheckedChange: (c) => form.setValue("unlimited", c) }), _jsx(Label, { htmlFor: "unlimited", className: "font-normal cursor-pointer", children: departureMessages.unlimitedLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes"), placeholder: departureMessages.notesPlaceholder })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? productMessages.saveChanges : departureMessages.create] })] })] }));
 }

package/dist/components/product-detail/product-detail-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-detail-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-form.tsx"],"names":[],"mappings":"AAuCA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;IACxF,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACnC,CAAA;AAgBD,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AA6BD,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAqWzF"}
+{"version":3,"file":"product-detail-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-form.tsx"],"names":[],"mappings":"AAuCA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;IACxF,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACnC,CAAA;AAgBD,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AA6BD,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAwWzF"}

package/dist/components/product-detail/product-detail-form.js

@@ -64,13 +64,16 @@ export function ProductDetailForm({ product, onSuccess, onCancel }) {
         { value: "active", label: productMessages.statusActive },
         { value: "archived", label: productMessages.statusArchived },
     ];
+    // Ordered most-common-first for this operator (multi-day tours, then day
+    // trips). The chosen mode also drives the option pricing layout
+    // (rooms vs per-person seats) — see deriveOptionPricingLayout.
     const bookingModes = [
+        { value: "itinerary", label: productMessages.bookingModeItinerary },
+        { value: "stay", label: productMessages.bookingModeStay },
         { value: "date", label: productMessages.bookingModeDate },
         { value: "date_time", label: productMessages.bookingModeDateTime },
-        { value: "open", label: productMessages.bookingModeOpen },
-        { value: "stay", label: productMessages.bookingModeStay },
         { value: "transfer", label: productMessages.bookingModeTransfer },
-        { value: "itinerary", label: productMessages.bookingModeItinerary },
+        { value: "open", label: productMessages.bookingModeOpen },
         { value: "other", label: productMessages.bookingModeOther },
     ];
     const form = useForm({

package/dist/components/product-detail/product-detail-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-detail-page.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-page.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAgNvD"}
+{"version":3,"file":"product-detail-page.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-page.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAgNvD"}

package/dist/components/product-detail/product-detail-page.js

@@ -17,7 +17,7 @@ import { ProductDetailSkeleton } from "./product-detail-skeleton.js";
 import { ProductExtrasSection } from "./product-extras-section.js";
 import { ProductMarketRulesSection } from "./product-market-rules-section.js";
 import { PricingPanel } from "./product-options-pricing.js";
-import { getDeparturePriceOverridesQueryOptions } from "./product-options-shared.js";
+import { deriveOptionPricingLayout, getDeparturePriceOverridesQueryOptions, } from "./product-options-shared.js";
 import { ProductPaymentPolicySection } from "./product-payment-policy-section.js";
 import { ScheduleDialog } from "./product-schedule-dialog.js";
 import { useProductDetailData } from "./use-product-detail-data.js";
@@ -82,7 +82,7 @@ export function ProductDetailPage({ id }) {
                                     if (confirm(productMessages.deleteScheduleConfirm)) {
                                         mutations.deleteRule.mutate(ruleId);
                                     }
-                                } }), _jsx(ProductDetailItinerarySection, { productId: id }), _jsx(ProductsUiMessagesProvider, { locale: resolvedLocale, children: _jsx(ProductOptionsSection, { productId: id, renderOptionDetails: (option) => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(PricingPanel, { productId: id, optionId: option.id, productCurrency: product.sellCurrency }), renderOptionExtras?.(id, option.id)] })) }) }), _jsx(ProductExtrasSection, { productId: id }), _jsx(ProductPaymentPolicySection, { product: product, onSuccess: invalidateProduct }), _jsx(ProductMarketRulesSection, { productId: id })] }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(ProductChannelsSection, { allChannels: channels, mappings: mappings, onAddChannel: (channelId) => mutations.addChannelMapping.mutate(channelId), onRemoveChannel: (mappingId) => mutations.removeChannelMapping.mutate(mappingId) }), _jsx(ProductOrganizeSection, { product: product, onEdit: dialogs.edit.openNow }), _jsx(ProductBrochureSection, { brochure: brochure, isGenerating: mutations.generateBrochure.isPending, onGenerate: () => mutations.generateBrochure.mutate() }), _jsx(ProductActivitySection, { productId: id })] })] }), _jsx(ProductDialog, { open: dialogs.edit.open, onOpenChange: dialogs.edit.setOpen, product: product, onSuccess: () => {
+                                } }), _jsx(ProductDetailItinerarySection, { productId: id }), _jsx(ProductsUiMessagesProvider, { locale: resolvedLocale, children: _jsx(ProductOptionsSection, { productId: id, renderOptionDetails: (option) => (_jsx(PricingPanel, { productId: id, optionId: option.id, optionName: option.name, productCurrency: product.sellCurrency, layout: deriveOptionPricingLayout(product.bookingMode), extras: renderOptionExtras?.(id, option.id) })) }) }), _jsx(ProductExtrasSection, { productId: id }), _jsx(ProductPaymentPolicySection, { product: product, onSuccess: invalidateProduct }), _jsx(ProductMarketRulesSection, { productId: id })] }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(ProductChannelsSection, { allChannels: channels, mappings: mappings, onAddChannel: (channelId) => mutations.addChannelMapping.mutate(channelId), onRemoveChannel: (mappingId) => mutations.removeChannelMapping.mutate(mappingId) }), _jsx(ProductOrganizeSection, { product: product, onEdit: dialogs.edit.openNow }), _jsx(ProductBrochureSection, { brochure: brochure, isGenerating: mutations.generateBrochure.isPending, onGenerate: () => mutations.generateBrochure.mutate() }), _jsx(ProductActivitySection, { productId: id })] })] }), _jsx(ProductDialog, { open: dialogs.edit.open, onOpenChange: dialogs.edit.setOpen, product: product, onSuccess: () => {
                     dialogs.edit.close();
                     invalidateProduct();
                 } }), _jsx(DepartureDialog, { open: dialogs.departure.open, onOpenChange: dialogs.departure.setOpen, productId: id, slot: dialogs.departure.editing, onSuccess: () => {

package/dist/components/product-detail/product-option-pricing-grid.d.ts

@@ -0,0 +1,16 @@
+import { type OptionPricingLayout } from "./product-options-shared.js";
+export interface OptionPricingGridProps {
+    productId: string;
+    optionId: string;
+    optionName: string;
+    productCurrency: string;
+    layout: OptionPricingLayout;
+}
+/**
+ * The everyday pricing surface for a booking option: one table that merges
+ * inventory (rooms / traveler types) with what each traveler pays. The single
+ * default rate plan is auto-managed and hidden — agents never see catalogs or
+ * rate-plan chrome here (that lives under Advanced).
+ */
+export declare function OptionPricingGrid({ productId, optionId, optionName, productCurrency, layout, }: OptionPricingGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-option-pricing-grid.d.ts.map

package/dist/components/product-detail/product-option-pricing-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-pricing-grid.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-option-pricing-grid.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAA;AA8BpC,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,mBAAmB,CAAA;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,UAAU,EACV,eAAe,EACf,MAAM,GACP,EAAE,sBAAsB,2CAoWxB"}

package/dist/components/product-detail/product-option-pricing-grid.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { formatMessage } from "@voyantjs/i18n";
+import { useOptionPriceRuleMutation, useOptionUnitPriceRuleMutation, usePriceCatalogMutation, } from "@voyantjs/pricing-react";
+import { useOptionUnitMutation, useVoyantProductsContext } from "@voyantjs/products-react";
+import { Button } from "@voyantjs/ui/components/button";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useProductDetailMessages } from "./host.js";
+import { categoryAppliesToUnit, formatProductMoney, getCategoryCondition, TravelerCategoryDialog, } from "./product-options-pricing.js";
+import { getOptionPriceRulesQueryOptions, getOptionUnitPriceRulesQueryOptions, getOptionUnitsQueryOptions, getPriceCatalogsQueryOptions, getPricingCategoriesQueryOptions, } from "./product-options-shared.js";
+import { UnitDialog } from "./product-unit-dialog.js";
+import { UnitPriceRuleDialog, } from "./product-unit-price-rule-dialog.js";
+function formatAvailability(unit, messages) {
+    if (unit.maxQuantity != null && unit.maxQuantity > 0) {
+        return formatMessage(messages.perDeparture, { count: unit.maxQuantity });
+    }
+    return "—";
+}
+function unitSubtitle(unit, layout, messages) {
+    if (layout === "rooms") {
+        const sleeps = unit.occupancyMax ?? unit.occupancyMin;
+        return sleeps != null ? formatMessage(messages.sleeps, { count: sleeps }) : null;
+    }
+    if (unit.minAge != null || unit.maxAge != null) {
+        return `${unit.minAge ?? 0}–${unit.maxAge ?? "∞"}`;
+    }
+    return null;
+}
+/**
+ * The everyday pricing surface for a booking option: one table that merges
+ * inventory (rooms / traveler types) with what each traveler pays. The single
+ * default rate plan is auto-managed and hidden — agents never see catalogs or
+ * rate-plan chrome here (that lives under Advanced).
+ */
+export function OptionPricingGrid({ productId, optionId, optionName, productCurrency, layout, }) {
+    const client = useVoyantProductsContext();
+    const messages = useProductDetailMessages();
+    const t = messages.products.operations.pricingGrid;
+    const { data: unitsData, refetch: refetchUnits } = useQuery(getOptionUnitsQueryOptions(client, optionId));
+    const { data: rulesData, refetch: refetchRules } = useQuery(getOptionPriceRulesQueryOptions(client, optionId));
+    const { data: categoriesData, refetch: refetchCategories } = useQuery(getPricingCategoriesQueryOptions(client));
+    const { data: catalogsData } = useQuery(getPriceCatalogsQueryOptions(client));
+    const rules = rulesData?.data ?? [];
+    const defaultRule = rules.find((rule) => rule.isDefault) ?? rules[0];
+    const { data: cellsData, refetch: refetchCells } = useQuery({
+        ...getOptionUnitPriceRulesQueryOptions(client, defaultRule?.id ?? "__none__"),
+        enabled: Boolean(defaultRule?.id),
+    });
+    const { remove: removeUnit } = useOptionUnitMutation();
+    const { remove: removeCell } = useOptionUnitPriceRuleMutation();
+    const { create: createRule } = useOptionPriceRuleMutation();
+    const { create: createCatalog } = usePriceCatalogMutation();
+    const deleteUnitMutation = useMutation({
+        mutationFn: (id) => removeUnit.mutateAsync(id),
+        onSuccess: () => {
+            void refetchUnits();
+            void refetchCells();
+        },
+    });
+    const deleteCellMutation = useMutation({
+        mutationFn: (id) => removeCell.mutateAsync(id),
+        onSuccess: () => void refetchCells(),
+    });
+    const [unitDialogOpen, setUnitDialogOpen] = useState(false);
+    const [editingUnit, setEditingUnit] = useState();
+    const [defaultUnitType, setDefaultUnitType] = useState("room");
+    const [categoryDialogOpen, setCategoryDialogOpen] = useState(false);
+    const [cellDialogOpen, setCellDialogOpen] = useState(false);
+    const [cellRuleId, setCellRuleId] = useState();
+    const [editingCell, setEditingCell] = useState();
+    const [preselectedUnitId, setPreselectedUnitId] = useState();
+    const [preselectedCategoryId, setPreselectedCategoryId] = useState();
+    const units = (unitsData?.data ?? [])
+        .filter((unit) => !unit.isHidden)
+        .slice()
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+    // Inventory wins over the booking-mode hint: an option that actually holds
+    // rooms (or vehicles/groups) is always priced as a rooms grid, even if the
+    // product's booking mode was set to a per-person type. The `layout` prop only
+    // decides the shape for a brand-new option that has no inventory yet.
+    const hasRoomLikeUnits = units.some((unit) => unit.unitType === "room" || unit.unitType === "vehicle" || unit.unitType === "group");
+    const hasPersonUnits = units.some((unit) => unit.unitType === "person");
+    const effectiveLayout = hasRoomLikeUnits
+        ? "rooms"
+        : hasPersonUnits
+            ? "seats"
+            : layout;
+    const cells = cellsData?.data ?? [];
+    const referencedCategoryIds = new Set(cells.flatMap((cell) => (cell.pricingCategoryId ? [cell.pricingCategoryId] : [])));
+    const categories = (categoriesData?.data ?? [])
+        .filter((category) => category.active &&
+        (((category.productId == null || category.productId === productId) &&
+            (category.optionId == null || category.optionId === optionId)) ||
+            referencedCategoryIds.has(category.id)))
+        .slice()
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+    // Traveler-type columns. Seats layout prices each traveler-type row once
+    // (single price column). Rooms layout splits price by traveler category once
+    // any exist, else shows a single base-price column per room.
+    const columns = effectiveLayout === "rooms" && categories.length > 0
+        ? categories.map((category) => ({
+            id: category.id,
+            name: category.name,
+            metadata: category.metadata,
+        }))
+        : [{ id: null, name: t.priceColumn }];
+    const nextUnitSortOrder = units.length > 0 ? Math.max(...units.map((u) => u.sortOrder)) + 1 : 0;
+    const findCell = (unitId, categoryId) => cells.find((cell) => cell.unitId === unitId && (cell.pricingCategoryId ?? null) === categoryId) ?? null;
+    // Lazily materialize the hidden default rate plan (and a default catalog if
+    // the tenant has none) the first time the agent enters a price. Keeps the
+    // common path free of any rate-plan/catalog ceremony.
+    async function ensureRatePlanId() {
+        if (defaultRule?.id)
+            return defaultRule.id;
+        const catalogs = catalogsData?.data ?? [];
+        const existingCatalog = catalogs.find((catalog) => catalog.isDefault) ?? catalogs[0];
+        const catalogId = existingCatalog?.id ??
+            (await createCatalog.mutateAsync({
+                code: "default",
+                name: t.priceColumn,
+                catalogType: "public",
+                isDefault: true,
+            })).id;
+        const created = await createRule.mutateAsync({
+            productId,
+            optionId,
+            priceCatalogId: catalogId,
+            name: optionName,
+            pricingMode: "per_person",
+            baseSellAmountCents: 0,
+            baseCostAmountCents: 0,
+            allPricingCategories: effectiveLayout === "seats",
+            isDefault: true,
+            active: true,
+        });
+        await refetchRules();
+        return created.id;
+    }
+    async function openCellDialog(unit, categoryId) {
+        const ruleId = await ensureRatePlanId();
+        setCellRuleId(ruleId);
+        setEditingCell(undefined);
+        setPreselectedUnitId(unit.id);
+        setPreselectedCategoryId(categoryId);
+        setCellDialogOpen(true);
+    }
+    const addRoomOrTraveler = () => {
+        setEditingUnit(undefined);
+        setDefaultUnitType(effectiveLayout === "rooms" ? "room" : "person");
+        setUnitDialogOpen(true);
+    };
+    const unitColumnLabel = effectiveLayout === "rooms" ? t.roomColumn : t.travelerColumn;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: effectiveLayout === "rooms" ? t.roomsTitle : t.seatsTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: effectiveLayout === "rooms" ? t.roomsDescription : t.seatsDescription })] }), _jsxs("div", { className: "flex items-center gap-2", children: [effectiveLayout === "rooms" ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCategoryDialogOpen(true), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), t.addTravelerType] })) : null, _jsxs(Button, { variant: "outline", size: "sm", onClick: addRoomOrTraveler, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), effectiveLayout === "rooms" ? t.addRoom : t.addTravelerType] })] })] }), units.length === 0 ? (_jsx("p", { className: "rounded-md border bg-background px-3 py-6 text-center text-sm text-muted-foreground", children: effectiveLayout === "rooms" ? t.emptyRooms : t.emptySeats })) : (_jsx("div", { className: "overflow-x-auto rounded-md border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b bg-muted/40 text-muted-foreground", children: [_jsx("th", { className: "p-2.5 text-left font-medium", children: unitColumnLabel }), _jsx("th", { className: "p-2.5 text-left font-medium", children: t.availableColumn }), columns.map((column) => {
+                                        const condition = getCategoryCondition(column.metadata);
+                                        return (_jsxs("th", { className: "p-2.5 text-left font-medium", children: [_jsx("div", { children: column.name }), condition ? (_jsx("div", { className: "mt-0.5 max-w-[220px] text-[10px] font-normal normal-case leading-snug text-muted-foreground", children: condition })) : null] }, column.id ?? "__base__"));
+                                    }), _jsx("th", { className: "w-[72px] p-2.5 text-right font-medium" })] }) }), _jsx("tbody", { children: units.map((unit) => {
+                                const subtitle = unitSubtitle(unit, effectiveLayout, t);
+                                return (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsxs("td", { className: "p-2.5", children: [_jsx("div", { className: "font-medium", children: unit.name }), subtitle ? (_jsx("div", { className: "text-[11px] text-muted-foreground", children: subtitle })) : null] }), _jsx("td", { className: "p-2.5 text-muted-foreground", children: formatAvailability(unit, t) }), columns.map((column) => {
+                                            const cell = findCell(unit.id, column.id);
+                                            const canPrice = categoryAppliesToUnit(column, unit);
+                                            return (_jsx("td", { className: "p-2.5", children: cell ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: () => {
+                                                                setCellRuleId(defaultRule?.id);
+                                                                setEditingCell(cell);
+                                                                setPreselectedUnitId(undefined);
+                                                                setPreselectedCategoryId(undefined);
+                                                                setCellDialogOpen(true);
+                                                            }, className: "font-mono text-foreground hover:underline", children: formatProductMoney(cell.sellAmountCents, productCurrency) }), _jsx("button", { type: "button", "aria-label": t.deleteRoom, onClick: () => deleteCellMutation.mutate(cell.id), className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })) : canPrice ? (_jsxs("button", { type: "button", onClick: () => void openCellDialog(unit, column.id), className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(Plus, { className: "h-3 w-3" }), t.setPrice] })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }, column.id ?? "__base__"));
+                                        }), _jsx("td", { className: "p-2.5", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t.editRoom, onClick: () => {
+                                                            setEditingUnit(unit);
+                                                            setDefaultUnitType(unit.unitType);
+                                                            setUnitDialogOpen(true);
+                                                        }, children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t.deleteRoom, onClick: () => {
+                                                            if (confirm(formatMessage(t.deleteRoomConfirm, { name: unit.name }))) {
+                                                                deleteUnitMutation.mutate(unit.id);
+                                                            }
+                                                        }, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, unit.id));
+                            }) })] }) })), _jsx(UnitDialog, { open: unitDialogOpen, onOpenChange: setUnitDialogOpen, optionId: optionId, unit: editingUnit, defaultUnitType: editingUnit ? undefined : defaultUnitType, lockUnitType: true, nextSortOrder: nextUnitSortOrder, onSuccess: () => {
+                    setUnitDialogOpen(false);
+                    setEditingUnit(undefined);
+                    void refetchUnits();
+                } }), _jsx(TravelerCategoryDialog, { open: categoryDialogOpen, onOpenChange: setCategoryDialogOpen, productId: productId, units: units, nextSortOrder: categories.length > 0 ? Math.max(...categories.map((c) => c.sortOrder)) + 1 : 0, onSuccess: () => {
+                    setCategoryDialogOpen(false);
+                    void refetchCategories();
+                } }), _jsx(UnitPriceRuleDialog, { open: cellDialogOpen, onOpenChange: setCellDialogOpen, optionPriceRuleId: cellRuleId ?? defaultRule?.id ?? "", optionId: optionId, units: units, productCurrency: productCurrency, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: editingCell, onSuccess: () => {
+                    setCellDialogOpen(false);
+                    setEditingCell(undefined);
+                    setPreselectedUnitId(undefined);
+                    setPreselectedCategoryId(undefined);
+                    void refetchCells();
+                } })] }));
+}

package/dist/components/product-detail/product-options-pricing.d.ts

@@ -1,6 +1,34 @@
-export declare function PricingPanel({ productId, optionId, productCurrency, }: {
+import type * as React from "react";
+import { useProductDetailMessages } from "./host.js";
+import { type OptionPricingLayout } from "./product-options-shared.js";
+import type { OptionUnitData } from "./product-unit-dialog.js";
+export declare function getUnitTypeLabel(type: OptionUnitData["unitType"], messages: ReturnType<typeof useProductDetailMessages>["products"]["operations"]["units"]): string;
+export declare function getCategoryCondition(metadata: Record<string, unknown> | null | undefined): string | null;
+export declare function categoryAppliesToUnit(category: {
+    id: string | null;
+    metadata?: Record<string, unknown> | null;
+}, unit: OptionUnitData): boolean;
+/**
+ * Per-option pricing surface. The everyday view is the merged rooms/seats
+ * grid; the full rate-plan machinery (multiple plans, catalogs, cost prices,
+ * cancellation) plus any injected per-departure inventory live behind an
+ * Advanced disclosure so low-tech agents never have to see them.
+ */
+export declare function PricingPanel({ productId, optionId, optionName, productCurrency, layout, extras, }: {
     productId: string;
     optionId: string;
+    optionName: string;
     productCurrency: string;
+    layout: OptionPricingLayout;
+    extras?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, onSuccess, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    units: OptionUnitData[];
+    nextSortOrder: number;
+    onSuccess: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function formatProductMoney(amountCents: number | null | undefined, currency: string): string;
 //# sourceMappingURL=product-options-pricing.d.ts.map

package/dist/components/product-detail/product-options-pricing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-options-pricing.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-options-pricing.tsx"],"names":[],"mappings":"AA+HA,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;CACxB,2CA6EA"}
+{"version":3,"file":"product-options-pricing.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-options-pricing.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAMpD,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AA0B9D,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,EAChC,QAAQ,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,UAkBzF;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,iBAGxF;AAED,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE;IAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CAAE,EAC1E,IAAI,EAAE,cAAc,WAMrB;AAeD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,eAAe,EACf,MAAM,EACN,MAAM,GACP,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,mBAAmB,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,2CA+CA;AAwcD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,SAAS,GACV,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,2CAgNA;AAgOD,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,UAG1F"}

package/dist/components/product-detail/product-options-pricing.js

@@ -6,10 +6,11 @@ import { useExtraPriceRuleMutation, useExtraPriceRules, useOptionPriceRuleMutati
 import { useVoyantProductsContext } from "@voyantjs/products-react";
 import { Badge, Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
 import { Checkbox } from "@voyantjs/ui/components/checkbox";
-import { MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, ChevronRight, MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useProductDetailMessages } from "./host.js";
 import { OptionPriceRuleDialog, } from "./product-option-price-rule-dialog.js";
+import { OptionPricingGrid } from "./product-option-pricing-grid.js";
 import { getOptionPriceRulesQueryOptions, getOptionUnitPriceRulesQueryOptions, getOptionUnitsQueryOptions, getPricingCategoriesQueryOptions, } from "./product-options-shared.js";
 import { UnitPriceRuleDialog, } from "./product-unit-price-rule-dialog.js";
 function getRulePricingModeLabel(value, messages) {
@@ -28,7 +29,7 @@ function getRulePricingModeLabel(value, messages) {
             return value;
     }
 }
-function getUnitTypeLabel(type, messages) {
+export function getUnitTypeLabel(type, messages) {
     switch (type) {
         case "person":
             return messages.typePerson;
@@ -46,11 +47,11 @@ function getUnitTypeLabel(type, messages) {
             return type;
     }
 }
-function getCategoryCondition(metadata) {
+export function getCategoryCondition(metadata) {
     const condition = metadata?.condition;
     return typeof condition === "string" && condition.trim().length > 0 ? condition : null;
 }
-function categoryAppliesToUnit(category, unit) {
+export function categoryAppliesToUnit(category, unit) {
     if (!category.id)
         return true;
     const allowedUnitIds = category.metadata?.allowedUnitIds;
@@ -61,7 +62,19 @@ function categoryAppliesToUnit(category, unit) {
 function ActionMenu({ children }) {
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-muted-foreground", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: children })] }));
 }
-export function PricingPanel({ productId, optionId, productCurrency, }) {
+/**
+ * Per-option pricing surface. The everyday view is the merged rooms/seats
+ * grid; the full rate-plan machinery (multiple plans, catalogs, cost prices,
+ * cancellation) plus any injected per-departure inventory live behind an
+ * Advanced disclosure so low-tech agents never have to see them.
+ */
+export function PricingPanel({ productId, optionId, optionName, productCurrency, layout, extras, }) {
+    const messages = useProductDetailMessages();
+    const gridMessages = messages.products.operations.pricingGrid;
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(OptionPricingGrid, { productId: productId, optionId: optionId, optionName: optionName, productCurrency: productCurrency, layout: layout }), _jsxs("div", { className: "rounded-md border bg-background/60", children: [_jsxs("button", { type: "button", onClick: () => setAdvancedOpen((open) => !open), className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", children: [advancedOpen ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })), _jsx("span", { children: gridMessages.advancedToggle }), !advancedOpen ? (_jsxs("span", { className: "font-normal normal-case", children: ["\u2014 ", gridMessages.advancedHint] })) : null] }), advancedOpen ? (_jsx("div", { className: "flex flex-col gap-4 border-t p-3", children: _jsx(AdvancedRatePlans, { productId: productId, optionId: optionId, productCurrency: productCurrency }) })) : null] }), extras] }));
+}
+function AdvancedRatePlans({ productId, optionId, productCurrency, }) {
     const messages = useProductDetailMessages();
     const client = useVoyantProductsContext();
     const priceRuleMessages = messages.products.operations.priceRules;
@@ -74,10 +87,19 @@ export function PricingPanel({ productId, optionId, productCurrency, }) {
         onSuccess: () => void refetch(),
     });
     const rules = data?.data ?? [];
-    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: priceRuleMessages.sectionTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: priceRuleMessages.sectionDescription })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
-                            setEditingRule(undefined);
-                            setRuleDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), priceRuleMessages.addAction] })] }), rules.length === 0 ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: priceRuleMessages.empty })) : (_jsx("div", { className: "flex flex-col gap-3", children: rules.map((rule) => (_jsx(PriceRuleCard, { rule: rule, productId: productId, optionId: optionId, productCurrency: productCurrency, onEdit: () => {
+    // The default rate plan IS the everyday grid above — don't re-render its
+    // identical matrix here. Advanced only manages the *extra* plans (net,
+    // contract, promo) plus the default plan's hidden settings (cost,
+    // cancellation, catalog) via "Edit default pricing".
+    const defaultRule = rules.find((rule) => rule.isDefault) ?? rules[0];
+    const additionalRules = rules.filter((rule) => rule.id !== defaultRule?.id);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: priceRuleMessages.additionalSectionTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: priceRuleMessages.additionalSectionDescription })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [defaultRule ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    setEditingRule(defaultRule);
+                                    setRuleDialogOpen(true);
+                                }, children: priceRuleMessages.editDefaultAction })) : null, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    setEditingRule(undefined);
+                                    setRuleDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), priceRuleMessages.addAction] })] })] }), additionalRules.length === 0 ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: priceRuleMessages.additionalEmpty })) : (_jsx("div", { className: "flex flex-col gap-3", children: additionalRules.map((rule) => (_jsx(PriceRuleCard, { rule: rule, productId: productId, optionId: optionId, productCurrency: productCurrency, onEdit: () => {
                         setEditingRule(rule);
                         setRuleDialogOpen(true);
                     }, onDelete: () => {
@@ -176,7 +198,7 @@ function UnitPriceMatrix({ productId, optionPriceRuleId, optionId, pricingMode,
                                     })] }, unit.id))) })] }) }), _jsx(TravelerCategoryDialog, { open: categoryDialogOpen, onOpenChange: setCategoryDialogOpen, productId: productId, units: units, nextSortOrder: categories.length > 0 ? Math.max(...categories.map((c) => c.sortOrder)) + 1 : 0, onSuccess: () => {
                     setCategoryDialogOpen(false);
                     void refetchCategories();
-                } }), _jsx(UnitPriceRuleDialog, { open: dialogOpen, onOpenChange: setDialogOpen, optionPriceRuleId: optionPriceRuleId, optionId: optionId, units: units, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: editingCell, onSuccess: () => {
+                } }), _jsx(UnitPriceRuleDialog, { open: dialogOpen, onOpenChange: setDialogOpen, optionPriceRuleId: optionPriceRuleId, optionId: optionId, units: units, productCurrency: productCurrency, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: editingCell, onSuccess: () => {
                     setDialogOpen(false);
                     setEditingCell(undefined);
                     setPreselectedUnitId(undefined);
@@ -202,7 +224,7 @@ function parseOptionalInteger(value) {
     const parsed = Number(trimmed);
     return Number.isFinite(parsed) ? Math.trunc(parsed) : null;
 }
-function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, onSuccess, }) {
+export function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, onSuccess, }) {
     const messages = useProductDetailMessages();
     const priceRuleMessages = messages.products.operations.priceRules;
     const pricingCategoryMessages = messages.pricing.categories;
@@ -356,7 +378,7 @@ function defaultExtraPriceRuleMode(extra) {
         return "on_request";
     return "per_booking";
 }
-function formatProductMoney(amountCents, currency) {
+export function formatProductMoney(amountCents, currency) {
     if (amountCents == null)
         return "-";
     return `${(amountCents / 100).toFixed(2)} ${currency}`;

package/dist/components/product-detail/product-options-shared.d.ts

@@ -6,6 +6,20 @@ import { type VoyantProductsContextValue } from "@voyantjs/products-react";
  */
 export type OptionsClient = VoyantProductsContextValue;
 export declare const optionStatusVariant: Record<string, "default" | "secondary" | "outline" | "destructive">;
+/**
+ * Which pricing layout an option shows. "rooms" = a room×traveler-type grid
+ * (accommodation / multi-day). "seats" = a flat traveler-type price list
+ * (single-day excursions, transfers). Derived from the product's bookingMode
+ * so the agent never picks a pricing model directly.
+ */
+export type OptionPricingLayout = "rooms" | "seats";
+/**
+ * Derive the pricing layout from the product's booking mode. Multi-day /
+ * overnight modes imply rooms; single-day activity modes imply per-person
+ * seats. `dayCount` is a fallback for the ambiguous `other` mode (>1 day →
+ * rooms), matching the operator rule "more than one day means rooms".
+ */
+export declare function deriveOptionPricingLayout(bookingMode: string | null | undefined, dayCount?: number): OptionPricingLayout;
 export declare function getProductOptionsQueryOptions(client: OptionsClient, productId: string): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<{
     data: {
         id: string;

package/dist/components/product-detail/product-options-shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-options-shared.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-options-shared.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,0BAA0B,CAAA;AAEjC;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,0BAA0B,CAAA;AAEtD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,MAAM,EACN,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,aAAa,CAKpD,CAAA;AAED,wBAAgB,6BAA6B,CAAC,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAErF;AAED,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEjF;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEtF;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAErE;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,aAAa,EACrB,iBAAiB,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM1B;AAED,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEjE;AAED,wBAAgB,sCAAsC,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKhG"}
+{"version":3,"file":"product-options-shared.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-options-shared.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,0BAA0B,CAAA;AAEjC;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,0BAA0B,CAAA;AAEtD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,MAAM,EACN,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,aAAa,CAKpD,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,CAAA;AAEnD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,QAAQ,CAAC,EAAE,MAAM,GAChB,mBAAmB,CAarB;AAED,wBAAgB,6BAA6B,CAAC,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAErF;AAED,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEjF;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEtF;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAErE;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,aAAa,EACrB,iBAAiB,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAM1B;AAED,wBAAgB,4BAA4B,CAAC,MAAM,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEjE;AAED,wBAAgB,sCAAsC,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKhG"}

package/dist/components/product-detail/product-options-shared.js

@@ -5,6 +5,26 @@ export const optionStatusVariant = {
     active: "default",
     archived: "secondary",
 };
+/**
+ * Derive the pricing layout from the product's booking mode. Multi-day /
+ * overnight modes imply rooms; single-day activity modes imply per-person
+ * seats. `dayCount` is a fallback for the ambiguous `other` mode (>1 day →
+ * rooms), matching the operator rule "more than one day means rooms".
+ */
+export function deriveOptionPricingLayout(bookingMode, dayCount) {
+    switch (bookingMode) {
+        case "stay":
+        case "itinerary":
+            return "rooms";
+        case "date":
+        case "date_time":
+        case "open":
+        case "transfer":
+            return "seats";
+        default:
+            return dayCount != null && dayCount > 1 ? "rooms" : "seats";
+    }
+}
 export function getProductOptionsQueryOptions(client, productId) {
     return getSharedProductOptionsQueryOptions(client, { productId, limit: 100 });
 }

package/dist/components/product-detail/product-unit-dialog.d.ts

@@ -5,8 +5,10 @@ type UnitDialogProps = {
     onOpenChange: (open: boolean) => void;
     optionId: string;
     unit?: OptionUnitData;
+    defaultUnitType?: OptionUnitData["unitType"];
+    lockUnitType?: boolean;
     nextSortOrder?: number;
     onSuccess: () => void;
 };
-export declare function UnitDialog({ open, onOpenChange, optionId, unit, nextSortOrder, onSuccess, }: UnitDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnitDialog({ open, onOpenChange, optionId, unit, defaultUnitType, lockUnitType, nextSortOrder, onSuccess, }: UnitDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=product-unit-dialog.d.ts.map

package/dist/components/product-detail/product-unit-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-unit-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAEtE,YAAY,EAAE,cAAc,EAAE,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,SAAS,GACV,EAAE,eAAe,2CAuBjB"}
+{"version":3,"file":"product-unit-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAEtE,YAAY,EAAE,cAAc,EAAE,CAAA;AAE9B,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,eAAe,EACf,YAAY,EACZ,aAAa,EACb,SAAS,GACV,EAAE,eAAe,2CAyBjB"}

package/dist/components/product-detail/product-unit-dialog.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle } from "@voyantjs/ui/components";
 import { useProductDetailMessages } from "./host.js";
 import { UnitForm } from "./product-unit-form.js";
-export function UnitDialog({ open, onOpenChange, optionId, unit, nextSortOrder, onSuccess, }) {
+export function UnitDialog({ open, onOpenChange, optionId, unit, defaultUnitType, lockUnitType, nextSortOrder, onSuccess, }) {
     const messages = useProductDetailMessages();
     const unitMessages = messages.products.operations.units;
     const isEditing = !!unit;
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: isEditing ? unitMessages.editTitle : unitMessages.newTitle }) }), _jsx(SheetBody, { children: _jsx(UnitForm, { optionId: optionId, unit: unit, nextSortOrder: nextSortOrder, onSuccess: onSuccess, onCancel: () => onOpenChange(false) }) })] }) }));
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: isEditing ? unitMessages.editTitle : unitMessages.newTitle }) }), _jsx(SheetBody, { children: _jsx(UnitForm, { optionId: optionId, unit: unit, defaultUnitType: defaultUnitType, lockUnitType: lockUnitType, nextSortOrder: nextSortOrder, onSuccess: onSuccess, onCancel: () => onOpenChange(false) }) })] }) }));
 }

package/dist/components/product-detail/product-unit-form.d.ts

@@ -18,9 +18,17 @@ export type OptionUnitData = {
 export interface UnitFormProps {
     optionId: string;
     unit?: OptionUnitData;
+    /** Pre-selected unit type for the "add" path (e.g. Room vs Traveler type). */
+    defaultUnitType?: OptionUnitData["unitType"];
+    /**
+     * Hide the unit-type picker entirely. Used when the form is opened from a
+     * type-specific context (e.g. "Add room"), so the agent can't turn a room
+     * into a vehicle and create a nonsensical mix in the pricing grid.
+     */
+    lockUnitType?: boolean;
     nextSortOrder?: number;
     onSuccess: () => void;
     onCancel?: () => void;
 }
-export declare function UnitForm({ optionId, unit, nextSortOrder, onSuccess, onCancel }: UnitFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnitForm({ optionId, unit, defaultUnitType, lockUnitType, nextSortOrder, onSuccess, onCancel, }: UnitFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=product-unit-form.d.ts.map

package/dist/components/product-detail/product-unit-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-unit-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-form.tsx"],"names":[],"mappings":"AA2CA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAqCD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAuL7F"}
+{"version":3,"file":"product-unit-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-form.tsx"],"names":[],"mappings":"AA2EA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;IAC5C;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAyCD,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,eAAe,EACf,YAAY,EACZ,aAAa,EACb,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,2CA2Lf"}

package/dist/components/product-detail/product-unit-form.js

@@ -7,6 +7,34 @@ import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { useProductDetailMessages } from "./host.js";
 import { zodResolver } from "./zod-resolver.js";
+// "Min/Max quantity" is meaningless to an agent — phrase it in terms of the
+// thing being counted (rooms / vehicles / travelers) for the selected type.
+function quantityLabels(unitType, m) {
+    switch (unitType) {
+        case "room":
+            return { min: m.quantityRoomMin, max: m.quantityRoomMax };
+        case "vehicle":
+            return { min: m.quantityVehicleMin, max: m.quantityVehicleMax };
+        case "person":
+            return { min: m.quantityPersonMin, max: m.quantityPersonMax };
+        default:
+            return { min: m.minQuantityLabel, max: m.maxQuantityLabel };
+    }
+}
+// Occupancy = how many people fit in one unit (guests per room, seats per
+// vehicle, group size). Label it for the selected type.
+function occupancyLabels(unitType, m) {
+    switch (unitType) {
+        case "room":
+            return { min: m.occupancyRoomMin, max: m.occupancyRoomMax };
+        case "vehicle":
+            return { min: m.occupancyVehicleMin, max: m.occupancyVehicleMax };
+        case "group":
+            return { min: m.occupancyGroupMin, max: m.occupancyGroupMax };
+        default:
+            return { min: m.occupancyMinLabel, max: m.occupancyMaxLabel };
+    }
+}
 const buildUnitFormSchema = (messages) => z.object({
     name: z.string().min(1, messages.validationNameRequired).max(255),
     code: z.string().max(100).optional().nullable(),
@@ -22,7 +50,7 @@ const buildUnitFormSchema = (messages) => z.object({
     isHidden: z.boolean(),
     sortOrder: z.coerce.number().int(),
 });
-function initialValues(unit, nextSortOrder) {
+function initialValues(unit, nextSortOrder, defaultUnitType) {
     if (unit) {
         return {
             name: unit.name,
@@ -44,7 +72,7 @@ function initialValues(unit, nextSortOrder) {
         name: "",
         code: "",
         description: "",
-        unitType: "person",
+        unitType: defaultUnitType ?? "person",
         minQuantity: "",
         maxQuantity: "",
         minAge: "",
@@ -56,7 +84,7 @@ function initialValues(unit, nextSortOrder) {
         sortOrder: nextSortOrder ?? 0,
     };
 }
-export function UnitForm({ optionId, unit, nextSortOrder, onSuccess, onCancel }) {
+export function UnitForm({ optionId, unit, defaultUnitType, lockUnitType, nextSortOrder, onSuccess, onCancel, }) {
     const messages = useProductDetailMessages();
     const productMessages = messages.products.core;
     const unitMessages = messages.products.operations.units;
@@ -73,11 +101,11 @@ export function UnitForm({ optionId, unit, nextSortOrder, onSuccess, onCancel })
     ];
     const form = useForm({
         resolver: zodResolver(unitFormSchema),
-        defaultValues: initialValues(unit, nextSortOrder),
+        defaultValues: initialValues(unit, nextSortOrder, defaultUnitType),
     });
     useEffect(() => {
-        form.reset(initialValues(unit, nextSortOrder));
-    }, [unit, nextSortOrder, form]);
+        form.reset(initialValues(unit, nextSortOrder, defaultUnitType));
+    }, [unit, nextSortOrder, defaultUnitType, form]);
     const onSubmit = async (values) => {
         const canHaveAge = values.unitType === "person";
         const canHaveOccupancy = values.unitType === "group" || values.unitType === "room" || values.unitType === "vehicle";
@@ -105,5 +133,7 @@ export function UnitForm({ optionId, unit, nextSortOrder, onSuccess, onCancel })
         onSuccess();
     };
     const unitType = form.watch("unitType");
-    return (_jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col gap-4 overflow-hidden", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.nameLabel }), _jsx(Input, { ...form.register("name"), placeholder: unitMessages.namePlaceholder }), form.formState.errors.name && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.codeLabel }), _jsx(Input, { ...form.register("code"), placeholder: unitMessages.codePlaceholder })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.typeLabel }), _jsxs(Select, { value: unitType, onValueChange: (v) => form.setValue("unitType", v), items: unitTypes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: unitTypes.map((t) => (_jsx(SelectItem, { value: t.value, children: t.label }, t.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.minQuantityLabel }), _jsx(Input, { ...form.register("minQuantity"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.maxQuantityLabel }), _jsx(Input, { ...form.register("maxQuantity"), type: "number", min: "0" })] })] }), unitType === "person" && (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.minAgeLabel }), _jsx(Input, { ...form.register("minAge"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.maxAgeLabel }), _jsx(Input, { ...form.register("maxAge"), type: "number", min: "0" })] })] })), (unitType === "room" || unitType === "vehicle" || unitType === "group") && (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.occupancyMinLabel }), _jsx(Input, { ...form.register("occupancyMin"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.occupancyMaxLabel }), _jsx(Input, { ...form.register("occupancyMax"), type: "number", min: "0" })] })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.descriptionLabel }), _jsx(Textarea, { ...form.register("description") })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("isRequired"), onCheckedChange: (v) => form.setValue("isRequired", v) }), _jsx(Label, { children: unitMessages.requiredLabel })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("isHidden"), onCheckedChange: (v) => form.setValue("isHidden", v) }), _jsx(Label, { children: unitMessages.hiddenLabel })] })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting || create.isPending || update.isPending, children: [(form.formState.isSubmitting || create.isPending || update.isPending) && (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })), isEditing ? productMessages.saveChanges : unitMessages.create] })] })] }));
+    const qtyLabels = quantityLabels(unitType, unitMessages);
+    const occLabels = occupancyLabels(unitType, unitMessages);
+    return (_jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col gap-4 overflow-hidden", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.nameLabel }), _jsx(Input, { ...form.register("name"), placeholder: unitMessages.namePlaceholder }), form.formState.errors.name && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.codeLabel }), _jsx(Input, { ...form.register("code"), placeholder: unitMessages.codePlaceholder })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [lockUnitType ? null : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.typeLabel }), _jsxs(Select, { value: unitType, onValueChange: (v) => form.setValue("unitType", v), items: unitTypes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: unitTypes.map((t) => (_jsx(SelectItem, { value: t.value, children: t.label }, t.value))) })] })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: qtyLabels.min }), _jsx(Input, { ...form.register("minQuantity"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: qtyLabels.max }), _jsx(Input, { ...form.register("maxQuantity"), type: "number", min: "0" })] })] }), unitType === "person" && (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.minAgeLabel }), _jsx(Input, { ...form.register("minAge"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.maxAgeLabel }), _jsx(Input, { ...form.register("maxAge"), type: "number", min: "0" })] })] })), (unitType === "room" || unitType === "vehicle" || unitType === "group") && (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: occLabels.min }), _jsx(Input, { ...form.register("occupancyMin"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: occLabels.max }), _jsx(Input, { ...form.register("occupancyMax"), type: "number", min: "0" })] })] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitMessages.descriptionLabel }), _jsx(Textarea, { ...form.register("description") })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("isRequired"), onCheckedChange: (v) => form.setValue("isRequired", v) }), _jsx(Label, { children: unitMessages.requiredLabel })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("isHidden"), onCheckedChange: (v) => form.setValue("isHidden", v) }), _jsx(Label, { children: unitMessages.hiddenLabel })] })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting || create.isPending || update.isPending, children: [(form.formState.isSubmitting || create.isPending || update.isPending) && (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })), isEditing ? productMessages.saveChanges : unitMessages.create] })] })] }));
 }

package/dist/components/product-detail/product-unit-price-rule-dialog.d.ts

@@ -7,10 +7,11 @@ type UnitPriceRuleDialogProps = {
     optionPriceRuleId: string;
     optionId: string;
     units: OptionUnitData[];
+    productCurrency?: string;
     preselectedUnitId?: string;
     preselectedCategoryId?: string | null;
     cell?: OptionUnitPriceRuleData;
     onSuccess: () => void;
 };
-export declare function UnitPriceRuleDialog({ open, onOpenChange, optionPriceRuleId, optionId, units, preselectedUnitId, preselectedCategoryId, cell, onSuccess, }: UnitPriceRuleDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnitPriceRuleDialog({ open, onOpenChange, optionPriceRuleId, optionId, units, productCurrency, preselectedUnitId, preselectedCategoryId, cell, onSuccess, }: UnitPriceRuleDialogProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=product-unit-price-rule-dialog.d.ts.map

package/dist/components/product-detail/product-unit-price-rule-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-unit-price-rule-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-price-rule-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,uBAAuB,EAAqB,MAAM,mCAAmC,CAAA;AAEnG,YAAY,EAAE,uBAAuB,EAAE,CAAA;AAEvC,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,qBAAqB,EACrB,IAAI,EACJ,SAAS,GACV,EAAE,wBAAwB,2CA4B1B"}
+{"version":3,"file":"product-unit-price-rule-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-price-rule-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,uBAAuB,EAAqB,MAAM,mCAAmC,CAAA;AAEnG,YAAY,EAAE,uBAAuB,EAAE,CAAA;AAEvC,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,KAAK,EACL,eAAe,EACf,iBAAiB,EACjB,qBAAqB,EACrB,IAAI,EACJ,SAAS,GACV,EAAE,wBAAwB,2CA6B1B"}

package/dist/components/product-detail/product-unit-price-rule-dialog.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle } from "@voyantjs/ui/components";
 import { useProductDetailMessages } from "./host.js";
 import { UnitPriceRuleForm } from "./product-unit-price-rule-form.js";
-export function UnitPriceRuleDialog({ open, onOpenChange, optionPriceRuleId, optionId, units, preselectedUnitId, preselectedCategoryId, cell, onSuccess, }) {
+export function UnitPriceRuleDialog({ open, onOpenChange, optionPriceRuleId, optionId, units, productCurrency, preselectedUnitId, preselectedCategoryId, cell, onSuccess, }) {
     const messages = useProductDetailMessages();
     const unitPriceMessages = messages.products.operations.unitPrices;
     const isEditing = !!cell;
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: isEditing ? unitPriceMessages.editTitle : unitPriceMessages.newTitle }) }), _jsx(SheetBody, { children: _jsx(UnitPriceRuleForm, { optionPriceRuleId: optionPriceRuleId, optionId: optionId, units: units, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: cell, onSuccess: onSuccess, onCancel: () => onOpenChange(false) }) })] }) }));
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: isEditing ? unitPriceMessages.editTitle : unitPriceMessages.newTitle }) }), _jsx(SheetBody, { children: _jsx(UnitPriceRuleForm, { optionPriceRuleId: optionPriceRuleId, optionId: optionId, units: units, productCurrency: productCurrency, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: cell, onSuccess: onSuccess, onCancel: () => onOpenChange(false) }) })] }) }));
 }

package/dist/components/product-detail/product-unit-price-rule-form.d.ts

@@ -18,11 +18,12 @@ export interface UnitPriceRuleFormProps {
     optionPriceRuleId: string;
     optionId: string;
     units: OptionUnitData[];
+    productCurrency?: string;
     preselectedUnitId?: string;
     preselectedCategoryId?: string | null;
     cell?: OptionUnitPriceRuleData;
     onSuccess: () => void;
     onCancel?: () => void;
 }
-export declare function UnitPriceRuleForm({ optionPriceRuleId, optionId, units, preselectedUnitId, preselectedCategoryId, cell, onSuccess, onCancel, }: UnitPriceRuleFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function UnitPriceRuleForm({ optionPriceRuleId, optionId, units, productCurrency, preselectedUnitId, preselectedCategoryId, cell, onSuccess, onCancel, }: UnitPriceRuleFormProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=product-unit-price-rule-form.d.ts.map

package/dist/components/product-detail/product-unit-price-rule-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-unit-price-rule-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-price-rule-form.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAsD5D,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,CAAA;IAC3F,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAmCD,wBAAgB,iBAAiB,CAAC,EAChC,iBAAiB,EACjB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,qBAAqB,EACrB,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,EAAE,sBAAsB,2CAyKxB"}
+{"version":3,"file":"product-unit-price-rule-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-unit-price-rule-form.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AA2E5D,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,CAAA;IAC3F,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,uBAAuB,CAAA;IAC9B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAmCD,wBAAgB,iBAAiB,CAAC,EAChC,iBAAiB,EACjB,QAAQ,EACR,KAAK,EACL,eAAe,EACf,iBAAiB,EACjB,qBAAqB,EACrB,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,EAAE,sBAAsB,2CAoLxB"}

package/dist/components/product-detail/product-unit-price-rule-form.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOptionUnitPriceRuleMutation } from "@voyantjs/pricing-react";
 import { PricingCategoryCombobox } from "@voyantjs/pricing-ui/components/pricing-category-combobox";
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
+import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import { Loader2 } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
-import { useProductDetailMessages } from "./host.js";
+import { useProductDetailMessages, useProductLocale } from "./host.js";
 import { zodResolver } from "./zod-resolver.js";
 function getUnitTypeLabel(type, messages) {
     switch (type) {
@@ -26,6 +27,21 @@ function getUnitTypeLabel(type, messages) {
             return type;
     }
 }
+// "Min/Max quantity" means different things per pricing mode — travelers for
+// per-person, units for per-unit, the whole booking for per-booking. Label it
+// for what's actually being counted.
+function cellQuantityLabels(pricingMode, m) {
+    switch (pricingMode) {
+        case "per_person":
+            return { min: m.minQuantityPerson, max: m.maxQuantityPerson };
+        case "per_unit":
+            return { min: m.minQuantityUnit, max: m.maxQuantityUnit };
+        case "per_booking":
+            return { min: m.minQuantityBooking, max: m.maxQuantityBooking };
+        default:
+            return { min: m.minQuantityLabel, max: m.maxQuantityLabel };
+    }
+}
 const buildCellFormSchema = (messages) => z.object({
     unitId: z.string().min(1, messages.validationUnitRequired),
     pricingCategoryId: z.string().optional().nullable(),
@@ -37,8 +53,10 @@ const buildCellFormSchema = (messages) => z.object({
         "free",
         "on_request",
     ]),
-    sell: z.coerce.number().min(0),
-    cost: z.coerce.number().min(0),
+    // Stored in minor units (cents) so CurrencyInput can render the currency
+    // prefix and parse locale-formatted amounts directly.
+    sell: z.number().int().min(0),
+    cost: z.number().int().min(0),
     minQuantity: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
     maxQuantity: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
     sortOrder: z.coerce.number().int(),
@@ -51,8 +69,8 @@ function initialValues(cell, preselectedUnitId, preselectedCategoryId) {
             unitId: cell.unitId,
             pricingCategoryId: cell.pricingCategoryId ?? "",
             pricingMode: cell.pricingMode,
-            sell: (cell.sellAmountCents ?? 0) / 100,
-            cost: (cell.costAmountCents ?? 0) / 100,
+            sell: cell.sellAmountCents ?? 0,
+            cost: cell.costAmountCents ?? 0,
             minQuantity: cell.minQuantity ?? "",
             maxQuantity: cell.maxQuantity ?? "",
             sortOrder: cell.sortOrder,
@@ -73,11 +91,12 @@ function initialValues(cell, preselectedUnitId, preselectedCategoryId) {
         notes: "",
     };
 }
-export function UnitPriceRuleForm({ optionPriceRuleId, optionId, units, preselectedUnitId, preselectedCategoryId, cell, onSuccess, onCancel, }) {
+export function UnitPriceRuleForm({ optionPriceRuleId, optionId, units, productCurrency, preselectedUnitId, preselectedCategoryId, cell, onSuccess, onCancel, }) {
     const messages = useProductDetailMessages();
     const productMessages = messages.products.core;
     const unitPriceMessages = messages.products.operations.unitPrices;
     const unitMessages = messages.products.operations.units;
+    const locale = useProductLocale();
     const isEditing = !!cell;
     const { create, update } = useOptionUnitPriceRuleMutation();
     const cellFormSchema = buildCellFormSchema(unitPriceMessages);
@@ -103,8 +122,8 @@ export function UnitPriceRuleForm({ optionPriceRuleId, optionId, units, preselec
             unitId: values.unitId,
             pricingCategoryId: values.pricingCategoryId || null,
             pricingMode: values.pricingMode,
-            sellAmountCents: Math.round(values.sell * 100),
-            costAmountCents: Math.round(values.cost * 100),
+            sellAmountCents: Math.round(values.sell),
+            costAmountCents: Math.round(values.cost),
             minQuantity: typeof values.minQuantity === "number" ? values.minQuantity : null,
             maxQuantity: typeof values.maxQuantity === "number" ? values.maxQuantity : null,
             sortOrder: values.sortOrder,
@@ -122,5 +141,5 @@ export function UnitPriceRuleForm({ optionPriceRuleId, optionId, units, preselec
     return (_jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col gap-4 overflow-hidden", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.unitLabel }), _jsxs(Select, { value: form.watch("unitId") || undefined, onValueChange: (v) => form.setValue("unitId", v ?? "", { shouldValidate: true }), items: units.map((u) => ({
                                             value: u.id,
                                             label: `${u.name} (${getUnitTypeLabel(u.unitType, unitMessages)})`,
-                                        })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: unitPriceMessages.unitPlaceholder }) }), _jsx(SelectContent, { children: units.map((u) => (_jsxs(SelectItem, { value: u.id, children: [u.name, " (", getUnitTypeLabel(u.unitType, unitMessages), ")"] }, u.id))) })] }), form.formState.errors.unitId && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.unitId.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.categoryLabel }), _jsx(PricingCategoryCombobox, { value: form.watch("pricingCategoryId"), onChange: (value) => form.setValue("pricingCategoryId", value ?? "", { shouldDirty: true }), placeholder: unitPriceMessages.categoryPlaceholder })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.pricingModeLabel }), _jsxs(Select, { value: form.watch("pricingMode"), onValueChange: (v) => form.setValue("pricingMode", v), items: pricingModes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((m) => (_jsx(SelectItem, { value: m.value, children: m.label }, m.value))) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.sellLabel }), _jsx(Input, { ...form.register("sell"), type: "number", step: "0.01", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.costLabel }), _jsx(Input, { ...form.register("cost"), type: "number", step: "0.01", min: "0" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.minQuantityLabel }), _jsx(Input, { ...form.register("minQuantity"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.maxQuantityLabel }), _jsx(Input, { ...form.register("maxQuantity"), type: "number", min: "0" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (v) => form.setValue("active", v) }), _jsx(Label, { children: unitPriceMessages.activeLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes") })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? productMessages.saveChanges : unitPriceMessages.create] })] })] }));
+                                        })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: unitPriceMessages.unitPlaceholder }) }), _jsx(SelectContent, { children: units.map((u) => (_jsxs(SelectItem, { value: u.id, children: [u.name, " (", getUnitTypeLabel(u.unitType, unitMessages), ")"] }, u.id))) })] }), form.formState.errors.unitId && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.unitId.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.categoryLabel }), _jsx(PricingCategoryCombobox, { value: form.watch("pricingCategoryId"), onChange: (value) => form.setValue("pricingCategoryId", value ?? "", { shouldDirty: true }), placeholder: unitPriceMessages.categoryPlaceholder })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.pricingModeLabel }), _jsxs(Select, { value: form.watch("pricingMode"), onValueChange: (v) => form.setValue("pricingMode", v), items: pricingModes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((m) => (_jsx(SelectItem, { value: m.value, children: m.label }, m.value))) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.sellLabel }), _jsx(CurrencyInput, { value: form.watch("sell"), onChange: (value) => form.setValue("sell", value ?? 0, { shouldValidate: true }), currency: productCurrency, locale: locale })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.costLabel }), _jsx(CurrencyInput, { value: form.watch("cost"), onChange: (value) => form.setValue("cost", value ?? 0, { shouldValidate: true }), currency: productCurrency, locale: locale })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: cellQuantityLabels(form.watch("pricingMode"), unitPriceMessages).min }), _jsx(Input, { ...form.register("minQuantity"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: cellQuantityLabels(form.watch("pricingMode"), unitPriceMessages).max }), _jsx(Input, { ...form.register("maxQuantity"), type: "number", min: "0" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (v) => form.setValue("active", v) }), _jsx(Label, { children: unitPriceMessages.activeLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes") })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? productMessages.saveChanges : unitPriceMessages.create] })] })] }));
 }

package/dist/components/product-options-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-options-section.d.ts","sourceRoot":"","sources":["../../src/components/product-options-section.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EAOzB,MAAM,0BAA0B,CAAA;AA6BjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqC9B,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,CAAC,GACjD,OAAO,CAIT;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,EACpF,eAAe,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAAE,CAAC,GAClF,MAAM,EAAE,CASV;AA0CD,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAA;CACvE;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAc,EACd,KAAK,EACL,WAAW,EACX,mBAAmB,GACpB,EAAE,0BAA0B,2CAsJ5B"}
+{"version":3,"file":"product-options-section.d.ts","sourceRoot":"","sources":["../../src/components/product-options-section.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EAOzB,MAAM,0BAA0B,CAAA;AA6BjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqC9B,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,CAAC,GACjD,OAAO,CAIT;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,EACpF,eAAe,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAAE,CAAC,GAClF,MAAM,EAAE,CASV;AA0CD,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAA;CACvE;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAc,EACd,KAAK,EACL,WAAW,EACX,mBAAmB,GACpB,EAAE,0BAA0B,2CA+J5B"}

package/dist/components/product-options-section.js

@@ -111,34 +111,45 @@ export function ProductOptionsSection({ productId, pageSize = 100, title, descri
     const nextSortOrder = options.length > 0 ? Math.max(...options.map((option) => option.sortOrder)) + 1 : 0;
     const resolvedTitle = title ?? messages.productOptionsSection.titles.default;
     const resolvedDescription = description ?? messages.productOptionsSection.descriptions.default;
+    // A product with a single option needs no option chrome — show its pricing
+    // table directly. Only flatten when a host injects the details (the grid);
+    // bare mounts (apps/dev) keep the expandable units table.
+    const flattenedOption = renderOptionDetails && options.length === 1 ? options[0] : undefined;
+    const editOption = (option) => {
+        setEditingOption(option);
+        setDialogOpen(true);
+    };
+    const duplicateOptionFlow = (option) => {
+        duplicateOption.mutate({ sourceOptionId: option.id, productId }, {
+            onSuccess: async ({ option: duplicatedOption, unitIdMap }) => {
+                await duplicatePricing.mutateAsync({
+                    sourceOptionId: option.id,
+                    targetOptionId: duplicatedOption.id,
+                    productId,
+                    unitIdMap,
+                });
+            },
+        });
+    };
+    const deleteOption = (option) => {
+        if (confirm(messages.productOptionsSection.deleteConfirm.option.replace("{name}", option.name))) {
+            remove.mutate(option.id);
+        }
+    };
     return (_jsxs(Card, { "data-slot": "product-options-section", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(CardTitle, { children: resolvedTitle }), _jsx(CardDescription, { children: resolvedDescription })] }), _jsxs(Button, { onClick: () => {
                             setEditingOption(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productOptionsSection.actions.addOption] })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [showRoomArrangementWarning ? (_jsxs(Alert, { className: "border-amber-500/40 bg-amber-500/10", children: [_jsx(TriangleAlert, { className: "size-4 text-amber-600", "aria-hidden": "true" }), _jsx(AlertTitle, { children: messages.productOptionsSection.configurationWarnings.roomOptionsTitle }), _jsx(AlertDescription, { children: formatMessage(messages.productOptionsSection.configurationWarnings.roomOptionsDescription, { options: roomArrangementOptionNames.join(", ") }) })] })) : null, isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: messages.productOptionsSection.loadingError.options })) : options.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.productOptionsSection.empty.options })) : (options.map((option) => (_jsx(OptionRow, { option: option, expanded: expandedOptionId === option.id, onToggle: () => setExpandedOptionId((current) => (current === option.id ? null : option.id)), onEdit: () => {
-                            setEditingOption(option);
-                            setDialogOpen(true);
-                        }, onDuplicate: () => {
-                            duplicateOption.mutate({ sourceOptionId: option.id, productId }, {
-                                onSuccess: async ({ option: duplicatedOption, unitIdMap }) => {
-                                    await duplicatePricing.mutateAsync({
-                                        sourceOptionId: option.id,
-                                        targetOptionId: duplicatedOption.id,
-                                        productId,
-                                        unitIdMap,
-                                    });
-                                },
-                            });
-                        }, onDelete: () => {
-                            if (confirm(messages.productOptionsSection.deleteConfirm.option.replace("{name}", option.name))) {
-                                remove.mutate(option.id);
-                            }
-                        }, messages: messages, children: renderOptionDetails?.(option) }, option.id)))), _jsx(ProductOptionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, option: editingOption, sortOrder: nextSortOrder, onSuccess: () => {
+                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productOptionsSection.actions.addOption] })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [showRoomArrangementWarning ? (_jsxs(Alert, { className: "border-amber-500/40 bg-amber-500/10", children: [_jsx(TriangleAlert, { className: "size-4 text-amber-600", "aria-hidden": "true" }), _jsx(AlertTitle, { children: messages.productOptionsSection.configurationWarnings.roomOptionsTitle }), _jsx(AlertDescription, { children: formatMessage(messages.productOptionsSection.configurationWarnings.roomOptionsDescription, { options: roomArrangementOptionNames.join(", ") }) })] })) : null, isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: messages.productOptionsSection.loadingError.options })) : options.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.productOptionsSection.empty.options })) : flattenedOption ? (
+                    // A single option needs no chrome at all — show its pricing table
+                    // directly. Per-option actions (duplicate/edit/delete) only appear
+                    // once there are 2+ options to disambiguate.
+                    renderOptionDetails?.(flattenedOption)) : (options.map((option) => (_jsx(OptionRow, { option: option, expanded: expandedOptionId === option.id, onToggle: () => setExpandedOptionId((current) => (current === option.id ? null : option.id)), onEdit: () => editOption(option), onDuplicate: () => duplicateOptionFlow(option), onDelete: () => deleteOption(option), messages: messages, children: renderOptionDetails?.(option) }, option.id)))), _jsx(ProductOptionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, option: editingOption, sortOrder: nextSortOrder, onSuccess: () => {
                             setDialogOpen(false);
                             setEditingOption(undefined);
                         } })] })] }));
 }
 function OptionRow({ option, expanded, onToggle, onEdit, onDuplicate, onDelete, messages, children, }) {
-    return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("button", { type: "button", onClick: onToggle, className: "text-muted-foreground transition-colors hover:text-foreground", children: expanded ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) }), _jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: option.name }), option.code ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: option.code })) : null, _jsx(Badge, { variant: optionStatusVariant[option.status] ?? "outline", children: messages.common.optionStatusLabels[option.status] }), option.isDefault ? (_jsx(Badge, { variant: "secondary", children: messages.productOptionsSection.badges.defaultOption })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDuplicate, "aria-label": messages.productOptionsSection.actions.duplicate, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onEdit, "aria-label": messages.productOptionsSection.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDelete, "aria-label": messages.productOptionsSection.actions.delete, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] })] }), expanded ? (_jsxs("div", { className: "flex flex-col gap-4 border-t bg-muted/30 p-3", children: [_jsx(UnitsPanel, { optionId: option.id, messages: messages }), children] })) : null] }));
+    return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("button", { type: "button", onClick: onToggle, className: "text-muted-foreground transition-colors hover:text-foreground", children: expanded ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) }), _jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: option.name }), option.code ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: option.code })) : null, _jsx(Badge, { variant: optionStatusVariant[option.status] ?? "outline", children: messages.common.optionStatusLabels[option.status] }), option.isDefault ? (_jsx(Badge, { variant: "secondary", children: messages.productOptionsSection.badges.defaultOption })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDuplicate, "aria-label": messages.productOptionsSection.actions.duplicate, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onEdit, "aria-label": messages.productOptionsSection.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDelete, "aria-label": messages.productOptionsSection.actions.delete, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] })] }), expanded ? (_jsx("div", { className: "flex flex-col gap-4 border-t bg-muted/30 p-3", children: children ?? _jsx(UnitsPanel, { optionId: option.id, messages: messages }) })) : null] }));
 }
 function UnitsPanel({ optionId, messages, }) {
     const [dialogOpen, setDialogOpen] = React.useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/products-ui",
-  "version": "0.101.2",
+  "version": "0.102.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -50,26 +50,26 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
     "zod": "^4.3.6",
-    "@voyantjs/availability": "0.101.2",
-    "@voyantjs/availability-react": "0.101.2",
-    "@voyantjs/catalog-react": "0.101.2",
-    "@voyantjs/extras-react": "0.101.2",
-    "@voyantjs/finance": "0.101.2",
-    "@voyantjs/finance-ui": "0.101.2",
-    "@voyantjs/markets-react": "0.101.2",
-    "@voyantjs/pricing-react": "0.101.2",
-    "@voyantjs/pricing-ui": "0.101.2",
-    "@voyantjs/products-react": "0.101.2",
-    "@voyantjs/suppliers-react": "0.101.2",
-    "@voyantjs/ui": "0.101.2",
-    "@voyantjs/utils": "0.101.2"
+    "@voyantjs/availability": "0.102.0",
+    "@voyantjs/availability-react": "0.102.0",
+    "@voyantjs/catalog-react": "0.102.0",
+    "@voyantjs/extras-react": "0.102.0",
+    "@voyantjs/finance": "0.102.0",
+    "@voyantjs/finance-ui": "0.102.0",
+    "@voyantjs/markets-react": "0.102.0",
+    "@voyantjs/pricing-react": "0.102.0",
+    "@voyantjs/pricing-ui": "0.102.0",
+    "@voyantjs/products-react": "0.102.0",
+    "@voyantjs/suppliers-react": "0.102.0",
+    "@voyantjs/ui": "0.102.0",
+    "@voyantjs/utils": "0.102.0"
   },
   "dependencies": {
     "date-fns": "^4.1.0",
     "motion": "^12.38.0",
     "react-day-picker": "^9.8.0",
     "sonner": "^2.0.7",
-    "@voyantjs/i18n": "0.101.2"
+    "@voyantjs/i18n": "0.102.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.100.11",
@@ -82,20 +82,20 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/availability": "0.101.2",
-    "@voyantjs/availability-react": "0.101.2",
-    "@voyantjs/catalog-react": "0.101.2",
-    "@voyantjs/extras-react": "0.101.2",
-    "@voyantjs/finance": "0.101.2",
-    "@voyantjs/finance-ui": "0.101.2",
-    "@voyantjs/i18n": "0.101.2",
-    "@voyantjs/markets-react": "0.101.2",
-    "@voyantjs/pricing-react": "0.101.2",
-    "@voyantjs/pricing-ui": "0.101.2",
-    "@voyantjs/products-react": "0.101.2",
-    "@voyantjs/suppliers-react": "0.101.2",
-    "@voyantjs/ui": "0.101.2",
-    "@voyantjs/utils": "0.101.2",
+    "@voyantjs/availability": "0.102.0",
+    "@voyantjs/availability-react": "0.102.0",
+    "@voyantjs/catalog-react": "0.102.0",
+    "@voyantjs/extras-react": "0.102.0",
+    "@voyantjs/finance": "0.102.0",
+    "@voyantjs/finance-ui": "0.102.0",
+    "@voyantjs/i18n": "0.102.0",
+    "@voyantjs/markets-react": "0.102.0",
+    "@voyantjs/pricing-react": "0.102.0",
+    "@voyantjs/pricing-ui": "0.102.0",
+    "@voyantjs/products-react": "0.102.0",
+    "@voyantjs/suppliers-react": "0.102.0",
+    "@voyantjs/ui": "0.102.0",
+    "@voyantjs/utils": "0.102.0",
     "@voyantjs/voyant-typescript-config": "0.1.0"
   },
   "files": [