@voyant-travel/catalog-react 0.117.2

package/dist/components/catalog-range-filter.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { Popover, PopoverContent, PopoverTrigger } from "@voyant-travel/ui/components/popover";
+import { Separator } from "@voyant-travel/ui/components/separator";
+import { PlusCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useCatalogUiMessagesOrDefault } from "../i18n/index.js";
+/**
+ * Numeric-range filter — popover trigger styled like the faceted filter
+ * for visual consistency. When active, the trigger shows the range as a
+ * compact badge ("≥ €100", "≤ €500", or "€100 – €500").
+ */
+export function CatalogRangeFilter({ label, value, onChange, step = 1, minPlaceholder, maxPlaceholder, format = "number", currency, }) {
+    const messages = useCatalogUiMessagesOrDefault().catalogPage.filtersUi;
+    const resolvedMinPlaceholder = minPlaceholder ?? messages.min;
+    const resolvedMaxPlaceholder = maxPlaceholder ?? messages.max;
+    // Track local string state so users can type freely without the parent
+    // re-rendering between keystrokes.
+    const [minText, setMinText] = useState(value?.gte != null ? String(value.gte) : "");
+    const [maxText, setMaxText] = useState(value?.lte != null ? String(value.lte) : "");
+    useEffect(() => {
+        setMinText(value?.gte != null ? String(value.gte) : "");
+        setMaxText(value?.lte != null ? String(value.lte) : "");
+    }, [value]);
+    const apply = () => {
+        const gte = parseNumber(minText);
+        const lte = parseNumber(maxText);
+        if (gte == null && lte == null) {
+            onChange(undefined);
+            return;
+        }
+        onChange({ gte: gte ?? undefined, lte: lte ?? undefined });
+    };
+    const clear = () => {
+        setMinText("");
+        setMaxText("");
+        onChange(undefined);
+    };
+    const active = value?.gte != null || value?.lte != null;
+    const display = active ? formatRange(value, format, currency) : null;
+    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", className: "h-8 border-dashed" }), children: [_jsx(PlusCircle, { className: "mr-2 h-4 w-4" }), label, active && display && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }), _jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: display })] }))] }), _jsx(PopoverContent, { className: "w-[260px] p-3", align: "start", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", inputMode: "decimal", step: step, placeholder: resolvedMinPlaceholder, value: minText, onChange: (e) => setMinText(e.target.value), className: "h-8" }), _jsx("span", { className: "text-muted-foreground text-xs", children: messages.to }), _jsx(Input, { type: "number", inputMode: "decimal", step: step, placeholder: resolvedMaxPlaceholder, value: maxText, onChange: (e) => setMaxText(e.target.value), className: "h-8" })] }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: clear, disabled: !active && !minText && !maxText, children: messages.clear }), _jsx(Button, { size: "sm", onClick: apply, children: messages.apply })] })] }) })] }));
+}
+function parseNumber(s) {
+    if (!s.trim())
+        return null;
+    const n = Number(s);
+    return Number.isFinite(n) ? n : null;
+}
+function formatRange(v, format, currency) {
+    if (!v)
+        return null;
+    const fmt = (n) => {
+        if (format === "currency" && currency) {
+            return new Intl.NumberFormat(undefined, {
+                style: "currency",
+                currency,
+                maximumFractionDigits: 0,
+            }).format(n);
+        }
+        return new Intl.NumberFormat().format(n);
+    };
+    if (v.gte != null && v.lte != null)
+        return `${fmt(v.gte)} – ${fmt(v.lte)}`;
+    if (v.gte != null)
+        return `≥ ${fmt(v.gte)}`;
+    if (v.lte != null)
+        return `≤ ${fmt(v.lte)}`;
+    return null;
+}

package/dist/components/catalog-search-page.d.ts

