@voyant-travel/inventory-react 0.1.0

package/dist/components/product-list.js

@@ -0,0 +1,155 @@
+// agent-quality: file-size exception -- owner: inventory-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Button } from "@voyant-travel/ui/components/button";
+import { DateRangePicker } from "@voyant-travel/ui/components/date-picker";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyant-travel/ui/components/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { ArrowDown, ArrowUp, ArrowUpDown, ListFilter, Plus, Search, X } from "lucide-react";
+import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/index.js";
+import { useProducts, } from "../index.js";
+import { ProductDialog } from "./product-dialog.js";
+const STATUS_ALL = "__all__";
+const PRODUCT_STATUSES = ["draft", "active", "archived"];
+const SORTABLE_COLUMNS = {
+    name: "name",
+    status: "status",
+    sellAmount: "sellAmount",
+    pax: "pax",
+    startDate: "startDate",
+};
+const SKELETON_ROW_COUNT = 6;
+const TABLE_COLUMN_COUNT = 5;
+const statusVariant = {
+    draft: "outline",
+    active: "default",
+    archived: "secondary",
+};
+function formatAmount(cents, currency, fallback) {
+    if (cents == null)
+        return fallback;
+    return `${(cents / 100).toFixed(2)} ${currency}`;
+}
+export function ProductList({ pageSize = 25, onSelectProduct } = {}) {
+    const messages = useProductsUiMessagesOrDefault();
+    const productMessages = messages.productList;
+    const [search, setSearch] = React.useState("");
+    const [status, setStatus] = React.useState(STATUS_ALL);
+    const [dateRange, setDateRange] = React.useState(null);
+    const [paxMin, setPaxMin] = React.useState("");
+    const [paxMax, setPaxMax] = React.useState("");
+    const [sellAmountMin, setSellAmountMin] = React.useState("");
+    const [sellAmountMax, setSellAmountMax] = React.useState("");
+    const [sortBy, setSortBy] = React.useState("createdAt");
+    const [sortDir, setSortDir] = React.useState("desc");
+    const [offset, setOffset] = React.useState(0);
+    const [filterPopoverOpen, setFilterPopoverOpen] = React.useState(false);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(undefined);
+    const paxMinNumber = paxMin === "" ? undefined : Number.parseInt(paxMin, 10);
+    const paxMaxNumber = paxMax === "" ? undefined : Number.parseInt(paxMax, 10);
+    const sellAmountMinCents = sellAmountMin === "" ? undefined : Math.round(Number.parseFloat(sellAmountMin) * 100);
+    const sellAmountMaxCents = sellAmountMax === "" ? undefined : Math.round(Number.parseFloat(sellAmountMax) * 100);
+    const { data, isPending, isFetching, isError } = useProducts({
+        search: search || undefined,
+        status: status === STATUS_ALL ? undefined : status,
+        dateFrom: dateRange?.from ?? undefined,
+        dateTo: dateRange?.to ?? undefined,
+        paxMin: Number.isFinite(paxMinNumber) ? paxMinNumber : undefined,
+        paxMax: Number.isFinite(paxMaxNumber) ? paxMaxNumber : undefined,
+        sellAmountMin: Number.isFinite(sellAmountMinCents) ? sellAmountMinCents : undefined,
+        sellAmountMax: Number.isFinite(sellAmountMaxCents) ? sellAmountMaxCents : undefined,
+        sortBy,
+        sortDir,
+        limit: pageSize,
+        offset,
+    });
+    const products = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = Math.floor(offset / pageSize) + 1;
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    const showSkeleton = isPending || (isFetching && products.length === 0);
+    const resetOffset = () => setOffset(0);
+    const handleSort = (field) => {
+        setOffset(0);
+        if (sortBy !== field) {
+            setSortBy(field);
+            setSortDir("asc");
+            return;
+        }
+        if (sortDir === "asc") {
+            setSortDir("desc");
+            return;
+        }
+        setSortBy("createdAt");
+        setSortDir("desc");
+    };
+    const activeFilterCount = (status !== STATUS_ALL ? 1 : 0) +
+        (dateRange?.from || dateRange?.to ? 1 : 0) +
+        (paxMin !== "" || paxMax !== "" ? 1 : 0) +
+        (sellAmountMin !== "" || sellAmountMax !== "" ? 1 : 0);
+    const hasActiveFilters = activeFilterCount > 0 || search !== "";
+    const clearFilters = () => {
+        setSearch("");
+        setStatus(STATUS_ALL);
+        setDateRange(null);
+        setPaxMin("");
+        setPaxMax("");
+        setSellAmountMin("");
+        setSellAmountMax("");
+        resetOffset();
+    };
+    const handleEdit = (product) => {
+        if (onSelectProduct) {
+            onSelectProduct(product);
+            return;
+        }
+        setEditing(product);
+        setDialogOpen(true);
+    };
+    const handleCreate = () => {
+        setEditing(undefined);
+        setDialogOpen(true);
+    };
+    return (_jsxs("div", { "data-slot": "product-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[14rem] flex-1", children: [_jsx(Label, { htmlFor: "products-search", className: "sr-only", children: productMessages.searchPlaceholder }), _jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "products-search", placeholder: productMessages.searchPlaceholder, value: search, onChange: (event) => {
+                                    setSearch(event.target.value);
+                                    resetOffset();
+                                }, className: "pl-9" })] }), _jsxs(Popover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4", "aria-hidden": "true" }), productMessages.filters.button, activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount }))] }) }), _jsx(PopoverContent, { align: "start", className: "w-[22rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "products-filter-status", children: productMessages.filters.statusLabel }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                                        setStatus(value ?? STATUS_ALL);
+                                                        resetOffset();
+                                                    }, children: [_jsx(SelectTrigger, { id: "products-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: STATUS_ALL, children: productMessages.filters.statusAll }), PRODUCT_STATUSES.map((value) => (_jsx(SelectItem, { value: value, children: messages.common.productStatusLabels[value] }, value)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.filters.dateLabel }), _jsx(DateRangePicker, { value: dateRange, onChange: (value) => {
+                                                        setDateRange(value);
+                                                        resetOffset();
+                                                    }, placeholder: productMessages.filters.datePlaceholder, clearable: true, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.filters.paxLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, placeholder: productMessages.filters.min, value: paxMin, onChange: (event) => {
+                                                                setPaxMin(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.paxLabel} ${productMessages.filters.min}` }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, placeholder: productMessages.filters.max, value: paxMax, onChange: (event) => {
+                                                                setPaxMax(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.paxLabel} ${productMessages.filters.max}` })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: productMessages.filters.sellAmountLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: productMessages.filters.min, value: sellAmountMin, onChange: (event) => {
+                                                                setSellAmountMin(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.sellAmountLabel} ${productMessages.filters.min}` }), _jsx("span", { className: "text-muted-foreground", children: "\u2013" }), _jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: productMessages.filters.max, value: sellAmountMax, onChange: (event) => {
+                                                                setSellAmountMax(event.target.value);
+                                                                resetOffset();
+                                                            }, className: "w-full", "aria-label": `${productMessages.filters.sellAmountLabel} ${productMessages.filters.max}` })] })] })] }) })] }), hasActiveFilters && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4", "aria-hidden": "true" }), productMessages.filters.clear] })), _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: handleCreate, "data-slot": "product-list-create", children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), productMessages.newProduct] }) })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.name, field: SORTABLE_COLUMNS.name, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.status, field: SORTABLE_COLUMNS.status, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.sellAmount, field: SORTABLE_COLUMNS.sellAmount, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.pax, field: SORTABLE_COLUMNS.pax, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: productMessages.columns.startDate, field: SORTABLE_COLUMNS.startDate, sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(ProductTableSkeleton, { rows: SKELETON_ROW_COUNT })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-destructive", children: productMessages.loadFailed }) })) : products.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-sm text-muted-foreground", children: productMessages.empty }) })) : (products.map((product) => (_jsxs(TableRow, { onClick: () => handleEdit(product), className: "cursor-pointer", children: [_jsx(TableCell, { className: "font-medium", children: product.name }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusVariant[product.status] ?? "secondary", children: messages.common.productStatusLabels[product.status] }) }), _jsx(TableCell, { children: formatAmount(product.sellAmountCents, product.sellCurrency, productMessages.noValue) }), _jsx(TableCell, { children: product.pax ?? productMessages.noValue }), _jsx(TableCell, { children: product.startDate ?? productMessages.noValue })] }, product.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: formatMessage(productMessages.paginationShowing, { count: products.length, total }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: productMessages.paginationPrevious }), _jsx("span", { children: formatMessage(productMessages.paginationPage, { page, pageCount }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: productMessages.paginationNext })] })] }), _jsx(ProductDialog, { open: dialogOpen, onOpenChange: setDialogOpen, product: editing, onSuccess: (product) => {
+                    if (onSelectProduct) {
+                        onSelectProduct(product);
+                    }
+                } })] }));
+}
+function SortHeader({ label, field, sortBy, sortDir, onSort }) {
+    const active = sortBy === field;
+    const Icon = active ? (sortDir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
+    return (_jsxs("button", { type: "button", onClick: () => onSort(field), className: "-ml-2 inline-flex h-8 items-center gap-1 rounded-sm px-2 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { children: label }), _jsx(Icon, { className: `size-3.5 ${active ? "text-foreground" : "text-muted-foreground/60"}`, "aria-hidden": true })] }));
+}
+function ProductTableSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-16 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-8" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-24" }) })] }, `skeleton-${idx}`))) }));
+}

package/dist/components/product-media-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { ProductMediaRecord } from "../index.js";
+export interface ProductMediaDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    dayId?: string;
+    media?: ProductMediaRecord;
+    onSuccess?: (media: ProductMediaRecord) => void;
+}
+export declare function ProductMediaDialog({ open, onOpenChange, productId, dayId, media, onSuccess, }: ProductMediaDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-media-dialog.d.ts.map

package/dist/components/product-media-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-media-dialog.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAGrD,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAChD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,uBAAuB,2CA8BzB"}

package/dist/components/product-media-dialog.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyant-travel/ui/components/dialog";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider.js";
+import { ProductMediaForm } from "./product-media-form.js";
+export function ProductMediaDialog({ open, onOpenChange, productId, dayId, media, onSuccess, }) {
+    const isEdit = Boolean(media);
+    const messages = useProductsUiMessagesOrDefault();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-media-dialog", className: "sm:max-w-[720px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit
+                                ? messages.productMediaDialog.titles.edit
+                                : messages.productMediaDialog.titles.create }), _jsx(DialogDescription, { children: isEdit
+                                ? messages.productMediaDialog.descriptions.edit
+                                : messages.productMediaDialog.descriptions.create })] }), _jsx(ProductMediaForm, { mode: media ? { kind: "edit", media } : { kind: "create", productId, dayId }, onSuccess: (savedMedia) => {
+                        onSuccess?.(savedMedia);
+                        onOpenChange(false);
+                    }, onCancel: () => onOpenChange(false) })] }) }));
+}

package/dist/components/product-media-form.d.ts

@@ -0,0 +1,17 @@
+import { type ProductMediaRecord } from "../index.js";
+type Mode = {
+    kind: "create";
+    productId: string;
+    dayId?: string;
+} | {
+    kind: "edit";
+    media: ProductMediaRecord;
+};
+export interface ProductMediaFormProps {
+    mode: Mode;
+    onSuccess?: (media: ProductMediaRecord) => void;
+    onCancel?: () => void;
+}
+export declare function ProductMediaForm({ mode, onSuccess, onCancel }: ProductMediaFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-media-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-form.d.ts","sourceRoot":"","sources":["../../src/components/product-media-form.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,kBAAkB,EAA2B,MAAM,aAAa,CAAA;AAI9E,KAAK,IAAI,GACL;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,kBAAkB,CAAA;CAAE,CAAA;AAE/C,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAgDD,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAuMpF"}

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

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { Switch } from "@voyant-travel/ui/components/switch";
+import { Textarea } from "@voyant-travel/ui/components/textarea";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useProductMediaMutation } from "../index.js";
+const MEDIA_TYPES = [
+    { value: "image" },
+    { value: "video" },
+    { value: "document" },
+];
+function initialState(mode) {
+    if (mode.kind === "edit") {
+        return {
+            mediaType: mode.media.mediaType,
+            name: mode.media.name,
+            url: mode.media.url,
+            storageKey: mode.media.storageKey ?? "",
+            mimeType: mode.media.mimeType ?? "",
+            fileSize: mode.media.fileSize == null ? "" : String(mode.media.fileSize),
+            altText: mode.media.altText ?? "",
+            sortOrder: String(mode.media.sortOrder),
+            isCover: mode.media.isCover,
+        };
+    }
+    return {
+        mediaType: "image",
+        name: "",
+        url: "",
+        storageKey: "",
+        mimeType: "",
+        fileSize: "",
+        altText: "",
+        sortOrder: "0",
+        isCover: false,
+    };
+}
+export function ProductMediaForm({ mode, onSuccess, onCancel }) {
+    const [state, setState] = React.useState(() => initialState(mode));
+    const [error, setError] = React.useState(null);
+    const { create, update } = useProductMediaMutation();
+    const messages = useProductsUiMessagesOrDefault();
+    React.useEffect(() => {
+        setState(initialState(mode));
+        setError(null);
+    }, [mode]);
+    const isSubmitting = create.isPending || update.isPending;
+    const field = (key) => (value) => {
+        setState((previous) => ({ ...previous, [key]: value }));
+    };
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setError(null);
+        if (!state.name.trim()) {
+            setError(messages.productMediaForm.validation.nameRequired);
+            return;
+        }
+        if (!state.url.trim()) {
+            setError(messages.productMediaForm.validation.urlRequired);
+            return;
+        }
+        const payload = {
+            mediaType: state.mediaType,
+            name: state.name.trim(),
+            url: state.url.trim(),
+            storageKey: state.storageKey.trim() ? state.storageKey.trim() : null,
+            mimeType: state.mimeType.trim() ? state.mimeType.trim() : null,
+            fileSize: state.fileSize.trim() ? Number.parseInt(state.fileSize, 10) || 0 : null,
+            altText: state.altText.trim() ? state.altText.trim() : null,
+            sortOrder: Number.parseInt(state.sortOrder || "0", 10) || 0,
+            isCover: state.isCover,
+        };
+        try {
+            const media = mode.kind === "create"
+                ? await create.mutateAsync({
+                    productId: mode.productId,
+                    dayId: mode.dayId,
+                    ...payload,
+                })
+                : await update.mutateAsync({ mediaId: mode.media.id, input: payload });
+            onSuccess?.(media);
+        }
+        catch (submissionError) {
+            setError(submissionError instanceof Error
+                ? submissionError.message
+                : messages.productMediaForm.validation.saveFailed);
+        }
+    };
+    return (_jsxs("form", { "data-slot": "product-media-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: messages.productMediaForm.fields.mediaType }), _jsxs(Select, { items: MEDIA_TYPES.map((type) => ({
+                                    label: messages.common.mediaTypeLabels[type.value],
+                                    value: type.value,
+                                })), value: state.mediaType, onValueChange: (value) => field("mediaType")(value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: MEDIA_TYPES.map((type) => (_jsx(SelectItem, { value: type.value, children: messages.common.mediaTypeLabels[type.value] }, type.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-name", children: messages.productMediaForm.fields.name }), _jsx(Input, { id: "product-media-name", autoFocus: true, required: true, value: state.name, onChange: (event) => field("name")(event.target.value), placeholder: messages.productMediaForm.placeholders.name })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-url", children: messages.productMediaForm.fields.url }), _jsx(Input, { id: "product-media-url", type: "url", required: true, value: state.url, onChange: (event) => field("url")(event.target.value), placeholder: messages.productMediaForm.placeholders.url })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-storage-key", children: messages.productMediaForm.fields.storageKey }), _jsx(Input, { id: "product-media-storage-key", value: state.storageKey, onChange: (event) => field("storageKey")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-mime-type", children: messages.productMediaForm.fields.mimeType }), _jsx(Input, { id: "product-media-mime-type", value: state.mimeType, onChange: (event) => field("mimeType")(event.target.value), placeholder: messages.productMediaForm.placeholders.mimeType })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-file-size", children: messages.productMediaForm.fields.fileSize }), _jsx(Input, { id: "product-media-file-size", type: "number", min: "0", value: state.fileSize, onChange: (event) => field("fileSize")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-sort-order", children: messages.productMediaForm.fields.sortOrder }), _jsx(Input, { id: "product-media-sort-order", type: "number", value: state.sortOrder, onChange: (event) => field("sortOrder")(event.target.value) })] }), _jsxs("div", { className: "flex items-end gap-2 pb-2", children: [_jsx(Switch, { checked: state.isCover, onCheckedChange: (checked) => field("isCover")(checked) }), _jsx(Label, { children: messages.productMediaForm.fields.coverMedia })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-alt-text", children: messages.productMediaForm.fields.altText }), _jsx(Textarea, { id: "product-media-alt-text", value: state.altText, onChange: (event) => field("altText")(event.target.value), placeholder: messages.productMediaForm.placeholders.altText })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: messages.common.cancel })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create"
+                                ? messages.productMediaForm.actions.addMedia
+                                : messages.productMediaForm.actions.saveMedia] })] })] }));
+}

package/dist/components/product-media-lightbox.d.ts

@@ -0,0 +1,7 @@
+import type { ProductMediaRecord } from "../index.js";
+export declare function MediaLightbox({ media, index, onClose, }: {
+    media: ProductMediaRecord[];
+    index: number | null;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-media-lightbox.d.ts.map

package/dist/components/product-media-lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-lightbox.d.ts","sourceRoot":"","sources":["../../src/components/product-media-lightbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAA;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,2CA0FA"}

package/dist/components/product-media-lightbox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogTitle } from "@voyant-travel/ui/components/dialog";
+import { ChevronLeft, ChevronRight, FileText, X } from "lucide-react";
+import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider.js";
+export function MediaLightbox({ media, index, onClose, }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const sectionMessages = messages.productMediaSection;
+    const [current, setCurrent] = React.useState(index ?? 0);
+    React.useEffect(() => {
+        if (index != null)
+            setCurrent(index);
+    }, [index]);
+    const item = media[current];
+    const open = index != null && item != null;
+    const canPrevious = current > 0;
+    const canNext = current < media.length - 1;
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "ArrowLeft" && canPrevious)
+                setCurrent((value) => value - 1);
+            if (event.key === "ArrowRight" && canNext)
+                setCurrent((value) => value + 1);
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [canNext, canPrevious, open]);
+    return (_jsx(Dialog, { open: open, onOpenChange: (nextOpen) => !nextOpen && onClose(), children: _jsxs(DialogContent, { className: "left-0 top-0 h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 gap-0 rounded-none border-0 bg-black/90 p-0 text-white ring-0 sm:max-w-none", showCloseButton: false, children: [_jsx(DialogTitle, { className: "sr-only", children: sectionMessages.viewerTitle }), item ? (_jsxs("div", { className: "relative flex h-full w-full items-center justify-center p-4", children: [_jsx("button", { type: "button", onClick: onClose, className: "absolute right-3 top-3 z-10 rounded-full bg-black/60 p-2 text-white hover:bg-black/80", "aria-label": sectionMessages.actions.closePreview, children: _jsx(X, { className: "size-5", "aria-hidden": "true" }) }), canPrevious ? (_jsx("button", { type: "button", onClick: () => setCurrent((value) => value - 1), className: "absolute left-3 z-10 rounded-full bg-black/60 p-2 text-white hover:bg-black/80", "aria-label": sectionMessages.actions.previousMedia, children: _jsx(ChevronLeft, { className: "size-6", "aria-hidden": "true" }) })) : null, canNext ? (_jsx("button", { type: "button", onClick: () => setCurrent((value) => value + 1), className: "absolute right-3 z-10 rounded-full bg-black/60 p-2 text-white hover:bg-black/80", "aria-label": sectionMessages.actions.nextMedia, children: _jsx(ChevronRight, { className: "size-6", "aria-hidden": "true" }) })) : null, item.mediaType === "image" ? (_jsx("img", { src: item.url, alt: item.altText ?? item.name, className: "max-h-[95vh] max-w-[95vw] object-contain" })) : item.mediaType === "video" ? (_jsx("video", { src: item.url, controls: true, autoPlay: true, className: "max-h-[95vh] max-w-[95vw]" })) : (_jsxs("a", { href: item.url, target: "_blank", rel: "noreferrer", className: "flex max-w-md flex-col items-center gap-3 rounded-lg bg-background p-8 text-center text-foreground", children: [_jsx(FileText, { className: "size-8 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "font-medium", children: item.name }), _jsx("span", { className: "text-sm text-muted-foreground", children: sectionMessages.actions.openFile })] }))] })) : null] }) }));
+}

package/dist/components/product-media-section.d.ts

@@ -0,0 +1,27 @@
+import { type ProductMediaRecord } from "../index.js";
+export interface ProductMediaUploadResult {
+    url: string;
+    name?: string;
+    mediaType?: ProductMediaRecord["mediaType"];
+    storageKey?: string | null;
+    mimeType?: string | null;
+    fileSize?: number | null;
+    altText?: string | null;
+    sortOrder?: number;
+    isCover?: boolean;
+}
+export type ProductMediaUploadHandler = (file: File, context: {
+    productId: string;
+    dayId?: string;
+}) => Promise<ProductMediaUploadResult>;
+export interface ProductMediaSectionProps {
+    productId: string;
+    dayId?: string;
+    title?: string;
+    description?: string;
+    compact?: boolean;
+    uploadMedia?: ProductMediaUploadHandler;
+    uploadAccept?: string;
+}
+export declare function ProductMediaSection({ productId, dayId, title, description, compact, uploadMedia, uploadAccept, }: ProductMediaSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-media-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-section.d.ts","sourceRoot":"","sources":["../../src/components/product-media-section.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,kBAAkB,EAA4C,MAAM,aAAa,CAAA;AAK/F,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC3C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,yBAAyB,GAAG,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAC3C,OAAO,CAAC,wBAAwB,CAAC,CAAA;AAEtC,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,yBAAyB,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAe,EACf,WAAW,EACX,YAAgD,GACjD,EAAE,wBAAwB,2CAqS1B"}

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

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voyant-travel/ui/components/card";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { GripVertical, Loader2, Plus, Upload } from "lucide-react";
+import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useProductMedia, useProductMediaMutation } from "../index.js";
+import { ProductMediaDialog } from "./product-media-dialog.js";
+import { MediaLightbox } from "./product-media-lightbox.js";
+import { MediaTile } from "./product-media-tile.js";
+export function ProductMediaSection({ productId, dayId, title, description, compact = false, uploadMedia, uploadAccept = "image/*,video/*,application/pdf", }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const sectionMessages = messages.productMediaSection;
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editingMedia, setEditingMedia] = React.useState();
+    const [isUploading, setIsUploading] = React.useState(false);
+    const [uploadError, setUploadError] = React.useState(null);
+    const [reorderMode, setReorderMode] = React.useState(false);
+    const [localOrder, setLocalOrder] = React.useState([]);
+    const [draggedId, setDraggedId] = React.useState(null);
+    const [lightboxIndex, setLightboxIndex] = React.useState(null);
+    const fileInputRef = React.useRef(null);
+    const { data, isPending, isError } = useProductMedia(productId, { dayId, limit: 100 });
+    const { create, remove, reorder, setCover } = useProductMediaMutation();
+    const media = React.useMemo(() => (data?.data ?? [])
+        .slice()
+        .sort((left, right) => Number(right.isCover) - Number(left.isCover) || left.sortOrder - right.sortOrder), [data?.data]);
+    React.useEffect(() => {
+        if (!reorderMode)
+            setLocalOrder(media);
+    }, [media, reorderMode]);
+    const visibleMedia = reorderMode ? localOrder : media;
+    const resolvedTitle = title ?? (dayId ? sectionMessages.titles.dayMedia : sectionMessages.titles.media);
+    const resolvedDescription = description ??
+        (dayId ? sectionMessages.descriptions.dayMedia : sectionMessages.descriptions.media);
+    const handleUpload = async (file) => {
+        if (!uploadMedia)
+            return;
+        setUploadError(null);
+        setIsUploading(true);
+        try {
+            const uploaded = await uploadMedia(file, { productId, dayId });
+            const mimeType = uploaded.mimeType?.trim() || file.type || null;
+            const inferredMediaType = uploaded.mediaType ??
+                (mimeType?.startsWith("video/")
+                    ? "video"
+                    : mimeType?.startsWith("image/")
+                        ? "image"
+                        : "document");
+            await create.mutateAsync({
+                productId,
+                dayId,
+                mediaType: inferredMediaType,
+                name: uploaded.name?.trim() || file.name,
+                url: uploaded.url,
+                storageKey: uploaded.storageKey ?? null,
+                mimeType,
+                fileSize: uploaded.fileSize ?? (file.size || null),
+                altText: uploaded.altText ?? null,
+                sortOrder: uploaded.sortOrder ?? media.length,
+                isCover: uploaded.isCover ?? media.length === 0,
+            });
+        }
+        catch (error) {
+            setUploadError(error instanceof Error ? error.message : sectionMessages.uploadFailed);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    const moveMedia = (sourceId, targetId) => {
+        if (sourceId === targetId)
+            return;
+        setLocalOrder((items) => {
+            const sourceIndex = items.findIndex((item) => item.id === sourceId);
+            const targetIndex = items.findIndex((item) => item.id === targetId);
+            if (sourceIndex < 0 || targetIndex < 0)
+                return items;
+            const next = items.slice();
+            const [moved] = next.splice(sourceIndex, 1);
+            if (!moved)
+                return items;
+            next.splice(targetIndex, 0, moved);
+            return next;
+        });
+    };
+    const commitReorder = async () => {
+        await reorder.mutateAsync({
+            productId,
+            items: localOrder.map((item, index) => ({ id: item.id, sortOrder: index })),
+        });
+        setReorderMode(false);
+    };
+    const cancelReorder = () => {
+        setLocalOrder(media);
+        setReorderMode(false);
+        setDraggedId(null);
+    };
+    const header = (_jsxs("div", { className: "space-y-1", children: [_jsx(CardTitle, { className: compact ? "text-base" : undefined, children: resolvedTitle }), _jsx(CardDescription, { children: resolvedDescription })] }));
+    const actions = (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [media.length > 1 ? (reorderMode ? (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "outline", size: compact ? "sm" : "default", onClick: cancelReorder, disabled: reorder.isPending, children: sectionMessages.actions.cancelReorder }), _jsxs(Button, { type: "button", size: compact ? "sm" : "default", onClick: () => void commitReorder(), disabled: reorder.isPending, children: [reorder.isPending ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, sectionMessages.actions.saveOrder] })] })) : (_jsxs(Button, { type: "button", variant: "outline", size: compact ? "sm" : "default", onClick: () => {
+                    setLocalOrder(media);
+                    setReorderMode(true);
+                }, children: [_jsx(GripVertical, { className: "mr-2 size-4", "aria-hidden": "true" }), sectionMessages.actions.reorder] }))) : null, uploadMedia ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: compact ? "outline" : "secondary", size: compact ? "sm" : "default", disabled: isUploading || reorderMode, onClick: () => fileInputRef.current?.click(), children: [isUploading ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : (_jsx(Upload, { className: "mr-2 size-4", "aria-hidden": "true" })), sectionMessages.actions.upload] }), _jsx("input", { ref: fileInputRef, type: "file", accept: uploadAccept, className: "hidden", onChange: (event) => {
+                            const file = event.target.files?.[0];
+                            if (file) {
+                                void handleUpload(file);
+                                event.target.value = "";
+                            }
+                        } })] })) : null, _jsxs(Button, { type: "button", size: compact ? "sm" : "default", disabled: reorderMode, onClick: () => {
+                    setEditingMedia(undefined);
+                    setDialogOpen(true);
+                }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), sectionMessages.actions.addMedia] })] }));
+    const body = (_jsxs(_Fragment, { children: [uploadError ? _jsx("p", { className: "text-sm text-destructive", children: uploadError }) : null, isPending ? (_jsx("div", { className: "flex min-h-40 items-center justify-center rounded-md border border-dashed", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground", "aria-hidden": "true" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: sectionMessages.loadingError })) : media.length === 0 ? (_jsx("div", { className: "flex min-h-40 items-center justify-center rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground", children: sectionMessages.empty })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: sectionMessages.itemCount.replace("{count}", String(media.length)) }), _jsx("ul", { className: cn("m-0 grid list-none gap-3 p-0", compact
+                            ? "grid-cols-2" /* i18n-literal-ok CSS class token */
+                            : "sm:grid-cols-2 2xl:grid-cols-3" /* i18n-literal-ok CSS class token */), children: visibleMedia.map((item, index) => (_jsx(MediaTile, { item: item, index: index, compact: compact, reorderMode: reorderMode, dragging: draggedId === item.id, onOpen: () => setLightboxIndex(index), onEdit: () => {
+                                setEditingMedia(item);
+                                setDialogOpen(true);
+                            }, onSetCover: () => setCover.mutate(item.id), onDelete: () => {
+                                if (confirm(sectionMessages.deleteConfirm)) {
+                                    remove.mutate(item.id);
+                                }
+                            }, onDragStart: () => setDraggedId(item.id), onDragOver: (event) => {
+                                event.preventDefault();
+                                if (draggedId)
+                                    moveMedia(draggedId, item.id);
+                            }, onDrop: () => setDraggedId(null) }, item.id))) })] }))] }));
+    return (_jsxs(_Fragment, { children: [compact ? (_jsxs("div", { "data-slot": "product-media-section", className: "flex flex-col gap-3 rounded-md border bg-background p-3", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [header, actions] }), body] })) : (_jsxs(Card, { "data-slot": "product-media-section", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [header, actions] }), _jsx(CardContent, { className: "space-y-3", children: body })] })), _jsx(ProductMediaDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, dayId: dayId, media: editingMedia, onSuccess: () => setEditingMedia(undefined) }), _jsx(MediaLightbox, { media: visibleMedia, index: lightboxIndex, onClose: () => setLightboxIndex(null) })] }));
+}

package/dist/components/product-media-tile.d.ts

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import type { ProductMediaRecord } from "../index.js";
+export declare function MediaTile({ item, index, compact, reorderMode, dragging, onOpen, onEdit, onSetCover, onDelete, onDragStart, onDragOver, onDrop, }: {
+    item: ProductMediaRecord;
+    index: number;
+    compact: boolean;
+    reorderMode: boolean;
+    dragging: boolean;
+    onOpen: () => void;
+    onEdit: () => void;
+    onSetCover: () => void;
+    onDelete: () => void;
+    onDragStart: () => void;
+    onDragOver: (event: React.DragEvent<HTMLLIElement>) => void;
+    onDrop: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-media-tile.d.ts.map

package/dist/components/product-media-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-tile.d.ts","sourceRoot":"","sources":["../../src/components/product-media-tile.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAErD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,QAAQ,EACR,MAAM,EACN,MAAM,EACN,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE;IACD,IAAI,EAAE,kBAAkB,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC3D,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,2CAgIA"}

package/dist/components/product-media-tile.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Button } from "@voyant-travel/ui/components/button";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { FileText, GripVertical, Pencil, Star, Trash2 } from "lucide-react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider.js";
+export function MediaTile({ item, index, compact, reorderMode, dragging, onOpen, onEdit, onSetCover, onDelete, onDragStart, onDragOver, onDrop, }) {
+    const messages = useProductsUiMessagesOrDefault();
+    const sectionMessages = messages.productMediaSection;
+    const mediaTypeLabel = messages.common.mediaTypeLabels[item.mediaType];
+    return (_jsxs("li", { className: cn("group relative overflow-hidden rounded-md border bg-background transition", dragging && "opacity-50 ring-2 ring-primary", reorderMode && "cursor-grab active:cursor-grabbing"), draggable: reorderMode, onDragStart: (event) => {
+            event.dataTransfer.effectAllowed = "move";
+            event.dataTransfer.setData("text/plain", item.id);
+            onDragStart();
+        }, onDragOver: onDragOver, onDragEnd: onDrop, onDrop: onDrop, children: [_jsxs("div", { className: cn("relative bg-muted", compact ? "aspect-[4/3]" : "aspect-video"), children: [item.mediaType === "image" ? (_jsx("button", { type: "button", className: "h-full w-full", onClick: onOpen, disabled: reorderMode, "aria-label": sectionMessages.actions.openPreview, children: _jsx("img", { src: item.url, alt: item.altText ?? item.name, className: "h-full w-full object-cover", draggable: false }) })) : item.mediaType === "video" ? (_jsx("button", { type: "button", className: "flex h-full w-full items-center justify-center", onClick: onOpen, disabled: reorderMode, "aria-label": sectionMessages.actions.openPreview, children: _jsx("video", { src: item.url, className: "h-full w-full object-cover", muted: true }) })) : (_jsxs("button", { type: "button", className: "flex h-full w-full flex-col items-center justify-center gap-2 text-muted-foreground", onClick: onOpen, disabled: reorderMode, "aria-label": sectionMessages.actions.openPreview, children: [_jsx(FileText, { className: "size-6", "aria-hidden": "true" }), _jsx("span", { className: "text-xs font-medium uppercase", children: mediaTypeLabel })] })), item.isCover ? (_jsxs(Badge, { className: "absolute left-2 top-2 gap-1 bg-black/70 text-white hover:bg-black/70", children: [_jsx(Star, { className: "size-3 fill-yellow-400 text-yellow-400", "aria-hidden": "true" }), sectionMessages.coverBadge] })) : null, _jsx(Badge, { variant: "secondary", className: "absolute right-2 top-2 bg-background/90", children: mediaTypeLabel }), reorderMode ? (_jsxs("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-center gap-1 bg-black/65 px-2 py-1 text-xs text-white", children: [_jsx(GripVertical, { className: "size-3", "aria-hidden": "true" }), sectionMessages.actions.drag] })) : (_jsxs("div", { className: "pointer-events-none absolute inset-0 flex items-end justify-end gap-1.5 bg-gradient-to-t from-black/65 via-black/0 to-black/0 p-2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: [!item.isCover ? (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", className: "pointer-events-auto h-8 px-2 text-xs", onClick: onSetCover, children: [_jsx(Star, { className: "mr-1 size-3", "aria-hidden": "true" }), sectionMessages.actions.markCover] })) : null, _jsx(Button, { type: "button", size: "icon-sm", variant: "secondary", className: "pointer-events-auto", onClick: onEdit, "aria-label": sectionMessages.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", size: "icon-sm", variant: "destructive", className: "pointer-events-auto", onClick: onDelete, "aria-label": sectionMessages.actions.delete, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }))] }), _jsx("div", { className: "space-y-1 p-3", children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: item.name }), item.altText ? (_jsx("div", { className: "truncate text-xs text-muted-foreground", children: item.altText })) : null] }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: index + 1 })] }) })] }));
+}

package/dist/components/product-option-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { ProductOptionRecord } from "../index.js";
+export interface ProductOptionDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    option?: ProductOptionRecord;
+    sortOrder?: number;
+    onSuccess?: (option: ProductOptionRecord) => void;
+}
+export declare function ProductOptionDialog({ open, onOpenChange, productId, option, sortOrder, onSuccess, }: ProductOptionDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-option-dialog.d.ts.map

package/dist/components/product-option-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-option-dialog.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAGtD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAClD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,wBAAwB,2CA8B1B"}