@lukoweb/apitogo-plugin-dev-portal-billing 0.2.51 → 0.2.52

package/dist/{AccountPlansPage-BEDZbyAS.mjs → AccountPlansPage-CeUizdWk.mjs}

@@ -1,8 +1,8 @@
-import { c as isActiveSubscription, n as useDevPortalPreviewMode, p as parseManifestPlans, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
-import { t as PricingCard } from "./PricingCard-D-owYlf3.mjs";
+import { f as parseManifestPlans, n as useDevPortalPreviewMode, r as useIsDemoSession, s as isActiveSubscription, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
+import { t as PricingCard } from "./PricingCard-CKdq1oWn.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-B4iV7zFs.mjs";
-import { t as usePlans } from "./usePlans-DVGt2Myv.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
+import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
 import { Head } from "@lukoweb/apitogo/components";
 import { CreditCardIcon } from "@lukoweb/apitogo/icons";
 import { useSearchParams } from "@lukoweb/apitogo/router";

package/dist/{CheckoutPage-6nFq9GKO.mjs → CheckoutPage-CwSElFUk.mjs}

@@ -1,6 +1,6 @@
 import { o as PRICING_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
-import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
-import { t as FREE_CHECKOUT_MARKER } from "./billing-state-DjUXQYSr.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
+import { t as FREE_CHECKOUT_MARKER } from "./billing-state-DbU5Lpoz.mjs";
 import { ShieldIcon } from "@lukoweb/apitogo/icons";
 import { Link, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
 import { useEffect } from "react";

package/dist/{ContactSalesPage-Imh39E8z.mjs → ContactSalesPage-q7Dxxtx6.mjs}

@@ -1,7 +1,7 @@
 import { o as PRICING_PATH } from "./paths-ujy9wjVK.mjs";
-import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl, u as isPlanCustomPriced } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { l as isPlanCustomPriced, n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as usePlans } from "./usePlans-DVGt2Myv.mjs";
+import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
 import { Link, useSearchParams } from "@lukoweb/apitogo/router";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{CredentialsPage-D9voniJR.mjs → CredentialsPage-B2jPo6Go.mjs}

@@ -1,9 +1,10 @@
 import { t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
-import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
 import { r as createDemoCredentials, t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-rN2Gj4lM.mjs";
-import { a as useApiKeys, n as apiReferencePath, r as ApiKeysPanel } from "./account-links-Dg4ugnGW.mjs";
-import { t as ChoosePlanNotice } from "./ChoosePlanNotice-DITJNrh1.mjs";
+import { n as useApiKeys } from "./useApiKeys-CVgXfUop.mjs";
+import { n as apiReferencePath, r as ApiKeysPanel } from "./account-links-D_vS0GJn.mjs";
+import { n as ChoosePlanNotice, t as keyPlanNote } from "./key-plan-note-DTWeFhn2.mjs";
 import { Head } from "@lukoweb/apitogo/components";
 import { KeyRoundIcon } from "@lukoweb/apitogo/icons";
 import { Link as Link$1 } from "@lukoweb/apitogo/router";
@@ -63,6 +64,7 @@ const CredentialsPage = () => {
 	const gatewayBaseUrl = credentials?.gatewayBaseUrl?.trim() || apiKeys?.gatewayBaseUrl?.trim() || configuredGatewayBaseUrl?.trim() || zudokuConfig.__meta?.gatewayBaseUrl?.trim() || null;
 	const header = configuredKeyHeader?.trim() || apiKeys?.header || DEMO_GATEWAY_KEY_HEADER;
 	const plans = apiKeys?.plans ?? [];
+	const planNote = isDemoSession ? null : keyPlanNote(plans);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-auto max-w-screen-lg px-4 pb-16 pt-(--padding-content-top) lg:px-8",
 		children: [
@@ -128,29 +130,37 @@ const CredentialsPage = () => {
 			}) : null,
 			(isDemoSession || !isPreview) && auth.isAuthenticated && !error && !keysError && !isLoading && !keysLoading ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-6",
-				children: [plans.length === 0 ? /* @__PURE__ */ jsx(ChoosePlanNotice, {}) : plans.map((plan) => /* @__PURE__ */ jsx(ApiKeysPanel, {
-					plan,
-					header,
-					readOnly: isDemoSession
-				}, plan.planSku)), /* @__PURE__ */ jsxs("article", {
-					className: "rounded-xl border bg-card/60 p-6 space-y-4",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "space-y-1",
-						children: [/* @__PURE__ */ jsx("h2", {
-							className: "text-lg font-medium",
-							children: "Gateway URL"
-						}), /* @__PURE__ */ jsx("p", {
+				children: [
+					planNote ? /* @__PURE__ */ jsx("div", {
+						role: "status",
+						className: "rounded-xl border border-primary/30 bg-primary/5 p-4 text-sm",
+						children: planNote.text
+					}) : null,
+					plans.length === 0 ? /* @__PURE__ */ jsx(ChoosePlanNotice, {}) : plans.map((plan) => /* @__PURE__ */ jsx(ApiKeysPanel, {
+						plan,
+						header,
+						readOnly: isDemoSession
+					}, plan.planSku)),
+					/* @__PURE__ */ jsxs("article", {
+						className: "rounded-xl border bg-card/60 p-6 space-y-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ jsx("h2", {
+								className: "text-lg font-medium",
+								children: "Gateway URL"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Base URL for API requests through the gateway."
+							})]
+						}), gatewayBaseUrl ? /* @__PURE__ */ jsx(Value, {
+							className: "max-w-full w-full",
+							value: gatewayBaseUrl
+						}) : /* @__PURE__ */ jsx("p", {
 							className: "text-sm text-muted-foreground",
-							children: "Base URL for API requests through the gateway."
+							children: "Available after your API is deployed to the gateway."
 						})]
-					}), gatewayBaseUrl ? /* @__PURE__ */ jsx(Value, {
-						className: "max-w-full w-full",
-						value: gatewayBaseUrl
-					}) : /* @__PURE__ */ jsx("p", {
-						className: "text-sm text-muted-foreground",
-						children: "Available after your API is deployed to the gateway."
-					})]
-				})]
+					})
+				]
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				className: "mt-8 flex flex-wrap gap-3",

