@nubitio/admin 0.5.22 → 0.5.24

package/dist/index.cjs

@@ -389,14 +389,14 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 //#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = (0, react.createContext)(null);
-function joinApiPath$2(apiBaseUrl, path) {
+function joinApiPath$3(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "auth/logout", children }) {
 	const [session, setSession] = (0, react.useState)({ status: "loading" });
 	const refresh = (0, react.useCallback)(async () => {
 		try {
-			const response = await fetch(joinApiPath$2(apiBaseUrl, mePath), { credentials: "include" });
+			const response = await fetch(joinApiPath$3(apiBaseUrl, mePath), { credentials: "include" });
 			if (!response.ok) {
 				setSession({ status: "anonymous" });
 				return;
@@ -413,7 +413,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = (0, react.useCallback)(async () => {
-		await fetch(joinApiPath$2(apiBaseUrl, logoutPath), {
+		await fetch(joinApiPath$3(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -481,8 +481,192 @@ function FeatureGate({ featureKey, ...props }) {
 	});
 }
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.tsx
+function QuotaUsageBanner({ count, max, unitLabel, planLabel, atLimitMessage, nearLimitMessage, defaultMessage, upgradeHref, upgradeLabel = "View plans", className = "" }) {
+	if (max <= 0) return null;
+	const atLimit = count >= max;
+	const nearLimit = count === max - 1;
+	const tone = atLimit ? "limit" : nearLimit ? "warn" : "default";
+	const detail = atLimit ? atLimitMessage ?? `You reached your ${planLabel ?? "plan"} limit.` : nearLimit ? nearLimitMessage ?? `Only 1 ${unitLabel} slot left on your ${planLabel ?? "plan"}.` : defaultMessage ?? `${planLabel ?? "Plan"} usage.`;
+	const upgradeLink = upgradeHref ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: "nb-quota-banner__cta",
+		href: upgradeHref,
+		children: upgradeLabel
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `nb-quota-banner nb-quota-banner--${tone}${className ? ` ${className}` : ""}`,
+		role: "status",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "nb-quota-banner__copy",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [
+				count,
+				" / ",
+				max,
+				" ",
+				unitLabel
+			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: detail })]
+		}), (atLimit || nearLimit) && upgradeLink]
+	});
+}
+function quotaUsageAboveGrid(banner) {
+	return () => banner;
+}
+//#endregion
+//#region packages/admin/billing/PlanPanel.tsx
+function formatTrialEnds(iso) {
+	const date = new Date(iso);
+	if (Number.isNaN(date.getTime())) return iso;
+	return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(date);
+}
+function PlanPanel({ plans, currentPlanId, subscriptionStatus, trialEndsAt, onSelectPlan, selectingPlanId = null, labels, className = "" }) {
+	const title = labels?.title ?? "Plans";
+	const subtitle = labels?.subtitle ?? "Choose the plan that fits your team.";
+	const currentBadge = labels?.currentBadge ?? "Current plan";
+	const selectingLabel = labels?.selecting ?? "Updating…";
+	let statusLine = null;
+	if (subscriptionStatus === "trialing" && trialEndsAt) statusLine = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "nb-plan-panel__status",
+		children: (labels?.trialEnds ?? "Trial ends {date}").replace("{date}", formatTrialEnds(trialEndsAt))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
+		"aria-labelledby": "plan-panel-title",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+			className: "nb-plan-panel__header",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					id: "plan-panel-title",
+					className: "nb-plan-panel__title",
+					children: title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "nb-plan-panel__subtitle",
+					children: subtitle
+				}),
+				statusLine
+			] })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "nb-plan-panel__grid",
+			role: "list",
+			children: plans.map((plan) => {
+				const isCurrent = plan.id === currentPlanId;
+				const isSelecting = selectingPlanId === plan.id;
+				const ctaLabel = plan.ctaLabel ?? (isCurrent ? currentBadge : `Choose ${plan.name}`);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+					role: "listitem",
+					className: [
+						"nb-plan-card",
+						plan.highlighted ? "nb-plan-card--highlighted" : "",
+						isCurrent ? "nb-plan-card--current" : ""
+					].filter(Boolean).join(" "),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "nb-plan-card__head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "nb-plan-card__name",
+								children: plan.name
+							}), isCurrent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Badge, {
+								variant: "primary",
+								size: "sm",
+								pill: true,
+								children: currentBadge
+							}) : null]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "nb-plan-card__price",
+							children: plan.priceLabel
+						}),
+						plan.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "nb-plan-card__description",
+							children: plan.description
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+							className: "nb-plan-card__features",
+							children: plan.features.map((feature) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: feature }, feature))
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Button, {
+							variant: plan.highlighted && !isCurrent ? "primary" : "secondary",
+							size: "sm",
+							disabled: isCurrent || !onSelectPlan || isSelecting,
+							onClick: () => void onSelectPlan?.(plan.id),
+							children: isSelecting ? selectingLabel : ctaLabel
+						})
+					]
+				}, plan.id);
+			})
+		})]
+	});
+}
+//#endregion
+//#region packages/admin/quota/parseQuotaError.ts
+function readErrorDetail(error) {
+	if (typeof error !== "object" || error === null) return "";
+	const record = error;
+	return record.data?.detail ?? record.data?.message ?? record.message ?? "";
+}
+function parseQuotaError(error) {
+	if (typeof error !== "object" || error === null) return null;
+	if (error.status !== 429) return null;
+	const detail = readErrorDetail(error);
+	const match = detail.match(/Quota exceeded for "([^"]+)": (\d+)\/(\d+)/);
+	if (!match) return {
+		resource: "unknown",
+		current: 0,
+		limit: 0,
+		message: detail || "Plan limit reached."
+	};
+	return {
+		resource: match[1],
+		current: Number(match[2]),
+		limit: Number(match[3]),
+		message: detail
+	};
+}
+function quotaErrorToastMessage(quota, labels) {
+	const label = labels?.[quota.resource] ?? quota.resource;
+	return `Plan limit reached: ${quota.current}/${quota.limit} ${label}. Upgrade your plan to continue.`;
+}
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.ts
+function readCollectionTotal(body) {
+	if (Array.isArray(body)) return body.length;
+	if (typeof body !== "object" || body === null) return 0;
+	const record = body;
+	const member = record["hydra:member"] ?? record["member"];
+	const listed = Array.isArray(member) ? member.length : 0;
+	return Number(record["hydra:totalItems"] ?? record["totalItems"] ?? listed);
+}
+function useQuotaUsage({ featureKey, collectionPath, staleTimeMs = 1e4 }) {
+	const http = (0, _nubitio_core.useCoreHttpClient)();
+	const config = useFeatureConfig(featureKey);
+	const max = Number(config.max ?? 0);
+	const query = (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"quota-usage",
+			featureKey,
+			collectionPath
+		],
+		queryFn: async () => {
+			return readCollectionTotal((await http.get(`${collectionPath}?itemsPerPage=100`, { headers: { Accept: "application/ld+json" } })).data);
+		},
+		staleTime: staleTimeMs
+	});
+	const count = query.data ?? 0;
+	const atLimit = max > 0 && count >= max;
+	const nearLimit = max > 0 && count === max - 1;
+	const refetch = (0, react.useCallback)(() => query.refetch(), [query]);
+	return {
+		count,
+		max,
+		atLimit,
+		nearLimit,
+		loading: query.isLoading,
+		refetch
+	};
+}
+//#endregion
 //#region packages/admin/auth/LoginPage.tsx
