@burdenoff/microfe-channel 2026.625.2 → 2026.625.3

package/dist/channel/modules/channels/pages/WebhookEventsPage.js

@@ -1,80 +1,80 @@
 import { useChannel as e } from "../../../providers/ChannelProvider.js";
 import { emitShellEvent as t } from "../../../utils/shellBridge.js";
 import { WEBHOOK_RECEIVED_SUBSCRIPTION as n, useChannelSubscription as r } from "../../../hooks/useChannelSubscription.js";
-import { useChannel as ee } from "../../../hooks/useChannels.js";
-import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
-import { useExportWebhookEvents as te } from "../hooks/useExport.js";
-import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
-import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as u, ArrowLeft as re, CheckCircle2 as d, ChevronLeft as f, ChevronRight as p, Clock as m, Download as h, Eye as ie, EyeOff as g, Loader2 as _, RefreshCw as v, XCircle as y } from "lucide-react";
-import { useNavigate as ae, useParams as oe } from "react-router-dom";
-import { usePermissions as b } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { CTAOverflowMenu as w, GlassCard as T, IllustratedEmptyState as se } from "@burdenoff/fe-libs/ui";
+import { useChannel as i } from "../../../hooks/useChannels.js";
+import { PermissionGuard as a } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as o } from "../../../constants/permissions.js";
+import { useExportWebhookEvents as ee } from "../hooks/useExport.js";
+import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as d, ArrowLeft as f, CheckCircle2 as p, ChevronLeft as m, ChevronRight as h, Clock as g, Download as ne, Eye as re, EyeOff as _, Loader2 as v, RefreshCw as y, XCircle as b } from "lucide-react";
+import { useNavigate as ie, useParams as x } from "react-router-dom";
+import { usePermissions as S } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { CTAOverflowMenu as ae, EmphasisPanel as E, GlassCard as oe, IllustratedEmptyState as se, PagePurpose as ce } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/WebhookEventsPage.tsx
-var E = {
+var D = {
 	PENDING: {
 		label: "Pending",
 		color: "text-text-secondary bg-bg-sunken",
-		icon: m
+		icon: g
 	},
 	PROCESSING: {
 		label: "Processing",
 		color: "text-accent-primary bg-accent-primary/10",
-		icon: v
+		icon: y
 	},
 	COMPLETED: {
 		label: "Completed",
 		color: "text-status-success-text bg-status-success-bg-subtle",
-		icon: d
+		icon: p
 	},
 	FAILED: {
 		label: "Failed",
 		color: "text-status-error-text bg-status-error-bg-subtle",
-		icon: y
+		icon: b
 	},
 	IGNORED: {
 		label: "Ignored",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: g
+		icon: _
 	}
 };
-function D() {
-	let { channelId: d } = oe(), m = ae(), { hasPermission: y } = b(), D = y(a.CHANNEL_WEBHOOK_EXPORT), { t: ce } = ne(), O = (e, t) => {
-		let n = ce(e);
+function O() {
+	let { channelId: p } = x(), b = ie(), { hasPermission: O } = S(), le = O(o.CHANNEL_WEBHOOK_EXPORT), { t: ue } = te(), k = (e, t) => {
+		let n = ue(e);
 		return n === e ? t : n;
-	}, { organizationId: le } = e(), { triggerExport: k, isExporting: A, exportError: j } = te(le ?? void 0, d), [M, N] = l(!0), [P, F] = l([]), [I, L] = l(null), [R, z] = l(25), [B, V] = l(0), [H, U] = l([void 0]), [W, G] = l(0), { channel: K, isLoading: ue, error: q, fetchWebhookEvents: J } = ee(d), Y = o(async (e) => {
-		if (d) {
-			N(!0);
+	}, { organizationId: de } = e(), { triggerExport: A, isExporting: j, exportError: M } = ee(de ?? void 0, p), [N, P] = u(!0), [F, I] = u([]), [L, R] = u(null), [z, B] = u(25), [V, fe] = u(0), [H, U] = u([void 0]), [W, G] = u(0), { channel: K, isLoading: pe, error: q, fetchWebhookEvents: J } = i(p), Y = s(async (e) => {
+		if (p) {
+			P(!0);
 			try {
-				let t = await J(R, e);
-				return F(t.items), V(t.total), t.nextCursor;
+				let t = await J(z, e);
+				return I(t.items), fe(t.total), t.nextCursor;
 			} finally {
-				N(!1);
+				P(!1);
 			}
 		}
 	}, [
-		d,
+		p,
 		J,
-		R
-	]), X = c(Y), Z = c(H), Q = c(W);
-	s(() => {
+		z
+	]), X = l(Y), Z = l(H), Q = l(W);
+	c(() => {
 		X.current = Y, Z.current = H, Q.current = W;
 	});
-	let $ = c(!0);
-	s(() => {
+	let $ = l(!0);
+	c(() => {
 		Promise.resolve().then(() => {
 			U([void 0]), G(0), X.current(void 0);
 		});
-	}, [R]), s(() => {
+	}, [z]), c(() => {
 		if ($.current) {
 			$.current = !1;
 			return;
 		}
 		Promise.resolve().then(() => X.current(Z.current[W]));
 	}, [W]);
-	let de = o(async () => {
+	let me = s(async () => {
 		let e = await Y(H[W]);
 		e && U((t) => {
 			let n = [...t];
@@ -84,254 +84,274 @@ function D() {
 		H,
 		W,
 		Y
-	]), fe = o(() => {
+	]), he = s(() => {
 		let e = W - 1;
 		G(e), Y(H[e]);
 	}, [
 		H,
 		W,
 		Y
-	]), pe = P.length === R, me = W > 0;
+	]), ge = F.length === z, _e = W > 0;
 	r({
 		query: n,
-		variables: { channelId: d },
+		variables: { channelId: p },
 		operationName: "WebhookReceived",
-		enabled: !!d,
-		onData: o(() => {
-			t("webhook.received", { channelId: d }), X.current(Z.current[Q.current]);
-		}, [d]),
-		pollFn: o(() => {
+		enabled: !!p,
+		onData: s(() => {
+			t("webhook.received", { channelId: p }), X.current(Z.current[Q.current]);
+		}, [p]),
+		pollFn: s(() => {
 			X.current(Z.current[Q.current]);
 		}, []),
 		pollIntervalMs: 6e4
 	});
-	let he = (e) => E[e] || E.PENDING;
-	return ue ? /* @__PURE__ */ S("div", {
+	let ve = (e) => D[e] || D.PENDING;
+	return pe ? /* @__PURE__ */ w("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ S(_, {
+		children: /* @__PURE__ */ w(v, {
 			size: 32,
 			className: "animate-spin text-accent-primary"
 		})
-	}) : q || !K ? /* @__PURE__ */ S("div", {
+	}) : q || !K ? /* @__PURE__ */ w("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 			children: [
-				/* @__PURE__ */ S(u, {
+				/* @__PURE__ */ w(d, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ S("div", { children: /* @__PURE__ */ S("p", {
+				/* @__PURE__ */ w("div", { children: /* @__PURE__ */ w("p", {
 					className: "text-sm font-medium text-status-error-text",
 					children: q || "Channel not found"
 				}) }),
-				/* @__PURE__ */ S("button", {
+				/* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => m(`/channels/${d}`),
+					onClick: () => b(`/channels/${p}`),
 					className: "ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
 					children: "Go Back"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ S(i, {
-		permission: a.CHANNEL_WEBHOOK_READ,
-		children: /* @__PURE__ */ C("div", {
+	}) : /* @__PURE__ */ w(a, {
+		permission: o.CHANNEL_WEBHOOK_READ,
+		children: /* @__PURE__ */ T("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ S("button", {
+						children: [/* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: () => m(`/channels/${d}`),
-							"aria-label": O("channel.backToChannel", "Back to channel"),
+							onClick: () => b(`/channels/${p}`),
+							"aria-label": k("channel.backToChannel", "Back to channel"),
 							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors",
-							children: /* @__PURE__ */ S(re, {
+							children: /* @__PURE__ */ w(f, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
+						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
 							className: "text-xl sm:text-2xl font-bold text-text-primary",
-							children: O("channel.webhookEvents", "Webhook Events")
-						}), /* @__PURE__ */ C("p", {
+							children: k("channel.webhookEvents", "Webhook Events")
+						}), /* @__PURE__ */ T("p", {
 							className: "text-sm text-text-secondary mt-1",
 							children: [K.name, " - Event history"]
 						})] })]
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ C("select", {
-							value: R,
-							onChange: (e) => z(Number(e.target.value)),
+						children: [/* @__PURE__ */ T("select", {
+							value: z,
+							onChange: (e) => B(Number(e.target.value)),
 							className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
 							children: [
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ w("option", {
 									value: 10,
 									children: "10 results"
 								}),
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ w("option", {
 									value: 25,
 									children: "25 results"
 								}),
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ w("option", {
 									value: 50,
 									children: "50 results"
 								}),
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ w("option", {
 									value: 100,
 									children: "100 results"
 								})
 							]
-						}), /* @__PURE__ */ S(w, { actions: [{
-							label: O("channel.refresh", "Refresh"),
-							icon: /* @__PURE__ */ S(v, {
+						}), /* @__PURE__ */ w(ae, { actions: [{
+							label: k("channel.refresh", "Refresh"),
+							icon: /* @__PURE__ */ w(y, {
 								size: 16,
-								className: M ? "animate-spin" : "",
+								className: N ? "animate-spin" : "",
 								"aria-hidden": "true"
 							}),
-							disabled: M,
+							disabled: N,
 							onSelect: () => void Y(H[W])
-						}, ...D ? [{
-							label: O("channel.export", "Export"),
-							icon: A ? /* @__PURE__ */ S(_, {
+						}, ...le ? [{
+							label: k("channel.export", "Export"),
+							icon: j ? /* @__PURE__ */ w(v, {
 								size: 16,
 								className: "animate-spin",
 								"aria-hidden": "true"
-							}) : /* @__PURE__ */ S(h, {
+							}) : /* @__PURE__ */ w(ne, {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							disabled: A,
-							onSelect: () => void k()
+							disabled: j,
+							onSelect: () => void A()
 						}] : []] })]
 					})]
 				}),
-				j && /* @__PURE__ */ C("div", {
+				M && /* @__PURE__ */ T("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
-					children: [/* @__PURE__ */ S(u, {
+					children: [/* @__PURE__ */ w(d, {
 						size: 20,
 						className: "text-status-error-text"
-					}), /* @__PURE__ */ S("p", {
+					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: j
+						children: M
 					})]
 				}),
-				/* @__PURE__ */ S(T, {
-					treatment: "insight",
-					className: "p-4 border-border-seam",
-					children: /* @__PURE__ */ S("p", {
+				/* @__PURE__ */ w(ce, {
+					icon: /* @__PURE__ */ w(g, {
+						size: 15,
+						"aria-hidden": "true"
+					}),
+					children: k("channel.webhookEventsPurpose", "Inbound events the provider pushed to this channel — delivery receipts, replies, status callbacks and the like. Each row shows how the event was processed, whether it was a duplicate, and the raw payload so you can inspect exactly what arrived. Use it to verify your webhook endpoint is receiving traffic and to debug why an event wasn't handled. Records are kept for 7 days.")
+				}),
+				/* @__PURE__ */ T(E, {
+					className: "flex items-center gap-3 p-4",
+					children: [/* @__PURE__ */ w("span", {
+						className: "rounded-lg bg-accent-purple-subtle p-2",
+						children: /* @__PURE__ */ w(g, {
+							size: 18,
+							className: "text-accent-purple",
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("p", {
+						className: "text-sm font-semibold text-text-primary",
+						children: [
+							V,
+							" ",
+							V === 1 ? k("channel.webhookEventSingular", "webhook event") : k("channel.webhookEventsPlural", "webhook events")
+						]
+					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: "Webhook events show all incoming webhooks received by this channel. Data is retained for 7 days."
-					})
+						children: k("channel.webhookEventsBannerHint", "All incoming webhooks received by this channel, retained for 7 days. Expand a row to inspect its raw payload.")
+					})] })]
 				}),
-				/* @__PURE__ */ S(T, {
+				/* @__PURE__ */ w(oe, {
 					treatment: "plain",
 					className: "border-border-seam rounded-lg overflow-hidden p-0",
-					children: /* @__PURE__ */ S("div", {
+					children: /* @__PURE__ */ w("div", {
 						className: "overflow-x-auto min-w-full",
-						children: /* @__PURE__ */ C("table", {
+						children: /* @__PURE__ */ T("table", {
 							className: "w-full min-w-[600px]",
-							children: [/* @__PURE__ */ S("thead", {
+							children: [/* @__PURE__ */ w("thead", {
 								className: "bg-bg-sunken/50 border-b border-border-subtle",
-								children: /* @__PURE__ */ C("tr", { children: [
-									/* @__PURE__ */ S("th", {
+								children: /* @__PURE__ */ T("tr", { children: [
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.status", "Status")
+										children: k("channel.status", "Status")
 									}),
-									/* @__PURE__ */ S("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.eventType", "Event Type")
+										children: k("channel.eventType", "Event Type")
 									}),
-									/* @__PURE__ */ S("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.duplicate", "Duplicate")
+										children: k("channel.duplicate", "Duplicate")
 									}),
-									/* @__PURE__ */ S("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.processedAt", "Processed At")
+										children: k("channel.processedAt", "Processed At")
 									}),
-									/* @__PURE__ */ S("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.error", "Error")
+										children: k("channel.error", "Error")
 									}),
-									/* @__PURE__ */ S("th", {
+									/* @__PURE__ */ w("th", {
 										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: O("channel.actions", "Actions")
+										children: k("channel.actions", "Actions")
 									})
 								] })
-							}), /* @__PURE__ */ S("tbody", {
+							}), /* @__PURE__ */ w("tbody", {
 								className: "divide-y divide-border",
-								children: P.length === 0 ? /* @__PURE__ */ S("tr", { children: /* @__PURE__ */ S("td", {
+								children: F.length === 0 ? /* @__PURE__ */ w("tr", { children: /* @__PURE__ */ w("td", {
 									colSpan: 6,
 									className: "px-4 py-8",
-									children: /* @__PURE__ */ S(se, {
+									children: /* @__PURE__ */ w(se, {
 										illustration: "empty-notifications",
-										title: O("channel.noWebhookEventsFound", "No webhook events found")
+										title: k("channel.noWebhookEventsFound", "No webhook events found")
 									})
-								}) }) : P.map((e) => {
-									let t = he(e.status), n = t.icon, r = I === e.id;
-									return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ C("tr", {
+								}) }) : F.map((e) => {
+									let t = ve(e.status), n = t.icon, r = L === e.id;
+									return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T("tr", {
 										className: "hover:bg-bg-sunken/30 transition-colors",
 										children: [
-											/* @__PURE__ */ S("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ C("div", {
+												children: /* @__PURE__ */ T("div", {
 													className: "flex items-center gap-2",
-													children: [/* @__PURE__ */ S(n, {
+													children: [/* @__PURE__ */ w(n, {
 														size: 14,
 														className: t.color.split(" ")[0]
-													}), /* @__PURE__ */ S("span", {
+													}), /* @__PURE__ */ w("span", {
 														className: `text-sm font-medium ${t.color}`,
 														children: t.label
 													})]
 												})
 											}),
-											/* @__PURE__ */ S("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-sm font-mono text-text-primary",
 												children: e.eventType
 											}),
-											/* @__PURE__ */ S("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3",
-												children: e.isDuplicate ? /* @__PURE__ */ S("span", {
+												children: e.isDuplicate ? /* @__PURE__ */ w("span", {
 													className: "text-xs text-status-warning-text bg-status-warning-bg-subtle px-2 py-1 rounded",
 													children: "Duplicate"
-												}) : /* @__PURE__ */ S("span", {
+												}) : /* @__PURE__ */ w("span", {
 													className: "text-xs text-text-secondary",
 													children: "No"
 												})
 											}),
-											/* @__PURE__ */ S("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-sm text-text-secondary",
 												children: e.processedAt ? new Date(e.processedAt).toLocaleString() : "-"
 											}),
-											/* @__PURE__ */ S("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3 text-sm text-status-error-text max-w-xs truncate",
 												children: e.errorMessage || "-"
 											}),
-											/* @__PURE__ */ S("td", {
+											/* @__PURE__ */ w("td", {
 												className: "px-4 py-3",
-												children: /* @__PURE__ */ S("button", {
+												children: /* @__PURE__ */ w("button", {
 													type: "button",
-													onClick: () => L(r ? null : e.id),
-													"aria-label": r ? O("channel.hidePayload", "Hide payload") : O("channel.viewPayload", "View payload"),
+													onClick: () => R(r ? null : e.id),
+													"aria-label": r ? k("channel.hidePayload", "Hide payload") : k("channel.viewPayload", "View payload"),
 													"aria-expanded": r,
 													className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded transition-colors",
-													children: S(r ? g : ie, {
+													children: w(r ? _ : re, {
 														size: 16,
 														"aria-hidden": "true"
 													})
 												})
 											})
 										]
-									}, e.id), r && /* @__PURE__ */ S("tr", { children: /* @__PURE__ */ S("td", {
+									}, e.id), r && /* @__PURE__ */ w("tr", { children: /* @__PURE__ */ w("td", {
 										colSpan: 6,
 										className: "px-4 py-3 bg-bg-sunken/30",
-										children: /* @__PURE__ */ C("div", {
+										children: /* @__PURE__ */ T("div", {
 											className: "text-xs",
-											children: [/* @__PURE__ */ C("p", {
+											children: [/* @__PURE__ */ T("p", {
 												className: "text-text-secondary mb-1",
-												children: [O("channel.payload", "Payload"), ":"]
-											}), /* @__PURE__ */ S("pre", {
+												children: [k("channel.payload", "Payload"), ":"]
+											}), /* @__PURE__ */ w("pre", {
 												className: "bg-surface p-2 rounded border border-border-subtle overflow-auto",
 												children: JSON.stringify(e.payload, null, 2)
 											})]
@@ -342,39 +362,39 @@ function D() {
 						})
 					})
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ S("p", {
+					children: [/* @__PURE__ */ w("p", {
 						className: "text-sm text-text-secondary",
-						children: B > 0 && /* @__PURE__ */ C(x, { children: [
-							O("channel.page", "Page"),
+						children: V > 0 && /* @__PURE__ */ T(C, { children: [
+							k("channel.page", "Page"),
 							" ",
-							/* @__PURE__ */ S("span", {
+							/* @__PURE__ */ w("span", {
 								className: "font-medium",
 								children: W + 1
 							}),
 							" · ",
-							O("channel.totalRecords", "Total"),
+							k("channel.totalRecords", "Total"),
 							": ",
-							/* @__PURE__ */ S("span", {
+							/* @__PURE__ */ w("span", {
 								className: "font-medium",
-								children: B
+								children: V
 							})
 						] })
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ C("button", {
+						children: [/* @__PURE__ */ T("button", {
 							type: "button",
-							onClick: fe,
-							disabled: !me || M,
+							onClick: he,
+							disabled: !_e || N,
 							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-							children: [/* @__PURE__ */ S(f, { size: 16 }), O("channel.previous", "Previous")]
-						}), /* @__PURE__ */ C("button", {
+							children: [/* @__PURE__ */ w(m, { size: 16 }), k("channel.previous", "Previous")]
+						}), /* @__PURE__ */ T("button", {
 							type: "button",
-							onClick: () => void de(),
-							disabled: !pe || M,
+							onClick: () => void me(),
+							disabled: !ge || N,
 							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-							children: [O("channel.next", "Next"), /* @__PURE__ */ S(p, { size: 16 })]
+							children: [k("channel.next", "Next"), /* @__PURE__ */ w(h, { size: 16 })]
 						})]
 					})]
 				})
@@ -383,6 +403,6 @@ function D() {
 	});
 }
 //#endregion
-export { D as WebhookEventsPage };
+export { O as WebhookEventsPage };
 
 //# sourceMappingURL=WebhookEventsPage.js.map