package/dist/{PricingCard-D-owYlf3.mjs → PricingCard-CKdq1oWn.mjs}

@@ -1,5 +1,5 @@
 import { n as CHECKOUT_PATH, r as CONTACT_SALES_PATH } from "./paths-ujy9wjVK.mjs";
-import { a as formatPlanDisplayPrice, c as isActiveSubscription, d as isPlanFree, f as listPlanFeatureLines, s as formatPlanPriceUnit, u as isPlanCustomPriced } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { d as listPlanFeatureLines, i as formatPlanDisplayPrice, l as isPlanCustomPriced, o as formatPlanPriceUnit, s as isActiveSubscription, u as isPlanFree } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { Button } from "@lukoweb/apitogo/components";
 import { Link as Link$1 } from "@lukoweb/apitogo/router";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";

package/dist/{PricingPage-BTPQ-ntp.mjs → PricingPage-DnQQfy9L.mjs}

@@ -1,9 +1,9 @@
-import { g as pickFeaturedPlanSku, n as useDevPortalPreviewMode, p as parseManifestPlans } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
-import { t as PricingCard } from "./PricingCard-D-owYlf3.mjs";
+import { f as parseManifestPlans, h as pickFeaturedPlanSku, n as useDevPortalPreviewMode } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
+import { t as PricingCard } from "./PricingCard-CKdq1oWn.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as usePlans } from "./usePlans-DVGt2Myv.mjs";
-import { t as isPreviewPricingEnabled } from "./pricing-config-CfhRX9tk.mjs";
-import { a as isPricingLoading, n as buildCompareRows } from "./billing-state-DjUXQYSr.mjs";
+import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
+import { t as isPreviewPricingEnabled } from "./pricing-config-02m4dyFf.mjs";
+import { a as isPricingLoading, n as buildCompareRows } from "./billing-state-DbU5Lpoz.mjs";
 import { Head, Heading } from "@lukoweb/apitogo/components";
 import { Navigate } from "@lukoweb/apitogo/router";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/{SubscriptionsPage-Bo5D3K1x.mjs → SubscriptionsPage-msO31jv-.mjs}

