@burdenoff/microfe-subscriberbot 2026.706.2 → 2026.706.3

package/dist/subscriberbot/pages/providers/ProvidersListPage.js

@@ -5,16 +5,18 @@ import { formatEnumLabel as r } from "../../utils/formatters.js";
 import { StatusBadge as i } from "../../components/StatusBadge.js";
 import { EmptyState as a } from "../../components/EmptyState.js";
 import { ErrorView as o, LoadingView as s } from "../../components/StateViews.js";
-import { useProviders as c } from "../../hooks/useSubscriberBotApi.js";
-import { useState as l } from "react";
-import { Building2 as u, Plus as d, Search as f, ShieldCheck as p } from "lucide-react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { EmphasisPanel as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
+import { MiniProgress as c } from "../../components/viz.js";
+import "../../components/index.js";
+import { useProviders as l } from "../../hooks/useSubscriberBotApi.js";
+import { useState as u } from "react";
+import { Activity as d, BadgeCheck as f, Building2 as p, ChevronRight as m, Plus as h, Search as g, ShieldCheck as _, Store as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { EmphasisPanel as S, GlassCard as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/providers/ProvidersListPage.tsx
-var y = 24, b = [
+var T = 24, E = [
 	{
 		value: "",
-		label: "All categories"
+		label: "All"
 	},
 	{
 		value: "SAAS",
@@ -80,7 +82,7 @@ var y = 24, b = [
 		value: "OTHER",
 		label: "Other"
 	}
-], x = [
+], D = [
 	{
 		value: "",
 		label: "Any status"
@@ -102,147 +104,248 @@ var y = 24, b = [
 		label: "Deprecated"
 	}
 ];
-function S() {
-	let { navigateTo: S } = e(), [C, w] = l(0), [T, E] = l(""), [D, O] = l(""), [k, A] = l(""), [j, M] = l(""), { data: N, isLoading: P, isError: F, refetch: I, isFetching: L } = c({
-		search: T || void 0,
-		category: k || void 0,
-		status: j || void 0,
+function O(e) {
+	return e >= 70 ? "positive" : e >= 45 ? "accent" : e >= 25 ? "warning" : "negative";
+}
+function k(e) {
+	return e >= 67 ? {
+		label: "High churn risk",
+		cls: "bg-status-error-bg-subtle text-status-error-text"
+	} : e >= 34 ? {
+		label: "Moderate churn risk",
+		cls: "bg-status-warning-bg-subtle text-status-warning-text"
+	} : {
+		label: "Low churn risk",
+		cls: "bg-status-success-bg-subtle text-status-success-text"
+	};
+}
+function A({ provider: e, onOpen: n }) {
+	let a = e.vendorHealthScore, o = e.churnRiskScore, s = o == null ? null : k(o);
+	return /* @__PURE__ */ x(C, {
+		treatment: "glass",
+		role: "button",
+		tabIndex: 0,
+		onClick: n,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n());
+		},
+		"aria-label": `Open ${e.name}`,
+		className: "group flex cursor-pointer flex-col p-5 outline-none transition-all hover:-translate-y-0.5 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ b("span", {
+					className: "flex size-10 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary",
+					children: /* @__PURE__ */ b(p, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ b(i, { status: e.status })]
+			}),
+			/* @__PURE__ */ b("p", {
+				className: "mt-3 truncate text-base font-semibold text-text-primary",
+				children: e.name
+			}),
+			/* @__PURE__ */ b("span", {
+				className: "mt-1 inline-flex w-fit rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary",
+				children: r(e.category)
+			}),
+			e.description ? /* @__PURE__ */ b("p", {
+				className: "mt-3 line-clamp-2 min-h-[2.5rem] text-xs leading-relaxed text-text-secondary",
+				children: e.description
+			}) : /* @__PURE__ */ b("p", {
+				className: "mt-3 min-h-[2.5rem] text-xs italic text-text-secondary/70",
+				children: "No description yet."
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "mt-4 border-t border-border-subtle pt-3",
+				children: [/* @__PURE__ */ x("div", {
+					className: "flex items-center justify-between text-xs",
+					children: [/* @__PURE__ */ x("span", {
+						className: "inline-flex items-center gap-1 text-text-secondary",
+						children: [/* @__PURE__ */ b(_, { className: "h-3.5 w-3.5" }), " Vendor health"]
+					}), /* @__PURE__ */ b("span", {
+						className: "font-semibold tabular-nums text-text-primary",
+						children: a == null ? "—" : `${a}/100`
+					})]
+				}), /* @__PURE__ */ b(c, {
+					value: a ?? 0,
+					tone: a == null ? "accent" : O(a),
+					className: "mt-1.5"
+				})]
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "mt-3 flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ x("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [s && /* @__PURE__ */ b("span", {
+						className: t("inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium", s.cls),
+						children: s.label
+					}), e.region && /* @__PURE__ */ b("span", {
+						className: "text-[11px] text-text-secondary",
+						children: e.region
+					})]
+				}), /* @__PURE__ */ x("span", {
+					className: "inline-flex items-center gap-0.5 text-xs font-medium text-text-link opacity-0 transition-opacity group-hover:opacity-100",
+					children: ["View ", /* @__PURE__ */ b(m, { className: "h-3.5 w-3.5" })]
+				})]
+			})
+		]
+	});
+}
+function j() {
+	let { navigateTo: r } = e(), [i, c] = u(0), [m, _] = u(""), [O, k] = u(""), [j, M] = u(""), [N, P] = u(""), { data: F, isLoading: I, isError: L, refetch: R, isFetching: z } = l({
+		search: m || void 0,
+		category: j || void 0,
+		status: N || void 0,
 		pagination: {
-			limit: y,
-			offset: C * y
+			limit: T,
+			offset: i * T
+		}
+	}), B = F?.items ?? [], V = F?.pageInfo.hasMore ?? !1, H = B.filter((e) => e.status === "VERIFIED").length, U = B.map((e) => e.vendorHealthScore).filter((e) => e != null), W = U.length ? Math.round(U.reduce((e, t) => e + t, 0) / U.length) : null, G = (e) => {
+		e.preventDefault(), _(O.trim()), c(0);
+	}, K = [
+		{
+			icon: v,
+			label: "On this page",
+			value: String(B.length)
+		},
+		{
+			icon: f,
+			label: "Verified",
+			value: String(H)
+		},
+		{
+			icon: d,
+			label: "Avg. vendor health",
+			value: W == null ? "—" : `${W}/100`
 		}
-	}), R = N?.items ?? [], z = N?.pageInfo.hasMore ?? !1;
-	return /* @__PURE__ */ g(n, {
-		title: "Providers",
-		description: "Discover and browse the global provider registry",
-		actions: /* @__PURE__ */ g("button", {
+	];
+	return /* @__PURE__ */ x(n, {
+		title: "Discover providers",
+		description: "Browse the global provider registry — the public face of the Subscription Knowledge Graph",
+		actions: /* @__PURE__ */ x("button", {
 			type: "button",
-			onClick: () => S("/providers/new"),
+			onClick: () => r("/providers/new"),
 			className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
-			children: [/* @__PURE__ */ h(d, { className: "h-4 w-4" }), " Add provider"]
+			children: [/* @__PURE__ */ b(h, { className: "h-4 w-4" }), " Add provider"]
 		}),
 		children: [
-			/* @__PURE__ */ h(v, {
+			/* @__PURE__ */ b(w, {
 				className: "mb-4",
-				children: "The registry is the public face of the Subscription Knowledge Graph — every provider exists here whether or not it integrates. Search and filter to find the ones you have relationships with, or add a new one."
+				children: "Every provider exists here whether or not it integrates. Search and filter to find the ones you have relationships with, compare their vendor health, or add a new one."
 			}),
-			/* @__PURE__ */ h(_, { children: /* @__PURE__ */ g("form", {
-				onSubmit: (e) => {
-					e.preventDefault(), E(D.trim()), w(0);
-				},
+			/* @__PURE__ */ b(S, { children: /* @__PURE__ */ x("form", {
+				onSubmit: G,
 				className: "relative",
-				children: [/* @__PURE__ */ h(f, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ h("input", {
-					type: "text",
-					placeholder: "Search providers by name…",
-					value: D,
-					onChange: (e) => O(e.target.value),
-					className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-				})]
+				children: [
+					/* @__PURE__ */ b(g, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }),
+					/* @__PURE__ */ b("input", {
+						type: "text",
+						placeholder: "Search providers by name…",
+						value: O,
+						onChange: (e) => k(e.target.value),
+						className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-24 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+					}),
+					/* @__PURE__ */ b("button", {
+						type: "submit",
+						className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90",
+						children: "Search"
+					})
+				]
 			}) }),
-			/* @__PURE__ */ g("div", {
-				className: "mt-4 flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ h("select", {
-					"aria-label": "Filter by category",
-					value: k,
-					onChange: (e) => {
-						A(e.target.value), w(0);
-					},
-					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-					children: b.map((e) => /* @__PURE__ */ h("option", {
-						value: e.value,
+			/* @__PURE__ */ b("div", {
+				className: "mt-4 flex items-center gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+				children: E.map((e) => {
+					let n = j === e.value;
+					return /* @__PURE__ */ b("button", {
+						type: "button",
+						"aria-pressed": n,
+						onClick: () => {
+							M(e.value), c(0);
+						},
+						className: t("shrink-0 rounded-full border px-3.5 py-1.5 text-xs font-medium transition-colors", n ? "border-transparent bg-action-primary-bg text-action-primary-text" : "border-border-subtle bg-bg-surface text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
 						children: e.label
-					}, e.value))
-				}), /* @__PURE__ */ h("select", {
+					}, e.value || "all");
+				})
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "mt-3 flex flex-wrap items-center gap-2",
+				children: /* @__PURE__ */ b("select", {
 					"aria-label": "Filter by status",
-					value: j,
+					value: N,
 					onChange: (e) => {
-						M(e.target.value), w(0);
+						P(e.target.value), c(0);
 					},
 					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-					children: x.map((e) => /* @__PURE__ */ h("option", {
+					children: D.map((e) => /* @__PURE__ */ b("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
-				})]
+				})
 			}),
-			P ? /* @__PURE__ */ h(s, { label: "Loading providers…" }) : F ? /* @__PURE__ */ h(o, {
+			!I && !L && B.length > 0 && /* @__PURE__ */ b("div", {
+				className: "mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3",
+				children: K.map((e) => /* @__PURE__ */ x(C, {
+					treatment: "metric",
+					className: "flex items-center gap-3 p-4",
+					children: [/* @__PURE__ */ b("span", {
+						className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+						children: /* @__PURE__ */ b(e.icon, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ x("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ b("p", {
+							className: "truncate text-xs text-text-secondary",
+							children: e.label
+						}), /* @__PURE__ */ b("p", {
+							className: "text-lg font-semibold tabular-nums text-text-primary",
+							children: e.value
+						})]
+					})]
+				}, e.label))
+			}),
+			I ? /* @__PURE__ */ b(s, { label: "Loading providers…" }) : L ? /* @__PURE__ */ b(o, {
 				message: "Could not load the provider registry.",
-				onRetry: () => void I()
-			}) : R.length === 0 ? /* @__PURE__ */ h("div", {
+				onRetry: () => void R()
+			}) : B.length === 0 ? /* @__PURE__ */ b("div", {
 				className: "mt-6",
-				children: /* @__PURE__ */ h(a, {
+				children: /* @__PURE__ */ b(a, {
 					illustration: "empty-search",
-					icon: /* @__PURE__ */ h(u, { className: "h-12 w-12" }),
+					icon: /* @__PURE__ */ b(p, { className: "h-12 w-12" }),
 					title: "No providers found",
-					description: T ? `No providers match "${T}".` : "No providers in the registry with these filters yet.",
-					action: /* @__PURE__ */ h("button", {
+					description: m ? `No providers match "${m}".` : "No providers in the registry with these filters yet.",
+					action: /* @__PURE__ */ b("button", {
 						type: "button",
-						onClick: () => S("/providers/new"),
+						onClick: () => r("/providers/new"),
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
 						children: "Add provider"
 					})
 				})
-			}) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+			}) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
 				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: R.map((e) => /* @__PURE__ */ g("button", {
-					type: "button",
-					onClick: () => S(`/providers/${e.id}`),
-					className: "flex flex-col rounded-lg border border-border-subtle bg-bg-surface p-4 text-left transition-shadow hover:shadow-md",
-					children: [
-						/* @__PURE__ */ g("div", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ h("span", {
-								className: "flex size-9 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-								children: /* @__PURE__ */ h(u, { className: "h-4 w-4" })
-							}), /* @__PURE__ */ h(i, { status: e.status })]
-						}),
-						/* @__PURE__ */ h("p", {
-							className: "mt-3 truncate text-sm font-semibold text-text-primary",
-							children: e.name
-						}),
-						/* @__PURE__ */ h("p", {
-							className: "text-xs text-text-secondary",
-							children: r(e.category)
-						}),
-						e.description && /* @__PURE__ */ h("p", {
-							className: "mt-2 line-clamp-2 text-xs text-text-secondary",
-							children: e.description
-						}),
-						/* @__PURE__ */ g("div", {
-							className: "mt-3 flex flex-wrap items-center gap-2 text-xs text-text-secondary",
-							children: [e.region && /* @__PURE__ */ h("span", { children: e.region }), e.vendorHealthScore != null && /* @__PURE__ */ g("span", {
-								className: "inline-flex items-center gap-1",
-								children: [
-									/* @__PURE__ */ h(p, { className: "h-3 w-3" }),
-									e.vendorHealthScore,
-									"/100"
-								]
-							})]
-						})
-					]
+				children: B.map((e) => /* @__PURE__ */ b(A, {
+					provider: e,
+					onOpen: () => r(`/providers/${e.id}`)
 				}, e.id))
-			}), /* @__PURE__ */ g("div", {
-				className: "mt-4 flex items-center justify-between",
-				children: [/* @__PURE__ */ g("p", {
+			}), /* @__PURE__ */ x("div", {
+				className: "mt-6 flex items-center justify-between",
+				children: [/* @__PURE__ */ x("p", {
 					className: "text-xs text-text-secondary",
 					children: [
 						"Page ",
-						C + 1,
-						L ? " · refreshing…" : ""
+						i + 1,
+						z ? " · refreshing…" : ""
 					]
-				}), /* @__PURE__ */ g("div", {
+				}), /* @__PURE__ */ x("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ h("button", {
+					children: [/* @__PURE__ */ b("button", {
 						type: "button",
-						disabled: C === 0,
-						onClick: () => w((e) => Math.max(0, e - 1)),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", C === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
+						disabled: i === 0,
+						onClick: () => c((e) => Math.max(0, e - 1)),
+						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", i === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
 						children: "Previous"
-					}), /* @__PURE__ */ h("button", {
+					}), /* @__PURE__ */ b("button", {
 						type: "button",
-						disabled: !z,
-						onClick: () => w((e) => e + 1),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", z ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
+						disabled: !V,
+						onClick: () => c((e) => e + 1),
+						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", V ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
 						children: "Next"
 					})]
 				})]
@@ -251,6 +354,6 @@ function S() {
 	});
 }
 //#endregion
-export { S as ProvidersListPage };
+export { j as ProvidersListPage };
 
 //# sourceMappingURL=ProvidersListPage.js.map

package/dist/subscriberbot/pages/providers/ProvidersListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProvidersListPage.js","names":[],"sources":["../../../../src/subscriberbot/pages/providers/ProvidersListPage.tsx"],"sourcesContent":["/**\n * Providers list (Global Provider Registry)\n * @module subscriberbot/pages/providers\n *\n * Discovery: search and browse the provider registry. Server-side search +\n * category/status filters + pagination via `subListProviders`\n * (a SubProviderConnection).\n */\n\nimport { useState } from 'react';\nimport { Plus, Search, Building2, ShieldCheck } from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { useSubscriberBot } from '../../context/SubscriberBotContext';\nimport { useProviders } from '../../hooks/useSubscriberBotApi';\nimport { cn } from '../../utils/cn';\nimport { formatEnumLabel } from '../../utils/formatters';\nimport type { SubProviderCategory, SubProviderStatus } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst CATEGORY_OPTIONS: Array<{ value: '' | SubProviderCategory; label: string }> = [\n  { value: '', label: 'All categories' },\n  { value: 'SAAS', label: 'SaaS' },\n  { value: 'AI_SERVICE', label: 'AI service' },\n  { value: 'STREAMING', label: 'Streaming' },\n  { value: 'NEWSLETTER', label: 'Newsletter' },\n  { value: 'NEWS_DIGEST', label: 'News digest' },\n  { value: 'MEMBERSHIP', label: 'Membership' },\n  { value: 'COMMUNITY', label: 'Community' },\n  { value: 'EDUCATION', label: 'Education' },\n  { value: 'FINANCIAL', label: 'Financial' },\n  { value: 'INSURANCE', label: 'Insurance' },\n  { value: 'TELECOM', label: 'Telecom' },\n  { value: 'UTILITY', label: 'Utility' },\n  { value: 'ASSOCIATION', label: 'Association' },\n  { value: 'LICENSE', label: 'License' },\n  { value: 'CONTRACT', label: 'Contract' },\n  { value: 'OTHER', label: 'Other' },\n];\n\nconst STATUS_OPTIONS: Array<{ value: '' | SubProviderStatus; label: string }> = [\n  { value: '', label: 'Any status' },\n  { value: 'VERIFIED', label: 'Verified' },\n  { value: 'CLAIMED', label: 'Claimed' },\n  { value: 'UNVERIFIED', label: 'Unverified' },\n  { value: 'DEPRECATED', label: 'Deprecated' },\n];\n\nexport function ProvidersListPage() {\n  const { navigateTo } = useSubscriberBot();\n  const [page, setPage] = useState(0);\n  const [search, setSearch] = useState('');\n  const [searchInput, setSearchInput] = useState('');\n  const [category, setCategory] = useState<'' | SubProviderCategory>('');\n  const [status, setStatus] = useState<'' | SubProviderStatus>('');\n\n  const { data, isLoading, isError, refetch, isFetching } = useProviders({\n    search: search || undefined,\n    category: category || undefined,\n    status: status || undefined,\n    pagination: { limit: PAGE_SIZE, offset: page * PAGE_SIZE },\n  });\n\n  const items = data?.items ?? [];\n  const hasMore = data?.pageInfo.hasMore ?? false;\n\n  const submitSearch = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSearch(searchInput.trim());\n    setPage(0);\n  };\n\n  return (\n    <PageLayout\n      title=\"Providers\"\n      description=\"Discover and browse the global provider registry\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/providers/new')}\n          className=\"inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90\"\n        >\n          <Plus className=\"h-4 w-4\" /> Add provider\n        </button>\n      }\n    >\n      <PagePurpose className=\"mb-4\">\n        The registry is the public face of the Subscription Knowledge Graph — every provider exists\n        here whether or not it integrates. Search and filter to find the ones you have relationships\n        with, or add a new one.\n      </PagePurpose>\n\n      <EmphasisPanel>\n        <form onSubmit={submitSearch} className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n          <input\n            type=\"text\"\n            placeholder=\"Search providers by name…\"\n            value={searchInput}\n            onChange={(e) => setSearchInput(e.target.value)}\n            className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n        </form>\n      </EmphasisPanel>\n\n      <div className=\"mt-4 flex flex-wrap items-center gap-3\">\n        <select\n          aria-label=\"Filter by category\"\n          value={category}\n          onChange={(e) => {\n            setCategory(e.target.value as '' | SubProviderCategory);\n            setPage(0);\n          }}\n          className=\"rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n        >\n          {CATEGORY_OPTIONS.map((o) => (\n            <option key={o.value} value={o.value}>\n              {o.label}\n            </option>\n          ))}\n        </select>\n        <select\n          aria-label=\"Filter by status\"\n          value={status}\n          onChange={(e) => {\n            setStatus(e.target.value as '' | SubProviderStatus);\n            setPage(0);\n          }}\n          className=\"rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n        >\n          {STATUS_OPTIONS.map((o) => (\n            <option key={o.value} value={o.value}>\n              {o.label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {isLoading ? (\n        <LoadingView label=\"Loading providers…\" />\n      ) : isError ? (\n        <ErrorView message=\"Could not load the provider registry.\" onRetry={() => void refetch()} />\n      ) : items.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-search\"\n            icon={<Building2 className=\"h-12 w-12\" />}\n            title=\"No providers found\"\n            description={\n              search\n                ? `No providers match \"${search}\".`\n                : 'No providers in the registry with these filters yet.'\n            }\n            action={\n              <button\n                type=\"button\"\n                onClick={() => navigateTo('/providers/new')}\n                className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90\"\n              >\n                Add provider\n              </button>\n            }\n          />\n        </div>\n      ) : (\n        <>\n          <div className=\"mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {items.map((p) => (\n              <button\n                key={p.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/providers/${p.id}`)}\n                className=\"flex flex-col rounded-lg border border-border-subtle bg-bg-surface p-4 text-left transition-shadow hover:shadow-md\"\n              >\n                <div className=\"flex items-start justify-between gap-2\">\n                  <span className=\"flex size-9 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n                    <Building2 className=\"h-4 w-4\" />\n                  </span>\n                  <StatusBadge status={p.status} />\n                </div>\n                <p className=\"mt-3 truncate text-sm font-semibold text-text-primary\">{p.name}</p>\n                <p className=\"text-xs text-text-secondary\">{formatEnumLabel(p.category)}</p>\n                {p.description && (\n                  <p className=\"mt-2 line-clamp-2 text-xs text-text-secondary\">{p.description}</p>\n                )}\n                <div className=\"mt-3 flex flex-wrap items-center gap-2 text-xs text-text-secondary\">\n                  {p.region && <span>{p.region}</span>}\n                  {p.vendorHealthScore != null && (\n                    <span className=\"inline-flex items-center gap-1\">\n                      <ShieldCheck className=\"h-3 w-3\" />\n                      {p.vendorHealthScore}/100\n                    </span>\n                  )}\n                </div>\n              </button>\n            ))}\n          </div>\n\n          <div className=\"mt-4 flex items-center justify-between\">\n            <p className=\"text-xs text-text-secondary\">\n              Page {page + 1}\n              {isFetching ? ' · refreshing…' : ''}\n            </p>\n            <div className=\"flex gap-2\">\n              <button\n                type=\"button\"\n                disabled={page === 0}\n                onClick={() => setPage((p) => Math.max(0, p - 1))}\n                className={cn(\n                  'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                  page === 0\n                    ? 'cursor-not-allowed text-text-secondary opacity-50'\n                    : 'text-text-primary hover:bg-bg-sunken'\n                )}\n              >\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                disabled={!hasMore}\n                onClick={() => setPage((p) => p + 1)}\n                className={cn(\n                  'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                  !hasMore\n                    ? 'cursor-not-allowed text-text-secondary opacity-50'\n                    : 'text-text-primary hover:bg-bg-sunken'\n                )}\n              >\n                Next\n              </button>\n            </div>\n          </div>\n        </>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProvidersListPage.js","names":[],"sources":["../../../../src/subscriberbot/pages/providers/ProvidersListPage.tsx"],"sourcesContent":["/**\n * Providers list (Global Provider Registry)\n * @module subscriberbot/pages/providers\n *\n * Discovery marketplace: search and browse the provider registry. Server-side\n * search + category/status filters + pagination via `subListProviders`\n * (a SubProviderConnection). Category filter chips, a responsive grid of glass\n * provider cards with a real vendor-health indicator + churn hint, and a small\n * live summary strip computed from the fetched page.\n */\n\nimport { useState } from 'react';\nimport {\n  Plus,\n  Search,\n  Building2,\n  ShieldCheck,\n  ChevronRight,\n  Store,\n  Activity,\n  BadgeCheck,\n} from 'lucide-react';\nimport { EmphasisPanel, PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { MiniProgress } from '../../components';\nimport { useSubscriberBot } from '../../context/SubscriberBotContext';\nimport { useProviders } from '../../hooks/useSubscriberBotApi';\nimport { cn } from '../../utils/cn';\nimport { formatEnumLabel } from '../../utils/formatters';\nimport type { SubProvider, SubProviderCategory, SubProviderStatus } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst CATEGORY_OPTIONS: Array<{ value: '' | SubProviderCategory; label: string }> = [\n  { value: '', label: 'All' },\n  { value: 'SAAS', label: 'SaaS' },\n  { value: 'AI_SERVICE', label: 'AI service' },\n  { value: 'STREAMING', label: 'Streaming' },\n  { value: 'NEWSLETTER', label: 'Newsletter' },\n  { value: 'NEWS_DIGEST', label: 'News digest' },\n  { value: 'MEMBERSHIP', label: 'Membership' },\n  { value: 'COMMUNITY', label: 'Community' },\n  { value: 'EDUCATION', label: 'Education' },\n  { value: 'FINANCIAL', label: 'Financial' },\n  { value: 'INSURANCE', label: 'Insurance' },\n  { value: 'TELECOM', label: 'Telecom' },\n  { value: 'UTILITY', label: 'Utility' },\n  { value: 'ASSOCIATION', label: 'Association' },\n  { value: 'LICENSE', label: 'License' },\n  { value: 'CONTRACT', label: 'Contract' },\n  { value: 'OTHER', label: 'Other' },\n];\n\nconst STATUS_OPTIONS: Array<{ value: '' | SubProviderStatus; label: string }> = [\n  { value: '', label: 'Any status' },\n  { value: 'VERIFIED', label: 'Verified' },\n  { value: 'CLAIMED', label: 'Claimed' },\n  { value: 'UNVERIFIED', label: 'Unverified' },\n  { value: 'DEPRECATED', label: 'Deprecated' },\n];\n\n/** Map a 0–100 vendor-health score to a MiniProgress tone. Higher is healthier. */\nfunction healthTone(score: number): 'positive' | 'accent' | 'warning' | 'negative' {\n  if (score >= 70) return 'positive';\n  if (score >= 45) return 'accent';\n  if (score >= 25) return 'warning';\n  return 'negative';\n}\n\n/** Map a 0–100 churn-risk score to a label + semantic tone. Higher is worse. */\nfunction churnMeta(score: number): { label: string; cls: string } {\n  if (score >= 67)\n    return {\n      label: 'High churn risk',\n      cls: 'bg-status-error-bg-subtle text-status-error-text',\n    };\n  if (score >= 34)\n    return {\n      label: 'Moderate churn risk',\n      cls: 'bg-status-warning-bg-subtle text-status-warning-text',\n    };\n  return {\n    label: 'Low churn risk',\n    cls: 'bg-status-success-bg-subtle text-status-success-text',\n  };\n}\n\nfunction ProviderCard({ provider, onOpen }: { provider: SubProvider; onOpen: () => void }) {\n  const health = provider.vendorHealthScore;\n  const churn = provider.churnRiskScore;\n  const churnInfo = churn != null ? churnMeta(churn) : null;\n\n  return (\n    <GlassCard\n      treatment=\"glass\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={onOpen}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onOpen();\n        }\n      }}\n      aria-label={`Open ${provider.name}`}\n      className=\"group flex cursor-pointer flex-col p-5 outline-none transition-all hover:-translate-y-0.5 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <span className=\"flex size-10 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary\">\n          <Building2 className=\"h-5 w-5\" />\n        </span>\n        <StatusBadge status={provider.status} />\n      </div>\n\n      <p className=\"mt-3 truncate text-base font-semibold text-text-primary\">{provider.name}</p>\n      <span className=\"mt-1 inline-flex w-fit rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary\">\n        {formatEnumLabel(provider.category)}\n      </span>\n\n      {provider.description ? (\n        <p className=\"mt-3 line-clamp-2 min-h-[2.5rem] text-xs leading-relaxed text-text-secondary\">\n          {provider.description}\n        </p>\n      ) : (\n        <p className=\"mt-3 min-h-[2.5rem] text-xs italic text-text-secondary/70\">\n          No description yet.\n        </p>\n      )}\n\n      <div className=\"mt-4 border-t border-border-subtle pt-3\">\n        <div className=\"flex items-center justify-between text-xs\">\n          <span className=\"inline-flex items-center gap-1 text-text-secondary\">\n            <ShieldCheck className=\"h-3.5 w-3.5\" /> Vendor health\n          </span>\n          <span className=\"font-semibold tabular-nums text-text-primary\">\n            {health != null ? `${health}/100` : '—'}\n          </span>\n        </div>\n        <MiniProgress\n          value={health ?? 0}\n          tone={health != null ? healthTone(health) : 'accent'}\n          className=\"mt-1.5\"\n        />\n      </div>\n\n      <div className=\"mt-3 flex flex-wrap items-center justify-between gap-2\">\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {churnInfo && (\n            <span\n              className={cn(\n                'inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium',\n                churnInfo.cls\n              )}\n            >\n              {churnInfo.label}\n            </span>\n          )}\n          {provider.region && (\n            <span className=\"text-[11px] text-text-secondary\">{provider.region}</span>\n          )}\n        </div>\n        <span className=\"inline-flex items-center gap-0.5 text-xs font-medium text-text-link opacity-0 transition-opacity group-hover:opacity-100\">\n          View <ChevronRight className=\"h-3.5 w-3.5\" />\n        </span>\n      </div>\n    </GlassCard>\n  );\n}\n\nexport function ProvidersListPage() {\n  const { navigateTo } = useSubscriberBot();\n  const [page, setPage] = useState(0);\n  const [search, setSearch] = useState('');\n  const [searchInput, setSearchInput] = useState('');\n  const [category, setCategory] = useState<'' | SubProviderCategory>('');\n  const [status, setStatus] = useState<'' | SubProviderStatus>('');\n\n  const { data, isLoading, isError, refetch, isFetching } = useProviders({\n    search: search || undefined,\n    category: category || undefined,\n    status: status || undefined,\n    pagination: { limit: PAGE_SIZE, offset: page * PAGE_SIZE },\n  });\n\n  const items = data?.items ?? [];\n  const hasMore = data?.pageInfo.hasMore ?? false;\n\n  // Live summary strip — computed from the fetched page (never fabricated).\n  const verifiedCount = items.filter((p) => p.status === 'VERIFIED').length;\n  const healthScores = items\n    .map((p) => p.vendorHealthScore)\n    .filter((s): s is number => s != null);\n  const avgHealth = healthScores.length\n    ? Math.round(healthScores.reduce((a, b) => a + b, 0) / healthScores.length)\n    : null;\n\n  const submitSearch = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSearch(searchInput.trim());\n    setPage(0);\n  };\n\n  const summary: Array<{ icon: typeof Store; label: string; value: string }> = [\n    { icon: Store, label: 'On this page', value: String(items.length) },\n    { icon: BadgeCheck, label: 'Verified', value: String(verifiedCount) },\n    {\n      icon: Activity,\n      label: 'Avg. vendor health',\n      value: avgHealth != null ? `${avgHealth}/100` : '—',\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Discover providers\"\n      description=\"Browse the global provider registry — the public face of the Subscription Knowledge Graph\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/providers/new')}\n          className=\"inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90\"\n        >\n          <Plus className=\"h-4 w-4\" /> Add provider\n        </button>\n      }\n    >\n      <PagePurpose className=\"mb-4\">\n        Every provider exists here whether or not it integrates. Search and filter to find the ones\n        you have relationships with, compare their vendor health, or add a new one.\n      </PagePurpose>\n\n      <EmphasisPanel>\n        <form onSubmit={submitSearch} className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n          <input\n            type=\"text\"\n            placeholder=\"Search providers by name…\"\n            value={searchInput}\n            onChange={(e) => setSearchInput(e.target.value)}\n            className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-24 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n          <button\n            type=\"submit\"\n            className=\"absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90\"\n          >\n            Search\n          </button>\n        </form>\n      </EmphasisPanel>\n\n      {/* Category filter chips */}\n      <div className=\"mt-4 flex items-center gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n        {CATEGORY_OPTIONS.map((o) => {\n          const active = category === o.value;\n          return (\n            <button\n              key={o.value || 'all'}\n              type=\"button\"\n              aria-pressed={active}\n              onClick={() => {\n                setCategory(o.value);\n                setPage(0);\n              }}\n              className={cn(\n                'shrink-0 rounded-full border px-3.5 py-1.5 text-xs font-medium transition-colors',\n                active\n                  ? 'border-transparent bg-action-primary-bg text-action-primary-text'\n                  : 'border-border-subtle bg-bg-surface text-text-secondary hover:bg-bg-sunken hover:text-text-primary'\n              )}\n            >\n              {o.label}\n            </button>\n          );\n        })}\n      </div>\n\n      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n        <select\n          aria-label=\"Filter by status\"\n          value={status}\n          onChange={(e) => {\n            setStatus(e.target.value as '' | SubProviderStatus);\n            setPage(0);\n          }}\n          className=\"rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n        >\n          {STATUS_OPTIONS.map((o) => (\n            <option key={o.value} value={o.value}>\n              {o.label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {/* Live summary strip */}\n      {!isLoading && !isError && items.length > 0 && (\n        <div className=\"mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3\">\n          {summary.map((s) => (\n            <GlassCard\n              key={s.label}\n              treatment=\"metric\"\n              className=\"flex items-center gap-3 p-4\"\n            >\n              <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n                <s.icon className=\"h-4 w-4\" />\n              </span>\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-xs text-text-secondary\">{s.label}</p>\n                <p className=\"text-lg font-semibold tabular-nums text-text-primary\">{s.value}</p>\n              </div>\n            </GlassCard>\n          ))}\n        </div>\n      )}\n\n      {isLoading ? (\n        <LoadingView label=\"Loading providers…\" />\n      ) : isError ? (\n        <ErrorView message=\"Could not load the provider registry.\" onRetry={() => void refetch()} />\n      ) : items.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-search\"\n            icon={<Building2 className=\"h-12 w-12\" />}\n            title=\"No providers found\"\n            description={\n              search\n                ? `No providers match \"${search}\".`\n                : 'No providers in the registry with these filters yet.'\n            }\n            action={\n              <button\n                type=\"button\"\n                onClick={() => navigateTo('/providers/new')}\n                className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90\"\n              >\n                Add provider\n              </button>\n            }\n          />\n        </div>\n      ) : (\n        <>\n          <div className=\"mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {items.map((p) => (\n              <ProviderCard key={p.id} provider={p} onOpen={() => navigateTo(`/providers/${p.id}`)} />\n            ))}\n          </div>\n\n          <div className=\"mt-6 flex items-center justify-between\">\n            <p className=\"text-xs text-text-secondary\">\n              Page {page + 1}\n              {isFetching ? ' · refreshing…' : ''}\n            </p>\n            <div className=\"flex gap-2\">\n              <button\n                type=\"button\"\n                disabled={page === 0}\n                onClick={() => setPage((p) => Math.max(0, p - 1))}\n                className={cn(\n                  'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                  page === 0\n                    ? 'cursor-not-allowed text-text-secondary opacity-50'\n                    : 'text-text-primary hover:bg-bg-sunken'\n                )}\n              >\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                disabled={!hasMore}\n                onClick={() => setPage((p) => p + 1)}\n                className={cn(\n                  'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                  !hasMore\n                    ? 'cursor-not-allowed text-text-secondary opacity-50'\n                    : 'text-text-primary hover:bg-bg-sunken'\n                )}\n              >\n                Next\n              </button>\n            </div>\n          </div>\n        </>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,IAAM,IAAY,IAEZ,IAA8E;CAClF;EAAE,OAAO;EAAI,OAAO;EAAO;CAC3B;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAc,OAAO;EAAc;CAC5C;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAc,OAAO;EAAc;CAC5C;EAAE,OAAO;EAAe,OAAO;EAAe;CAC9C;EAAE,OAAO;EAAc,OAAO;EAAc;CAC5C;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAa,OAAO;EAAa;CAC1C;EAAE,OAAO;EAAW,OAAO;EAAW;CACtC;EAAE,OAAO;EAAW,OAAO;EAAW;CACtC;EAAE,OAAO;EAAe,OAAO;EAAe;CAC9C;EAAE,OAAO;EAAW,OAAO;EAAW;CACtC;EAAE,OAAO;EAAY,OAAO;EAAY;CACxC;EAAE,OAAO;EAAS,OAAO;EAAS;CACnC,EAEK,IAA0E;CAC9E;EAAE,OAAO;EAAI,OAAO;EAAc;CAClC;EAAE,OAAO;EAAY,OAAO;EAAY;CACxC;EAAE,OAAO;EAAW,OAAO;EAAW;CACtC;EAAE,OAAO;EAAc,OAAO;EAAc;CAC5C;EAAE,OAAO;EAAc,OAAO;EAAc;CAC7C;AAGD,SAAS,EAAW,GAA+D;AAIjF,QAHI,KAAS,KAAW,aACpB,KAAS,KAAW,WACpB,KAAS,KAAW,YACjB;;AAIT,SAAS,EAAU,GAA+C;AAWhE,QAVI,KAAS,KACJ;EACL,OAAO;EACP,KAAK;EACN,GACC,KAAS,KACJ;EACL,OAAO;EACP,KAAK;EACN,GACI;EACL,OAAO;EACP,KAAK;EACN;;AAGH,SAAS,EAAa,EAAE,aAAU,aAAyD;CACzF,IAAM,IAAS,EAAS,mBAClB,IAAQ,EAAS,gBACjB,IAAY,KAAS,OAA0B,OAAnB,EAAU,EAAM;AAElD,QACE,kBAAC,GAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAAY,MAAM;AAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,GAAQ;;EAGZ,cAAY,QAAQ,EAAS;EAC7B,WAAU;YAZZ;GAcE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eACd,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;KAC5B,CAAA,EACP,kBAAC,GAAD,EAAa,QAAQ,EAAS,QAAU,CAAA,CACpC;;GAEN,kBAAC,KAAD;IAAG,WAAU;cAA2D,EAAS;IAAS,CAAA;GAC1F,kBAAC,QAAD;IAAM,WAAU;cACb,EAAgB,EAAS,SAAS;IAC9B,CAAA;GAEN,EAAS,cACR,kBAAC,KAAD;IAAG,WAAU;cACV,EAAS;IACR,CAAA,GAEJ,kBAAC,KAAD;IAAG,WAAU;cAA4D;IAErE,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAa,WAAU,eAAgB,CAAA,EAAA,iBAClC;SACP,kBAAC,QAAD;MAAM,WAAU;gBACb,KAAU,OAAyB,MAAlB,GAAG,EAAO;MACvB,CAAA,CACH;QACN,kBAAC,GAAD;KACE,OAAO,KAAU;KACjB,MAAM,KAAU,OAA4B,WAArB,EAAW,EAAO;KACzC,WAAU;KACV,CAAA,CACE;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KACC,kBAAC,QAAD;MACE,WAAW,EACT,gEACA,EAAU,IACX;gBAEA,EAAU;MACN,CAAA,EAER,EAAS,UACR,kBAAC,QAAD;MAAM,WAAU;gBAAmC,EAAS;MAAc,CAAA,CAExE;QACN,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAA2I,SACpI,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA,CACxC;OACH;;GACI;;;AAIhB,SAAgB,IAAoB;CAClC,IAAM,EAAE,kBAAe,GAAkB,EACnC,CAAC,GAAM,KAAW,EAAS,EAAE,EAC7B,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAU,KAAe,EAAmC,GAAG,EAChE,CAAC,GAAQ,KAAa,EAAiC,GAAG,EAE1D,EAAE,SAAM,cAAW,YAAS,YAAS,kBAAe,EAAa;EACrE,QAAQ,KAAU,KAAA;EAClB,UAAU,KAAY,KAAA;EACtB,QAAQ,KAAU,KAAA;EAClB,YAAY;GAAE,OAAO;GAAW,QAAQ,IAAO;GAAW;EAC3D,CAAC,EAEI,IAAQ,GAAM,SAAS,EAAE,EACzB,IAAU,GAAM,SAAS,WAAW,IAGpC,IAAgB,EAAM,QAAQ,MAAM,EAAE,WAAW,WAAW,CAAC,QAC7D,IAAe,EAClB,KAAK,MAAM,EAAE,kBAAkB,CAC/B,QAAQ,MAAmB,KAAK,KAAK,EAClC,IAAY,EAAa,SAC3B,KAAK,MAAM,EAAa,QAAQ,GAAG,MAAM,IAAI,GAAG,EAAE,GAAG,EAAa,OAAO,GACzE,MAEE,KAAgB,MAAuB;AAG3C,EAFA,EAAE,gBAAgB,EAClB,EAAU,EAAY,MAAM,CAAC,EAC7B,EAAQ,EAAE;IAGN,IAAuE;EAC3E;GAAE,MAAM;GAAO,OAAO;GAAgB,OAAO,OAAO,EAAM,OAAO;GAAE;EACnE;GAAE,MAAM;GAAY,OAAO;GAAY,OAAO,OAAO,EAAc;GAAE;EACrE;GACE,MAAM;GACN,OAAO;GACP,OAAO,KAAa,OAA4B,MAArB,GAAG,EAAU;GACzC;EACF;AAED,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAW,iBAAiB;GAC3C,WAAU;aAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,gBACrB;;YAVb;GAaE,kBAAC,GAAD;IAAa,WAAU;cAAO;IAGhB,CAAA;GAEd,kBAAC,GAAD,EAAA,UACE,kBAAC,QAAD;IAAM,UAAU;IAAc,WAAU;cAAxC;KACE,kBAAC,GAAD,EAAQ,WAAU,wEAAyE,CAAA;KAC3F,kBAAC,SAAD;MACE,MAAK;MACL,aAAY;MACZ,OAAO;MACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;MAC/C,WAAU;MACV,CAAA;KACF,kBAAC,UAAD;MACE,MAAK;MACL,WAAU;gBACX;MAEQ,CAAA;KACJ;OACO,CAAA;GAGhB,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAiB,KAAK,MAAM;KAC3B,IAAM,IAAS,MAAa,EAAE;AAC9B,YACE,kBAAC,UAAD;MAEE,MAAK;MACL,gBAAc;MACd,eAAe;AAEb,OADA,EAAY,EAAE,MAAM,EACpB,EAAQ,EAAE;;MAEZ,WAAW,EACT,oFACA,IACI,qEACA,oGACL;gBAEA,EAAE;MACI,EAfF,EAAE,SAAS,MAeT;MAEX;IACE,CAAA;GAEN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,cAAW;KACX,OAAO;KACP,WAAW,MAAM;AAEf,MADA,EAAU,EAAE,OAAO,MAAgC,EACnD,EAAQ,EAAE;;KAEZ,WAAU;eAET,EAAe,KAAK,MACnB,kBAAC,UAAD;MAAsB,OAAO,EAAE;gBAC5B,EAAE;MACI,EAFI,EAAE,MAEN,CACT;KACK,CAAA;IACL,CAAA;GAGL,CAAC,KAAa,CAAC,KAAW,EAAM,SAAS,KACxC,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,KAAK,MACZ,kBAAC,GAAD;KAEE,WAAU;KACV,WAAU;eAHZ,CAKE,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,EAAE,MAAH,EAAQ,WAAU,WAAY,CAAA;MACzB,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD;OAAG,WAAU;iBAAwC,EAAE;OAAU,CAAA,EACjE,kBAAC,KAAD;OAAG,WAAU;iBAAwD,EAAE;OAAU,CAAA,CAC7E;QACI;OAXL,EAAE,MAWG,CACZ;IACE,CAAA;GAGP,IACC,kBAAC,GAAD,EAAa,OAAM,sBAAuB,CAAA,GACxC,IACF,kBAAC,GAAD;IAAW,SAAQ;IAAwC,eAAe,KAAK,GAAS;IAAI,CAAA,GAC1F,EAAM,WAAW,IACnB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,cAAa;KACb,MAAM,kBAAC,GAAD,EAAW,WAAU,aAAc,CAAA;KACzC,OAAM;KACN,aACE,IACI,uBAAuB,EAAO,MAC9B;KAEN,QACE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,iBAAiB;MAC3C,WAAU;gBACX;MAEQ,CAAA;KAEX,CAAA;IACE,CAAA,GAEN,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,KAAK,MACV,kBAAC,GAAD;KAAyB,UAAU;KAAG,cAAc,EAAW,cAAc,EAAE,KAAK;KAAI,EAArE,EAAE,GAAmE,CACxF;IACE,CAAA,EAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACnC,IAAO;MACZ,IAAa,mBAAmB;MAC/B;QACJ,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,MAAS;MACnB,eAAe,GAAS,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;MACjD,WAAW,EACT,0EACA,MAAS,IACL,sDACA,uCACL;gBACF;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,CAAC;MACX,eAAe,GAAS,MAAM,IAAI,EAAE;MACpC,WAAW,EACT,0EACC,IAEG,yCADA,oDAEL;gBACF;MAEQ,CAAA,CACL;OACF;MACL,EAAA,CAAA;GAEM"}