@@ -0,0 +1,239 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { type ReactNode } from "react";
+import type { CatalogSearchHit } from "../index.js";
+import type { CatalogCardConfig } from "./catalog-card.js";
+import type { CatalogDetailAction, CatalogDetailEnrichment, CatalogDetailRenderSlot, CatalogDetailSheetProps } from "./catalog-detail-sheet.js";
+import { type CatalogFilterSelections } from "./catalog-search-tab-panel.js";
+/**
+ * Result sort options. Mirrors `CatalogSearchSort` from `@voyant-travel/catalog-react`
+ * (not re-exported there, so kept as a literal union here). The shell maps the
+ * selection straight onto the search request's `sort`.
+ */
+export type CatalogSortOption = "relevance" | "price-asc" | "price-desc" | "departure-asc" | "newest";
+/**
+ * Declares a filter on a tab. Two kinds:
+ *   - `facet`  (default) — multi-select against live facet buckets. Hidden
+ *                          when the search response yields no buckets and
+ *                          nothing is currently selected.
+ *   - `range`  — numeric min/max range. Always visible (no facet response
+ *                  needed). Use `format: "currency"` for money fields
+ *                  stored as integer cents (e.g. `sellAmountCents`).
+ */
+export type CatalogFilterField = CatalogFacetFilterField | CatalogRangeFilterField;
+export interface CatalogFacetFilterField {
+    kind?: "facet";
+    /** Field name on the indexer document (e.g. "status", "bookingMode"). */
+    field: string;
+    /** Human-readable group label (already localized). */
+    label: string;
+    /**
+     * Optional value formatter. Use it when the underlying field is an ID and
+     * you want the dropdown to show the human-readable label instead — e.g.
+     * resolving `lineSupplierId` against a `Map<id, name>`. Returns the raw
+     * value as a string by default.
+     */
+    formatValue?: (value: string | number) => string;
+    /**
+     * How to order the facet buckets. Default `"count"` keeps the index's
+     * descending-by-count order. `"value-desc"`/`"value-asc"` sort by the bucket
+     * value numerically when possible (e.g. star ratings 5 → 0), else
+     * lexicographically.
+     */
+    sortValues?: "count" | "value-desc" | "value-asc";
+}
+export interface CatalogRangeFilterField {
+    kind: "range";
+    field: string;
+    label: string;
+    step?: number;
+    minPlaceholder?: string;
+    maxPlaceholder?: string;
+    /** When the field stores cents, set `"currency"` + `currency`. */
+    format?: "number" | "currency";
+    currency?: string;
+}
+/**
+ * One tab in the catalog search page. Each tab maps to a single vertical
+ * (`products`, `cruises`, `accommodations`, etc.) and supplies its own column
+ * definitions so per-vertical UI packages own their own visual language.
+ */
+export interface CatalogSearchTab {
+    /** Stable id used as the TabsTrigger value + queryKey segment. */
+    id: string;
+    /** Human-readable tab label (already localized). */
+    label: string;
+    /** The catalog vertical to query — mapped to the slice's `vertical`. */
+    vertical: string;
+    /**
+     * Optional row/card open override. When set, clicking a result calls this
+     * instead of opening the in-page detail sheet — use it to route to a
+     * full, URL-addressable detail page (e.g. open in a new tab). Verticals
+     * without a dedicated detail page omit it and keep the sheet.
+     */
+    onOpenDetail?: (hit: CatalogSearchHit) => void;
+    /**
+     * Per-tab column definitions for the results data table. Each column
+     * receives the full `CatalogSearchHit` and projects whatever fields the
+     * vertical's indexer document carries.
+     */
+    columns: ColumnDef<CatalogSearchHit, unknown>[];
+    /**
+     * Optional facet declarations. When set, the page requests these as
+     * `facets` in the search request and renders a chip group per field
+     * above the results. Click-to-toggle multi-select; selections are
+     * passed back as `filters[]`.
+     */
+    filterFields?: CatalogFilterField[];
+    /**
+     * Optional empty-state ReactNode — shown when the tab has no hits for
+     * the current query. Defaults to a simple "no results" message.
+     */
+    emptyState?: ReactNode;
+    /**
+     * Indexer field that carries the entity's primary image URL. Defaults
+     * to `thumbnailUrl`. Cruises / charters use `heroImageUrl`.
+     */
+    imageField?: string;
+    /**
+     * Optional merchandising-card mapping. When set, the tab gains a grid
+     * (card) view alongside the table, and the grid/list toggle appears. The
+     * card projects indexed fields only (no extra fetch) — see `CatalogCard`.
+     */
+    card?: CatalogCardConfig;
+    /**
+     * Non-relevance sort options to offer for this tab. `relevance` is always
+     * first. Defaults to `["price-asc","price-desc","newest"]` when the card
+     * declares a price field, else `["newest"]`.
+     */
+    sorts?: CatalogSortOption[];
+    /**
+     * Optional per-field formatters used by the detail sheet to render
+     * human-readable values (e.g. resolve `lineSupplierId` → supplier name).
+     * The same `formatValue` you pass on a `CatalogFacetFilterField` should
+     * usually appear here too.
+     */
+    detailFormatters?: Record<string, (value: unknown) => ReactNode>;
+    /**
+     * Optional footer actions shown at the bottom of the detail sheet
+     * (e.g. "Open in editor" → router push). Use them when you want a row
+     * click to do more than just "view details."
+     */
+    detailActions?: CatalogDetailAction[];
+    /** Optional sheet width override for this tab's detail surface. */
+    detailSheetWidth?: CatalogDetailSheetProps["width"];
+    /** Optional header action area for this tab's detail sheet. */
+    detailHeaderExtras?: CatalogDetailSheetProps["headerExtras"];
+    /** Optional dedicated brochure section for this tab's detail sheet. */
+    renderDetailBrochure?: CatalogDetailRenderSlot;
+    /** Optional media renderer for this tab's detail sheet. */
+    renderDetailMedia?: CatalogDetailRenderSlot;
+    /** Optional richer itinerary day renderer for this tab's detail sheet. */
+    renderDetailItineraryDay?: CatalogDetailSheetProps["renderItineraryDay"];
+    /** Optional extra sections rendered above this tab's detail footer actions. */
+    renderDetailExtraSections?: CatalogDetailRenderSlot;
+    /**
+     * Optional enrichment loader. Called when the detail sheet opens for
+     * a hit. Returns the rich content shape (description, itinerary,
+     * media, options, policies, supplier) so the sheet can render full
+     * detail without expanding the search-time projection — keeps the
+     * search index lean and lets every entity carry rich content via
+     * the catalog content service.
+     *
+     * Templates wire this per-vertical to call `/v1/admin/<vertical>/:id/content`
+     * (which `getProductContent` / `getCruiseContent` / etc back).
+     * Returns null when the entity has no content (rare — surfaces as a
+     * subtle "no extra detail" hint in the sheet).
+     */
+    onLoadDetail?: (hit: CatalogSearchHit) => Promise<CatalogDetailEnrichment | null>;
+    /** Lazy per-cabin pricing loader for cruise departures (see detail sheet). */
+    onLoadDeparturePricing?: CatalogDetailSheetProps["onLoadDeparturePricing"];
+    /**
+     * Called when the operator clicks a per-departure Book button on a
+     * catalog row. Templates typically navigate to the catalog booking
+     * journey with the departure id pinned.
+     */
+    onBookDeparture?: (hit: CatalogSearchHit, departure: NonNullable<CatalogDetailEnrichment["departures"]>[number]) => void;
+    /** Per-option Book button inside the expanded departure panel. */
+    onBookOption?: (hit: CatalogSearchHit, departure: NonNullable<CatalogDetailEnrichment["departures"]>[number], option: NonNullable<CatalogDetailEnrichment["options"]>[number]) => void;
+}
+export interface CatalogSearchPageProps {
+    tabs: CatalogSearchTab[];
+    /** Default tab id; falls back to the first tab. */
+    defaultTab?: string;
+    /** Items per page in the list view (grid view uses a smaller fixed size). Default `40`. */
+    pageSize?: number;
+    /**
+     * Optional title above the search bar. Templates that use TanStack
+     * Start's page-level title elements should pass null and render their
+     * own.
+     */
+    title?: ReactNode;
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /**
+     * Hide the built-in search input. Use when an embedding surface provides its
+     * own unified search box and drives `query`/`onQueryChange` externally.
+     */
+    hideSearchInput?: boolean;
+    /** Debounce on keystrokes, milliseconds. Default 200. */
+    queryDebounceMs?: number;
+    /**
+     * Controlled active-tab id. When provided, callers must also pass
+     * `onActiveTabChange` and the tab state is owned by the parent (e.g. a
+     * router-driven URL state). Omit for uncontrolled internal state.
+     */
+    activeTab?: string;
+    onActiveTabChange?: (tabId: string) => void;
+    /** Hide the tab switcher when the parent route already selects one vertical. */
+    showTabs?: boolean;
+    /** Controlled query string (already debounced if you want to skip the debounce here). */
+    query?: string;
+    onQueryChange?: (q: string) => void;
+    /** Controlled current page (1-indexed) for the active tab. */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Controlled grid/list view mode (e.g. URL-persisted). Uncontrolled when omitted. */
+    view?: "grid" | "list";
+    onViewChange?: (view: "grid" | "list") => void;
+    /** Controlled sort option (e.g. URL-persisted). Uncontrolled when omitted. */
+    sort?: CatalogSortOption;
+    onSortChange?: (sort: CatalogSortOption) => void;
+    /** Controlled filter selections (e.g. URL-persisted). Uncontrolled when omitted. */
+    filters?: CatalogFilterSelections;
+    onFiltersChange?: (filters: CatalogFilterSelections) => void;
+    /** Catalog slice market override. */
+    market?: string;
+    /** Catalog slice locale override. */
+    locale?: string;
+    /** Optional controls rendered next to the search input. */
+    toolbarEnd?: ReactNode;
+    /** Optional default detail sheet width for all tabs. Tabs may override it. */
+    detailSheetWidth?: CatalogDetailSheetProps["width"];
+    /** Optional default header action area for all tab detail sheets. */
+    detailHeaderExtras?: CatalogDetailSheetProps["headerExtras"];
+    /** Optional default brochure section for all tab detail sheets. */
+    renderDetailBrochure?: CatalogDetailRenderSlot;
+    /** Optional default media renderer for all tab detail sheets. */
+    renderDetailMedia?: CatalogDetailRenderSlot;
+    /** Optional default richer itinerary day renderer for all tab detail sheets. */
+    renderDetailItineraryDay?: CatalogDetailSheetProps["renderItineraryDay"];
+    /** Optional default extra sections rendered above detail footer actions. */
+    renderDetailExtraSections?: CatalogDetailRenderSlot;
+    /** Optional supplier-link renderer for the detail sheet's Attributes tab. */
+    renderSupplierLink?: CatalogDetailSheetProps["renderSupplierLink"];
+    /**
+     * Optional inline tags editor handler for the detail sheet. When set,
+     * the sheet's Tags row becomes editable; the callback persists the
+     * next tag list (typically a PATCH to the entity).
+     */
+    onTagsChange?: CatalogDetailSheetProps["onTagsChange"];
+}
+/**
+ * Generic tabbed search shell. Owns the search input, mode toggle,
+ * tab state, and per-tab data fetching (search + facets + pagination).
+ * Per-vertical visuals come from the tab's column definitions so this
+ * shell stays vertical-agnostic.
+ */
+export declare function CatalogSearchPage({ tabs, defaultTab, pageSize, title, searchPlaceholder, hideSearchInput, queryDebounceMs, activeTab: activeTabProp, onActiveTabChange, showTabs, query: queryProp, onQueryChange, page: pageProp, onPageChange, view, onViewChange, sort, onSortChange, filters, onFiltersChange, market, locale, toolbarEnd, detailSheetWidth, detailHeaderExtras, renderDetailBrochure, renderDetailMedia, renderDetailItineraryDay, renderDetailExtraSections, renderSupplierLink, onTagsChange, }: CatalogSearchPageProps): import("react/jsx-runtime").JSX.Element;
+export type { CatalogFilterSelections } from "./catalog-search-tab-panel.js";
+//# sourceMappingURL=catalog-search-page.d.ts.map

