@burdenoff/microfe-hookmovies 2026.706.2 → 2026.706.4

package/dist/hookmovies/pages/library/EntitlementsPage.js

@@ -1,288 +1,514 @@
 import { useHookMovies as e } from "../../context/HookMoviesContext.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { StatusBadge as n } from "../../components/StatusBadge.js";
-import { useGrantEntitlement as r, useMyEntitlements as i, useRevokeEntitlement as a, useTitles as o } from "../../hooks/useHookMoviesApi.js";
-import { formatDate as s, formatEnumLabel as c } from "../../utils/formatters.js";
-import { ErrorState as l, LoadingState as ee } from "../../components/StateViews.js";
-import { EmptyState as u } from "../../components/EmptyState.js";
-import { useState as d } from "react";
-import { PlayCircle as f, Plus as p, Ticket as m, X as h, XCircle as g } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { GlassCard as y } from "@burdenoff/fe-libs/ui";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { MetricsCard as r } from "../../components/MetricsCard.js";
+import { StatusBadge as i } from "../../components/StatusBadge.js";
+import { useGrantEntitlement as a, useMyEntitlements as ee, useRevokeEntitlement as te, useTitles as ne } from "../../hooks/useHookMoviesApi.js";
+import { formatDate as o, formatEnumLabel as s } from "../../utils/formatters.js";
+import { EmptyState as re } from "../../components/EmptyState.js";
+import { ErrorState as c, LoadingState as ie } from "../../components/StateViews.js";
+import { useEffect as l, useMemo as u, useRef as ae, useState as d } from "react";
+import { CalendarClock as oe, Clock as se, Film as f, Globe as ce, PlayCircle as p, Plus as le, Ticket as m, X as ue, XCircle as h } from "lucide-react";
+import { Fragment as de, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { GlassCard as v } from "@burdenoff/fe-libs/ui";
 //#region src/hookmovies/pages/library/EntitlementsPage.tsx
-var b = [
+var fe = [
 	"FREE_AVOD",
 	"SVOD",
 	"TVOD_RENT",
 	"TVOD_BUY",
 	"PPV",
 	"FAST"
-], x = [
+], y = [
 	"SUBSCRIPTION",
 	"PURCHASE",
 	"RENTAL",
 	"PROMO",
 	"FREE"
-], S = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", C = "mb-1.5 block text-xs font-medium text-text-secondary", w = () => {
-	let { navigateTo: w, currentUser: T } = e(), { data: E, isLoading: D, isError: O, refetch: k } = i(), A = a(), j = r(), [M, N] = d(!1), [P, F] = d(""), I = o({}, {
+], b = {
+	SUBSCRIPTION: "bg-accent-blue-subtle text-accent-blue",
+	PURCHASE: "bg-accent-teal-subtle text-accent-teal",
+	RENTAL: "bg-accent-purple-subtle text-accent-purple",
+	PROMO: "bg-accent-indigo-subtle text-accent-indigo",
+	FREE: "bg-bg-sunken text-text-secondary"
+}, x = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", S = "mb-1.5 block text-xs font-medium text-text-secondary", pe = 1440 * 60 * 1e3, C = ({ title: e }) => /* @__PURE__ */ _("div", {
+	className: "relative flex h-11 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border-seam bg-gradient-to-br from-bg-sunken to-bg-surface",
+	children: [/* @__PURE__ */ g("span", {
+		className: "text-sm font-semibold text-text-secondary",
+		children: e.trim().charAt(0).toUpperCase() || "?"
+	}), /* @__PURE__ */ g(f, {
+		className: "absolute bottom-0.5 right-0.5 h-2.5 w-2.5 text-text-muted",
+		"aria-hidden": "true"
+	})]
+}), w = ({ source: e }) => /* @__PURE__ */ g("span", {
+	className: t("inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide", b[e]),
+	children: s(e)
+}), T = () => {
+	let { navigateTo: t, currentUser: f } = e(), { data: b, isLoading: T, isError: E, refetch: me } = ee(), D = te(), O = a(), [k, A] = d(!1), [j, M] = d(""), N = ne({}, {
 		limit: 200,
 		offset: 0
-	}, P), [L, R] = d(""), [z, B] = d(T?.id ?? ""), [V, H] = d("SVOD"), [U, W] = d("SUBSCRIPTION"), [G, K] = d(""), [q, J] = d(""), [Y, X] = d(null), [Z, Q] = d(null), $ = E ?? [], te = () => {
-		R(""), B(T?.id ?? ""), H("SVOD"), W("SUBSCRIPTION"), K(""), J(""), F(""), X(null);
-	}, ne = async (e) => {
-		if (e.preventDefault(), X(null), !L) {
-			X("Select a title.");
+	}, j), [P, F] = d(""), [I, L] = d(f?.id ?? ""), [R, z] = d("SVOD"), [B, V] = d("SUBSCRIPTION"), [H, U] = d(""), [W, G] = d(""), [K, q] = d(null), [J, Y] = d(null), X = ae(null), Z = u(() => b ?? [], [b]), Q = u(() => {
+		let e = Date.now(), t = 0, n = 0;
+		for (let r of Z) if (r.status === "ACTIVE" && (t += 1, r.expiresAt)) {
+			let t = new Date(r.expiresAt).getTime() - e;
+			t > 0 && t <= 30 * pe && (n += 1);
+		}
+		return {
+			total: Z.length,
+			active: t,
+			expiringSoon: n
+		};
+	}, [Z]);
+	l(() => {
+		if (!k) return;
+		let e = (e) => {
+			e.key === "Escape" && !O.isPending && A(!1);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [k, O.isPending]), l(() => {
+		k && X.current?.focus();
+	}, [k]);
+	let he = () => {
+		F(""), L(f?.id ?? ""), z("SVOD"), V("SUBSCRIPTION"), U(""), G(""), M(""), q(null);
+	}, ge = async (e) => {
+		if (e.preventDefault(), q(null), !P) {
+			q("Select a title.");
 			return;
 		}
-		if (!z.trim()) {
-			X("A user id is required.");
+		if (!I.trim()) {
+			q("A user id is required.");
 			return;
 		}
 		let t = {
-			titleId: L,
-			userId: z.trim(),
-			mode: V,
-			source: U,
-			territory: G.trim() ? G.trim().toUpperCase() : void 0,
-			expiresAt: q ? new Date(q).toISOString() : void 0
+			titleId: P,
+			userId: I.trim(),
+			mode: R,
+			source: B,
+			territory: H.trim() ? H.trim().toUpperCase() : void 0,
+			expiresAt: W ? new Date(W).toISOString() : void 0
 		};
 		try {
-			await j.mutateAsync(t), te(), N(!1);
+			await O.mutateAsync(t), he(), A(!1);
 		} catch (e) {
-			X(e instanceof Error ? e.message : "Failed to grant entitlement");
+			q(e instanceof Error ? e.message : "Failed to grant entitlement");
 		}
-	}, re = async (e) => {
-		Q(null);
+	}, $ = async (e) => {
+		Y(null);
 		try {
-			await A.mutateAsync(e);
+			await D.mutateAsync(e);
 		} catch (e) {
-			Q(e instanceof Error ? e.message : "Failed to revoke entitlement");
+			Y(e instanceof Error ? e.message : "Failed to revoke entitlement");
 		}
 	};
-	return /* @__PURE__ */ v(t, {
+	return /* @__PURE__ */ _(n, {
 		title: "My Entitlements",
 		description: "What you can watch right now",
 		purpose: "Your computed right to watch each title — from subscriptions, purchases, rentals, or promos. Entitlements derive from plan and rights windows.",
-		actions: /* @__PURE__ */ v("button", {
+		actions: /* @__PURE__ */ _("button", {
 			type: "button",
-			onClick: () => N((e) => !e),
+			onClick: () => A(!0),
 			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 transition-opacity",
-			children: [/* @__PURE__ */ _(p, { className: "h-4 w-4" }), "Grant Entitlement"]
+			children: [/* @__PURE__ */ g(le, { className: "h-4 w-4" }), "Grant Entitlement"]
 		}),
 		children: [
-			Z && /* @__PURE__ */ _("div", {
+			J && /* @__PURE__ */ g("div", {
 				className: "mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
-				children: Z
+				children: J
 			}),
-			M && /* @__PURE__ */ v(y, {
-				treatment: "glass",
-				className: "mb-6 border-border-seam p-5",
-				children: [/* @__PURE__ */ v("div", {
-					className: "mb-3 flex items-center justify-between",
-					children: [/* @__PURE__ */ _("h2", {
-						className: "text-sm font-semibold text-text-primary",
-						children: "Grant Entitlement"
-					}), /* @__PURE__ */ _("button", {
-						type: "button",
-						onClick: () => N(!1),
-						"aria-label": "Close grant form",
-						className: "rounded-md p-1 text-text-secondary hover:text-text-primary",
-						children: /* @__PURE__ */ _(h, { className: "h-4 w-4" })
-					})]
-				}), /* @__PURE__ */ v("form", {
-					onSubmit: ne,
-					className: "space-y-4",
-					children: [
-						Y && /* @__PURE__ */ _("div", {
-							className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-							children: Y
-						}),
-						/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-							htmlFor: "grant-title-search",
-							className: C,
-							children: "Search titles"
-						}), /* @__PURE__ */ _("input", {
-							id: "grant-title-search",
-							type: "text",
-							value: P,
-							onChange: (e) => F(e.target.value),
-							placeholder: "Filter titles by name…",
-							className: S
-						})] }),
-						/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-							htmlFor: "grant-title",
-							className: C,
-							children: "Title *"
-						}), /* @__PURE__ */ v("select", {
-							id: "grant-title",
-							value: L,
-							onChange: (e) => R(e.target.value),
-							className: S,
-							required: !0,
-							children: [/* @__PURE__ */ _("option", {
-								value: "",
-								children: I.isLoading ? "Loading titles…" : "Select a title…"
-							}), (I.data?.items ?? []).map((e) => /* @__PURE__ */ _("option", {
-								value: e.id,
-								children: e.title
-							}, e.id))]
-						})] }),
-						/* @__PURE__ */ v("div", { children: [
-							/* @__PURE__ */ _("label", {
-								htmlFor: "grant-user",
-								className: C,
-								children: "User ID *"
-							}),
-							/* @__PURE__ */ _("input", {
-								id: "grant-user",
-								type: "text",
-								value: z,
-								onChange: (e) => B(e.target.value),
-								placeholder: "User id to grant access to",
-								className: S,
-								required: !0
-							}),
-							/* @__PURE__ */ _("p", {
-								className: "mt-1 text-[11px] text-text-secondary",
-								children: "Defaults to your own id. Change it to grant access to another user."
-							})
-						] }),
-						/* @__PURE__ */ v("div", {
-							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-							children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-								htmlFor: "grant-mode",
-								className: C,
-								children: "Monetization Mode *"
-							}), /* @__PURE__ */ _("select", {
-								id: "grant-mode",
-								value: V,
-								onChange: (e) => H(e.target.value),
-								className: S,
-								required: !0,
-								children: b.map((e) => /* @__PURE__ */ _("option", {
-									value: e,
-									children: c(e)
-								}, e))
-							})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-								htmlFor: "grant-source",
-								className: C,
-								children: "Source"
-							}), /* @__PURE__ */ _("select", {
-								id: "grant-source",
-								value: U,
-								onChange: (e) => W(e.target.value),
-								className: S,
-								children: x.map((e) => /* @__PURE__ */ _("option", {
-									value: e,
-									children: c(e)
-								}, e))
-							})] })]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-							children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-								htmlFor: "grant-territory",
-								className: C,
-								children: "Territory (ISO code, optional)"
-							}), /* @__PURE__ */ _("input", {
-								id: "grant-territory",
-								type: "text",
-								value: G,
-								onChange: (e) => K(e.target.value),
-								placeholder: "US",
-								className: S
-							})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
-								htmlFor: "grant-expires",
-								className: C,
-								children: "Expires At (optional)"
-							}), /* @__PURE__ */ _("input", {
-								id: "grant-expires",
-								type: "date",
-								value: q,
-								onChange: (e) => J(e.target.value),
-								className: S
-							})] })]
-						}),
-						/* @__PURE__ */ _("button", {
-							type: "submit",
-							disabled: j.isPending,
-							className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50 transition-opacity",
-							children: j.isPending ? "Granting…" : "Grant Entitlement"
-						})
-					]
-				})]
+			!T && !E && Z.length > 0 && /* @__PURE__ */ _("div", {
+				className: "mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ g(r, {
+						icon: /* @__PURE__ */ g(p, { className: "h-5 w-5" }),
+						value: Q.active,
+						label: "Active entitlements",
+						className: "p-4 sm:p-5"
+					}),
+					/* @__PURE__ */ g(r, {
+						icon: /* @__PURE__ */ g(oe, { className: "h-5 w-5" }),
+						value: Q.expiringSoon,
+						label: "Expiring within 30 days",
+						className: "p-4 sm:p-5"
+					}),
+					/* @__PURE__ */ g(r, {
+						icon: /* @__PURE__ */ g(m, { className: "h-5 w-5" }),
+						value: Q.total,
+						label: "Total entitlements",
+						className: "p-4 sm:p-5"
+					})
+				]
 			}),
