@voyantjs/distribution-react 0.106.0 → 0.107.1

package/README.md

@@ -1,32 +1,78 @@
-# @voyantjs/availability-react
+# @voyantjs/distribution-react
 
-React runtime package for Voyant availability. Provides the shared availability provider, typed fetch client, query keys, constants, and TanStack Query hooks that power availability-focused frontend experiences.
+The distribution client tier: headless data hooks/clients plus the styled UI
+components and page-level compositions (formerly `@voyantjs/distribution-ui`).
+
+Headless consumers import from the root, `./hooks`, `./client`, or
+`./query-keys` — these pull no styling peers. Styled surfaces live under
+`./ui`, `./components/*`, `./i18n`, and `./styles.css`, whose heavier peers
+(`@voyantjs/ui`, `@tanstack/react-table`) are optional and only needed when
+you import those subpaths.
 
 ## Install
 
 ```bash
-pnpm add @voyantjs/availability-react @voyantjs/availability @tanstack/react-query react react-dom zod
+pnpm add @voyantjs/distribution-react @voyantjs/distribution @tanstack/react-query react react-dom zod
 ```
 
 ## Usage
 
 ```tsx
-import { VoyantAvailabilityProvider, useSlots } from "@voyantjs/availability-react"
+import { VoyantDistributionProvider, useChannels } from "@voyantjs/distribution-react"
 
 function App() {
   return (
-    <VoyantAvailabilityProvider baseUrl="/api">
-      <SlotsList />
-    </VoyantAvailabilityProvider>
+    <VoyantDistributionProvider baseUrl="/api">
+      <ChannelsList />
+    </VoyantDistributionProvider>
   )
 }
 
-function SlotsList() {
-  const { data } = useSlots()
-  return <>{data?.data.map((slot) => <div key={slot.id}>{slot.dateLocal}</div>)}</>
+function ChannelsList() {
+  const { data } = useChannels()
+  return <>{data?.data.map((channel) => <div key={channel.id}>{channel.name}</div>)}</>
 }
 ```
 
+## UI components
+
+Importable React UI components for Voyant distribution. Bundler-consumed (Vite, Next.js, webpack, etc.).
+
+```bash
+pnpm add @voyantjs/distribution-react @voyantjs/ui @tanstack/react-query react react-dom
+```
+
+`@voyantjs/ui` provides the design-system primitives; it is an optional peer
+required only when importing the styled subpaths.
+
+All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.
+
+### I18n
+
+Components render English by default. To localize them, wrap your UI in
+`DistributionUiMessagesProvider` and import only the locales your app supports.
+
+```tsx
+import { DistributionUiMessagesProvider } from "@voyantjs/distribution-react/ui"
+import { distributionUiEn } from "@voyantjs/distribution-react/i18n/en"
+import { distributionUiRo } from "@voyantjs/distribution-react/i18n/ro"
+```
+
+English-only apps should import only `./i18n/en`. Bilingual apps can import
+`./i18n/en` and `./i18n/ro`.
+
+### Components
+
+- `DistributionPage`, `DistributionOverview`
+- `ChannelsPage`, `ChannelSyncPage`
+- `ChannelDetailPage`, `ContractDetailPage`, `CommissionRuleDetailPage`, `MappingDetailPage`, `BookingLinkDetailPage`, `WebhookEventDetailPage`
+- `DistributionChannelsTab`, `DistributionContractsTab`, `DistributionCommissionsTab`
+- `DistributionMappingsTab`, `DistributionBookingLinksTab`, `DistributionWebhooksTab`
+
+### Not included (registry-only)
+
+Some components couple to TanStack Router or template-local helpers and remain available only via the shadcn registry: `distribution-dialogs-commercial`, `distribution-dialogs-commission`, `distribution-dialogs-sync`, `distribution-dialogs-webhook`. Import via `npx shadcn add @voyant/<component>` and customize per-project.
+
 ## License
 
 Apache-2.0

package/dist/components/booking-link-detail-page.d.ts