package/dist/components/catalog-search-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-search-page.d.ts","sourceRoot":"","sources":["../../src/components/catalog-search-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAItD,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAA;AAEnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AACnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,KAAK,uBAAuB,EAAmB,MAAM,+BAA+B,CAAA;AAE7F;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eAAe,GACf,QAAQ,CAAA;AAEZ;;;;;;;;GAQG;AACH,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG,uBAAuB,CAAA;AAElF,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAA;IAChD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,WAAW,CAAA;CAClD;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kEAAkE;IAClE,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAA;IACV,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC9C;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC,gBAAgB,EAAE,OAAO,CAAC,EAAE,CAAA;IAC/C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAA;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,SAAS,CAAC,CAAA;IAChE;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,EAAE,CAAA;IACrC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAA;IACnD,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,cAAc,CAAC,CAAA;IAC5D,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,uBAAuB,CAAA;IAC9C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,uBAAuB,CAAA;IAC3C,0EAA0E;IAC1E,wBAAwB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAA;IACxE,+EAA+E;IAC/E,yBAAyB,CAAC,EAAE,uBAAuB,CAAA;IACnD;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,OAAO,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAA;IACjF,8EAA8E;IAC9E,sBAAsB,CAAC,EAAE,uBAAuB,CAAC,wBAAwB,CAAC,CAAA;IAC1E;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAChB,GAAG,EAAE,gBAAgB,EACrB,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAClE,IAAI,CAAA;IACT,kEAAkE;IAClE,YAAY,CAAC,EAAE,CACb,GAAG,EAAE,gBAAgB,EACrB,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,EACrE,MAAM,EAAE,WAAW,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAC5D,IAAI,CAAA;CACV;AAID,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,gBAAgB,EAAE,CAAA;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC9C,8EAA8E;IAC9E,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAChD,oFAAoF;IACpF,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAC5D,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2DAA2D;IAC3D,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAA;IACnD,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,cAAc,CAAC,CAAA;IAC5D,mEAAmE;IACnE,oBAAoB,CAAC,EAAE,uBAAuB,CAAA;IAC9C,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,uBAAuB,CAAA;IAC3C,gFAAgF;IAChF,wBAAwB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAA;IACxE,4EAA4E;IAC5E,yBAAyB,CAAC,EAAE,uBAAuB,CAAA;IACnD,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAA;IAClE;;;;OAIG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAC,cAAc,CAAC,CAAA;CACvD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,UAAU,EACV,QAAa,EACb,KAAK,EACL,iBAAiB,EACjB,eAAuB,EACvB,eAAqB,EACrB,SAAS,EAAE,aAAa,EACxB,iBAAiB,EACjB,QAAe,EACf,KAAK,EAAE,SAAS,EAChB,aAAa,EACb,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,eAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,EAClB,YAAY,GACb,EAAE,sBAAsB,2CA0HxB;AAED,YAAY,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/components/catalog-search-page.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyant-travel/ui/components/tabs";
+import { Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useCatalogUiMessagesOrDefault } from "../i18n/index.js";
+import { CatalogTabPanel } from "./catalog-search-tab-panel.js";
+/**
+ * Generic tabbed search shell. Owns the search input, mode toggle,
+ * tab state, and per-tab data fetching (search + facets + pagination).
+ * Per-vertical visuals come from the tab's column definitions so this
+ * shell stays vertical-agnostic.
+ */
+export function CatalogSearchPage({ tabs, defaultTab, pageSize = 40, title, searchPlaceholder, hideSearchInput = false, queryDebounceMs = 200, activeTab: activeTabProp, onActiveTabChange, showTabs = true, query: queryProp, onQueryChange, page: pageProp, onPageChange, view, onViewChange, sort, onSortChange, filters, onFiltersChange, market, locale, toolbarEnd, detailSheetWidth, detailHeaderExtras, renderDetailBrochure, renderDetailMedia, renderDetailItineraryDay, renderDetailExtraSections, renderSupplierLink, onTagsChange, }) {
+    const messages = useCatalogUiMessagesOrDefault().catalogPage;
+    const resolvedSearchPlaceholder = searchPlaceholder ?? messages.searchPlaceholder;
+    const [internalActiveTab, setInternalActiveTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
+    const activeTab = activeTabProp ?? internalActiveTab;
+    const setActiveTab = (next) => {
+        if (onActiveTabChange)
+            onActiveTabChange(next);
+        if (activeTabProp == null)
+            setInternalActiveTab(next);
+    };
+    // The query input is always driven by the local typing buffer so
+    // keystrokes never get clobbered by a re-render triggered by our own
+    // debounced URL push. `queryProp` only resets the buffer when it
+    // changes from a value we did *not* emit (e.g. browser back/forward,
+    // or an external clear).
+    const [internalRawQuery, setInternalRawQuery] = useState(queryProp ?? "");
+    const [debouncedInternal, setDebouncedInternal] = useState(queryProp ?? "");
+    const lastEmittedRef = useRef(queryProp ?? "");
+    const rawQuery = internalRawQuery;
+    const debouncedQuery = queryProp != null ? queryProp : debouncedInternal;
+    useEffect(() => {
+        if (queryProp != null && queryProp !== lastEmittedRef.current) {
+            // External update (e.g. URL back/forward) — accept it and re-seed
+            // the typing buffer.
+            lastEmittedRef.current = queryProp;
+            setInternalRawQuery(queryProp);
+        }
+    }, [queryProp]);
+    useEffect(() => {
+        const t = setTimeout(() => {
+            if (internalRawQuery === lastEmittedRef.current)
+                return;
+            lastEmittedRef.current = internalRawQuery;
+            if (onQueryChange)
+                onQueryChange(internalRawQuery);
+            else
+                setDebouncedInternal(internalRawQuery);
+        }, queryDebounceMs);
+        return () => clearTimeout(t);
+    }, [internalRawQuery, queryDebounceMs, onQueryChange]);
+    if (tabs.length === 0) {
+        return (_jsx("div", { className: "rounded-md border border-dashed p-6 text-sm text-muted-foreground", children: messages.search.noTabsConfigured }));
+    }
+    const activeTabConfig = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
+    const shouldRenderTabs = showTabs && tabs.length > 1;
+    const renderTabBody = (tab) => (_jsxs(_Fragment, { children: [!hideSearchInput && (_jsxs("div", { className: "relative max-w-xl", children: [_jsx(Search, { className: "-translate-y-1/2 absolute top-1/2 left-3 h-4 w-4 text-muted-foreground" }), _jsx(Input, { type: "search", value: rawQuery, onChange: (e) => setInternalRawQuery(e.target.value), placeholder: resolvedSearchPlaceholder, className: "pl-9" })] })), _jsx(CatalogTabPanel, { tab: tab, query: debouncedQuery, market: market, locale: locale, pageSize: pageSize, page: tab.id === activeTab ? pageProp : undefined, onPageChange: tab.id === activeTab ? onPageChange : undefined, view: view, onViewChange: onViewChange, sort: sort, onSortChange: onSortChange, filters: filters, onFiltersChange: onFiltersChange, detailSheetWidth: detailSheetWidth, detailHeaderExtras: detailHeaderExtras, renderDetailBrochure: renderDetailBrochure, renderDetailMedia: renderDetailMedia, renderDetailItineraryDay: renderDetailItineraryDay, renderDetailExtraSections: renderDetailExtraSections, renderSupplierLink: renderSupplierLink, onTagsChange: onTagsChange, messages: messages })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [title, toolbarEnd ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: toolbarEnd })) : null, shouldRenderTabs ? (_jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [_jsx(TabsList, { children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, children: tab.label }, tab.id))) }), tabs.map((tab) => (_jsx(TabsContent, { value: tab.id, className: "mt-4 flex flex-col gap-4", children: renderTabBody(tab) }, tab.id)))] })) : (_jsx("div", { className: "flex flex-col gap-4", children: renderTabBody(activeTabConfig) }))] }));
+}