@@ -1,15 +1,16 @@
 import { i as CREDENTIALS_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
-import { c as isActiveSubscription, i as formatBillingPeriod, m as parseMonthlyQuotaCalls, o as formatPlanPrice, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { a as formatPlanPrice, p as parseMonthlyQuotaCalls, s as isActiveSubscription, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-B4iV7zFs.mjs";
-import { t as usePlans } from "./usePlans-DVGt2Myv.mjs";
-import { t as useUsage } from "./useUsage-DOUibue4.mjs";
-import { i as hasPaymentProvider, r as checkoutConfirmingText } from "./billing-state-DjUXQYSr.mjs";
-import { t as ChoosePlanNotice } from "./ChoosePlanNotice-DITJNrh1.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
+import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
+import { n as useApiKeys } from "./useApiKeys-CVgXfUop.mjs";
+import { t as useUsage } from "./useUsage--5sZub3M.mjs";
+import { i as hasPaymentProvider, r as checkoutConfirmingText } from "./billing-state-DbU5Lpoz.mjs";
+import { n as ChoosePlanNotice, t as keyPlanNote } from "./key-plan-note-DTWeFhn2.mjs";
 import { Head, Spinner } from "@lukoweb/apitogo/components";
 import { Link as Link$1, useSearchParams } from "@lukoweb/apitogo/router";
 import { useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
@@ -47,6 +48,8 @@ const SubscriptionsPage = () => {
 	const { data: catalog } = usePlans();
 	const billingPortal = useBillingPortal();
 	const { data: usage } = useUsage("30d");
+	const { data: apiKeys } = useApiKeys();
+	const planNote = keyPlanNote(apiKeys?.plans ?? []);
 	const planBySku = new Map((catalog?.plans ?? []).map((plan) => [plan.sku, plan]));
 	const subscriptions = me?.subscriptions ?? [];
 	const activeSubscription = subscriptions.find((sub) => isActiveSubscription(sub.status));
@@ -81,9 +84,18 @@ const SubscriptionsPage = () => {
 				className: "mb-6 rounded-xl border border-border bg-card p-4 text-sm",
 				children: checkoutConfirmingText(checkoutPaid)
 			}) : null,
-			checkoutSuccess && activeSubscription ? /* @__PURE__ */ jsxs("div", {
+			checkoutSuccess && activeSubscription ? /* @__PURE__ */ jsx("div", {
 				className: "mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-sm",
-				children: [
+				children: planNote ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					planNote.text,
+					" ",
+					/* @__PURE__ */ jsx(Link$1, {
+						to: CREDENTIALS_PATH,
+						className: "font-medium underline",
+						children: "Create the key"
+					}),
+					"."
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					"Your subscription is active.",
 					" ",
 					/* @__PURE__ */ jsx(Link$1, {
@@ -92,7 +104,7 @@ const SubscriptionsPage = () => {
 						children: "View your API credentials"
 					}),
 					"."
-				]
+				] })
 			}) : null,
 			isLoading ? /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
@@ -109,14 +121,9 @@ const SubscriptionsPage = () => {
 						className: "mt-2 text-2xl font-bold",
 						children: activePlan?.displayName ?? activeSubscription.planSku
 					}),
-					activePlan ? /* @__PURE__ */ jsxs("p", {
+					activePlan ? /* @__PURE__ */ jsx("p", {
 						className: "mt-1 text-sm text-muted-foreground",
-						children: [
-							formatPlanPrice(activePlan),
-							" ·",
-							" ",
-							formatBillingPeriod(activePlan.billingPeriod)
-						]
+						children: formatPlanPrice(activePlan)
 					}) : /* @__PURE__ */ jsx("p", {
 						className: "mt-1 text-sm text-muted-foreground",
 						children: "This plan is no longer offered. Your access continues until you cancel or change plan."
@@ -164,14 +171,9 @@ const SubscriptionsPage = () => {
 							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
 								className: "font-semibold",
 								children: plan?.displayName ?? subscription.planSku
-							}), plan ? /* @__PURE__ */ jsxs("p", {
+							}), plan ? /* @__PURE__ */ jsx("p", {
 								className: "mt-1 text-sm text-muted-foreground",
-								children: [
-									formatPlanPrice(plan),
-									" ·",
-									" ",
-									formatBillingPeriod(plan.billingPeriod)
-								]
+								children: formatPlanPrice(plan)
 							}) : null] }), /* @__PURE__ */ jsx("span", {
 								className: "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
 								children: subscription.status

package/dist/{UsagePage-CK6p01Ut.mjs → UsagePage-BF4QgrTc.mjs}

@@ -1,8 +1,8 @@
-import { c as isActiveSubscription, h as parseQuotaPeriodDays, m as parseMonthlyQuotaCalls } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { m as parseQuotaPeriodDays, p as parseMonthlyQuotaCalls, s as isActiveSubscription } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import "./DevPortalBillingContext-CR83s4LO.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-B4iV7zFs.mjs";
-import { t as usePlans } from "./usePlans-DVGt2Myv.mjs";
-import { t as useUsage } from "./useUsage-DOUibue4.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
+import { t as usePlans } from "./usePlans-DPGFWcVo.mjs";
+import { t as useUsage } from "./useUsage--5sZub3M.mjs";
 import { Head } from "@lukoweb/apitogo/components";
 import { Link as Link$1 } from "@lukoweb/apitogo/router";
 import { useState } from "react";

package/dist/{account-links-Dg4ugnGW.mjs → account-links-D_vS0GJn.mjs}

@@ -1,177 +1,14 @@
-import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
-import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
-import { n as createDemoApiKeys, t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-rN2Gj4lM.mjs";
+import { i as useRevokeApiKey, r as useCreateApiKey, t as API_KEY_CAP_REACHED } from "./useApiKeys-CVgXfUop.mjs";
 import { Spinner } from "@lukoweb/apitogo/components";
 import { KeyRoundIcon, TrashIcon } from "@lukoweb/apitogo/icons";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
-import { useAuth } from "@lukoweb/apitogo/hooks";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
 import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
 import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
 
-//#region src/utils/playground-key.ts
-const STORAGE_KEY = "apitogo-playground-api-key";
-const PLAYGROUND_KEY_IDENTITY_ID = "api-key";
-const storage = () => {
-	try {
-		return typeof localStorage === "undefined" ? void 0 : localStorage;
-	} catch {
-		return;
-	}
-};
-/**
-* Remembers a key the moment it is created: the plans backend shows a key's secret only then, so this is the one
-* chance to offer it to the playground later. Only the last key is kept, in this browser only.
-*/
-function rememberPlaygroundKey(entry) {
-	if (!entry.key) return;
-	const value = {
-		id: entry.id,
-		key: entry.key,
-		header: entry.header || DEMO_GATEWAY_KEY_HEADER,
-		keyPrefix: entry.keyPrefix
-	};
-	try {
-		storage()?.setItem(STORAGE_KEY, JSON.stringify(value));
-	} catch {}
-}
-function readPlaygroundKey() {
-	try {
-		const raw = storage()?.getItem(STORAGE_KEY);
-		if (!raw) return void 0;
-		const parsed = JSON.parse(raw);
-		return parsed.id && parsed.key && parsed.header && parsed.keyPrefix ? parsed : void 0;
-	} catch {
-		return;
-	}
-}
-/** A revoked key stops working, so it is no longer offered. */
-function forgetPlaygroundKey(keyId) {
-	if (readPlaygroundKey()?.id !== keyId) return;
-	try {
-		storage()?.removeItem(STORAGE_KEY);
-	} catch {}
-}
-/** The "Try it" identity for the remembered key, sent in the gateway's key header. */
-function playgroundKeyIdentities() {
-	const remembered = readPlaygroundKey();
-	if (!remembered) return [];
-	return [{
-		id: PLAYGROUND_KEY_IDENTITY_ID,
-		label: `Your API key (${remembered.keyPrefix}…)`,
-		authorizationFields: { headers: [remembered.header] },
-		authorizeRequest: (request) => {
-			request.headers.set(remembered.header, remembered.key);
-			return request;
-		}
-	}];
-}
-
-//#endregion
-//#region src/hooks/useApiKeys.ts
-/** Thrown when the developer has hit their plan's per-developer key cap. */
-const API_KEY_CAP_REACHED = "API_KEY_CAP_REACHED";
-function apiKeysQueryKey(apiBaseUrl) {
-	return ["dev-portal-api-keys", apiBaseUrl];
-}
-function useApiKeys() {
-	const auth = useAuth();
-	const apiBaseUrl = useDevPortalApiBaseUrl();
-	const isPreview = useDevPortalPreviewMode();
-	const isDemoSession = useIsDemoSession();
-	const { previewPlans } = useDevPortalBillingConfig();
-	const liveQuery = useQuery({
-		queryKey: apiKeysQueryKey(apiBaseUrl),
-		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
-		queryFn: async () => {
-			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
-				method: "GET",
-				headers: { Accept: "application/json" },
-				credentials: "include"
-			});
-			if (response.status === 404) throw new Error("NO_ENTITLEMENT");
-			if (!response.ok) throw new Error("Failed to load API keys.");
-			return await response.json();
-		},
-		retry: (failureCount, error) => error instanceof Error && error.message === "NO_ENTITLEMENT" ? false : failureCount < 2
-	});
-	if (isDemoSession && auth.isAuthenticated) return {
-		...liveQuery,
-		data: createDemoApiKeys(previewPlans),
-		error: null,
-		isError: false,
-		isFetching: false,
-		isLoading: false,
-		isPending: false,
-		isSuccess: true,
-		status: "success"
-	};
-	return liveQuery;
-}
-function useCreateApiKey() {
-	const apiBaseUrl = useDevPortalApiBaseUrl();
-	const queryClient = useQueryClient();
-	const { keyHeader } = useDevPortalBillingConfig();
-	return useMutation({
-		mutationFn: async ({ name, planSku }) => {
-			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
-			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
-				method: "POST",
-				headers: {
-					Accept: "application/json",
-					"Content-Type": "application/json"
-				},
-				credentials: "include",
-				body: JSON.stringify({
-					name,
-					planSku
-				})
-			});
-			if (response.status === 409) throw new Error(API_KEY_CAP_REACHED);
-			if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Failed to create API key.");
-			return await response.json();
-		},
-		onSuccess: async (created) => {
-			rememberPlaygroundKey({
-				...created,
-				header: keyHeader?.trim() || queryClient.getQueryData(apiKeysQueryKey(apiBaseUrl))?.header
-			});
-			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
-		}
-	});
-}
-function useRevokeApiKey() {
-	const apiBaseUrl = useDevPortalApiBaseUrl();
-	const queryClient = useQueryClient();
-	return useMutation({
-		mutationFn: async (keyId) => {
-			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
-			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys/${keyId}`, {
-				method: "DELETE",
-				headers: { Accept: "application/json" },
-				credentials: "include"
-			});
-			if (!response.ok && response.status !== 204) throw new Error(await readProblemDetail(response) ?? "Failed to revoke API key.");
-		},
-		onSuccess: async (_result, keyId) => {
-			forgetPlaygroundKey(keyId);
-			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
-		}
-	});
-}
-async function readProblemDetail(response) {
-	try {
-		return (await response.json()).detail?.trim() || null;
-	} catch {
-		return null;
-	}
-}
-
-//#endregion
 //#region src/components/ApiKeysPanel.tsx
 /**
 * Lists gateway API keys for one plan with create and revoke. The plaintext key is returned by the
@@ -369,4 +206,4 @@ function apiReferencePath(links) {
 }
 
 //#endregion
-export { useApiKeys as a, playgroundKeyIdentities as c, API_KEY_CAP_REACHED as i, apiReferencePath as n, useCreateApiKey as o, ApiKeysPanel as r, useRevokeApiKey as s, accountLayoutProps as t };
+export { apiReferencePath as n, ApiKeysPanel as r, accountLayoutProps as t };

package/dist/{billing-state-DjUXQYSr.mjs → billing-state-DbU5Lpoz.mjs}

@@ -1,4 +1,4 @@
-import { _ as quotaCell, v as rateLimitCell } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { _ as rateLimitCell, g as quotaCell } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 
 //#region src/utils/billing-state.ts
 /** Whether the pricing page has no plans to show yet because the answer is still on its way. */

package/dist/index.mjs

@@ -1,14 +1,15 @@
-import { t as AccountPlansPage } from "./AccountPlansPage-BEDZbyAS.mjs";
+import { t as AccountPlansPage } from "./AccountPlansPage-CeUizdWk.mjs";
 import { a as LOGIN_NAV_PATH, c as USAGE_PATH, i as CREDENTIALS_PATH, n as CHECKOUT_PATH, o as PRICING_PATH, r as CONTACT_SALES_PATH, s as SUBSCRIPTIONS_PATH, t as ACCOUNT_PLANS_PATH } from "./paths-ujy9wjVK.mjs";
-import { a as formatPlanDisplayPrice, c as isActiveSubscription, f as listPlanFeatureLines, g as pickFeaturedPlanSku, p as parseManifestPlans, s as formatPlanPriceUnit, y as resolveDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
-import "./PricingCard-D-owYlf3.mjs";
+import { d as listPlanFeatureLines, f as parseManifestPlans, h as pickFeaturedPlanSku, i as formatPlanDisplayPrice, o as formatPlanPriceUnit, s as isActiveSubscription, v as resolveDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
+import "./PricingCard-CKdq1oWn.mjs";
 import { n as useDevPortalBillingConfig, t as DevPortalBillingProvider } from "./DevPortalBillingContext-CR83s4LO.mjs";
 import { t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-rN2Gj4lM.mjs";
-import { t as useMySubscriptions } from "./useMySubscriptions-B4iV7zFs.mjs";
-import { n as startPlansPrefetch, t as usePlans } from "./usePlans-DVGt2Myv.mjs";
-import { a as useApiKeys, c as playgroundKeyIdentities, i as API_KEY_CAP_REACHED, o as useCreateApiKey, r as ApiKeysPanel, s as useRevokeApiKey, t as accountLayoutProps } from "./account-links-Dg4ugnGW.mjs";
-import { n as useUsageRecent, t as useUsage } from "./useUsage-DOUibue4.mjs";
-import { t as isPreviewPricingEnabled } from "./pricing-config-CfhRX9tk.mjs";
+import { t as useMySubscriptions } from "./useMySubscriptions-BtxAXA1m.mjs";
+import { n as startPlansPrefetch, t as usePlans } from "./usePlans-DPGFWcVo.mjs";
+import { a as playgroundKeyIdentities, i as useRevokeApiKey, n as useApiKeys, r as useCreateApiKey, t as API_KEY_CAP_REACHED } from "./useApiKeys-CVgXfUop.mjs";
+import { n as useUsageRecent, t as useUsage } from "./useUsage--5sZub3M.mjs";
+import { r as ApiKeysPanel, t as accountLayoutProps } from "./account-links-D_vS0GJn.mjs";
+import { t as isPreviewPricingEnabled } from "./pricing-config-02m4dyFf.mjs";
 import { Head, Link } from "@lukoweb/apitogo/components";
 import { ArrowRightIcon, KeyRoundIcon, StarsIcon } from "@lukoweb/apitogo/icons";
 import { Outlet } from "@lukoweb/apitogo/router";
@@ -365,13 +366,13 @@ async function getSignedInIdentities(apiBaseUrl, fetchImpl = fetch) {
 
 //#endregion
 //#region src/DevPortalBillingPlugin.tsx
-const AccountPlansPage$1 = lazy(() => import("./AccountPlansPage-BEDZbyAS.mjs").then((n) => n.n));
-const CheckoutPage = lazy(() => import("./CheckoutPage-6nFq9GKO.mjs"));
-const ContactSalesPage = lazy(() => import("./ContactSalesPage-Imh39E8z.mjs"));
-const CredentialsPage = lazy(() => import("./CredentialsPage-D9voniJR.mjs"));
-const PricingPage = lazy(() => import("./PricingPage-BTPQ-ntp.mjs"));
-const SubscriptionsPage = lazy(() => import("./SubscriptionsPage-Bo5D3K1x.mjs"));
-const UsagePage = lazy(() => import("./UsagePage-CK6p01Ut.mjs"));
+const AccountPlansPage$1 = lazy(() => import("./AccountPlansPage-CeUizdWk.mjs").then((n) => n.n));
+const CheckoutPage = lazy(() => import("./CheckoutPage-CwSElFUk.mjs"));
+const ContactSalesPage = lazy(() => import("./ContactSalesPage-q7Dxxtx6.mjs"));
+const CredentialsPage = lazy(() => import("./CredentialsPage-B2jPo6Go.mjs"));
+const PricingPage = lazy(() => import("./PricingPage-DnQQfy9L.mjs"));
+const SubscriptionsPage = lazy(() => import("./SubscriptionsPage-msO31jv-.mjs"));
+const UsagePage = lazy(() => import("./UsagePage-BF4QgrTc.mjs"));
 function resolvePricingEnabled(config) {
 	if (config.__meta?.pricingEnabled !== void 0) return config.__meta.pricingEnabled;
 	return isPreviewPricingEnabled();

package/dist/{ChoosePlanNotice-DITJNrh1.mjs → key-plan-note-DTWeFhn2.mjs}

@@ -31,4 +31,23 @@ const ChoosePlanNotice = ({ className = "rounded-xl border border-dashed p-8 tex
 });
 
 //#endregion
-export { ChoosePlanNotice as t };
+//#region src/utils/key-plan-note.ts
+/**
+* An API user may hold several plans at once, each with its own keys and limits (API-121). After buying a plan, their
+* app still calls with the key of the plan they had, so it keeps that plan's limits. When a plan has no key yet while
+* another plan they hold has one, this says so and what to do; otherwise null.
+*/
+function keyPlanNote(plans) {
+	const withKeys = plans.find((plan) => plan.activeCount > 0);
+	const withoutKey = plans.find((plan) => plan.activeCount === 0 && plan.canCreate);
+	if (!withKeys || !withoutKey) return null;
+	const fresh = withoutKey.displayName || withoutKey.planSku;
+	const old = withKeys.displayName || withKeys.planSku;
+	return {
+		planSku: withoutKey.planSku,
+		text: `You're on ${fresh} now. Your ${old} key still has ${old} limits. Create a ${fresh} key and use it in your app to get ${fresh} limits.`
+	};
+}
+
+//#endregion
+export { ChoosePlanNotice as n, keyPlanNote as t };

package/dist/useApiKeys-CVgXfUop.mjs

@@ -0,0 +1,166 @@
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
+import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
+import { n as createDemoApiKeys, t as DEMO_GATEWAY_KEY_HEADER } from "./demo-session-rN2Gj4lM.mjs";
+import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+
+//#region src/utils/playground-key.ts
+const STORAGE_KEY = "apitogo-playground-api-key";
+const PLAYGROUND_KEY_IDENTITY_ID = "api-key";
+const storage = () => {
+	try {
+		return typeof localStorage === "undefined" ? void 0 : localStorage;
+	} catch {
+		return;
+	}
+};
+/**
+* Remembers a key the moment it is created: the plans backend shows a key's secret only then, so this is the one
+* chance to offer it to the playground later. Only the last key is kept, in this browser only.
+*/
+function rememberPlaygroundKey(entry) {
+	if (!entry.key) return;
+	const value = {
+		id: entry.id,
+		key: entry.key,
+		header: entry.header || DEMO_GATEWAY_KEY_HEADER,
+		keyPrefix: entry.keyPrefix
+	};
+	try {
+		storage()?.setItem(STORAGE_KEY, JSON.stringify(value));
+	} catch {}
+}
+function readPlaygroundKey() {
+	try {
+		const raw = storage()?.getItem(STORAGE_KEY);
+		if (!raw) return void 0;
+		const parsed = JSON.parse(raw);
+		return parsed.id && parsed.key && parsed.header && parsed.keyPrefix ? parsed : void 0;
+	} catch {
+		return;
+	}
+}
+/** A revoked key stops working, so it is no longer offered. */
+function forgetPlaygroundKey(keyId) {
+	if (readPlaygroundKey()?.id !== keyId) return;
+	try {
+		storage()?.removeItem(STORAGE_KEY);
+	} catch {}
+}
+/** The "Try it" identity for the remembered key, sent in the gateway's key header. */
+function playgroundKeyIdentities() {
+	const remembered = readPlaygroundKey();
+	if (!remembered) return [];
+	return [{
+		id: PLAYGROUND_KEY_IDENTITY_ID,
+		label: `Your API key (${remembered.keyPrefix}…)`,
+		authorizationFields: { headers: [remembered.header] },
+		authorizeRequest: (request) => {
+			request.headers.set(remembered.header, remembered.key);
+			return request;
+		}
+	}];
+}
+
+//#endregion
+//#region src/hooks/useApiKeys.ts
+/** Thrown when the developer has hit their plan's per-developer key cap. */
+const API_KEY_CAP_REACHED = "API_KEY_CAP_REACHED";
+function apiKeysQueryKey(apiBaseUrl) {
+	return ["dev-portal-api-keys", apiBaseUrl];
+}
+function useApiKeys() {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const { previewPlans } = useDevPortalBillingConfig();
+	const liveQuery = useQuery({
+		queryKey: apiKeysQueryKey(apiBaseUrl),
+		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (response.status === 404) throw new Error("NO_ENTITLEMENT");
+			if (!response.ok) throw new Error("Failed to load API keys.");
+			return await response.json();
+		},
+		retry: (failureCount, error) => error instanceof Error && error.message === "NO_ENTITLEMENT" ? false : failureCount < 2
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoApiKeys(previewPlans),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+function useCreateApiKey() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	const { keyHeader } = useDevPortalBillingConfig();
+	return useMutation({
+		mutationFn: async ({ name, planSku }) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys`, {
+				method: "POST",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				credentials: "include",
+				body: JSON.stringify({
+					name,
+					planSku
+				})
+			});
+			if (response.status === 409) throw new Error(API_KEY_CAP_REACHED);
+			if (!response.ok) throw new Error(await readProblemDetail(response) ?? "Failed to create API key.");
+			return await response.json();
+		},
+		onSuccess: async (created) => {
+			rememberPlaygroundKey({
+				...created,
+				header: keyHeader?.trim() || queryClient.getQueryData(apiKeysQueryKey(apiBaseUrl))?.header
+			});
+			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
+		}
+	});
+}
+function useRevokeApiKey() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (keyId) => {
+			if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+			const response = await fetch(`${apiBaseUrl}/api/v1/api-keys/${keyId}`, {
+				method: "DELETE",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 204) throw new Error(await readProblemDetail(response) ?? "Failed to revoke API key.");
+		},
+		onSuccess: async (_result, keyId) => {
+			forgetPlaygroundKey(keyId);
+			await queryClient.invalidateQueries({ queryKey: apiKeysQueryKey(apiBaseUrl) });
+		}
+	});
+}
+async function readProblemDetail(response) {
+	try {
+		return (await response.json()).detail?.trim() || null;
+	} catch {
+		return null;
+	}
+}
+
+//#endregion
+export { playgroundKeyIdentities as a, useRevokeApiKey as i, useApiKeys as n, useCreateApiKey as r, API_KEY_CAP_REACHED as t };

package/dist/{useDevPortalApiBaseUrl-Dk00H8xy.mjs → useDevPortalApiBaseUrl-BstWzITX.mjs}

@@ -250,4 +250,4 @@ function useDevPortalPreviewMode() {
 }
 
 //#endregion
-export { quotaCell as _, formatPlanDisplayPrice as a, isActiveSubscription as c, isPlanFree as d, listPlanFeatureLines as f, pickFeaturedPlanSku as g, parseQuotaPeriodDays as h, formatBillingPeriod as i, isPlaceholderDevPortalApiUrl as l, parseMonthlyQuotaCalls as m, useDevPortalPreviewMode as n, formatPlanPrice as o, parseManifestPlans as p, useIsDemoSession as r, formatPlanPriceUnit as s, useDevPortalApiBaseUrl as t, isPlanCustomPriced as u, rateLimitCell as v, resolveDevPortalApiBaseUrl as y };
+export { rateLimitCell as _, formatPlanPrice as a, isPlaceholderDevPortalApiUrl as c, listPlanFeatureLines as d, parseManifestPlans as f, quotaCell as g, pickFeaturedPlanSku as h, formatPlanDisplayPrice as i, isPlanCustomPriced as l, parseQuotaPeriodDays as m, useDevPortalPreviewMode as n, formatPlanPriceUnit as o, parseMonthlyQuotaCalls as p, useIsDemoSession as r, isActiveSubscription as s, useDevPortalApiBaseUrl as t, isPlanFree as u, resolveDevPortalApiBaseUrl as v };

package/dist/{useMySubscriptions-B4iV7zFs.mjs → useMySubscriptions-BtxAXA1m.mjs}

@@ -1,4 +1,4 @@
-import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
 import { i as createDemoMeResponse } from "./demo-session-rN2Gj4lM.mjs";
 import { useQuery } from "@lukoweb/apitogo/react-query";

package/dist/{usePlans-DVGt2Myv.mjs → usePlans-DPGFWcVo.mjs}

@@ -1,4 +1,4 @@
-import { l as isPlaceholderDevPortalApiUrl, n as useDevPortalPreviewMode, p as parseManifestPlans, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { c as isPlaceholderDevPortalApiUrl, f as parseManifestPlans, n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { n as useDevPortalBillingConfig } from "./DevPortalBillingContext-CR83s4LO.mjs";
 import { useQuery } from "@lukoweb/apitogo/react-query";
 

package/dist/{useUsage-DOUibue4.mjs → useUsage--5sZub3M.mjs}

@@ -1,4 +1,4 @@
-import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-Dk00H8xy.mjs";
+import { n as useDevPortalPreviewMode, r as useIsDemoSession, t as useDevPortalApiBaseUrl } from "./useDevPortalApiBaseUrl-BstWzITX.mjs";
 import { useQuery } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.2.51",
+  "version": "0.2.52",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -46,8 +46,8 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "@lukoweb/apitogo": "0.2.51",
-    "@lukoweb/apitogo-module-user-panel": "0.2.51"
+    "@lukoweb/apitogo": "0.2.52",
+    "@lukoweb/apitogo-module-user-panel": "0.2.52"
   },
   "peerDependencies": {
     "react": ">=19.2.0",