@voyant-travel/catalog-react 0.117.2

package/dist/components/catalog-detail-departures.js

@@ -0,0 +1,240 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, ChevronRight, X } from "lucide-react";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { formatPriceCents } from "./catalog-detail-parts.js";
+function monthKey(date) {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+}
+function collectMonthOptions(departures) {
+    const formatter = new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric" });
+    const map = new Map();
+    for (const d of departures) {
+        const date = new Date(d.startsAt);
+        if (Number.isNaN(date.getTime()))
+            continue;
+        const key = monthKey(date);
+        if (!map.has(key))
+            map.set(key, { value: key, label: formatter.format(date) });
+    }
+    // i18n-literal-ok: numeric sort comparator return value
+    return Array.from(map.values()).sort((a, b) => (a.value < b.value ? -1 : 1));
+}
+function normaliseStatus(d) {
+    if (d.status)
+        return d.status;
+    return "open";
+}
+function collectStatusOptions(departures) {
+    const set = new Set();
+    for (const d of departures)
+        set.add(normaliseStatus(d));
+    return Array.from(set).sort();
+}
+function isDepartureBookable(d) {
+    if (d.status === "sold_out" || d.status === "closed" || d.status === "cancelled")
+        return false;
+    if (typeof d.remaining === "number" && d.remaining <= 0)
+        return false;
+    return new Date(d.startsAt).getTime() > Date.now();
+}
+const ALL_FILTER_VALUE = "__all__";
+/**
+ * Flat departures table with sortable columns and filter controls
+ * (month/year, status, min-availability). Sold-out / closed / past
+ * rows render dimmed and are not clickable. Bookable rows expand to
+ * reveal a per-option row with its own remaining capacity and Book
+ * button.
+ */
+export function DeparturesTable({ hit, vertical, departures, options, productSellAmountCents, productSellCurrency, onBookDeparture, onBookOption, onLoadDeparturePricing, messages, }) {
+    const tableMessages = messages.departuresTable;
+    // Cruises call a scheduled departure a "sailing" — pick the cruise wording.
+    const isCruise = vertical === "cruises";
+    const noUpcomingLabel = isCruise ? messages.noUpcomingSailings : messages.noUpcomingDepartures;
+    const noResultsLabel = isCruise ? tableMessages.noResultsSailings : tableMessages.noResults;
+    const monthOptions = useMemo(() => collectMonthOptions(departures), [departures]);
+    const statusOptions = useMemo(() => collectStatusOptions(departures), [departures]);
+    const [monthFilter, setMonthFilter] = useState(ALL_FILTER_VALUE);
+    const [statusFilter, setStatusFilter] = useState(ALL_FILTER_VALUE);
+    const [minAvailability, setMinAvailability] = useState("");
+    const [sort, setSort] = useState({
+        column: "date",
+        direction: "asc",
+    });
+    const [expandedId, setExpandedId] = useState(null);
+    const dateTimeFormatter = useMemo(() => new Intl.DateTimeFormat(undefined, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    }), []);
+    const filtersActive = monthFilter !== ALL_FILTER_VALUE || statusFilter !== ALL_FILTER_VALUE || minAvailability !== "";
+    const filtered = useMemo(() => {
+        const minAvail = minAvailability ? Number(minAvailability) : null;
+        return departures.filter((d) => {
+            const date = new Date(d.startsAt);
+            if (monthFilter !== ALL_FILTER_VALUE) {
+                if (Number.isNaN(date.getTime()))
+                    return false;
+                if (monthKey(date) !== monthFilter)
+                    return false;
+            }
+            if (statusFilter !== ALL_FILTER_VALUE && normaliseStatus(d) !== statusFilter) {
+                return false;
+            }
+            if (minAvail != null && Number.isFinite(minAvail)) {
+                const remaining = typeof d.remaining === "number" ? d.remaining : null;
+                if (remaining == null)
+                    return false;
+                if (remaining < minAvail)
+                    return false;
+            }
+            return true;
+        });
+    }, [departures, monthFilter, statusFilter, minAvailability]);
+    const sorted = useMemo(() => {
+        const list = [...filtered];
+        const dir = sort.direction === "asc" ? 1 : -1;
+        list.sort((a, b) => {
+            switch (sort.column) {
+                case "date":
+                    return (new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime()) * dir;
+                case "status":
+                    return normaliseStatus(a).localeCompare(normaliseStatus(b)) * dir;
+                case "availability": {
+                    const av = typeof a.remaining === "number" ? a.remaining : -1;
+                    const bv = typeof b.remaining === "number" ? b.remaining : -1;
+                    return (av - bv) * dir;
+                }
+                case "priceFrom": {
+                    const av = a.lowestPriceCents ?? productSellAmountCents ?? -1;
+                    const bv = b.lowestPriceCents ?? productSellAmountCents ?? -1;
+                    return (av - bv) * dir;
+                }
+                default:
+                    return 0;
+            }
+        });
+        return list;
+    }, [filtered, sort, productSellAmountCents]);
+    const toggleSort = (column) => {
+        setSort((current) => current.column === column
+            ? { column, direction: current.direction === "asc" ? "desc" : "asc" }
+            : { column, direction: "asc" });
+    };
+    const clearFilters = () => {
+        setMonthFilter(ALL_FILTER_VALUE);
+        setStatusFilter(ALL_FILTER_VALUE);
+        setMinAvailability("");
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [_jsx("div", { className: "flex flex-col gap-1", children: _jsxs(Select, { value: monthFilter, onValueChange: (v) => setMonthFilter(v ?? ALL_FILTER_VALUE), children: [_jsx(SelectTrigger, { className: "h-9 w-[180px] text-sm", children: _jsx(SelectValue, { placeholder: tableMessages.anyMonth }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: ALL_FILTER_VALUE, children: tableMessages.anyMonth }), monthOptions.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)))] })] }) }), _jsx("div", { className: "flex flex-col gap-1", children: _jsxs(Select, { value: statusFilter, onValueChange: (v) => setStatusFilter(v ?? ALL_FILTER_VALUE), children: [_jsx(SelectTrigger, { className: "h-9 w-[160px] text-sm", children: _jsx(SelectValue, { placeholder: tableMessages.anyStatus }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: ALL_FILTER_VALUE, children: tableMessages.anyStatus }), statusOptions.map((status) => (_jsx(SelectItem, { value: status, children: statusLabelFor(status, tableMessages) }, status)))] })] }) }), _jsx("div", { className: "flex flex-col gap-1", children: _jsx(Input, { type: "number", min: 0, value: minAvailability, onChange: (event) => setMinAvailability(event.target.value), placeholder: tableMessages.minAvailability, className: "h-9 w-[140px] text-sm" }) }), filtersActive && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, className: "ml-auto", children: [_jsx(X, { className: "mr-1 h-3.5 w-3.5" }), tableMessages.clearFilters] }))] }), sorted.length === 0 ? (_jsx("div", { className: "rounded-md border bg-muted/10 px-3 py-6 text-center text-sm text-muted-foreground", children: filtersActive ? noResultsLabel : noUpcomingLabel })) : (_jsx("div", { className: "overflow-hidden rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "border-b bg-muted/30 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: _jsxs("tr", { children: [_jsx(SortableHeader, { className: "text-left", column: "date", sort: sort, onToggle: toggleSort, children: tableMessages.date }), _jsx(SortableHeader, { className: "text-left", column: "status", sort: sort, onToggle: toggleSort, children: tableMessages.status }), _jsx(SortableHeader, { className: "text-right", column: "availability", sort: sort, onToggle: toggleSort, children: tableMessages.availability }), _jsx(SortableHeader, { className: "text-right", column: "priceFrom", sort: sort, onToggle: toggleSort, children: tableMessages.priceFrom }), _jsx("th", { className: "w-[36px] px-3 py-2" })] }) }), _jsx("tbody", { children: sorted.map((d) => {
+                                const bookable = isDepartureBookable(d);
+                                const isExpanded = expandedId === d.id;
+                                const date = new Date(d.startsAt);
+                                const statusKey = normaliseStatus(d);
+                                const remaining = typeof d.remaining === "number" ? d.remaining : null;
+                                const priceCents = d.lowestPriceCents ?? productSellAmountCents;
+                                const priceCurrency = d.currency ?? productSellCurrency ?? undefined;
+                                return (_jsxs(Fragment, { children: [_jsxs("tr", { className: cn("border-b last:border-b-0 transition-colors", bookable ? "cursor-pointer hover:bg-muted/40" : "cursor-default opacity-50"), onClick: () => {
+                                                if (!bookable)
+                                                    return;
+                                                setExpandedId((current) => (current === d.id ? null : d.id));
+                                            }, children: [_jsx("td", { className: "px-3 py-2 font-medium", children: dateTimeFormatter.format(date) }), _jsx("td", { className: "px-3 py-2", children: _jsx(Badge, { variant: bookable ? "outline" : "secondary", className: "w-fit font-normal capitalize", children: statusLabelFor(statusKey, tableMessages) }) }), _jsx("td", { className: "px-3 py-2 text-right tabular-nums", children: remaining != null ? remaining : "—" }), _jsx("td", { className: "px-3 py-2 text-right font-medium tabular-nums", children: priceCents != null ? formatPriceCents(priceCents, priceCurrency) : "—" }), _jsx("td", { className: "px-3 py-2 text-right", children: bookable ? (isExpanded ? (_jsx(ChevronDown, { className: "ml-auto h-4 w-4 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "ml-auto h-4 w-4 text-muted-foreground" }))) : null })] }), isExpanded && (_jsx("tr", { className: "border-b last:border-b-0 bg-muted/20", children: _jsx("td", { colSpan: 5, className: "px-3 py-3", children: _jsx(DepartureDetailPanel, { hit: hit, departure: d, options: options, productSellAmountCents: productSellAmountCents, productSellCurrency: productSellCurrency, onBookDeparture: onBookDeparture, onBookOption: onBookOption, onLoadDeparturePricing: onLoadDeparturePricing, messages: messages }) }) }))] }, d.id));
+                            }) })] }) }))] }));
+}
+function SortableHeader({ column, sort, onToggle, children, className, }) {
+    const active = sort.column === column;
+    const Icon = !active ? ArrowUpDown : sort.direction === "asc" ? ArrowUp : ArrowDown;
+    return (_jsx("th", { className: cn("px-3 py-2", className), children: _jsxs("button", { type: "button", onClick: () => onToggle(column), className: cn("inline-flex items-center gap-1 text-[11px] font-medium uppercase tracking-wider", active ? "text-foreground" : "text-muted-foreground hover:text-foreground", 
+            // i18n-literal-ok: tailwind utilities, not user copy
+            className?.includes("text-right") ? "ml-auto flex-row-reverse" : null), children: [_jsx(Icon, { className: "h-3 w-3" }), children] }) }));
+}
+function statusLabelFor(status, tableMessages) {
+    switch (status) {
+        case "sold_out":
+            return tableMessages.soldOut;
+        case "closed":
+            return tableMessages.closed;
+        case "cancelled":
+            return tableMessages.cancelled;
+        case "open":
+            return tableMessages.open;
+        default:
+            return status.replace(/_/g, " ");
+    }
+}
+/**
+ * Per-departure expansion panel. Lists the bookable options with their
+ * own remaining capacity, "from" price, and Book button. Today the
+ * seeded availability_slots track capacity at the product level (not
+ * per option), so per-option remaining mirrors the departure total —
+ * once `availability_slots.option_id` is populated, the per-option
+ * number will diverge automatically.
+ */
+function DepartureDetailPanel({ hit, departure, options, productSellAmountCents, productSellCurrency, onBookDeparture, onBookOption, onLoadDeparturePricing, messages, }) {
+    const tableMessages = messages.departuresTable;
+    const currency = departure.currency ?? productSellCurrency ?? undefined;
+    const departurePriceCents = departure.lowestPriceCents ?? productSellAmountCents;
+    const departureRemaining = typeof departure.remaining === "number" ? departure.remaining : null;
+    // Live per-cabin pricing (cruises). This panel only mounts when its departure
+    // row is expanded, so fetch lazily here — pricing is volatile-live, never
+    // baked into the cached content.
+    const [livePricing, setLivePricing] = useState(null);
+    const sailingRef = departure.sourceRef ?? null;
+    useEffect(() => {
+        if (!hit || !onLoadDeparturePricing || !sailingRef)
+            return;
+        let cancelled = false;
+        onLoadDeparturePricing(hit, sailingRef).then((rows) => {
+            if (!cancelled)
+                setLivePricing(rows);
+        }, () => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [hit, onLoadDeparturePricing, sailingRef]);
+    // Index the cheapest live price per cabin code. The upstream cabin ref is
+    // `<shipId>_<code>`, so the code is the trailing segment — matched against the
+    // option's `code`.
+    const livePriceByCode = useMemo(() => {
+        const byCode = new Map();
+        for (const row of livePricing ?? []) {
+            const code = row.cabinExternalId.slice(row.cabinExternalId.lastIndexOf("_") + 1);
+            const cents = Math.round(Number(row.pricePerPerson) * 100);
+            if (!Number.isFinite(cents))
+                continue;
+            const existing = byCode.get(code);
+            if (!existing || cents < existing.cents) {
+                byCode.set(code, { cents, currency: row.currency, availability: row.availability });
+            }
+        }
+        return byCode;
+    }, [livePricing]);
+    const handleBook = (option) => {
+        if (!hit)
+            return;
+        if (onBookOption) {
+            onBookOption(hit, departure, option);
+        }
+        else if (onBookDeparture) {
+            onBookDeparture(hit, departure);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: tableMessages.optionsHeading }), options.length === 0 ? (_jsx("div", { className: "text-xs text-muted-foreground", children: tableMessages.noOptions })) : (_jsx("ul", { className: "divide-y rounded-md border bg-background", children: options.map((option) => {
+                    const canBook = isDepartureBookable(departure) &&
+                        hit != null &&
+                        (onBookOption != null || onBookDeparture != null);
+                    const livePrice = option.code ? livePriceByCode.get(option.code) : undefined;
+                    return (_jsxs("li", { className: "flex flex-wrap items-center justify-between gap-3 px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "font-medium", children: option.name }), option.description && (_jsx("span", { className: "text-xs text-muted-foreground", children: option.description }))] }), _jsxs("div", { className: "flex items-center gap-4", children: [livePrice ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-right text-xs capitalize text-muted-foreground", children: livePrice.availability.replace(/_/g, " ") }), _jsxs("div", { className: "text-right text-xs text-muted-foreground", children: [tableMessages.priceFrom, " ", _jsx("span", { className: "font-medium text-foreground tabular-nums", children: formatPriceCents(livePrice.cents, livePrice.currency) })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-right text-xs text-muted-foreground", children: departureRemaining != null ? (_jsxs("span", { className: "tabular-nums", children: [_jsx("span", { className: "font-medium text-foreground", children: departureRemaining }), " ", tableMessages.remainingLabel] })) : ("—") }), departurePriceCents != null && (_jsxs("div", { className: "text-right text-xs text-muted-foreground", children: [tableMessages.priceFrom, " ", _jsx("span", { className: "font-medium text-foreground tabular-nums", children: formatPriceCents(departurePriceCents, currency) })] }))] })), canBook && (_jsx(Button, { size: "sm", variant: "outline", onClick: (event) => {
+                                            event.stopPropagation();
+                                            handleBook(option);
+                                        }, children: messages.book }))] })] }, option.id));
+                }) }))] }));
+}