package/dist/components/catalog-search-tab-panel.d.ts

@@ -0,0 +1,42 @@
+import type { useCatalogUiMessagesOrDefault } from "../i18n/index.js";
+import { type CatalogDetailRenderSlot, type CatalogDetailSheetProps } from "./catalog-detail-sheet.js";
+import type { CatalogRangeFilterValue } from "./catalog-range-filter.js";
+import type { CatalogSearchTab, CatalogSortOption } from "./catalog-search-page.js";
+interface CatalogTabPanelProps {
+    tab: CatalogSearchTab;
+    query: string;
+    market?: string;
+    locale?: string;
+    pageSize: number;
+    /** Controlled page (1-indexed). Falls back to internal state when omitted. */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Controlled view mode / sort / filters. Fall back to internal state when omitted. */
+    view?: "grid" | "list";
+    onViewChange?: (view: "grid" | "list") => void;
+    sort?: CatalogSortOption;
+    onSortChange?: (sort: CatalogSortOption) => void;
+    filters?: CatalogFilterSelections;
+    onFiltersChange?: (filters: CatalogFilterSelections) => void;
+    detailSheetWidth?: CatalogDetailSheetProps["width"];
+    detailHeaderExtras?: CatalogDetailSheetProps["headerExtras"];
+    renderDetailBrochure?: CatalogDetailRenderSlot;
+    renderDetailMedia?: CatalogDetailRenderSlot;
+    renderDetailItineraryDay?: CatalogDetailSheetProps["renderItineraryDay"];
+    renderDetailExtraSections?: CatalogDetailRenderSlot;
+    renderSupplierLink?: CatalogDetailSheetProps["renderSupplierLink"];
+    onTagsChange?: CatalogDetailSheetProps["onTagsChange"];
+    messages: ReturnType<typeof useCatalogUiMessagesOrDefault>["catalogPage"];
+}
+/**
+ * Public (controlled) filter-selection shape. Both maps are optional so
+ * callers persisting to URL state can omit empties; the panel normalizes to
+ * `FilterSelections` internally.
+ */
+export interface CatalogFilterSelections {
+    facets?: Record<string, Array<string | number>>;
+    ranges?: Record<string, CatalogRangeFilterValue>;
+}
+export declare function CatalogTabPanel({ tab, query, market, locale, pageSize, page: pageProp, onPageChange, view: viewProp, onViewChange, sort: sortProp, onSortChange, filters: filtersProp, onFiltersChange, detailSheetWidth, detailHeaderExtras, renderDetailBrochure, renderDetailMedia, renderDetailItineraryDay, renderDetailExtraSections, renderSupplierLink, onTagsChange, messages, }: CatalogTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=catalog-search-tab-panel.d.ts.map

package/dist/components/catalog-search-tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-search-tab-panel.d.ts","sourceRoot":"","sources":["../../src/components/catalog-search-tab-panel.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,kBAAkB,CAAA;AAGrE,OAAO,EACL,KAAK,uBAAuB,EAE5B,KAAK,uBAAuB,EAC7B,MAAM,2BAA2B,CAAA;AAElC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,KAAK,EAEV,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAA;AAKjC,UAAU,oBAAoB;IAC5B,GAAG,EAAE,gBAAgB,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC9C,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAChD,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAC5D,gBAAgB,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAA;IACnD,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,cAAc,CAAC,CAAA;IAC5D,oBAAoB,CAAC,EAAE,uBAAuB,CAAA;IAC9C,iBAAiB,CAAC,EAAE,uBAAuB,CAAA;IAC3C,wBAAwB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAA;IACxE,yBAAyB,CAAC,EAAE,uBAAuB,CAAA;IACnD,kBAAkB,CAAC,EAAE,uBAAuB,CAAC,oBAAoB,CAAC,CAAA;IAClE,YAAY,CAAC,EAAE,uBAAuB,CAAC,cAAc,CAAC,CAAA;IACtD,QAAQ,EAAE,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC,aAAa,CAAC,CAAA;CAC1E;AAcD;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAA;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;CACjD;AAED,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,OAAO,EAAE,WAAW,EACpB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,iBAAiB,EACjB,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,EAClB,YAAY,EACZ,QAAQ,GACT,EAAE,oBAAoB,2CA+RtB"}

package/dist/components/catalog-search-tab-panel.js

@@ -0,0 +1,199 @@
+"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 { DataTable } from "@voyant-travel/ui/components/data-table";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { ToggleGroup, ToggleGroupItem } from "@voyant-travel/ui/components/toggle-group";
+import { ChevronLeft, ChevronRight, LayoutGrid, List } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useCatalogSearch } from "../index.js";
+import { CatalogCard } from "./catalog-card.js";
+import { CatalogDetailSheet, } from "./catalog-detail-sheet.js";
+import { CatalogFilterRail } from "./catalog-filter-rail.js";
+// Grid cards are bigger, so show fewer per page; the dense list view shows more.
+const GRID_PAGE_SIZE = 15;
+const EMPTY_SELECTIONS = { facets: {}, ranges: {} };
+export function CatalogTabPanel({ tab, query, market, locale, pageSize, page: pageProp, onPageChange, view: viewProp, onViewChange, sort: sortProp, onSortChange, filters: filtersProp, onFiltersChange, detailSheetWidth, detailHeaderExtras, renderDetailBrochure, renderDetailMedia, renderDetailItineraryDay, renderDetailExtraSections, renderSupplierLink, onTagsChange, messages, }) {
+    // Filter selections can be controlled (URL-persisted) by the page, else
+    // internal. `setSelections` keeps the value-or-updater signature so the
+    // existing call sites work for both modes.
+    const [internalSelections, setInternalSelections] = useState(EMPTY_SELECTIONS);
+    const selections = useMemo(() => filtersProp
+        ? { facets: filtersProp.facets ?? {}, ranges: filtersProp.ranges ?? {} }
+        : internalSelections, [filtersProp, internalSelections]);
+    const setSelections = (next) => {
+        const resolved = typeof next === "function" ? next(selections) : next;
+        onFiltersChange?.(resolved);
+        if (filtersProp == null)
+            setInternalSelections(resolved);
+    };
+    const [internalPage, setInternalPage] = useState(1);
+    const page = pageProp ?? internalPage;
+    const setPage = (next) => {
+        if (onPageChange)
+            onPageChange(next);
+        if (pageProp == null)
+            setInternalPage(next);
+    };
+    const [openHit, setOpenHit] = useState(null);
+    // View + sort can be controlled (URL-persisted) by the page, else internal.
+    const [internalView, setInternalView] = useState(tab.card ? "grid" : "list");
+    const viewMode = viewProp ?? internalView;
+    const setViewMode = (next) => {
+        onViewChange?.(next);
+        if (viewProp == null)
+            setInternalView(next);
+    };
+    // Grid shows fewer (bigger cards), list shows more (dense rows).
+    const effectivePageSize = viewMode === "grid" ? GRID_PAGE_SIZE : pageSize;
+    const [internalSort, setInternalSort] = useState("relevance");
+    const sort = sortProp ?? internalSort;
+    const setSort = (next) => {
+        onSortChange?.(next);
+        if (sortProp == null)
+            setInternalSort(next);
+    };
+    // Reset page when query / filters / sort change. Keeps "Next" honest.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: tab.id / query / selections / sort / scope all reset page intentionally
+    useEffect(() => {
+        setPage(1);
+    }, [tab.id, query, selections, sort, market, locale, viewMode]);
+    const filters = useMemo(() => buildFilters(selections), [selections]);
+    const facetRequests = useMemo(() => (tab.filterFields ?? [])
+        .filter((f) => (f.kind ?? "facet") === "facet")
+        .map((f) => ({ field: f.field })), [tab.filterFields]);
+    // The deployment picks the actual mode at the route — `hybrid` here means
+    // "use the best mode this deployment supports." Operators with embeddings
+    // configured get vector + keyword fusion; those without silently get pure
+    // keyword. The end user shouldn't have to think about it.
+    const { data, isLoading, isFetching, isPlaceholderData, error } = useCatalogSearch({
+        vertical: tab.vertical,
+        query,
+        mode: "hybrid",
+        market,
+        locale,
+        filters,
+        facets: facetRequests,
+        sort,
+        pagination: { limit: effectivePageSize, cursor: page > 1 ? String(page) : undefined },
+    });
+    const total = data?.total ?? 0;
+    const totalPages = Math.max(1, Math.ceil(total / effectivePageSize));
+    const facetGroups = data?.facets ?? {};
+    const hits = data?.hits ?? [];
+    const sortOptions = useMemo(() => {
+        const opts = ["relevance"];
+        if (tab.sorts) {
+            opts.push(...tab.sorts);
+        }
+        else {
+            if (tab.card?.priceAmountField)
+                opts.push("price-asc", "price-desc");
+            opts.push("newest");
+        }
+        return opts;
+    }, [tab.sorts, tab.card]);
+    const sortItems = sortOptions.map((value) => ({ value, label: sortLabel(value, messages) }));
+    const cardConfig = tab.card;
+    if (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        return (_jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive", children: message }));
+    }
+    const hasFacetSelections = Object.values(selections.facets).some((v) => v.length > 0);
+    const hasRangeSelections = Object.values(selections.ranges).some((v) => v.gte != null || v.lte != null);
+    const hasSelections = hasFacetSelections || hasRangeSelections;
+    const visibleFilterFields = (tab.filterFields ?? []).filter((f) => {
+        if ((f.kind ?? "facet") === "range")
+            return true;
+        return (facetGroups[f.field]?.length ?? 0) > 0 || (selections.facets[f.field]?.length ?? 0) > 0;
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start", children: [visibleFilterFields.length > 0 && (_jsx("aside", { className: "lg:w-60 lg:shrink-0", children: _jsx(CatalogFilterRail, { fields: visibleFilterFields, facetGroups: facetGroups, selectedFacets: selections.facets, selectedRanges: selections.ranges, onToggleFacet: (field, value) => setSelections((prev) => toggleFacet(prev, field, value)), onClearFacet: (field) => setSelections((prev) => clearFacet(prev, field)), onSetRange: (field, next) => setSelections((prev) => setRange(prev, field, next)), onClearAll: () => setSelections(EMPTY_SELECTIONS), hasSelections: hasSelections }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: isLoading
+                                            ? null
+                                            : `${total} ${total === 1 ? messages.search.resultSingular : messages.search.resultPlural}` }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { items: sortItems, value: sort, onValueChange: (value) => setSort(value), children: [_jsx(SelectTrigger, { className: "h-9 w-[190px] rounded-md data-[size=default]:h-9", "aria-label": messages.view.sort, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: sortItems.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }), cardConfig && (_jsxs(ToggleGroup, { value: [viewMode], onValueChange: (values) => {
+                                                    const next = values[values.length - 1];
+                                                    if (next === "grid" || next === "list")
+                                                        setViewMode(next);
+                                                }, variant: "outline", "aria-label": messages.view.filters, children: [_jsx(ToggleGroupItem, { value: "grid", "aria-label": messages.view.grid, children: _jsx(LayoutGrid, { className: "size-4" }) }), _jsx(ToggleGroupItem, { value: "list", "aria-label": messages.view.list, children: _jsx(List, { className: "size-4" }) })] }))] })] }), isLoading ? (_jsx(ResultsSkeleton, { grid: viewMode === "grid" && Boolean(cardConfig), count: effectivePageSize })) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-busy": isFetching, className: `transition-opacity duration-150 ${isFetching && isPlaceholderData ? "pointer-events-none opacity-60" : ""}`, children: hits.length === 0 ? ((tab.emptyState ?? (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center text-muted-foreground text-sm", children: formatTemplate(messages.search.noResults, {
+                                                query: query ? `"${query}"` : messages.search.yourFilters,
+                                                tab: tab.label.toLowerCase(),
+                                            }) })))) : viewMode === "grid" && cardConfig ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: hits.map((hit) => (_jsx(CatalogCard, { hit: hit, config: cardConfig, imageFallbackField: tab.imageField, fallbackTitle: messages.fallbacks.detailName, onOpen: tab.onOpenDetail ?? setOpenHit }, hit.id))) })) : (_jsx(DataTable, { columns: tab.columns, data: hits, getRowId: (row) => row.id, onRowClick: (row) => (tab.onOpenDetail ?? setOpenHit)(row.original), showPagination: false, pageSize: effectivePageSize })) }), totalPages > 1 && (_jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: formatTemplate(messages.search.showing, {
+                                                    from: (page - 1) * effectivePageSize + 1,
+                                                    to: Math.min(page * effectivePageSize, total),
+                                                    total,
+                                                }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setPage(Math.max(1, page - 1)), disabled: page <= 1, children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), " ", messages.search.previous] }), _jsx("span", { className: "text-muted-foreground text-sm", children: formatTemplate(messages.search.page, { page, totalPages }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setPage(Math.min(totalPages, page + 1)), disabled: page >= totalPages, children: [messages.search.next, " ", _jsx(ChevronRight, { className: "ml-1 h-4 w-4" })] })] })] }))] }))] })] }), _jsx(CatalogDetailSheet, { hit: openHit, onOpenChange: (open) => {
+                    if (!open)
+                        setOpenHit(null);
+                }, formatters: tab.detailFormatters, actions: tab.detailActions, imageField: tab.imageField ?? "thumbnailUrl", vertical: tab.vertical, width: tab.detailSheetWidth ?? detailSheetWidth, headerExtras: tab.detailHeaderExtras ?? detailHeaderExtras, onLoadDetail: tab.onLoadDetail, onLoadDeparturePricing: tab.onLoadDeparturePricing, onBookDeparture: tab.onBookDeparture, onBookOption: tab.onBookOption, renderBrochure: tab.renderDetailBrochure ?? renderDetailBrochure, renderMedia: tab.renderDetailMedia ?? renderDetailMedia, renderItineraryDay: tab.renderDetailItineraryDay ?? renderDetailItineraryDay, renderExtraSections: tab.renderDetailExtraSections ?? renderDetailExtraSections, renderSupplierLink: renderSupplierLink, onTagsChange: onTagsChange })] }));
+}
+function buildFilters(selections) {
+    const filters = [];
+    for (const [field, values] of Object.entries(selections.facets)) {
+        if (values.length === 0)
+            continue;
+        if (values.length === 1) {
+            filters.push({ kind: "eq", field, value: values[0] });
+        }
+        else {
+            filters.push({ kind: "in", field, values });
+        }
+    }
+    for (const [field, range] of Object.entries(selections.ranges)) {
+        if (range.gte == null && range.lte == null)
+            continue;
+        filters.push({
+            kind: "range",
+            field,
+            ...(range.gte != null ? { gte: range.gte } : {}),
+            ...(range.lte != null ? { lte: range.lte } : {}),
+        });
+    }
+    return filters.length > 0 ? filters : undefined;
+}
+function toggleFacet(prev, field, value) {
+    const current = prev.facets[field] ?? [];
+    const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+    return { ...prev, facets: { ...prev.facets, [field]: next } };
+}
+function clearFacet(prev, field) {
+    const facets = { ...prev.facets };
+    delete facets[field];
+    return { ...prev, facets };
+}
+function setRange(prev, field, next) {
+    const ranges = { ...prev.ranges };
+    if (!next || (next.gte == null && next.lte == null)) {
+        delete ranges[field];
+    }
+    else {
+        ranges[field] = next;
+    }
+    return { ...prev, ranges };
+}
+function formatTemplate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = values[key];
+        return value === undefined ? "" : String(value);
+    });
+}
+function sortLabel(option, messages) {
+    switch (option) {
+        case "price-asc":
+            return messages.view.sortPriceAsc;
+        case "price-desc":
+            return messages.view.sortPriceDesc;
+        case "departure-asc":
+            return messages.view.sortSoonest;
+        case "newest":
+            return messages.view.sortNewest;
+        default:
+            return messages.view.sortRelevance;
+    }
+}
+function ResultsSkeleton({ grid, count = 12 }) {
+    // Match the real layout + roughly the page size so the first load doesn't
+    // jump when results arrive. Cap grid cards so the skeleton isn't absurdly tall.
+    if (grid) {
+        return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: Array.from({ length: Math.min(count, 15) }).map((_, i) => (_jsxs("div", { className: "overflow-hidden rounded-lg border", children: [_jsx("div", { className: "aspect-[4/3] w-full animate-pulse bg-muted/40" }), _jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsx("div", { className: "h-4 w-3/4 animate-pulse rounded bg-muted/40" }), _jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-muted/20" }), _jsx("div", { className: "h-3 w-1/3 animate-pulse rounded bg-muted/20" })] })] }, i))) }));
+    }
+    return (_jsxs("div", { className: "overflow-hidden rounded-md border", children: [_jsx("div", { className: "h-12 animate-pulse border-b bg-muted/40" }), Array.from({ length: Math.min(count, 40) }).map((_, i) => (_jsx("div", { className: "h-14 animate-pulse border-b bg-muted/20 last:border-b-0" }, i)))] }));
+}