-function joinApiPath$1(apiBaseUrl, path) {
+function joinApiPath$2(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "" }) {
@@ -495,7 +679,7 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$1(apiBaseUrl, loginPath), {
+			const response = await fetch(joinApiPath$2(apiBaseUrl, loginPath), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -573,6 +757,125 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 	});
 }
 //#endregion
+//#region packages/admin/auth/RegisterPage.tsx
+function joinApiPath$1(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function initialValues(fields) {
+	return Object.fromEntries(fields.map((field) => [field.name, field.defaultValue ?? ""]));
+}
+function RegisterPage({ fields, onRegistered, apiBaseUrl = "/api/", registerPath = "auth/register", title = "Create account", hint, submitLabel = "Create account", busyLabel = "Creating…", loginLink, loginPrompt = "Already have an account?" }) {
+	const [values, setValues] = (0, react.useState)((0, react.useMemo)(() => initialValues(fields), [fields]));
+	const [error, setError] = (0, react.useState)(null);
+	const [busy, setBusy] = (0, react.useState)(false);
+	const setValue = (name, value) => {
+		setValues((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath$1(apiBaseUrl, registerPath), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(values)
+			});
+			const body = await response.json().catch(() => null);
+			if (!response.ok) {
+				setError(body?.error ?? body?.message ?? "Registration failed");
+				return;
+			}
+			onRegistered();
+		} catch {
+			setError("Network error");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Card, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 360,
+				padding: 8
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					style: { margin: 0 },
+					children: title
+				}),
+				hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: hint
+				}),
+				fields.map((field) => {
+					const type = field.type ?? "text";
+					if (type === "select") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+						value: values[field.name] ?? "",
+						onChange: (e) => setValue(field.name, e.target.value),
+						style: { width: "100%" },
+						"aria-label": field.placeholder ?? field.name,
+						children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: option.value,
+							children: option.label
+						}, option.value))
+					}, field.name);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.TextField, {
+						placeholder: field.placeholder,
+						type: type === "password" ? "password" : type === "email" ? "email" : "text",
+						value: values[field.name] ?? "",
+						autoComplete: field.autoComplete,
+						onChange: (e) => setValue(field.name, e.target.value)
+					}, field.name);
+				}),
+				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					children: error
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy,
+					children: busy ? busyLabel : submitLabel
+				}),
+				loginLink && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: [
+						loginPrompt,
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+							to: loginLink.to,
+							children: loginLink.label
+						})
+					]
+				})
+			]
+		}) })
+	});
+}
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.ts
 function useAppRuntime() {
 	const [toasts, setToasts] = (0, react.useState)([]);
@@ -842,15 +1145,22 @@ exports.AdminShell = AdminShell;
 exports.AdminSidebarMenu = AdminSidebarMenu;
 exports.FeatureGate = FeatureGate;
 exports.LoginPage = LoginPage;
+exports.PlanPanel = PlanPanel;
+exports.QuotaUsageBanner = QuotaUsageBanner;
+exports.RegisterPage = RegisterPage;
 exports.SessionProvider = SessionProvider;
 exports.StaticSessionProvider = StaticSessionProvider;
 exports.ToastHost = ToastHost;
 exports.createNubitApp = createNubitApp;
 exports.filterMenuByRoles = filterMenuByRoles;
 exports.hasAnyRole = hasAnyRole;
+exports.parseQuotaError = parseQuotaError;
+exports.quotaErrorToastMessage = quotaErrorToastMessage;
+exports.quotaUsageAboveGrid = quotaUsageAboveGrid;
 exports.useAppRuntime = useAppRuntime;
 exports.useFeature = useFeature;
 exports.useFeatureConfig = useFeatureConfig;
+exports.useQuotaUsage = useQuotaUsage;
 exports.useRuntimeConfig = useRuntimeConfig;
 exports.useScreenSize = useScreenSize;
 exports.useScreenSizeClass = useScreenSizeClass;

package/dist/index.d.cts

@@ -168,6 +168,100 @@ declare function FeatureGate({
   ...props
 }: FeatureGateProps): React$1.JSX.Element;
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.d.ts
+interface QuotaUsageBannerProps {
+  count: number;
+  max: number;
+  unitLabel: string;
+  planLabel?: string;
+  atLimitMessage?: string;
+  nearLimitMessage?: string;
+  defaultMessage?: string;
+  upgradeHref?: string;
+  upgradeLabel?: string;
+  className?: string;
+}
+declare function QuotaUsageBanner({
+  count,
+  max,
+  unitLabel,
+  planLabel,
+  atLimitMessage,
+  nearLimitMessage,
+  defaultMessage,
+  upgradeHref,
+  upgradeLabel,
+  className
+}: QuotaUsageBannerProps): import("react").JSX.Element | null;
+declare function quotaUsageAboveGrid(banner: ReactNode): () => ReactNode;
+//#endregion
+//#region packages/admin/billing/PlanPanel.d.ts
+interface PlanDefinition {
+  id: string;
+  name: string;
+  priceLabel: string;
+  description?: string;
+  features: string[];
+  highlighted?: boolean;
+  ctaLabel?: string;
+}
+interface PlanPanelLabels {
+  title?: string;
+  subtitle?: string;
+  currentBadge?: string;
+  trialEnds?: string;
+  selecting?: string;
+}
+interface PlanPanelProps {
+  plans: PlanDefinition[];
+  currentPlanId: string;
+  subscriptionStatus?: string;
+  trialEndsAt?: string | null;
+  onSelectPlan?: (planId: string) => void | Promise<void>;
+  selectingPlanId?: string | null;
+  labels?: PlanPanelLabels;
+  className?: string;
+}
+declare function PlanPanel({
+  plans,
+  currentPlanId,
+  subscriptionStatus,
+  trialEndsAt,
+  onSelectPlan,
+  selectingPlanId,
+  labels,
+  className
+}: PlanPanelProps): import("react").JSX.Element;
+//#endregion
+//#region packages/admin/quota/parseQuotaError.d.ts
+interface ParsedQuotaError {
+  resource: string;
+  current: number;
+  limit: number;
+  message: string;
+}
+declare function parseQuotaError(error: unknown): ParsedQuotaError | null;
+declare function quotaErrorToastMessage(quota: ParsedQuotaError, labels?: Partial<Record<string, string>>): string;
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.d.ts
+interface UseQuotaUsageOptions {
+  featureKey: string;
+  collectionPath: string;
+  staleTimeMs?: number;
+}
+declare function useQuotaUsage({
+  featureKey,
+  collectionPath,
+  staleTimeMs
+}: UseQuotaUsageOptions): {
+  count: number;
+  max: number;
+  atLimit: boolean;
+  nearLimit: boolean;
+  loading: boolean;
+  refetch: () => Promise<import("@tanstack/react-query").QueryObserverResult<number, Error>>;
+};
+//#endregion
 //#region packages/admin/auth/LoginPage.d.ts
 interface LoginPageProps {
   onLoggedIn: () => void;
@@ -186,6 +280,49 @@ declare function LoginPage({
   defaultUsername
 }: LoginPageProps): import("react").JSX.Element;
 //#endregion
+//#region packages/admin/auth/RegisterPage.d.ts
+type RegisterFieldType = 'text' | 'email' | 'password' | 'select';
+interface RegisterSelectOption {
+  value: string;
+  label: string;
+}
+interface RegisterField {
+  /** JSON body key sent to the register endpoint. */
+  name: string;
+  placeholder?: string;
+  type?: RegisterFieldType;
+  defaultValue?: string;
+  autoComplete?: string;
+  options?: RegisterSelectOption[];
+}
+interface RegisterPageProps {
+  fields: RegisterField[];
+  onRegistered: () => void;
+  apiBaseUrl?: string;
+  registerPath?: string;
+  title?: string;
+  hint?: string;
+  submitLabel?: string;
+  busyLabel?: string;
+  loginLink?: {
+    to: string;
+    label: string;
+  };
+  loginPrompt?: string;
+}
+declare function RegisterPage({
+  fields,
+  onRegistered,
+  apiBaseUrl,
+  registerPath,
+  title,
+  hint,
+  submitLabel,
+  busyLabel,
+  loginLink,
+  loginPrompt
+}: RegisterPageProps): import("react").JSX.Element;
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.d.ts
 type NotificationType = 'success' | 'error' | 'warning' | 'info';
 type ToastItem = {
@@ -307,4 +444,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.d.mts

@@ -168,6 +168,100 @@ declare function FeatureGate({
   ...props
 }: FeatureGateProps): React$1.JSX.Element;
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.d.ts
+interface QuotaUsageBannerProps {
+  count: number;
+  max: number;
+  unitLabel: string;
+  planLabel?: string;
+  atLimitMessage?: string;
+  nearLimitMessage?: string;
+  defaultMessage?: string;
+  upgradeHref?: string;
+  upgradeLabel?: string;
+  className?: string;
+}
+declare function QuotaUsageBanner({
+  count,
+  max,
+  unitLabel,
+  planLabel,
+  atLimitMessage,
+  nearLimitMessage,
+  defaultMessage,
+  upgradeHref,
+  upgradeLabel,
+  className
+}: QuotaUsageBannerProps): import("react").JSX.Element | null;
+declare function quotaUsageAboveGrid(banner: ReactNode): () => ReactNode;
+//#endregion
+//#region packages/admin/billing/PlanPanel.d.ts
+interface PlanDefinition {
+  id: string;
+  name: string;
+  priceLabel: string;
+  description?: string;
+  features: string[];
+  highlighted?: boolean;
+  ctaLabel?: string;
+}
+interface PlanPanelLabels {
+  title?: string;
+  subtitle?: string;
+  currentBadge?: string;
+  trialEnds?: string;
+  selecting?: string;
+}
+interface PlanPanelProps {
+  plans: PlanDefinition[];
+  currentPlanId: string;
+  subscriptionStatus?: string;
+  trialEndsAt?: string | null;
+  onSelectPlan?: (planId: string) => void | Promise<void>;
+  selectingPlanId?: string | null;
+  labels?: PlanPanelLabels;
+  className?: string;
+}
+declare function PlanPanel({
+  plans,
+  currentPlanId,
+  subscriptionStatus,
+  trialEndsAt,
+  onSelectPlan,
+  selectingPlanId,
+  labels,
+  className
+}: PlanPanelProps): import("react").JSX.Element;
+//#endregion
+//#region packages/admin/quota/parseQuotaError.d.ts
+interface ParsedQuotaError {
+  resource: string;
+  current: number;
+  limit: number;
+  message: string;
+}
+declare function parseQuotaError(error: unknown): ParsedQuotaError | null;
+declare function quotaErrorToastMessage(quota: ParsedQuotaError, labels?: Partial<Record<string, string>>): string;
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.d.ts
+interface UseQuotaUsageOptions {
+  featureKey: string;
+  collectionPath: string;
+  staleTimeMs?: number;
+}
+declare function useQuotaUsage({
+  featureKey,
+  collectionPath,
+  staleTimeMs
+}: UseQuotaUsageOptions): {
+  count: number;
+  max: number;
+  atLimit: boolean;
+  nearLimit: boolean;
+  loading: boolean;
+  refetch: () => Promise<import("@tanstack/react-query").QueryObserverResult<number, Error>>;
+};
+//#endregion
 //#region packages/admin/auth/LoginPage.d.ts
 interface LoginPageProps {
   onLoggedIn: () => void;
@@ -186,6 +280,49 @@ declare function LoginPage({
   defaultUsername
 }: LoginPageProps): import("react").JSX.Element;
 //#endregion
+//#region packages/admin/auth/RegisterPage.d.ts
+type RegisterFieldType = 'text' | 'email' | 'password' | 'select';
+interface RegisterSelectOption {
+  value: string;
+  label: string;
+}
+interface RegisterField {
+  /** JSON body key sent to the register endpoint. */
+  name: string;
+  placeholder?: string;
+  type?: RegisterFieldType;
+  defaultValue?: string;
+  autoComplete?: string;
+  options?: RegisterSelectOption[];
+}
+interface RegisterPageProps {
+  fields: RegisterField[];
+  onRegistered: () => void;
+  apiBaseUrl?: string;
+  registerPath?: string;
+  title?: string;
+  hint?: string;
+  submitLabel?: string;
+  busyLabel?: string;
+  loginLink?: {
+    to: string;
+    label: string;
+  };
+  loginPrompt?: string;
+}
+declare function RegisterPage({
+  fields,
+  onRegistered,
+  apiBaseUrl,
+  registerPath,
+  title,
+  hint,
+  submitLabel,
+  busyLabel,
+  loginLink,
+  loginPrompt
+}: RegisterPageProps): import("react").JSX.Element;
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.d.ts
 type NotificationType = 'success' | 'error' | 'warning' | 'info';
 type ToastItem = {
@@ -307,4 +444,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type ParsedQuotaError, type PlanDefinition, PlanPanel, type PlanPanelLabels, type PlanPanelProps, QuotaUsageBanner, type QuotaUsageBannerProps, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseQuotaUsageOptions, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { BrowserRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { BrowserRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { Badge, Button, Card, FeatureGate as FeatureGate$1, IconButton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel } from "@nubitio/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { CoreConfigProvider, CoreProvider, MercureProvider } from "@nubitio/core";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { CoreConfigProvider, CoreProvider, MercureProvider, useCoreHttpClient } from "@nubitio/core";
 import { SmartCrudRolesProvider } from "@nubitio/crud";
 import { HydraResourceSchemaProvider, HydraResourceStoreProvider, SchemaProvider } from "@nubitio/hydra";
 //#region packages/admin/AdminHeader.tsx
@@ -365,14 +365,14 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 //#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = createContext(null);
-function joinApiPath$2(apiBaseUrl, path) {
+function joinApiPath$3(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "auth/logout", children }) {
 	const [session, setSession] = useState({ status: "loading" });
 	const refresh = useCallback(async () => {
 		try {
-			const response = await fetch(joinApiPath$2(apiBaseUrl, mePath), { credentials: "include" });
+			const response = await fetch(joinApiPath$3(apiBaseUrl, mePath), { credentials: "include" });
 			if (!response.ok) {
 				setSession({ status: "anonymous" });
 				return;
@@ -389,7 +389,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = useCallback(async () => {
-		await fetch(joinApiPath$2(apiBaseUrl, logoutPath), {
+		await fetch(joinApiPath$3(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -457,8 +457,192 @@ function FeatureGate({ featureKey, ...props }) {
 	});
 }
 //#endregion
+//#region packages/admin/quota/QuotaUsageBanner.tsx
+function QuotaUsageBanner({ count, max, unitLabel, planLabel, atLimitMessage, nearLimitMessage, defaultMessage, upgradeHref, upgradeLabel = "View plans", className = "" }) {
+	if (max <= 0) return null;
+	const atLimit = count >= max;
+	const nearLimit = count === max - 1;
+	const tone = atLimit ? "limit" : nearLimit ? "warn" : "default";
+	const detail = atLimit ? atLimitMessage ?? `You reached your ${planLabel ?? "plan"} limit.` : nearLimit ? nearLimitMessage ?? `Only 1 ${unitLabel} slot left on your ${planLabel ?? "plan"}.` : defaultMessage ?? `${planLabel ?? "Plan"} usage.`;
+	const upgradeLink = upgradeHref ? /* @__PURE__ */ jsx("a", {
+		className: "nb-quota-banner__cta",
+		href: upgradeHref,
+		children: upgradeLabel
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `nb-quota-banner nb-quota-banner--${tone}${className ? ` ${className}` : ""}`,
+		role: "status",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "nb-quota-banner__copy",
+			children: [/* @__PURE__ */ jsxs("strong", { children: [
+				count,
+				" / ",
+				max,
+				" ",
+				unitLabel
+			] }), /* @__PURE__ */ jsx("span", { children: detail })]
+		}), (atLimit || nearLimit) && upgradeLink]
+	});
+}
+function quotaUsageAboveGrid(banner) {
+	return () => banner;
+}
+//#endregion
+//#region packages/admin/billing/PlanPanel.tsx
+function formatTrialEnds(iso) {
+	const date = new Date(iso);
+	if (Number.isNaN(date.getTime())) return iso;
+	return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(date);
+}
+function PlanPanel({ plans, currentPlanId, subscriptionStatus, trialEndsAt, onSelectPlan, selectingPlanId = null, labels, className = "" }) {
+	const title = labels?.title ?? "Plans";
+	const subtitle = labels?.subtitle ?? "Choose the plan that fits your team.";
+	const currentBadge = labels?.currentBadge ?? "Current plan";
+	const selectingLabel = labels?.selecting ?? "Updating…";
+	let statusLine = null;
+	if (subscriptionStatus === "trialing" && trialEndsAt) statusLine = /* @__PURE__ */ jsx("p", {
+		className: "nb-plan-panel__status",
+		children: (labels?.trialEnds ?? "Trial ends {date}").replace("{date}", formatTrialEnds(trialEndsAt))
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
+		"aria-labelledby": "plan-panel-title",
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "nb-plan-panel__header",
+			children: /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx("h2", {
+					id: "plan-panel-title",
+					className: "nb-plan-panel__title",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "nb-plan-panel__subtitle",
+					children: subtitle
+				}),
+				statusLine
+			] })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "nb-plan-panel__grid",
+			role: "list",
+			children: plans.map((plan) => {
+				const isCurrent = plan.id === currentPlanId;
+				const isSelecting = selectingPlanId === plan.id;
+				const ctaLabel = plan.ctaLabel ?? (isCurrent ? currentBadge : `Choose ${plan.name}`);
+				return /* @__PURE__ */ jsxs("article", {
+					role: "listitem",
+					className: [
+						"nb-plan-card",
+						plan.highlighted ? "nb-plan-card--highlighted" : "",
+						isCurrent ? "nb-plan-card--current" : ""
+					].filter(Boolean).join(" "),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "nb-plan-card__head",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "nb-plan-card__name",
+								children: plan.name
+							}), isCurrent ? /* @__PURE__ */ jsx(Badge, {
+								variant: "primary",
+								size: "sm",
+								pill: true,
+								children: currentBadge
+							}) : null]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "nb-plan-card__price",
+							children: plan.priceLabel
+						}),
+						plan.description ? /* @__PURE__ */ jsx("p", {
+							className: "nb-plan-card__description",
+							children: plan.description
+						}) : null,
+						/* @__PURE__ */ jsx("ul", {
+							className: "nb-plan-card__features",
+							children: plan.features.map((feature) => /* @__PURE__ */ jsx("li", { children: feature }, feature))
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: plan.highlighted && !isCurrent ? "primary" : "secondary",
+							size: "sm",
+							disabled: isCurrent || !onSelectPlan || isSelecting,
+							onClick: () => void onSelectPlan?.(plan.id),
+							children: isSelecting ? selectingLabel : ctaLabel
+						})
+					]
+				}, plan.id);
+			})
+		})]
+	});
+}
+//#endregion
+//#region packages/admin/quota/parseQuotaError.ts
+function readErrorDetail(error) {
+	if (typeof error !== "object" || error === null) return "";
+	const record = error;
+	return record.data?.detail ?? record.data?.message ?? record.message ?? "";
+}
+function parseQuotaError(error) {
+	if (typeof error !== "object" || error === null) return null;
+	if (error.status !== 429) return null;
+	const detail = readErrorDetail(error);
+	const match = detail.match(/Quota exceeded for "([^"]+)": (\d+)\/(\d+)/);
+	if (!match) return {
+		resource: "unknown",
+		current: 0,
+		limit: 0,
+		message: detail || "Plan limit reached."
+	};
+	return {
+		resource: match[1],
+		current: Number(match[2]),
+		limit: Number(match[3]),
+		message: detail
+	};
+}
+function quotaErrorToastMessage(quota, labels) {
+	const label = labels?.[quota.resource] ?? quota.resource;
+	return `Plan limit reached: ${quota.current}/${quota.limit} ${label}. Upgrade your plan to continue.`;
+}
+//#endregion
+//#region packages/admin/quota/useQuotaUsage.ts
+function readCollectionTotal(body) {
+	if (Array.isArray(body)) return body.length;
+	if (typeof body !== "object" || body === null) return 0;
+	const record = body;
+	const member = record["hydra:member"] ?? record["member"];
+	const listed = Array.isArray(member) ? member.length : 0;
+	return Number(record["hydra:totalItems"] ?? record["totalItems"] ?? listed);
+}
+function useQuotaUsage({ featureKey, collectionPath, staleTimeMs = 1e4 }) {
+	const http = useCoreHttpClient();
+	const config = useFeatureConfig(featureKey);
+	const max = Number(config.max ?? 0);
+	const query = useQuery({
+		queryKey: [
+			"quota-usage",
+			featureKey,
+			collectionPath
+		],
+		queryFn: async () => {
+			return readCollectionTotal((await http.get(`${collectionPath}?itemsPerPage=100`, { headers: { Accept: "application/ld+json" } })).data);
+		},
+		staleTime: staleTimeMs
+	});
+	const count = query.data ?? 0;
+	const atLimit = max > 0 && count >= max;
+	const nearLimit = max > 0 && count === max - 1;
+	const refetch = useCallback(() => query.refetch(), [query]);
+	return {
+		count,
+		max,
+		atLimit,
+		nearLimit,
+		loading: query.isLoading,
+		refetch
+	};
+}
+//#endregion
 //#region packages/admin/auth/LoginPage.tsx
