@burdenoff/microfe-hookmovies 2026.706.2 → 2026.706.3

package/dist/hookmovies/pages/developer/DevPortalPage.js

@@ -0,0 +1,815 @@
+import { useHookMovies as e } from "../../context/HookMoviesContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { useGenerateApiKey as r, useMyApiKeys as i, useRevokeApiKey as a } from "../../hooks/useHookMoviesApi.js";
+import { formatDate as o, formatRelativeTime as s } from "../../utils/formatters.js";
+import { EmptyState as c } from "../../components/EmptyState.js";
+import { ErrorState as l, LoadingState as u } from "../../components/StateViews.js";
+import { useEffect as d, useMemo as f, useState as p } from "react";
+import { BookOpen as m, Boxes as h, Check as g, Clapperboard as _, Code2 as v, Copy as y, ExternalLink as b, KeyRound as x, Package as S, Plus as C, Rocket as w, ShieldAlert as T, Terminal as E, Trash2 as D } from "lucide-react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { GlassCard as j } from "@burdenoff/fe-libs/ui";
+//#region src/hookmovies/pages/developer/DevPortalPage.tsx
+var M = [
+	{
+		id: "overview",
+		label: "Getting Started",
+		icon: w
+	},
+	{
+		id: "graphql",
+		label: "GraphQL API",
+		icon: v
+	},
+	{
+		id: "keys",
+		label: "API Keys",
+		icon: x
+	},
+	{
+		id: "sdks",
+		label: "SDKs & MCP",
+		icon: S
+	},
+	{
+		id: "embed",
+		label: "Embeddable Player",
+		icon: _
+	}
+], N = [{
+	value: "read",
+	label: "Read",
+	description: "Query the catalog, titles, reviews and metadata."
+}, {
+	value: "write",
+	label: "Write",
+	description: "Create and update titles, reviews and other resources."
+}], P = () => {
+	let [e, t] = p(!1);
+	return d(() => {
+		if (!e) return;
+		let n = window.setTimeout(() => t(!1), 1800);
+		return () => window.clearTimeout(n);
+	}, [e]), [e, (e) => {
+		typeof navigator > "u" || !navigator.clipboard || navigator.clipboard.writeText(e).then(() => t(!0), () => t(!1));
+	}];
+}, F = ({ value: e, label: n, className: r }) => {
+	let [i, a] = P();
+	return /* @__PURE__ */ A("button", {
+		type: "button",
+		onClick: () => a(e),
+		className: t("inline-flex items-center gap-1.5 rounded-md border border-border-seam bg-bg-surface px-2.5 py-1 text-xs font-medium text-text-secondary transition-colors hover:border-border-strong hover:text-text-primary", r),
+		"aria-label": i ? "Copied" : `Copy ${n ?? "to clipboard"}`,
+		children: [i ? /* @__PURE__ */ k(g, {
+			className: "h-3.5 w-3.5 text-status-success-text",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ k(y, {
+			className: "h-3.5 w-3.5",
+			"aria-hidden": "true"
+		}), i ? "Copied" : n ?? "Copy"]
+	});
+}, I = /(#[^\n]*|\/\/[^\n]*)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+(?:\.\d+)?\b)|(\b(?:query|mutation|subscription|fragment|type|input|enum|schema|on|true|false|null|const|let|var|import|from|export|default|function|return|await|async|new|curl|POST|GET|Authorization|Bearer|Content-Type)\b)/g, L = (e) => {
+	let t = [], n = 0, r = 0;
+	for (let i of e.matchAll(I)) {
+		let a = i.index ?? 0;
+		a > n && t.push(/* @__PURE__ */ k("span", { children: e.slice(n, a) }, r++));
+		let [o, s, c, l, u] = i;
+		s ? t.push(/* @__PURE__ */ k("span", {
+			className: "text-text-muted italic",
+			children: o
+		}, r++)) : c ? t.push(/* @__PURE__ */ k("span", {
+			className: "text-status-success-text",
+			children: o
+		}, r++)) : l ? t.push(/* @__PURE__ */ k("span", {
+			className: "text-status-warning-text",
+			children: o
+		}, r++)) : u ? t.push(/* @__PURE__ */ k("span", {
+			className: "text-status-info-text font-medium",
+			children: o
+		}, r++)) : t.push(/* @__PURE__ */ k("span", { children: o }, r++)), n = a + o.length;
+	}
+	return n < e.length && t.push(/* @__PURE__ */ k("span", { children: e.slice(n) }, r++)), t;
+}, R = ({ code: e, language: n, className: r }) => /* @__PURE__ */ A("div", {
+	className: t("overflow-hidden rounded-xl border border-border-seam bg-bg-sunken", r),
+	children: [/* @__PURE__ */ A("div", {
+		className: "flex items-center justify-between border-b border-border-seam bg-bg-surface px-3 py-1.5",
+		children: [/* @__PURE__ */ A("span", {
+			className: "inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-text-muted",
+			children: [/* @__PURE__ */ k(E, {
+				className: "h-3 w-3",
+				"aria-hidden": "true"
+			}), n]
+		}), /* @__PURE__ */ k(F, {
+			value: e,
+			label: "Copy"
+		})]
+	}), /* @__PURE__ */ k("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ k("pre", {
+			className: "min-w-0 px-4 py-3 text-[13px] leading-relaxed",
+			children: /* @__PURE__ */ k("code", {
+				className: "font-mono text-text-primary",
+				children: L(e)
+			})
+		})
+	})]
+}), z = ({ icon: e, title: t, children: n }) => /* @__PURE__ */ A("div", {
+	className: "mb-4",
+	children: [/* @__PURE__ */ A("h2", {
+		className: "flex items-center gap-2 text-lg font-semibold text-text-primary",
+		children: [/* @__PURE__ */ k(e, {
+			className: "h-5 w-5 text-action-primary-bg",
+			"aria-hidden": "true"
+		}), t]
+	}), n && /* @__PURE__ */ k("p", {
+		className: "mt-1 max-w-2xl text-sm text-text-secondary",
+		children: n
+	})]
+}), B = ({ children: e }) => /* @__PURE__ */ k("code", {
+	className: "rounded bg-bg-sunken px-1.5 py-0.5 font-mono text-[0.85em] text-text-primary",
+	children: e
+}), V = [
+	{
+		title: "Create an API key",
+		body: /* @__PURE__ */ A(O, { children: [
+			"Head to the ",
+			/* @__PURE__ */ k("strong", { children: "API Keys" }),
+			" tab and mint a key for your registered app. The secret is shown once at creation — copy it somewhere safe."
+		] })
+	},
+	{
+		title: "Point at the GraphQL endpoint",
+		body: /* @__PURE__ */ A(O, { children: [
+			"All HookMovies data is served from a single Apollo Federation gateway. The endpoint is shown in the ",
+			/* @__PURE__ */ k("strong", { children: "GraphQL API" }),
+			" tab."
+		] })
+	},
+	{
+		title: "Authenticate every request",
+		body: /* @__PURE__ */ A(O, { children: [
+			"Send your key as a bearer token in the ",
+			/* @__PURE__ */ k(B, { children: "Authorization" }),
+			" header:",
+			" ",
+			/* @__PURE__ */ k(B, { children: "Authorization: Bearer <apiSecret>" }),
+			"."
+		] })
+	},
+	{
+		title: "Make your first query",
+		body: /* @__PURE__ */ A(O, { children: [
+			"Call ",
+			/* @__PURE__ */ k(B, { children: "hokListTitles" }),
+			" to page through the catalog, then drill into a title with ",
+			/* @__PURE__ */ k(B, { children: "hokTitle(id)" }),
+			"."
+		] })
+	}
+], H = ({ endpoint: e }) => /* @__PURE__ */ A("div", {
+	className: "space-y-6",
+	children: [
+		/* @__PURE__ */ k(z, {
+			icon: w,
+			title: "Getting Started",
+			children: "Build with the HookMovies platform API — a single GraphQL gateway that powers the catalog, productions, auditions, entitlements and playback surfaces you see in this app."
+		}),
+		/* @__PURE__ */ k("ol", {
+			className: "grid gap-4 sm:grid-cols-2",
+			children: V.map((e, t) => /* @__PURE__ */ k("li", { children: /* @__PURE__ */ k(j, {
+				treatment: "glass",
+				className: "h-full border-border-seam p-4",
+				children: /* @__PURE__ */ A("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ k("span", {
+						className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-action-primary-bg text-sm font-semibold text-action-primary-text",
+						children: t + 1
+					}), /* @__PURE__ */ A("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ k("h3", {
+							className: "text-sm font-semibold text-text-primary",
+							children: e.title
+						}), /* @__PURE__ */ k("p", {
+							className: "mt-1 text-sm text-text-secondary",
+							children: e.body
+						})]
+					})]
+				})
+			}) }, e.title))
+		}),
+		/* @__PURE__ */ A(j, {
+			treatment: "metric",
+			className: "border-border-seam p-4",
+			children: [
+				/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-2 text-sm font-medium text-text-primary",
+					children: [/* @__PURE__ */ k(m, {
+						className: "h-4 w-4 text-action-primary-bg",
+						"aria-hidden": "true"
+					}), "Base endpoint"]
+				}),
+				/* @__PURE__ */ k("p", {
+					className: "mt-1 text-sm text-text-secondary",
+					children: "Every request targets the workspace GraphQL gateway:"
+				}),
+				/* @__PURE__ */ A("div", {
+					className: "mt-3 flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ k("code", {
+						className: "min-w-0 flex-1 overflow-x-auto rounded-lg border border-border-seam bg-bg-sunken px-3 py-2 font-mono text-sm text-text-primary",
+						children: e
+					}), /* @__PURE__ */ k(F, {
+						value: e,
+						label: "Copy URL"
+					})]
+				})
+			]
+		})
+	]
+}), U = "query FirstTitles {\n  hokListTitles(pagination: { limit: 10, offset: 0 }, status: PUBLISHED) {\n    items {\n      id\n      title\n      type\n      status\n      releaseYear\n      genres\n    }\n    pageInfo { cursor hasMore }\n    totalCount\n  }\n}", W = "{\n  \"data\": {\n    \"hokListTitles\": {\n      \"items\": [\n        {\n          \"id\": \"9f2c…\",\n          \"title\": \"Midnight in Marseille\",\n          \"type\": \"MOVIE\",\n          \"status\": \"PUBLISHED\",\n          \"releaseYear\": 2025,\n          \"genres\": [\"Drama\", \"Thriller\"]\n        }\n      ],\n      \"pageInfo\": { \"cursor\": null, \"hasMore\": true },\n      \"totalCount\": 128\n    }\n  }\n}", G = ({ endpoint: e }) => {
+	let t = `curl -X POST '${e}' \\
+  -H 'Content-Type: application/json' \\
+  -H 'Authorization: Bearer <apiSecret>' \\
+  -d '{"query": "query { hokListTitles(pagination: { limit: 5 }) { items { id title } totalCount } }"}'`;
+	return /* @__PURE__ */ A("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ k(z, {
+				icon: v,
+				title: "GraphQL API",
+				children: "One federated GraphQL endpoint serves the entire HookMovies domain. Send POST requests with your API key as a bearer token."
+			}),
+			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+				className: "mb-2 text-sm font-semibold text-text-primary",
+				children: "Endpoint"
+			}), /* @__PURE__ */ A("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ k("code", {
+					className: "min-w-0 flex-1 overflow-x-auto rounded-lg border border-border-seam bg-bg-sunken px-3 py-2 font-mono text-sm text-text-primary",
+					children: e
+				}), /* @__PURE__ */ k(F, {
+					value: e,
+					label: "Copy URL"
+				})]
+			})] }),
+			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+				className: "mb-2 text-sm font-semibold text-text-primary",
+				children: "Sample query"
+			}), /* @__PURE__ */ k(R, {
+				language: "graphql",
+				code: U
+			})] }),
+			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+				className: "mb-2 text-sm font-semibold text-text-primary",
+				children: "Sample response"
+			}), /* @__PURE__ */ k(R, {
+				language: "json",
+				code: W
+			})] }),
+			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+				className: "mb-2 text-sm font-semibold text-text-primary",
+				children: "Run it with cURL"
+			}), /* @__PURE__ */ k(R, {
+				language: "bash",
+				code: t
+			})] })
+		]
+	});
+}, K = ({ result: e, onDismiss: t }) => /* @__PURE__ */ k(j, {
+	treatment: "glass",
+	className: "mb-6 border-status-warning-border bg-status-warning-bg-subtle p-5",
+	children: /* @__PURE__ */ A("div", {
+		className: "flex items-start gap-3",
+		children: [/* @__PURE__ */ k(T, {
+			className: "mt-0.5 h-5 w-5 shrink-0 text-status-warning-text",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ A("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ k("h3", {
+					className: "text-sm font-semibold text-text-primary",
+					children: "Save your API secret now"
+				}),
+				/* @__PURE__ */ k("p", {
+					className: "mt-1 text-sm text-text-secondary",
+					children: "This secret is shown only once and cannot be retrieved again. Store it somewhere safe before dismissing this panel."
+				}),
+				/* @__PURE__ */ k("dl", {
+					className: "mt-4 space-y-3",
+					children: [
+						{
+							label: "API key",
+							value: e.apiKey
+						},
+						{
+							label: "API secret",
+							value: e.apiSecret
+						},
+						{
+							label: "Key ID",
+							value: e.keyId
+						}
+					].map((e) => /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("dt", {
+						className: "mb-1 text-xs font-medium text-text-secondary",
+						children: e.label
+					}), /* @__PURE__ */ A("dd", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ k("code", {
+							className: "min-w-0 flex-1 overflow-x-auto rounded-lg border border-border-seam bg-bg-surface px-3 py-2 font-mono text-sm text-text-primary",
+							children: e.value
+						}), /* @__PURE__ */ k(F, {
+							value: e.value,
+							label: "Copy"
+						})]
+					})] }, e.label))
+				}),
+				/* @__PURE__ */ k("button", {
+					type: "button",
+					onClick: t,
+					className: "mt-4 rounded-lg border border-border-seam bg-bg-surface px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
+					children: "I've saved it — dismiss"
+				})
+			]
+		})]
+	})
+}), q = "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)]", J = "mb-1.5 block text-xs font-medium text-text-secondary", Y = ({ onGenerated: e, onClose: n }) => {
+	let i = r(), [a, o] = p(""), [s, c] = p(""), [l, u] = p(["read"]), [d, f] = p(""), [m, h] = p(null), g = (e) => {
+		u((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	};
+	return /* @__PURE__ */ A(j, {
+		treatment: "glass",
+		className: "mb-6 border-border-seam p-5",
+		children: [/* @__PURE__ */ A("h3", {
+			className: "mb-4 flex items-center gap-2 text-sm font-semibold text-text-primary",
+			children: [/* @__PURE__ */ k(x, {
+				className: "h-4 w-4 text-action-primary-bg",
+				"aria-hidden": "true"
+			}), "Generate a new API key"]
+		}), /* @__PURE__ */ A("form", {
+			onSubmit: async (t) => {
+				if (t.preventDefault(), h(null), !a.trim()) {
+					h("Give the key a recognisable name.");
+					return;
+				}
+				if (!s.trim()) {
+					h("Enter the App ID this key will act on behalf of.");
+					return;
+				}
+				if (l.length === 0) {
+					h("Select at least one scope.");
+					return;
+				}
+				try {
+					e(await i.mutateAsync({
+						appId: s.trim(),
+						name: a.trim(),
+						scope: l,
+						expiresAt: d ? new Date(d).toISOString() : void 0
+					}));
+				} catch (e) {
+					h(e instanceof Error ? e.message : "Failed to generate the API key.");
+				}
+			},
+			className: "space-y-4",
+			children: [
+				m && /* @__PURE__ */ k("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: m
+				}),
+				/* @__PURE__ */ A("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
+						htmlFor: "key-name",
+						className: J,
+						children: "Key name *"
+					}), /* @__PURE__ */ k("input", {
+						id: "key-name",
+						value: a,
+						onChange: (e) => o(e.target.value),
+						placeholder: "e.g. Production ingest",
+						className: q,
+						required: !0
+					})] }), /* @__PURE__ */ A("div", { children: [
+						/* @__PURE__ */ k("label", {
+							htmlFor: "key-app-id",
+							className: J,
+							children: "App ID *"
+						}),
+						/* @__PURE__ */ k("input", {
+							id: "key-app-id",
+							value: s,
+							onChange: (e) => c(e.target.value),
+							placeholder: "Your registered app's ID",
+							className: q,
+							required: !0
+						}),
+						/* @__PURE__ */ k("p", {
+							className: "mt-1 text-[11px] text-text-muted",
+							children: "The client app this key acts on behalf of — find it in your workspace app settings."
+						})
+					] })]
+				}),
+				/* @__PURE__ */ A("fieldset", { children: [/* @__PURE__ */ k("legend", {
+					className: J,
+					children: "Scopes *"
+				}), /* @__PURE__ */ k("div", {
+					className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
+					children: N.map((e) => {
+						let n = l.includes(e.value);
+						return /* @__PURE__ */ A("label", {
+							className: t("flex cursor-pointer items-start gap-2 rounded-lg border p-3 text-sm transition-colors", n ? "border-action-primary-bg bg-action-primary-bg/10" : "border-border-subtle hover:border-border-strong"),
+							children: [/* @__PURE__ */ k("input", {
+								type: "checkbox",
+								checked: n,
+								onChange: () => g(e.value),
+								className: "mt-0.5 accent-[var(--color-action-primary-bg)]"
+							}), /* @__PURE__ */ A("span", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ k("span", {
+									className: "block font-medium text-text-primary",
+									children: e.label
+								}), /* @__PURE__ */ k("span", {
+									className: "block text-xs text-text-secondary",
+									children: e.description
+								})]
+							})]
+						}, e.value);
+					})
+				})] }),
+				/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
+					htmlFor: "key-expires",
+					className: J,
+					children: "Expires (optional)"
+				}), /* @__PURE__ */ k("input", {
+					id: "key-expires",
+					type: "date",
+					value: d,
+					onChange: (e) => f(e.target.value),
+					className: t(q, "sm:max-w-xs")
+				})] }),
+				/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ k("button", {
+						type: "submit",
+						disabled: i.isPending,
+						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50",
+						children: i.isPending ? "Generating…" : "Generate key"
+					}), /* @__PURE__ */ k("button", {
+						type: "button",
+						onClick: n,
+						className: "rounded-lg border border-border-seam px-4 py-2 text-sm font-medium text-text-secondary transition-colors hover:text-text-primary",
+						children: "Cancel"
+					})]
+				})
+			]
+		})]
+	});
+}, X = ({ apiKey: e }) => {
+	let t = a(), [n, r] = p(!1), [i, c] = p(null), l = async () => {
+		c(null);
+		try {
+			await t.mutateAsync(e.id);
+		} catch (e) {
+			c(e instanceof Error ? e.message : "Failed to revoke this key."), r(!1);
+		}
+	};
+	return /* @__PURE__ */ A(j, {
+		treatment: "metric",
+		className: "border-border-seam p-4",
+		children: [/* @__PURE__ */ A("div", {
+			className: "flex flex-wrap items-start justify-between gap-3",
+			children: [/* @__PURE__ */ A("div", {
+				className: "min-w-0",
+				children: [
+					/* @__PURE__ */ A("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ k("span", {
+							className: "text-sm font-semibold text-text-primary",
+							children: e.name
+						}), /* @__PURE__ */ A("code", {
+							className: "rounded bg-bg-sunken px-1.5 py-0.5 font-mono text-xs text-text-secondary",
+							children: [e.prefix, "…"]
+						})]
+					}),
+					/* @__PURE__ */ A("div", {
+						className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-muted",
+						children: [
+							e.appName && /* @__PURE__ */ k("span", { children: e.appName }),
+							/* @__PURE__ */ k("span", {
+								"aria-hidden": "true",
+								children: "·"
+							}),
+							/* @__PURE__ */ A("span", { children: ["Created ", o(e.createdAt, {
+								hour: void 0,
+								minute: void 0
+							})] }),
+							/* @__PURE__ */ k("span", {
+								"aria-hidden": "true",
+								children: "·"
+							}),
+							/* @__PURE__ */ k("span", { children: e.lastUsedAt ? `Last used ${s(e.lastUsedAt)}` : "Never used" }),
+							e.expiresAt && /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k("span", {
+								"aria-hidden": "true",
+								children: "·"
+							}), /* @__PURE__ */ A("span", { children: ["Expires ", o(e.expiresAt, {
+								hour: void 0,
+								minute: void 0
+							})] })] })
+						]
+					}),
+					e.scopes.length > 0 && /* @__PURE__ */ k("div", {
+						className: "mt-2 flex flex-wrap gap-1.5",
+						children: e.scopes.map((e) => /* @__PURE__ */ k("span", {
+							className: "rounded-full bg-bg-sunken px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-text-secondary",
+							children: e
+						}, e))
+					})
+				]
+			}), /* @__PURE__ */ k("div", {
+				className: "shrink-0",
+				children: n ? /* @__PURE__ */ A("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ A("button", {
+						type: "button",
+						disabled: t.isPending,
+						onClick: () => void l(),
+						className: "inline-flex items-center gap-1.5 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-1.5 text-xs font-medium text-status-error-text transition-opacity hover:opacity-90 disabled:opacity-50",
+						children: [/* @__PURE__ */ k(D, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}), t.isPending ? "Revoking…" : "Confirm revoke"]
+					}), /* @__PURE__ */ k("button", {
+						type: "button",
+						onClick: () => r(!1),
+						className: "rounded-lg border border-border-seam px-3 py-1.5 text-xs font-medium text-text-secondary transition-colors hover:text-text-primary",
+						children: "Cancel"
+					})]
+				}) : /* @__PURE__ */ A("button", {
+					type: "button",
+					onClick: () => r(!0),
+					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-1.5 text-xs font-medium text-text-secondary transition-colors hover:border-status-error-border hover:text-status-error-text",
+					children: [/* @__PURE__ */ k(D, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					}), "Revoke"]
+				})
+			})]
+		}), i && /* @__PURE__ */ k("p", {
+			className: "mt-2 text-xs text-status-error-text",
+			children: i
+		})]
+	});
+}, Z = () => {
+	let { data: e, isLoading: t, isError: n, refetch: r } = i(), [a, o] = p(!1), [s, d] = p(null), f = e?.apiKeys ?? [];
+	return /* @__PURE__ */ A("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ A("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ k(z, {
+					icon: x,
+					title: "API Keys",
+					children: "Keys authenticate server-to-server calls to the HookMovies GraphQL gateway. They are issued and revoked through the platform identity service — HookMovies never stores your secret."
+				}), /* @__PURE__ */ A("button", {
+					type: "button",
+					onClick: () => o((e) => !e),
+					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 transition-opacity hover:opacity-90",
+					children: [/* @__PURE__ */ k(C, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), "New key"]
+				})]
+			}),
+			s && /* @__PURE__ */ k(K, {
+				result: s,
+				onDismiss: () => d(null)
+			}),
+			a && /* @__PURE__ */ k(Y, {
+				onGenerated: (e) => {
+					d(e), o(!1);
+				},
+				onClose: () => o(!1)
+			}),
+			t ? /* @__PURE__ */ k(u, { label: "Loading your API keys…" }) : n ? /* @__PURE__ */ k(l, {
+				message: "We couldn't load your API keys.",
+				onRetry: () => void r()
+			}) : f.length === 0 ? /* @__PURE__ */ k(c, {
+				icon: /* @__PURE__ */ k(x, { className: "h-12 w-12" }),
+				title: "No API keys yet",
+				description: "Generate your first key to start calling the HookMovies API.",
+				action: /* @__PURE__ */ A("button", {
+					type: "button",
+					onClick: () => o(!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 transition-opacity hover:opacity-90",
+					children: [/* @__PURE__ */ k(C, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), "Generate key"]
+				})
+			}) : /* @__PURE__ */ k("div", {
+				className: "space-y-3",
+				children: f.map((e) => /* @__PURE__ */ k(X, { apiKey: e }, e.id))
+			})
+		]
+	});
+}, Q = [
+	{
+		name: "Node SDK",
+		repo: "hookmovies-sdk-node",
+		description: "Typed TypeScript client for the HookMovies GraphQL API — catalog, titles, reviews and playback.",
+		icon: h,
+		install: {
+			language: "bash",
+			code: "bun add hookmovies-sdk-node\n# or: npm install hookmovies-sdk-node"
+		}
+	},
+	{
+		name: "Python SDK",
+		repo: "hookmovies-sdk-python",
+		description: "Pythonic client with async support for backend integrations and data pipelines.",
+		icon: S,
+		install: {
+			language: "bash",
+			code: "pip install hookmovies-sdk-python"
+		}
+	},
+	{
+		name: "MCP Server",
+		repo: "hookmovies-mcp",
+		description: "Model Context Protocol server that exposes HookMovies tools to AI agents and assistants.",
+		icon: h,
+		install: {
+			language: "bash",
+			code: "bunx hookmovies-mcp --help"
+		}
+	},
+	{
+		name: "CLI",
+		repo: "hookmovies-cli",
+		description: "Command-line tool to manage titles, productions and rights from your terminal or CI.",
+		icon: E,
+		install: {
+			language: "bash",
+			code: "bunx hookmovies-cli titles list"
+		}
+	}
+], $ = () => /* @__PURE__ */ A("div", {
+	className: "space-y-6",
+	children: [/* @__PURE__ */ k(z, {
+		icon: S,
+		title: "SDKs & MCP",
+		children: "Official HookMovies packages wrap the GraphQL API so you can build in your language of choice — or plug the platform straight into an AI agent via MCP."
+	}), /* @__PURE__ */ k("div", {
+		className: "grid gap-4 sm:grid-cols-2",
+		children: Q.map((e) => {
+			let t = e.icon, n = `https://github.com/algoshred/${e.repo}`;
+			return /* @__PURE__ */ A(j, {
+				treatment: "glass",
+				className: "flex h-full flex-col border-border-seam p-4",
+				children: [
+					/* @__PURE__ */ A("div", {
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ A("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ k("span", {
+								className: "flex h-9 w-9 items-center justify-center rounded-lg bg-action-primary-bg/10",
+								children: /* @__PURE__ */ k(t, {
+									className: "h-5 w-5 text-action-primary-bg",
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+								className: "text-sm font-semibold text-text-primary",
+								children: e.name
+							}), /* @__PURE__ */ k("code", {
+								className: "text-[11px] text-text-muted",
+								children: e.repo
+							})] })]
+						}), /* @__PURE__ */ A("a", {
+							href: n,
+							target: "_blank",
+							rel: "noreferrer noopener",
+							className: "inline-flex items-center gap-1 rounded-md border border-border-seam px-2 py-1 text-xs font-medium text-text-secondary transition-colors hover:border-border-strong hover:text-text-primary",
+							children: ["Repo", /* @__PURE__ */ k(b, {
+								className: "h-3 w-3",
+								"aria-hidden": "true"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ k("p", {
+						className: "mt-3 flex-1 text-sm text-text-secondary",
+						children: e.description
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "mt-3",
+						children: /* @__PURE__ */ k(R, {
+							language: e.install.language,
+							code: e.install.code
+						})
+					})
+				]
+			}, e.repo);
+		})
+	})]
+}), ee = ({ watchUrl: e }) => {
+	let t = `<iframe
+  src="${e}"
+  width="100%"
+  height="480"
+  frameborder="0"
+  allow="autoplay; fullscreen; encrypted-media"
+  allowfullscreen
+  title="HookMovies player"
+></iframe>`, n = `<div style="position: relative; padding-top: 56.25%;">
+  <iframe
+    src="${e}"
+    style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;"
+    allow="autoplay; fullscreen; encrypted-media"
+    allowfullscreen
+    title="HookMovies player"
+  ></iframe>
+</div>`;
+	return /* @__PURE__ */ A("div", {
+		className: "space-y-6",
+		children: [
+			/* @__PURE__ */ A(z, {
+				icon: _,
+				title: "Embeddable Player",
+				children: [
+					"Drop a HookMovies title into any web page with a single",
+					" ",
+					/* @__PURE__ */ k(B, { children: "<iframe>" }),
+					". Replace ",
+					/* @__PURE__ */ k(B, { children: "YOUR_TITLE_ID" }),
+					" with the id of any published title."
+				]
+			}),
+			/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+				className: "mb-2 text-sm font-semibold text-text-primary",
+				children: "Basic embed"
+			}), /* @__PURE__ */ k(R, {
+				language: "html",
+				code: t
+			})] }),
+			/* @__PURE__ */ A("div", { children: [
+				/* @__PURE__ */ k("h3", {
+					className: "mb-2 text-sm font-semibold text-text-primary",
+					children: "Responsive (16:9) embed"
+				}),
+				/* @__PURE__ */ k("p", {
+					className: "mb-2 text-sm text-text-secondary",
+					children: "Wrap the iframe in an aspect-ratio box so the player scales fluidly on any device."
+				}),
+				/* @__PURE__ */ k(R, {
+					language: "html",
+					code: n
+				})
+			] }),
+			/* @__PURE__ */ k(j, {
+				treatment: "metric",
+				className: "border-border-seam p-4",
+				children: /* @__PURE__ */ k("p", {
+					className: "text-sm text-text-secondary",
+					children: "The embedded player respects the viewer's entitlements and profile preferences. Viewers who aren't entitled to a title are prompted to sign in or purchase access inside the frame."
+				})
+			})
+		]
+	});
+}, te = () => {
+	let { apiGatewayUrl: r, getPath: i } = e(), [a, o] = p("overview"), s = r || "https://graphqlworkspaces.burdenoff.com/workspaces/graphql", c = f(() => `${typeof window < "u" ? window.location.origin : "https://app.hookmovies.com"}${i("watch/YOUR_TITLE_ID")}`, [i]);
+	return /* @__PURE__ */ A(n, {
+		title: "Developer Portal",
+		description: "Build on the HookMovies platform API",
+		purpose: "Everything you need to integrate with HookMovies — authenticate with an API key, query the federated GraphQL gateway, pull in the official SDKs or MCP server, and embed the player anywhere. API keys are issued through the platform identity service; HookMovies never stores your secret.",
+		children: [/* @__PURE__ */ k("div", {
+			className: "mb-6 flex gap-1 overflow-x-auto rounded-xl border border-border-seam bg-bg-surface p-1",
+			role: "tablist",
+			"aria-label": "Developer portal sections",
+			children: M.map((e) => {
+				let n = e.icon, r = a === e.id;
+				return /* @__PURE__ */ A("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": r,
+					onClick: () => o(e.id),
+					className: t("inline-flex shrink-0 items-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium transition-colors", r ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary hover:text-text-primary"),
+					children: [/* @__PURE__ */ k(n, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), e.label]
+				}, e.id);
+			})
+		}), /* @__PURE__ */ A("div", {
+			className: "max-w-4xl",
+			children: [
+				a === "overview" && /* @__PURE__ */ k(H, { endpoint: s }),
+				a === "graphql" && /* @__PURE__ */ k(G, { endpoint: s }),
+				a === "keys" && /* @__PURE__ */ k(Z, {}),
+				a === "sdks" && /* @__PURE__ */ k($, {}),
+				a === "embed" && /* @__PURE__ */ k(ee, { watchUrl: c })
+			]
+		})]
+	});
+};
+//#endregion
+export { te as DevPortalPage };
+
+//# sourceMappingURL=DevPortalPage.js.map