package/dist/components/catalog-detail-parts.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from "react";
+import type { CatalogUiMessages } from "../i18n/messages.js";
+import type { CatalogDetailEnrichment, CatalogSearchHit } from "../index.js";
+import type { CatalogDetailSheetWidth } from "./catalog-detail-sheet.js";
+/**
+ * Header-side "From {price}" indicator. Prefers per-departure
+ * `lowestPriceCents` minimums (only counting open/limited slots); falls
+ * back to the product's indexed `sellAmountCents` so always-on products
+ * still surface a price. Renders nothing when neither source has a
+ * value — the rest of the sheet still carries pricing detail elsewhere.
+ */
+export declare function ProductPriceFrom({ enrichment, fields, messages, }: {
+    enrichment: CatalogDetailEnrichment | null;
+    fields: Record<string, unknown>;
+    messages: CatalogUiMessages["catalogPage"]["detail"];
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function DefaultMediaGrid({ media, }: {
+    media: NonNullable<CatalogDetailEnrichment["media"]>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function sheetWidthClass(width: CatalogDetailSheetWidth): string;
+export declare function Section({ title, children }: {
+    title?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AttributeList({ entries, formatters, messages, renderSupplierLink, }: {
+    entries: Array<[string, unknown]>;
+    formatters?: Record<string, (value: unknown) => ReactNode>;
+    messages: CatalogUiMessages["catalogPage"];
+    renderSupplierLink?: (supplierId: string, displayName: string) => ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ArrayBadges({ value }: {
+    value: unknown;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function toStringArray(value: unknown): string[];
+/**
+ * Inline tag editor used by the catalog detail sheet. Holds a local
+ * working list so chip add/remove feels immediate; the indexed `value`
+ * re-syncs whenever the hit refetches after a successful mutation.
+ */
+export declare function InlineTagsEditor({ hit, value, onChange, placeholder, }: {
+    hit: CatalogSearchHit;
+    value: string[];
+    onChange: (hit: CatalogSearchHit, next: string[]) => Promise<void> | void;
+    placeholder: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function defaultFormat(field: string, value: unknown, messages: CatalogUiMessages["catalogPage"]): ReactNode;
+/**
+ * Turn camelCase / snake_case / dotted paths into a human-readable label.
+ * `defaultQuantity` → "Default quantity"
+ * `seller.operator_id` → "Seller · operator id"
+ * `text_embedding` → "Text embedding"
+ */
+export declare function humanize(key: string): string;
+export declare function initialsOf(name: string): string;
+export declare function stringOr<T>(value: unknown, fallback: T): string | T;
+export declare function formatPriceCents(cents: number, currency?: string | null): string;
+export declare function formatTemplate(template: string, values: Record<string, string | number>): string;
+/**
+ * Compact, copyable id chip. Sourced cruise ids embed the full upstream
+ * SourceRef (`crus_sr_<base64url>`) so they're long; truncate the display,
+ * keep the full id on hover (`title`), and copy it on click.
+ */
+export declare function IdChip({ id }: {
+    id: string;
+}): ReactNode;
+/**
+ * One cabin in the cruise Cabins tab: photo gallery (carousel + lightbox),
+ * name + size/capacity, description, and amenity chips.
+ */
+//# sourceMappingURL=catalog-detail-parts.d.ts.map

package/dist/components/catalog-detail-parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-detail-parts.d.ts","sourceRoot":"","sources":["../../src/components/catalog-detail-parts.tsx"],"names":[],"mappings":"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"}

package/dist/components/catalog-detail-parts.js

@@ -0,0 +1,282 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Input } from "@voyant-travel/ui/components/input";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Check, Copy, ExternalLink, Loader2, Minus, Plus, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useCatalogUiMessagesOrDefault } from "../i18n/index.js";
+/**
+ * Header-side "From {price}" indicator. Prefers per-departure
+ * `lowestPriceCents` minimums (only counting open/limited slots); falls
+ * back to the product's indexed `sellAmountCents` so always-on products
+ * still surface a price. Renders nothing when neither source has a
+ * value — the rest of the sheet still carries pricing detail elsewhere.
+ */
+export function ProductPriceFrom({ enrichment, fields, messages, }) {
+    const departureMin = (enrichment?.departures ?? []).reduce((acc, d) => {
+        if (typeof d.lowestPriceCents !== "number")
+            return acc;
+        if (d.status === "sold_out" || d.status === "closed" || d.status === "cancelled")
+            return acc;
+        if (acc && acc.amount <= d.lowestPriceCents)
+            return acc;
+        return { amount: d.lowestPriceCents, currency: d.currency ?? null };
+    }, null);
+    const fallbackAmount = typeof fields.sellAmountCents === "number"
+        ? fields.sellAmountCents
+        : typeof fields.sellAmountCents === "string"
+            ? Number(fields.sellAmountCents)
+            : null;
+    const fallbackCurrency = typeof fields.sellCurrency === "string" ? fields.sellCurrency : null;
+    const amount = departureMin?.amount ?? (Number.isFinite(fallbackAmount) ? fallbackAmount : null);
+    const currency = departureMin?.currency ?? fallbackCurrency;
+    if (amount == null)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col items-end whitespace-nowrap", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: messages.priceFromLabel }), _jsx("span", { className: "font-semibold text-base tabular-nums", children: formatPriceCents(amount, currency ?? undefined) })] }));
+}
+export function DefaultMediaGrid({ media, }) {
+    return (_jsx("div", { className: "grid grid-cols-3 gap-2", children: media.slice(0, 9).map((m, idx) => m.type === "image" || m.type == null ? (_jsx("a", { href: m.url, target: "_blank", rel: "noreferrer", className: "block aspect-square overflow-hidden rounded-md ring-1 ring-border hover:ring-primary", children: _jsx("img", { src: m.url, alt: m.caption ?? "", className: "h-full w-full object-cover", loading: "lazy" }) }, `${m.url}-${idx}`)) : (_jsx("a", { href: m.url, target: "_blank", rel: "noreferrer", className: "flex aspect-square items-center justify-center rounded-md bg-muted text-xs text-muted-foreground ring-1 ring-border hover:ring-primary", children: m.type }, `${m.url}-${idx}`))) }));
+}
+const SHEET_WIDTH_CLASSES = {
+    md: "max-w-md!",
+    lg: "max-w-lg!",
+    xl: "max-w-xl!",
+    "2xl": "max-w-2xl!",
+    "3xl": "max-w-3xl!",
+    "4xl": "max-w-4xl!",
+    "5xl": "max-w-5xl!",
+    "6xl": "max-w-6xl!",
+};
+export function sheetWidthClass(width) {
+    return SHEET_WIDTH_CLASSES[width] ?? width;
+}
+export function Section({ title, children }) {
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [title && (_jsx("h3", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: title })), children] }));
+}
+export function AttributeList({ entries, formatters, messages, renderSupplierLink, }) {
+    return (_jsx("div", { className: "divide-y rounded-lg border", children: entries.map(([key, value]) => (_jsxs("div", { className: "grid grid-cols-[140px_1fr] items-baseline gap-4 px-3 py-2.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: attributeLabel(key, messages) }), _jsx("span", { className: "text-sm break-words", children: renderAttributeValue(key, value, { formatters, messages, renderSupplierLink }) })] }, key))) }));
+}
+function attributeLabel(key, messages) {
+    const overrides = messages.detail.attributeLabels;
+    if (key === "sellAmount")
+        return overrides.sellAmount;
+    if (key === "supplierId")
+        return overrides.supplierId;
+    return humanize(key);
+}
+function renderAttributeValue(key, value, ctx) {
+    const { formatters, messages, renderSupplierLink } = ctx;
+    // Synthetic "Sell amount" — value is `{ amountCents, currency }`,
+    // emitted by the attribute-reshaping pass above.
+    if (key === "sellAmount" && value && typeof value === "object" && "amountCents" in value) {
+        const amountCents = value.amountCents;
+        const currency = value.currency;
+        const cents = typeof amountCents === "number" ? amountCents : Number(amountCents);
+        if (!Number.isFinite(cents))
+            return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+        return (_jsx("span", { className: "font-medium tabular-nums", children: formatPriceCents(cents, typeof currency === "string" ? currency : undefined) }));
+    }
+    // Supplier — render an operator-supplied link to the supplier record,
+    // falling back to the plain formatter when no renderer is wired.
+    if (key === "supplierId" && renderSupplierLink && typeof value === "string" && value) {
+        const displayName = typeof formatters?.[key] === "function"
+            ? String(formatters[key](value) ?? value)
+            : value;
+        return renderSupplierLink(value, displayName);
+    }
+    // Visibility — render as a badge so it reads at a glance.
+    if (key === "visibility" && typeof value === "string" && value) {
+        return (_jsx(Badge, { variant: value === "public" ? "default" : "secondary", className: "capitalize", children: value }));
+    }
+    return formatters?.[key] ? formatters[key](value) : defaultFormat(key, value, messages);
+}
+export function ArrayBadges({ value }) {
+    if (!Array.isArray(value) || value.length === 0) {
+        return _jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" });
+    }
+    return (_jsx("div", { className: "flex flex-wrap gap-1.5", children: value.map((v, i) => (_jsx(Badge, { variant: "secondary", className: "font-normal", children: String(v) }, `${String(v)}-${i}`))) }));
+}
+export function toStringArray(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.filter((v) => typeof v === "string" && v.length > 0);
+}
+/**
+ * Inline tag editor used by the catalog detail sheet. Holds a local
+ * working list so chip add/remove feels immediate; the indexed `value`
+ * re-syncs whenever the hit refetches after a successful mutation.
+ */
+export function InlineTagsEditor({ hit, value, onChange, placeholder, }) {
+    const messages = useCatalogUiMessagesOrDefault().catalogPage.detail;
+    // Seed the working set from the indexed value on each *hit change*
+    // only. The catalog search refetches after every mutation, but
+    // Typesense reindex is asynchronous — for a few seconds after the
+    // PATCH the indexed hit still carries the pre-mutation tags. If we
+    // re-synced from `value` on every render, those stale tags would
+    // clobber the chip the user just added. Pinning the seed to `hit.id`
+    // means a different product re-seeds, but our own optimistic state
+    // sticks while the index catches up.
+    const [tags, setTags] = useState(value);
+    const [draft, setDraft] = useState("");
+    const [pending, setPending] = useState(false);
+    const inputRef = useRef(null);
+    const seededIdRef = useRef(null);
+    useEffect(() => {
+        if (seededIdRef.current === hit.id)
+            return;
+        seededIdRef.current = hit.id;
+        setTags(value);
+        setDraft("");
+    }, [hit.id, value]);
+    const commit = async (next) => {
+        const previous = tags;
+        setTags(next);
+        setPending(true);
+        try {
+            await onChange(hit, next);
+        }
+        catch {
+            setTags(previous);
+        }
+        finally {
+            setPending(false);
+        }
+    };
+    const addTag = () => {
+        const trimmed = draft.trim().replace(/,+$/, "");
+        if (!trimmed)
+            return;
+        if (tags.includes(trimmed)) {
+            setDraft("");
+            return;
+        }
+        void commit([...tags, trimmed]);
+        setDraft("");
+    };
+    const removeTag = (tag) => {
+        void commit(tags.filter((t) => t !== tag));
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === ",") {
+            event.preventDefault();
+            addTag();
+            return;
+        }
+        if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+            event.preventDefault();
+            removeTag(tags[tags.length - 1]);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [tags.map((tag) => (_jsxs(Badge, { variant: "secondary", className: "gap-1 font-normal", children: [tag, _jsx("button", { type: "button", "aria-label": `Remove ${tag}`, className: "rounded-full hover:text-destructive", onClick: () => removeTag(tag), children: _jsx(X, { className: "h-3 w-3" }) })] }, tag))), _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-full border border-dashed px-2 py-0.5 text-xs text-muted-foreground hover:border-foreground hover:text-foreground", onClick: () => inputRef.current?.focus(), children: [_jsx(Plus, { className: "h-3 w-3" }), messages.addTag] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, onBlur: () => {
+                            if (draft.trim())
+                                addTag();
+                        }, placeholder: placeholder, className: "h-8 max-w-xs text-sm" }), pending && _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })] })] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Field formatting
+// ─────────────────────────────────────────────────────────────────────────────
+export function defaultFormat(field, value, messages) {
+    if (value == null || value === "") {
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    }
+    // Booleans (and string "true"/"false" — products schema stores some as strings)
+    if (typeof value === "boolean" || value === "true" || value === "false") {
+        const truthy = value === true || value === "true";
+        return (_jsxs("span", { className: cn("inline-flex items-center gap-1 text-sm", truthy ? "text-emerald-600" : "text-muted-foreground"), children: [truthy ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(Minus, { className: "h-3.5 w-3.5" }), truthy ? messages.values.yes : messages.values.no] }));
+    }
+    // URLs (image, map, hero)
+    if (typeof value === "string" && /^https?:\/\//.test(value)) {
+        return (_jsxs("a", { href: value, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1 text-sm text-primary hover:underline", children: [messages.values.open, _jsx(ExternalLink, { className: "h-3 w-3" })] }));
+    }
+    // JSON-stringified ISO date — projection writes dates via JSON.stringify
+    // so they arrive wrapped in quotes ("\"2026-04-30T17:41:01Z\"")
+    if (typeof value === "string") {
+        const stripped = value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value;
+        if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(stripped)) {
+            const d = new Date(stripped);
+            if (!Number.isNaN(d.getTime())) {
+                return (_jsx("time", { dateTime: stripped, className: "text-sm", children: new Intl.DateTimeFormat(undefined, {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                    }).format(d) }));
+            }
+        }
+        if (/^\d{4}-\d{2}-\d{2}$/.test(stripped)) {
+            return _jsx("span", { className: "text-sm", children: stripped });
+        }
+    }
+    // Money fields stored as cents (integer string or number)
+    if (/Cents$/.test(field)) {
+        const num = typeof value === "number" ? value : Number(value);
+        if (Number.isFinite(num)) {
+            return (_jsx("span", { className: "font-medium text-sm", children: new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(num / 100) }));
+        }
+    }
+    // IDs — render in mono so they're visually distinct
+    if (/Id$|^id$/.test(field) && typeof value === "string") {
+        return _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs", children: value });
+    }
+    // Numeric strings (Typesense stores everything as string)
+    if (typeof value === "string" && /^-?\d+(\.\d+)?$/.test(value)) {
+        return _jsx("span", { className: "text-sm tabular-nums", children: value });
+    }
+    return _jsx("span", { className: "text-sm", children: String(value) });
+}
+/**
+ * Turn camelCase / snake_case / dotted paths into a human-readable label.
+ * `defaultQuantity` → "Default quantity"
+ * `seller.operator_id` → "Seller · operator id"
+ * `text_embedding` → "Text embedding"
+ */
+export function humanize(key) {
+    const pretty = key
+        .replace(/\./g, " · ")
+        .replace(/_/g, " ")
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/^(.)/, (m) => m.toUpperCase())
+        .toLowerCase();
+    return pretty.charAt(0).toUpperCase() + pretty.slice(1);
+}
+export function initialsOf(name) {
+    return (name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((w) => w[0]?.toUpperCase() ?? "")
+        .join("") || "?");
+}
+export function stringOr(value, fallback) {
+    return typeof value === "string" && value.length > 0 ? value : fallback;
+}
+export function formatPriceCents(cents, currency) {
+    if (!currency) {
+        return new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format(cents / 100);
+    }
+    return new Intl.NumberFormat(undefined, {
+        style: "currency",
+        currency,
+        maximumFractionDigits: 0,
+    }).format(cents / 100);
+}
+export function formatTemplate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = values[key];
+        return value === undefined ? "" : String(value);
+    });
+}
+/**
+ * Compact, copyable id chip. Sourced cruise ids embed the full upstream
+ * SourceRef (`crus_sr_<base64url>`) so they're long; truncate the display,
+ * keep the full id on hover (`title`), and copy it on click.
+ */
+export function IdChip({ id }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsxs("button", { type: "button", title: id, onClick: () => {
+            void navigator.clipboard?.writeText(id).then(() => {
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1200);
+            }, () => undefined);
+        }, className: "inline-flex max-w-[14rem] items-center gap-1 rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { className: "truncate", children: id }), copied ? (_jsx(Check, { className: "h-3 w-3 shrink-0 text-emerald-500" })) : (_jsx(Copy, { className: "h-3 w-3 shrink-0 opacity-60" }))] }));
+}