-function joinApiPath$1(apiBaseUrl, path) {
+function joinApiPath$2(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "" }) {
@@ -471,7 +655,7 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$1(apiBaseUrl, loginPath), {
+			const response = await fetch(joinApiPath$2(apiBaseUrl, loginPath), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -549,6 +733,125 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 	});
 }
 //#endregion
+//#region packages/admin/auth/RegisterPage.tsx
+function joinApiPath$1(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function initialValues(fields) {
+	return Object.fromEntries(fields.map((field) => [field.name, field.defaultValue ?? ""]));
+}
+function RegisterPage({ fields, onRegistered, apiBaseUrl = "/api/", registerPath = "auth/register", title = "Create account", hint, submitLabel = "Create account", busyLabel = "Creating…", loginLink, loginPrompt = "Already have an account?" }) {
+	const [values, setValues] = useState(useMemo(() => initialValues(fields), [fields]));
+	const [error, setError] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const setValue = (name, value) => {
+		setValues((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath$1(apiBaseUrl, registerPath), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(values)
+			});
+			const body = await response.json().catch(() => null);
+			if (!response.ok) {
+				setError(body?.error ?? body?.message ?? "Registration failed");
+				return;
+			}
+			onRegistered();
+		} catch {
+			setError("Network error");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 360,
+				padding: 8
+			},
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					style: { margin: 0 },
+					children: title
+				}),
+				hint && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: hint
+				}),
+				fields.map((field) => {
+					const type = field.type ?? "text";
+					if (type === "select") return /* @__PURE__ */ jsx("select", {
+						value: values[field.name] ?? "",
+						onChange: (e) => setValue(field.name, e.target.value),
+						style: { width: "100%" },
+						"aria-label": field.placeholder ?? field.name,
+						children: (field.options ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+							value: option.value,
+							children: option.label
+						}, option.value))
+					}, field.name);
+					return /* @__PURE__ */ jsx(TextField, {
+						placeholder: field.placeholder,
+						type: type === "password" ? "password" : type === "email" ? "email" : "text",
+						value: values[field.name] ?? "",
+						autoComplete: field.autoComplete,
+						onChange: (e) => setValue(field.name, e.target.value)
+					}, field.name);
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy,
+					children: busy ? busyLabel : submitLabel
+				}),
+				loginLink && /* @__PURE__ */ jsxs("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: [
+						loginPrompt,
+						" ",
+						/* @__PURE__ */ jsx(Link, {
+							to: loginLink.to,
+							children: loginLink.label
+						})
+					]
+				})
+			]
+		}) })
+	});
+}
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.ts
 function useAppRuntime() {
 	const [toasts, setToasts] = useState([]);
@@ -813,4 +1116,4 @@ function createNubitApp(config) {
 	return { App };
 }
 //#endregion
-export { AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, LoginPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, LoginPage, PlanPanel, QuotaUsageBanner, RegisterPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/style.css

@@ -369,6 +369,151 @@
   opacity: 0;
   pointer-events: none;
 }
+.nb-quota-banner {
+  align-items: center;
+  background: color-mix(in srgb, var(--accent-color, #888) 8%, var(--surface-1, transparent));
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  color: var(--text-primary);
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  width: 100%;
+}
+
+.nb-quota-banner--warn {
+  background: color-mix(in srgb, var(--color-warning, #f59e0b) 10%, var(--surface-1, transparent));
+  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 45%, var(--border-subtle));
+}
+
+.nb-quota-banner--limit {
+  background: color-mix(in srgb, var(--color-error, #dc2626) 8%, var(--surface-1, transparent));
+  border-color: color-mix(in srgb, var(--color-error, #dc2626) 40%, var(--border-subtle));
+}
+
+.nb-quota-banner__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 0.9rem;
+}
+
+.nb-quota-banner__copy span {
+  color: var(--text-secondary);
+}
+
+.nb-quota-banner__cta {
+  color: var(--accent-color);
+  flex-shrink: 0;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.nb-quota-banner__cta:hover {
+  text-decoration: underline;
+}
+@charset "UTF-8";
+.nb-plan-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+}
+
+.nb-plan-panel__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.nb-plan-panel__title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nb-plan-panel__subtitle {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin: var(--space-1) 0 0;
+}
+
+.nb-plan-panel__status {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  margin: var(--space-2) 0 0;
+}
+
+.nb-plan-panel__grid {
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.nb-plan-card {
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+  padding: var(--space-4);
+}
+
+.nb-plan-card--highlighted {
+  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-subtle));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 20%, transparent);
+}
+
+.nb-plan-card--current {
+  background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-1));
+}
+
+.nb-plan-card__head {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--space-2);
+  justify-content: space-between;
+}
+
+.nb-plan-card__name {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nb-plan-card__price {
+  font-size: 1.35rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nb-plan-card__description {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.nb-plan-card__features {
+  color: var(--text-primary);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  font-size: 0.85rem;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nb-plan-card__features li::before {
+  color: var(--accent-color);
+  content: "✓ ";
+  font-weight: 700;
+}
 .nb-toast-host {
   position: fixed;
   right: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/admin",
-  "version": "0.5.22",
+  "version": "0.5.24",
   "type": "module",
   "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
   "license": "MIT",
@@ -53,9 +53,9 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/core": "^0.5.22",
-    "@nubitio/crud": "^0.5.22",
-    "@nubitio/hydra": "^0.5.22",
-    "@nubitio/ui": "^0.5.22"
+    "@nubitio/hydra": "^0.5.24",
+    "@nubitio/crud": "^0.5.24",
+    "@nubitio/ui": "^0.5.24",
+    "@nubitio/core": "^0.5.24"
   }
 }