@@ -0,0 +1,10 @@
+export interface BookingLinkDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onDeleted?: () => void;
+    onChannelOpen?: (channelId: string) => void;
+    onBookingOpen?: (bookingId: string) => void;
+}
+export declare function BookingLinkDetailPage({ id, className, onBack, onDeleted, onChannelOpen, onBookingOpen, }: BookingLinkDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-link-detail-page.d.ts.map

package/dist/components/booking-link-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-link-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/booking-link-detail-page.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C;AAID,wBAAgB,qBAAqB,CAAC,EACpC,EAAE,EACF,SAAS,EACT,MAAa,EACb,SAAgB,EAChB,aAAoB,EACpB,aAAoB,GACrB,EAAE,0BAA0B,2CAwI5B"}

package/dist/components/booking-link-detail-page.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, Link2, Loader2, ReceiptText } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { distributionQueryKeys, fetchWithValidation, getBookingLinkQueryOptions, getBookingQueryOptions, getChannelQueryOptions, successEnvelope, useVoyantDistributionContext, } from "../index.js";
+import { formatDistributionDateTime } from "./distribution-shared.js";
+const noop = () => { };
+export function BookingLinkDetailPage({ id, className, onBack = noop, onDeleted = noop, onChannelOpen = noop, onBookingOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.bookingLink;
+    const client = useVoyantDistributionContext();
+    const queryClient = useQueryClient();
+    const linkQuery = useQuery({
+        ...getBookingLinkQueryOptions(client, id),
+        select: (result) => result.data,
+    });
+    const link = linkQuery.data;
+    const channelQuery = useQuery({
+        ...getChannelQueryOptions(client, link?.channelId),
+        select: (result) => result.data,
+        enabled: Boolean(link?.channelId),
+    });
+    const bookingQuery = useQuery({
+        ...getBookingQueryOptions(client, link?.bookingId),
+        select: (result) => result.data,
+        enabled: Boolean(link?.bookingId),
+    });
+    const remove = useMutation({
+        mutationFn: () => fetchWithValidation(`/v1/distribution/booking-links/${id}`, successEnvelope, client, {
+            method: "DELETE", // i18n-literal-ok HTTP method
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: distributionQueryKeys.bookingLinks() });
+            queryClient.removeQueries({ queryKey: distributionQueryKeys.bookingLink(id) });
+            onDeleted();
+            onBack();
+        },
+    });
+    if (linkQuery.isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    if (!link) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: detail.notFound }), _jsx(Button, { variant: "outline", onClick: onBack, children: messages.common.backToDistribution })] }));
+    }
+    return (_jsxs("div", { "data-slot": "booking-link-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: detail.title }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: link.externalStatus ?? messages.common.unmappedStatus }), _jsx(Badge, { variant: "secondary", children: link.externalReference ?? messages.common.noReference })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => onChannelOpen(link.channelId), children: [_jsx(Link2, { className: "mr-2 h-4 w-4" }), detail.openChannel] }), _jsxs(Button, { variant: "outline", onClick: () => onBookingOpen(link.bookingId), children: [_jsx(ReceiptText, { className: "mr-2 h-4 w-4" }), detail.openBooking] }), _jsx(ConfirmActionButton, { buttonLabel: detail.deleteButton, confirmLabel: detail.deleteButton, title: detail.deleteConfirm, description: detail.deleteDescription, variant: "destructive", confirmVariant: "destructive", disabled: remove.isPending, onConfirm: async () => {
+                                    await remove.mutateAsync();
+                                } })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm md:grid-cols-2", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.channelLabel, ":"] }), " ", _jsx("span", { children: channelQuery.data?.name ?? link.channelId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.bookingLabel, ":"] }), " ", _jsx("span", { children: bookingQuery.data?.bookingNumber ?? link.bookingId })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.externalBooking, ":"] }), " ", _jsx("span", { children: link.externalBookingId ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.reference, ":"] }), " ", _jsx("span", { children: link.externalReference ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.bookedAtExternal, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.bookedAtExternal, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.lastSynced, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.lastSyncedAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(link.updatedAt, i18n) })] })] })] })] }));
+}

package/dist/components/channel-detail-page.d.ts