-			D ? /* @__PURE__ */ _(ee, { label: "Loading entitlements…" }) : O ? /* @__PURE__ */ _(l, { onRetry: () => void k() }) : $.length === 0 ? /* @__PURE__ */ _(u, {
-				icon: /* @__PURE__ */ _(m, { className: "h-12 w-12" }),
+			T ? /* @__PURE__ */ g(ie, { label: "Loading entitlements…" }) : E ? /* @__PURE__ */ g(c, { onRetry: () => void me() }) : Z.length === 0 ? /* @__PURE__ */ g(re, {
+				icon: /* @__PURE__ */ g(m, { className: "h-12 w-12" }),
 				title: "No entitlements yet",
 				description: "You don't have any active watch rights. Grant an entitlement above, or browse the catalog to find something to watch.",
-				action: /* @__PURE__ */ _("button", {
+				action: /* @__PURE__ */ g("button", {
 					type: "button",
-					onClick: () => w("catalog/titles"),
+					onClick: () => t("catalog/titles"),
 					className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 transition-opacity",
 					children: "Browse Catalog"
 				})
-			}) : /* @__PURE__ */ _("div", {
-				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: $.map((e) => /* @__PURE__ */ v(y, {
+			}) : /* @__PURE__ */ _(de, { children: [/* @__PURE__ */ g(v, {
+				treatment: "glass",
+				className: "hidden overflow-hidden border-border-seam p-0 md:block",
+				children: /* @__PURE__ */ g("div", {
+					className: "overflow-x-auto",
+					children: /* @__PURE__ */ _("table", {
+						className: "w-full min-w-[720px] border-collapse text-sm",
+						children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ _("tr", {
+							className: "border-b border-border-seam text-left text-xs font-medium uppercase tracking-wide text-text-secondary",
+							children: [
+								/* @__PURE__ */ g("th", {
+									scope: "col",
+									className: "px-5 py-3 font-medium",
+									children: "Title"
+								}),
+								/* @__PURE__ */ g("th", {
+									scope: "col",
+									className: "px-5 py-3 font-medium",
+									children: "Source"
+								}),
+								/* @__PURE__ */ g("th", {
+									scope: "col",
+									className: "px-5 py-3 font-medium",
+									children: "Monetization"
+								}),
+								/* @__PURE__ */ g("th", {
+									scope: "col",
+									className: "px-5 py-3 font-medium",
+									children: "Territory"
+								}),
+								/* @__PURE__ */ g("th", {
+									scope: "col",
+									className: "px-5 py-3 font-medium",
+									children: "Expires"
+								}),
+								/* @__PURE__ */ g("th", {
+									scope: "col",
+									className: "px-5 py-3 font-medium",
+									children: "Status"
+								}),
+								/* @__PURE__ */ g("th", {
+									scope: "col",
+									className: "px-5 py-3 text-right font-medium",
+									children: "Actions"
+								})
+							]
+						}) }), /* @__PURE__ */ g("tbody", { children: Z.map((e) => /* @__PURE__ */ _("tr", {
+							className: "border-b border-border-seam/60 last:border-0 transition-colors hover:bg-bg-sunken/50",
+							children: [
+								/* @__PURE__ */ g("td", {
+									className: "px-5 py-3",
+									children: /* @__PURE__ */ _("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ g(C, { title: e.title?.title ?? "Title" }), /* @__PURE__ */ g("button", {
+											type: "button",
+											onClick: () => t(`catalog/titles/${e.titleId}`),
+											className: "line-clamp-2 max-w-[16rem] text-left font-medium text-text-primary hover:text-action-primary-bg transition-colors",
+											children: e.title?.title ?? "Title"
+										})]
+									})
+								}),
+								/* @__PURE__ */ g("td", {
+									className: "px-5 py-3",
+									children: /* @__PURE__ */ g(w, { source: e.source })
+								}),
+								/* @__PURE__ */ g("td", {
+									className: "px-5 py-3 text-text-secondary",
+									children: s(e.mode)
+								}),
+								/* @__PURE__ */ g("td", {
+									className: "px-5 py-3 text-text-secondary",
+									children: e.territory ? e.territory : /* @__PURE__ */ g("span", {
+										className: "text-text-muted",
+										children: "—"
+									})
+								}),
+								/* @__PURE__ */ g("td", {
+									className: "px-5 py-3 text-text-secondary",
+									children: e.expiresAt ? o(e.expiresAt, {
+										hour: void 0,
+										minute: void 0
+									}) : /* @__PURE__ */ g("span", {
+										className: "text-text-muted",
+										children: "No expiry"
+									})
+								}),
+								/* @__PURE__ */ g("td", {
+									className: "px-5 py-3",
+									children: /* @__PURE__ */ g(i, { status: e.status })
+								}),
+								/* @__PURE__ */ g("td", {
+									className: "px-5 py-3",
+									children: /* @__PURE__ */ _("div", {
+										className: "flex items-center justify-end gap-2",
+										children: [/* @__PURE__ */ _("button", {
+											type: "button",
+											onClick: () => t(`catalog/titles/${e.titleId}`),
+											className: "inline-flex items-center gap-1 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90 transition-opacity",
+											children: [/* @__PURE__ */ g(p, { className: "h-3.5 w-3.5" }), "Watch"]
+										}), e.status === "ACTIVE" && /* @__PURE__ */ _("button", {
+											type: "button",
+											disabled: D.isPending,
+											onClick: () => void $(e.id),
+											className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-xs font-medium text-text-secondary hover:border-status-error-border hover:text-status-error-text disabled:opacity-50 transition-colors",
+											children: [/* @__PURE__ */ g(h, { className: "h-3.5 w-3.5" }), "Revoke"]
+										})]
+									})
+								})
+							]
+						}, e.id)) })]
+					})
+				})
+			}), /* @__PURE__ */ g("div", {
+				className: "grid grid-cols-1 gap-4 md:hidden",
+				children: Z.map((e) => /* @__PURE__ */ _(v, {
 					treatment: "metric",
 					className: "flex flex-col border-border-seam p-4",
 					children: [
-						/* @__PURE__ */ v("div", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ _("button", {
-								type: "button",
-								onClick: () => w(`catalog/titles/${e.titleId}`),
-								className: "line-clamp-2 text-left text-sm font-semibold text-text-primary hover:text-action-primary-bg transition-colors",
-								children: e.title?.title ?? "Title"
-							}), /* @__PURE__ */ _(n, { status: e.status })]
-						}),
-						/* @__PURE__ */ v("div", {
-							className: "mt-2 flex flex-wrap items-center gap-1.5 text-xs text-text-secondary",
+						/* @__PURE__ */ _("div", {
+							className: "flex items-start gap-3",
 							children: [
-								/* @__PURE__ */ _("span", {
-									className: "rounded-full bg-bg-sunken px-2 py-0.5",
-									children: c(e.mode)
-								}),
-								/* @__PURE__ */ _("span", {
-									className: "rounded-full bg-bg-sunken px-2 py-0.5",
-									children: c(e.source)
+								/* @__PURE__ */ g(C, { title: e.title?.title ?? "Title" }),
+								/* @__PURE__ */ _("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ g("button", {
+										type: "button",
+										onClick: () => t(`catalog/titles/${e.titleId}`),
+										className: "line-clamp-2 text-left text-sm font-semibold text-text-primary hover:text-action-primary-bg transition-colors",
+										children: e.title?.title ?? "Title"
+									}), /* @__PURE__ */ _("div", {
+										className: "mt-1.5 flex flex-wrap items-center gap-1.5",
+										children: [/* @__PURE__ */ g(w, { source: e.source }), /* @__PURE__ */ g("span", {
+											className: "rounded-full bg-bg-sunken px-2 py-0.5 text-[11px] text-text-secondary",
+											children: s(e.mode)
+										})]
+									})]
 								}),
-								e.territory && /* @__PURE__ */ _("span", {
-									className: "rounded-full bg-bg-sunken px-2 py-0.5",
-									children: e.territory
-								})
+								/* @__PURE__ */ g(i, { status: e.status })
 							]
 						}),
-						e.expiresAt && /* @__PURE__ */ v("p", {
-							className: "mt-2 text-xs text-text-secondary",
-							children: ["Expires ", s(e.expiresAt, {
-								hour: void 0,
-								minute: void 0
+						/* @__PURE__ */ _("dl", {
+							className: "mt-3 grid grid-cols-2 gap-x-4 gap-y-2 text-xs",
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex items-center gap-1.5 text-text-secondary",
+								children: [
+									/* @__PURE__ */ g(ce, {
+										className: "h-3.5 w-3.5 text-text-muted",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ g("dt", {
+										className: "sr-only",
+										children: "Territory"
+									}),
+									/* @__PURE__ */ g("dd", { children: e.territory ? e.territory : "Worldwide" })
+								]
+							}), /* @__PURE__ */ _("div", {
+								className: "flex items-center gap-1.5 text-text-secondary",
+								children: [
+									/* @__PURE__ */ g(se, {
+										className: "h-3.5 w-3.5 text-text-muted",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ g("dt", {
+										className: "sr-only",
+										children: "Expires"
+									}),
+									/* @__PURE__ */ g("dd", { children: e.expiresAt ? o(e.expiresAt, {
+										hour: void 0,
+										minute: void 0
+									}) : "No expiry" })
+								]
 							})]
 						}),
-						/* @__PURE__ */ v("div", {
-							className: "mt-auto flex items-center gap-2 pt-3",
-							children: [/* @__PURE__ */ v("button", {
+						/* @__PURE__ */ _("div", {
+							className: "mt-4 flex items-center gap-2",
+							children: [/* @__PURE__ */ _("button", {
 								type: "button",
-								onClick: () => w(`catalog/titles/${e.titleId}`),
+								onClick: () => t(`catalog/titles/${e.titleId}`),
 								className: "inline-flex flex-1 items-center justify-center gap-1 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90 transition-opacity",
-								children: [/* @__PURE__ */ _(f, { className: "h-3.5 w-3.5" }), "Watch"]
-							}), e.status === "ACTIVE" && /* @__PURE__ */ v("button", {
+								children: [/* @__PURE__ */ g(p, { className: "h-3.5 w-3.5" }), "Watch"]
+							}), e.status === "ACTIVE" && /* @__PURE__ */ _("button", {
 								type: "button",
-								disabled: A.isPending,
-								onClick: () => void re(e.id),
-								className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-xs font-medium text-text-secondary hover:text-status-error-text disabled:opacity-50 transition-colors",
-								children: [/* @__PURE__ */ _(g, { className: "h-3.5 w-3.5" }), "Revoke"]
+								disabled: D.isPending,
+								onClick: () => void $(e.id),
+								className: "inline-flex items-center gap-1 rounded-lg border border-border-seam px-3 py-1.5 text-xs font-medium text-text-secondary hover:border-status-error-border hover:text-status-error-text disabled:opacity-50 transition-colors",
+								children: [/* @__PURE__ */ g(h, { className: "h-3.5 w-3.5" }), "Revoke"]
 							})]
 						})
 					]
 				}, e.id))
+			})] }),
+			k && /* @__PURE__ */ _("div", {
+				className: "fixed inset-0 z-50 flex justify-end",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "grant-drawer-title",
+				children: [/* @__PURE__ */ g("button", {
+					type: "button",
+					"aria-label": "Close grant form",
+					onClick: () => A(!1),
+					className: "absolute inset-0 h-full w-full cursor-default bg-bg-canvas/70 backdrop-blur-sm"
+				}), /* @__PURE__ */ _("div", {
+					className: "relative z-10 flex h-full w-full max-w-md flex-col border-l border-border-seam bg-bg-surface shadow-2xl",
+					children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center justify-between border-b border-border-seam px-5 py-4",
+						children: [/* @__PURE__ */ _("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ g("span", {
+								className: "flex h-8 w-8 items-center justify-center rounded-lg bg-action-primary-bg-subtle text-action-primary-bg",
+								children: /* @__PURE__ */ g(m, { className: "h-4 w-4" })
+							}), /* @__PURE__ */ g("h2", {
+								id: "grant-drawer-title",
+								className: "text-sm font-semibold text-text-primary",
+								children: "Grant Entitlement"
+							})]
+						}), /* @__PURE__ */ g("button", {
+							type: "button",
+							onClick: () => A(!1),
+							"aria-label": "Close grant form",
+							className: "rounded-md p-1 text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors",
+							children: /* @__PURE__ */ g(ue, { className: "h-4 w-4" })
+						})]
+					}), /* @__PURE__ */ _("form", {
+						onSubmit: ge,
+						className: "flex flex-1 flex-col overflow-y-auto",
+						children: [/* @__PURE__ */ _("div", {
+							className: "flex-1 space-y-4 px-5 py-5",
+							children: [
+								K && /* @__PURE__ */ g("div", {
+									className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+									children: K
+								}),
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+									htmlFor: "grant-title-search",
+									className: S,
+									children: "Search titles"
+								}), /* @__PURE__ */ g("input", {
+									ref: X,
+									id: "grant-title-search",
+									type: "text",
+									value: j,
+									onChange: (e) => M(e.target.value),
+									placeholder: "Filter titles by name…",
+									className: x
+								})] }),
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+									htmlFor: "grant-title",
+									className: S,
+									children: "Title *"
+								}), /* @__PURE__ */ _("select", {
+									id: "grant-title",
+									value: P,
+									onChange: (e) => F(e.target.value),
+									className: x,
+									required: !0,
+									children: [/* @__PURE__ */ g("option", {
+										value: "",
+										children: N.isLoading ? "Loading titles…" : "Select a title…"
+									}), (N.data?.items ?? []).map((e) => /* @__PURE__ */ g("option", {
+										value: e.id,
+										children: e.title
+									}, e.id))]
+								})] }),
+								/* @__PURE__ */ _("div", { children: [
+									/* @__PURE__ */ g("label", {
+										htmlFor: "grant-user",
+										className: S,
+										children: "User ID *"
+									}),
+									/* @__PURE__ */ g("input", {
+										id: "grant-user",
+										type: "text",
+										value: I,
+										onChange: (e) => L(e.target.value),
+										placeholder: "User id to grant access to",
+										className: x,
+										required: !0
+									}),
+									/* @__PURE__ */ g("p", {
+										className: "mt-1 text-[11px] text-text-secondary",
+										children: "Defaults to your own id. Change it to grant access to another user."
+									})
+								] }),
+								/* @__PURE__ */ _("div", {
+									className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+										htmlFor: "grant-mode",
+										className: S,
+										children: "Monetization Mode *"
+									}), /* @__PURE__ */ g("select", {
+										id: "grant-mode",
+										value: R,
+										onChange: (e) => z(e.target.value),
+										className: x,
+										required: !0,
+										children: fe.map((e) => /* @__PURE__ */ g("option", {
+											value: e,
+											children: s(e)
+										}, e))
+									})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+										htmlFor: "grant-source",
+										className: S,
+										children: "Source"
+									}), /* @__PURE__ */ g("select", {
+										id: "grant-source",
+										value: B,
+										onChange: (e) => V(e.target.value),
+										className: x,
+										children: y.map((e) => /* @__PURE__ */ g("option", {
+											value: e,
+											children: s(e)
+										}, e))
+									})] })]
+								}),
+								/* @__PURE__ */ _("div", {
+									className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+										htmlFor: "grant-territory",
+										className: S,
+										children: "Territory (ISO code, optional)"
+									}), /* @__PURE__ */ g("input", {
+										id: "grant-territory",
+										type: "text",
+										value: H,
+										onChange: (e) => U(e.target.value),
+										placeholder: "US",
+										className: x
+									})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+										htmlFor: "grant-expires",
+										className: S,
+										children: "Expires At (optional)"
+									}), /* @__PURE__ */ g("input", {
+										id: "grant-expires",
+										type: "date",
+										value: W,
+										onChange: (e) => G(e.target.value),
+										className: x
+									})] })]
+								})
+							]
+						}), /* @__PURE__ */ _("div", {
+							className: "flex items-center justify-end gap-2 border-t border-border-seam bg-bg-surface px-5 py-4",
+							children: [/* @__PURE__ */ g("button", {
+								type: "button",
+								onClick: () => A(!1),
+								className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors",
+								children: "Cancel"
+							}), /* @__PURE__ */ g("button", {
+								type: "submit",
+								disabled: O.isPending,
+								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 disabled:opacity-50 transition-opacity",
+								children: O.isPending ? "Granting…" : "Grant Entitlement"
+							})]
+						})]
+					})]
+				})]
 			})
 		]
 	});
 };
 //#endregion
-export { w as EntitlementsPage };
+export { T as EntitlementsPage };
 
 //# sourceMappingURL=EntitlementsPage.js.map