@@ -0,0 +1,12 @@
+export interface ChannelDetailPageProps {
+    id: string;
+    className?: string;
+    onBack?: () => void;
+    onDeleted?: () => void;
+    onContractOpen?: (contractId: string) => void;
+    onMappingOpen?: (mappingId: string) => void;
+    onBookingLinkOpen?: (bookingLinkId: string) => void;
+    onWebhookEventOpen?: (webhookEventId: string) => void;
+}
+export declare function ChannelDetailPage({ id, className, onBack, onDeleted, onContractOpen, onMappingOpen, onBookingLinkOpen, onWebhookEventOpen, }: ChannelDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=channel-detail-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"channel-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/channel-detail-page.tsx"],"names":[],"mappings":"AAgCA,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,kBAAkB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;CACtD;AAID,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,SAAS,EACT,MAAa,EACb,SAAgB,EAChB,cAAqB,EACrB,aAAoB,EACpB,iBAAwB,EACxB,kBAAyB,GAC1B,EAAE,sBAAsB,2CAmRxB"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, ConfirmActionButton, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ArrowLeft, Link2, Loader2, Package, Webhook } from "lucide-react";
+import { useDistributionUiI18nOrDefault } from "../i18n/index.js";
+import { useBookingLinks, useBookings, useChannel, useChannelMutation, useContracts, useMappings, useProducts, useSuppliers, useWebhookEvents, } from "../index.js";
+import { formatDistributionDate, formatDistributionDateTime, getChannelKindLabel, getChannelStatusLabel, getContractStatusLabel, getPaymentOwnerLabel, } from "./distribution-shared.js";
+const noop = () => { };
+export function ChannelDetailPage({ id, className, onBack = noop, onDeleted = noop, onContractOpen = noop, onMappingOpen = noop, onBookingLinkOpen = noop, onWebhookEventOpen = noop, }) {
+    const i18n = useDistributionUiI18nOrDefault();
+    const { messages } = i18n;
+    const detail = messages.details.channel;
+    const channelQuery = useChannel(id);
+    const contractsQuery = useContracts({ channelId: id, limit: 25, offset: 0 });
+    const mappingsQuery = useMappings({ channelId: id, limit: 25, offset: 0 });
+    const bookingLinksQuery = useBookingLinks({ channelId: id, limit: 25, offset: 0 });
+    const webhookEventsQuery = useWebhookEvents({ channelId: id, limit: 25, offset: 0 });
+    const productsQuery = useProducts({ limit: 25, offset: 0 });
+    const bookingsQuery = useBookings({ limit: 25, offset: 0 });
+    const suppliersQuery = useSuppliers({ limit: 25, offset: 0 });
+    const { remove } = useChannelMutation();
+    if (channelQuery.isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    const channel = channelQuery.data;
+    if (!channel) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-12", children: [_jsx("p", { className: "text-muted-foreground", children: detail.notFound }), _jsx(Button, { variant: "outline", onClick: onBack, children: messages.common.backToDistribution })] }));
+    }
+    const productsById = new Map((productsQuery.data?.data ?? []).map((product) => [product.id, product]));
+    const bookingsById = new Map((bookingsQuery.data?.data ?? []).map((booking) => [booking.id, booking]));
+    const suppliersById = new Map((suppliersQuery.data?.data ?? []).map((supplier) => [supplier.id, supplier]));
+    return (_jsxs("div", { "data-slot": "channel-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: channel.name }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: getChannelKindLabel(channel.kind, messages) }), _jsx(Badge, { variant: channel.status === "active" ? "default" : "secondary", children: getChannelStatusLabel(channel.status, messages) })] })] }), _jsx(ConfirmActionButton, { buttonLabel: detail.deleteButton, confirmLabel: detail.deleteButton, title: detail.deleteConfirm, description: detail.deleteDescription, variant: "destructive", confirmVariant: "destructive", disabled: remove.isPending, onConfirm: async () => {
+                            await remove.mutateAsync(id);
+                            onDeleted();
+                            onBack();
+                        } })] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.website, ":"] }), " ", _jsx("span", { children: channel.website ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.contactName, ":"] }), " ", _jsx("span", { children: channel.contactName ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [detail.labels.contactEmail, ":"] }), " ", _jsx("span", { children: channel.contactEmail ?? messages.common.none })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.createdLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(channel.createdAt, i18n) })] }), _jsxs("div", { children: [_jsxs("span", { className: "text-muted-foreground", children: [messages.common.updatedLabel, ":"] }), " ", _jsx("span", { children: formatDistributionDateTime(channel.updatedAt, i18n) })] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.metadata }) }), _jsx(CardContent, { className: "text-sm", children: channel.metadata ? (_jsx("pre", { className: "overflow-x-auto rounded-md bg-muted p-3 text-xs", children: JSON.stringify(channel.metadata, null, 2) })) : (_jsx("p", { className: "text-muted-foreground", children: detail.empty.metadata })) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Link2, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.contracts })] }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (contractsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.contracts })) : (contractsQuery.data?.data.map((contract) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onContractOpen(contract.id), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: getContractStatusLabel(contract.status, messages) }), _jsxs("span", { children: [formatDistributionDate(contract.startsAt, i18n), " -", " ", contract.endsAt
+                                                    ? formatDistributionDate(contract.endsAt, i18n)
+                                                    : messages.common.openEnded] })] }), _jsxs("div", { className: "mt-2 text-muted-foreground", children: [detail.labels.supplier, ":", " ", suppliersById.get(contract.supplierId ?? "")?.name ??
+                                            contract.supplierId ??
+                                            messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.payment, ": ", getPaymentOwnerLabel(contract.paymentOwner, messages), " - ", detail.labels.cancellation, ":", " ", messages.common.cancellationOwnerLabels[contract.cancellationOwner]] }), contract.settlementTerms ? (_jsx("div", { className: "mt-2 whitespace-pre-wrap", children: contract.settlementTerms })) : null, contract.notes ? (_jsx("div", { className: "mt-2 whitespace-pre-wrap", children: contract.notes })) : null] }, contract.id)))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Package, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.mappings })] }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (mappingsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.mappings })) : (mappingsQuery.data?.data.map((mapping) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onMappingOpen(mapping.id), children: [_jsx("div", { className: "font-medium", children: productsById.get(mapping.productId)?.name ?? mapping.productId }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.externalProduct, ": ", mapping.externalProductId] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.rate, ": ", mapping.externalRateId ?? messages.common.none, " - ", detail.labels.category, ": ", mapping.externalCategoryId ?? messages.common.none] }), _jsx("div", { className: "mt-2", children: _jsx(Badge, { variant: mapping.active ? "default" : "secondary", children: mapping.active ? messages.common.active : messages.common.inactive }) })] }, mapping.id)))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.sections.bookingLinks }) }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (bookingLinksQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.bookingLinks })) : (bookingLinksQuery.data?.data.map((link) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onBookingLinkOpen(link.id), children: [_jsxs("div", { className: "font-medium", children: [detail.labels.booking, ":", " ", bookingsById.get(link.bookingId)?.bookingNumber ?? link.bookingId] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.externalBooking, ": ", link.externalBookingId ?? messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.reference, ": ", link.externalReference ?? messages.common.none] }), _jsxs("div", { className: "text-muted-foreground", children: [detail.labels.lastSynced, ": ", formatDistributionDateTime(link.lastSyncedAt, i18n)] })] }, link.id)))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Webhook, { className: "h-4 w-4" }), _jsx(CardTitle, { children: detail.sections.webhooks })] }), _jsx(CardContent, { className: "space-y-3 text-sm", children: (webhookEventsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: detail.empty.webhooks })) : (webhookEventsQuery.data?.data.map((event) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onWebhookEventOpen(event.id), children: [_jsx("div", { className: "font-medium", children: event.eventType }), _jsxs("div", { className: "text-muted-foreground", children: [messages.common.received, ": ", formatDistributionDateTime(event.receivedAt, i18n)] }), _jsx("div", { className: "mt-2", children: _jsx(Badge, { variant: "outline", children: messages.common.webhookStatusLabels[event.status] }) })] }, event.id)))) })] })] }));
+}

package/dist/components/channel-sync-page.d.ts

@@ -0,0 +1,8 @@
+import { type VoyantFetcher } from "../index.js";
+export interface ChannelSyncPageProps {
+    baseUrl?: string;
+    fetcher?: VoyantFetcher;
+    className?: string;
+}
+export declare function ChannelSyncPage({ baseUrl, fetcher, className }?: ChannelSyncPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=channel-sync-page.d.ts.map

package/dist/components/channel-sync-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"channel-sync-page.d.ts","sourceRoot":"","sources":["../../src/components/channel-sync-page.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAgD,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AA2F9F,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgDD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAE,oBAAyB,2CA8WzF"}

package/dist/components/channel-sync-page.js

@@ -0,0 +1,257 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, cn, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Label, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, } from "@voyantjs/ui/components";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@voyantjs/ui/components/empty";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { AlertTriangle, ChevronDown, Loader2, RotateCw, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useDistributionUiMessagesOrDefault } from "../i18n/index.js";
+import { defaultFetcher, useVoyantDistributionContext } from "../index.js";
+// Fetch helpers
+async function fetchJson(path, options, init) {
+    const res = await options.fetcher(joinUrl(options.baseUrl, path), {
+        ...init,
+        headers: {
+            "Content-Type": "application/json",
+            ...init?.headers,
+        },
+    });
+    const text = await res.text();
+    const body = text
+        ? JSON.parse(text)
+        : {};
+    if (!res.ok) {
+        throw new Error(body.error ?? `Request failed: ${res.status}`);
+    }
+    return body;
+}
+const STATUS_VARIANTS = {
+    pending: "secondary",
+    ok: "default",
+    failed: "destructive",
+    compensated: "outline",
+};
+const STATUS_TILES = [
+    { key: "pending", tone: "secondary" },
+    { key: "ok", tone: "default" },
+    { key: "failed", tone: "destructive" },
+    { key: "compensated", tone: "outline" },
+];
+const LINKS_REFETCH_MS = 15_000;
+const THROTTLING_REFETCH_MS = 60_000;
+// Page
+export function ChannelSyncPage({ baseUrl, fetcher, className } = {}) {
+    const distributionMessages = useDistributionUiMessagesOrDefault();
+    const messages = distributionMessages.channelSync;
+    const context = useVoyantDistributionContext();
+    const client = {
+        baseUrl: baseUrl ?? context.baseUrl,
+        fetcher: fetcher ?? context.fetcher ?? defaultFetcher,
+    };
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [bookingId, setBookingId] = useState(null);
+    const [bookingSearch, setBookingSearch] = useState("");
+    const [selectedBooking, setSelectedBooking] = useState(null);
+    const [channelId, setChannelId] = useState(null);
+    const [selectedChannel, setSelectedChannel] = useState(null);
+    const [drilldownBookingId, setDrilldownBookingId] = useState(null);
+    const queryClient = useQueryClient();
+    const linksQuery = useQuery({
+        queryKey: ["channel-push-links", statusFilter, bookingId, channelId],
+        queryFn: () => {
+            const params = new URLSearchParams({ limit: "100" });
+            if (statusFilter !== "all")
+                params.set("status", statusFilter);
+            if (bookingId)
+                params.set("bookingId", bookingId);
+            if (channelId)
+                params.set("channelId", channelId);
+            return fetchJson(`/v1/admin/distribution/channel-push/links?${params}`, client);
+        },
+        refetchInterval: LINKS_REFETCH_MS,
+        refetchIntervalInBackground: false,
+    });
+    const throttlingQuery = useQuery({
+        queryKey: ["channel-push-throttling"],
+        queryFn: () => fetchJson("/v1/admin/distribution/channel-push/throttling", client),
+        refetchInterval: THROTTLING_REFETCH_MS,
+    });
+    const debouncedBookingSearch = useDebouncedValue(bookingSearch, 200);
+    const bookingsQuery = useQuery({
+        queryKey: ["channel-sync-booking-options", debouncedBookingSearch],
+        queryFn: () => {
+            const params = new URLSearchParams({ limit: "20" });
+            if (debouncedBookingSearch.trim())
+                params.set("search", debouncedBookingSearch.trim());
+            return fetchJson(`/v1/admin/bookings?${params}`, client);
+        },
+        placeholderData: (prev) => prev,
+    });
+    const channelsQuery = useQuery({
+        queryKey: ["channel-sync-channel-options"],
+        queryFn: () => fetchJson(`/v1/admin/distribution/channels?limit=100`, client),
+        staleTime: 60_000,
+    });
+    const retryMutation = useMutation({
+        mutationFn: (id) => fetchJson(`/v1/admin/distribution/channel-push/retry/${id}`, client, { method: "POST" }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ["channel-push-links"] });
+        },
+    });
+    const reconcileMutation = useMutation({
+        mutationFn: (flow) => fetchJson(`/v1/admin/distribution/channel-push/reconcile/${flow}`, client, {
+            method: "POST",
+        }),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ["channel-push-links"] });
+        },
+    });
+    const counts = linksQuery.data?.counts ?? {};
+    const rows = linksQuery.data?.data ?? [];
+    const throttledChannels = throttlingQuery.data?.data ?? [];
+    const isThrottled = throttledChannels.length > 0;
+    const filtersActive = statusFilter !== "all" || bookingId !== null || channelId !== null;
+    const clearFilters = () => {
+        setStatusFilter("all");
+        setBookingId(null);
+        setBookingSearch("");
+        setSelectedBooking(null);
+        setChannelId(null);
+        setSelectedChannel(null);
+    };
+    const bookingOptions = bookingsQuery.data?.data ?? [];
+    const channelOptions = channelsQuery.data?.data ?? [];
+    return (_jsxs("div", { "data-slot": "channel-sync-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight", children: messages.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.description })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(AutoRefreshIndicator, { isFetching: linksQuery.isFetching, dataUpdatedAt: linksQuery.dataUpdatedAt, intervalMs: LINKS_REFETCH_MS, messages: messages }), _jsx(ReconcileMenu, { onRun: (flow) => reconcileMutation.mutate(flow), isRunning: reconcileMutation.isPending, lastResult: reconcileMutation.data ?? null, messages: messages })] })] }), isThrottled ? (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: messages.throttledTitle }), " ", _jsx("span", { children: formatTemplate(messages.throttledBody, {
+                                    count: throttledChannels.reduce((sum, c) => sum + c.count, 0),
+                                    channels: throttledChannels.length,
+                                    channelLabel: throttledChannels.length === 1 ? "channel" : "channels",
+                                }) })] })] })) : null, _jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-4", children: STATUS_TILES.map((tile) => {
+                    const isActive = statusFilter === tile.key;
+                    const value = counts[tile.key] ?? 0;
+                    const tileMessages = messages.statusTiles[tile.key];
+                    return (_jsxs("button", { type: "button", onClick: () => setStatusFilter(isActive ? "all" : tile.key), className: cn("group rounded-lg border bg-card p-4 text-left transition-all", "hover:border-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive && "border-primary ring-2 ring-primary/30"), "aria-pressed": isActive, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: tileMessages.label }), tile.key === "failed" && value > 0 ? (_jsx(AlertTriangle, { className: "h-3.5 w-3.5 text-destructive" })) : null] }), _jsx("div", { className: "mt-1 text-3xl font-semibold tabular-nums", children: value }), _jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: tileMessages.description })] }, tile.key));
+                }) }), _jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-end", children: [_jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "cs-booking", className: "text-xs", children: messages.filters.booking }), _jsx(AsyncCombobox, { value: bookingId, onChange: (value) => {
+                                    setBookingId(value);
+                                    if (!value)
+                                        setSelectedBooking(null);
+                                    else {
+                                        const match = bookingOptions.find((b) => b.id === value);
+                                        if (match)
+                                            setSelectedBooking(match);
+                                    }
+                                }, items: bookingOptions, selectedItem: selectedBooking, getKey: (b) => b.id, getLabel: (b) => b.bookingNumber, getSecondary: (b) => b.status, onSearchChange: setBookingSearch, placeholder: messages.filters.bookingPlaceholder, emptyText: bookingsQuery.isFetching
+                                    ? messages.filters.bookingSearching
+                                    : messages.filters.bookingEmpty, triggerClassName: "w-full" })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "cs-channel", className: "text-xs", children: messages.filters.channel }), _jsx(AsyncCombobox, { value: channelId, onChange: (value) => {
+                                    setChannelId(value);
+                                    if (!value)
+                                        setSelectedChannel(null);
+                                    else {
+                                        const match = channelOptions.find((c) => c.id === value);
+                                        if (match)
+                                            setSelectedChannel(match);
+                                    }
+                                }, items: channelOptions, selectedItem: selectedChannel, getKey: (c) => c.id, getLabel: (c) => c.name, getSecondary: (c) => formatChannelKind(c.kind), placeholder: messages.filters.channelPlaceholder, emptyText: messages.filters.channelEmpty, triggerClassName: "w-full" })] }), filtersActive ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1.5 h-3.5 w-3.5" }), distributionMessages.common.clearFilters] })) : null] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-sm", children: messages.table.title }), _jsx(CardDescription, { children: filtersActive
+                                    ? formatTemplate(messages.table.filteredDescription, { count: rows.length })
+                                    : messages.table.defaultDescription })] }), _jsx(CardContent, { className: "p-0", children: linksQuery.isPending ? (_jsx("div", { className: "flex items-center justify-center p-12", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) })) : rows.length === 0 ? (_jsx(Empty, { className: "border-0", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: filtersActive ? messages.table.noMatchesTitle : messages.table.noLinksTitle }), _jsx(EmptyDescription, { children: filtersActive
+                                            ? messages.table.noMatchesDescription
+                                            : messages.table.noLinksDescription })] }) })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: messages.table.booking }), _jsx(TableHead, { children: messages.table.channel }), _jsx(TableHead, { children: messages.table.status }), _jsx(TableHead, { className: "text-right", children: messages.table.attempts }), _jsx(TableHead, { children: messages.table.lastPush }), _jsx(TableHead, { children: messages.table.externalRef }), _jsx(TableHead, { className: "text-right", children: messages.table.actions })] }) }), _jsx(TableBody, { children: rows.map((row) => {
+                                        const isFailed = row.link.pushStatus === "failed";
+                                        return (_jsxs(TableRow, { className: cn(isFailed && "bg-destructive/5 hover:bg-destructive/10"), children: [_jsxs(TableCell, { className: "font-mono text-xs", children: [_jsx("div", { children: row.link.bookingId }), row.link.bookingItemId ? (_jsx("div", { className: "text-muted-foreground", children: formatTemplate(messages.table.itemPrefix, {
+                                                                id: row.link.bookingItemId,
+                                                            }) })) : null] }), _jsxs(TableCell, { children: [_jsx("div", { className: "font-medium", children: row.channelName }), _jsx("div", { className: "text-xs text-muted-foreground", children: formatChannelKind(row.channelKind) })] }), _jsxs(TableCell, { children: [_jsx(Badge, { variant: STATUS_VARIANTS[row.link.pushStatus] ?? "outline", children: messages.statusLabels[row.link.pushStatus] ??
+                                                                row.link.pushStatus }), row.link.lastError ? (_jsx("div", { className: "mt-1 max-w-xs truncate text-xs text-destructive", title: row.link.lastError, children: row.link.lastError })) : null] }), _jsx(TableCell, { className: "text-right tabular-nums", children: row.link.pushAttempts }), _jsx(TableCell, { className: "text-xs text-muted-foreground", children: row.link.lastPushAt ? formatRelative(row.link.lastPushAt) : "-" }), _jsx(TableCell, { className: "font-mono text-xs", children: row.link.externalBookingId ?? row.link.externalReference ?? "-" }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDrilldownBookingId(row.link.bookingId), children: messages.table.deliveries }), _jsxs(Button, { variant: "outline", size: "sm", disabled: retryMutation.isPending &&
+                                                                    retryMutation.variables === row.link.bookingId, onClick: () => retryMutation.mutate(row.link.bookingId), children: [retryMutation.isPending &&
+                                                                        retryMutation.variables === row.link.bookingId ? (_jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" })) : null, messages.table.retry] })] }) })] }, row.link.id));
+                                    }) })] })) })] }), _jsx(DeliveriesDrawer, { bookingId: drilldownBookingId, client: client, onClose: () => setDrilldownBookingId(null), messages: messages })] }));
+}
+function ReconcileMenu({ onRun, isRunning, lastResult, messages, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "outline", size: "sm", disabled: isRunning, children: [isRunning ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(RotateCw, { className: "mr-1.5 h-3.5 w-3.5" })), messages.reconcile.trigger, _jsx(ChevronDown, { className: "ml-1.5 h-3.5 w-3.5" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: messages.reconcile.menuLabel }), _jsxs(DropdownMenuItem, { onClick: () => onRun("bookings"), children: [messages.reconcile.bookings, _jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: messages.reconcile.priority })] }), _jsx(DropdownMenuItem, { onClick: () => onRun("availability"), children: messages.reconcile.availability }), _jsx(DropdownMenuItem, { onClick: () => onRun("content"), children: messages.reconcile.content })] }), lastResult ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx("div", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: formatTemplate(messages.reconcile.lastRun, {
+                                    scanned: lastResult.scanned,
+                                    triggered: lastResult.triggered,
+                                }) })] })) : null] })] }));
+}
+function AutoRefreshIndicator({ isFetching, dataUpdatedAt, intervalMs, messages, }) {
+    // Tick every second so the "Updated Xs ago" stays current.
+    const [, setNow] = useState(Date.now());
+    useEffect(() => {
+        const id = window.setInterval(() => setNow(Date.now()), 1000);
+        return () => window.clearInterval(id);
+    }, []);
+    if (!dataUpdatedAt) {
+        return (_jsxs("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground md:flex", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), messages.refresh.loading] }));
+    }
+    const seconds = Math.max(0, Math.round((Date.now() - dataUpdatedAt) / 1000));
+    const intervalSec = Math.round(intervalMs / 1000);
+    return (_jsxs("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground md:flex", title: formatTemplate(messages.refresh.title, { seconds: intervalSec }), children: [isFetching ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsxs("span", { className: "relative flex h-2 w-2", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" }), _jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-emerald-500" })] })), _jsx("span", { className: "tabular-nums", children: isFetching
+                    ? messages.refresh.refreshing
+                    : formatTemplate(messages.refresh.updatedAgo, {
+                        duration: formatShortDuration(seconds),
+                    }) })] }));
+}
+function useDebouncedValue(value, delayMs) {
+    const [debounced, setDebounced] = useState(value);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setDebounced(value), delayMs);
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [value, delayMs]);
+    return debounced;
+}
+function DeliveriesDrawer({ bookingId, client, onClose, messages, }) {
+    const isOpen = bookingId !== null;
+    const query = useQuery({
+        enabled: isOpen,
+        queryKey: ["channel-push-deliveries", bookingId],
+        queryFn: () => {
+            const params = new URLSearchParams({ bookingId: bookingId ?? "", limit: "200" });
+            return fetchJson(`/v1/admin/distribution/channel-push/deliveries?${params}`, client);
+        },
+    });
+    const rows = query.data?.data ?? [];
+    return (_jsx(Sheet, { open: isOpen, onOpenChange: (open) => (open ? null : onClose()), children: _jsxs(SheetContent, { side: "right", size: "xl", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: formatTemplate(messages.drawer.title, { bookingId: bookingId ?? "" }) }) }), _jsx(SheetBody, { className: "flex flex-col gap-3", children: query.isPending ? (_jsx("div", { className: "flex items-center justify-center p-12", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) })) : rows.length === 0 ? (_jsx(Empty, { children: _jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: messages.drawer.emptyTitle }), _jsx(EmptyDescription, { children: messages.drawer.emptyDescription })] }) })) : (rows.map((row) => (_jsxs(Card, { className: "text-xs", children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: row.status === "succeeded" ? "default" : "destructive", children: row.status }), _jsx("span", { className: "font-mono", children: row.sourceEvent }), _jsx("span", { className: "text-muted-foreground", children: formatTemplate(messages.drawer.attempt, { number: row.attemptNumber }) })] }), _jsx("span", { className: "text-muted-foreground", children: row.durationMs != null ? `${row.durationMs}ms` : "" })] }), _jsxs(CardDescription, { className: "font-mono", children: [row.requestMethod, " ", row.targetUrl] })] }), _jsxs(CardContent, { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [row.responseStatus != null ? (_jsx(Badge, { variant: "outline", children: formatTemplate(messages.drawer.httpStatus, { status: row.responseStatus }) })) : null, row.errorClass ? _jsx(Badge, { variant: "destructive", children: row.errorClass }) : null, _jsx("span", { className: "text-muted-foreground", children: formatRelative(row.createdAt) })] }), row.errorMessage ? (_jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap rounded bg-destructive/10 p-2 text-destructive", children: row.errorMessage })) : null, row.responseBodyExcerpt ? (_jsx("pre", { className: "overflow-x-auto rounded bg-muted p-2", children: row.responseBodyExcerpt })) : null] })] }, row.id)))) })] }) }));
+}
+function joinUrl(baseUrl, path) {
+    const trimmedBase = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+    const trimmedPath = path.startsWith("/") ? path : `/${path}`;
+    return `${trimmedBase}${trimmedPath}`;
+}
+function formatChannelKind(kind) {
+    return kind.replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase());
+}
+function formatShortDuration(seconds) {
+    if (seconds < 60)
+        return `${seconds}s`;
+    const min = Math.round(seconds / 60);
+    if (min < 60)
+        return `${min}m`;
+    const hours = Math.round(min / 60);
+    return `${hours}h`;
+}
+function formatRelative(iso) {
+    const date = new Date(iso);
+    const diffMs = Date.now() - date.getTime();
+    const sec = Math.round(diffMs / 1000);
+    if (sec < 60)
+        return `${sec}s ago`;
+    const min = Math.round(sec / 60);
+    if (min < 60)
+        return `${min}m ago`;
+    const hours = Math.round(min / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.round(hours / 24);
+    return `${days}d ago`;
+}
+function formatTemplate(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => {
+        const value = values[key];
+        return value === undefined ? "" : String(value);
+    });
+}

package/dist/components/channels-page.d.ts

@@ -0,0 +1,6 @@
+export interface ChannelsPageProps {
+    className?: string;
+    pageSize?: number;
+}
+export declare function ChannelsPage({ className, pageSize }?: ChannelsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=channels-page.d.ts.map

package/dist/components/channels-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"channels-page.d.ts","sourceRoot":"","sources":["../../src/components/channels-page.tsx"],"names":[],"mappings":"AAgDA,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAWD,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAoB,EAAE,GAAE,iBAAsB,2CAgJvF"}