@burdenoff/microfe-devportal 2026.713.9 → 2026.714.1

package/dist/devportal/pages/SetupPage.js

@@ -1,19 +1,16 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
-import { useDevportalEventBus as t } from "../events/index.js";
-import { useCreateApplicationMutation as n, useCreateBillingAccountMutation as r, useCreateOrganizationMutation as i } from "../../generated/global-operations.js";
-import { APP_TYPE_LABELS as a } from "../utils/constants.js";
-import { InputField as o, SelectField as s, TextareaField as c } from "../components/FormField.js";
+import { cn as t } from "../utils/cn.js";
+import { useDevportalEventBus as n } from "../events/index.js";
+import { useCreateApplicationMutation as r, useCreateBillingAccountMutation as i, useCreateOrganizationMutation as a } from "../../generated/global-operations.js";
+import { InputField as o, SelectField as ee, TextareaField as s } from "../components/FormField.js";
 import "../hooks/index.js";
-import { useState as l } from "react";
-import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AppWindow as u, ArrowRight as te, BookOpen as d, Building2 as f, Check as p, ChevronRight as m, Key as ne, Rocket as h } from "lucide-react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Illustration as re, PagePurpose as v } from "@burdenoff/fe-libs/ui";
+import { useState as c } from "react";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AppWindow as u, ArrowRight as te, BookOpen as d, Box as ne, Building2 as f, Check as p, ChevronRight as m, GitFork as re, Key as h, Puzzle as g, Rocket as _ } from "lucide-react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Illustration as ie, PagePurpose as ae } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/SetupPage.tsx
-var y = Object.entries(a).map(([e, t]) => ({
-	value: e,
-	label: t
-})), ie = [
+var b = [
 	{
 		value: "productivity",
 		label: "Productivity"
@@ -63,15 +60,15 @@ var y = Object.entries(a).map(([e, t]) => ({
 		label: "Other"
 	}
 ];
-function b(e) {
+function x(e) {
 	return e.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
-function x() {
+function S() {
 	try {
 		localStorage.setItem("devportal_setup_dismissed", "1");
 	} catch {}
 }
-var S = [
+var C = [
 	{
 		key: "org",
 		label: "Organization"
@@ -84,273 +81,317 @@ var S = [
 		key: "done",
 		label: "Done"
 	}
-], ae = ({ current: e }) => {
-	let t = S.findIndex((t) => t.key === e);
-	return /* @__PURE__ */ g("div", {
+], oe = ({ current: e }) => {
+	let t = C.findIndex((t) => t.key === e);
+	return /* @__PURE__ */ v("div", {
 		className: "flex items-center gap-0",
-		children: S.map((e, n) => {
+		children: C.map((e, n) => {
 			let r = n < t, i = n === t;
-			return /* @__PURE__ */ _("div", {
+			return /* @__PURE__ */ y("div", {
 				className: "flex items-center",
-				children: [/* @__PURE__ */ _("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "flex flex-col items-center gap-1.5",
-					children: [/* @__PURE__ */ g("div", {
+					children: [/* @__PURE__ */ v("div", {
 						className: ["flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors", r ? "bg-action-primary-bg text-action-primary-text" : i ? "bg-action-primary-bg text-action-primary-text ring-4 ring-primary/20" : "bg-bg-sunken text-text-secondary"].join(" "),
-						children: r ? /* @__PURE__ */ g(p, { size: 14 }) : n + 1
-					}), /* @__PURE__ */ g("span", {
+						children: r ? /* @__PURE__ */ v(p, { size: 14 }) : n + 1
+					}), /* @__PURE__ */ v("span", {
 						className: ["text-xs font-medium whitespace-nowrap", i ? "text-text-primary" : "text-text-secondary"].join(" "),
 						children: e.label
 					})]
-				}), n < S.length - 1 && /* @__PURE__ */ g("div", { className: ["mx-3 mb-5 h-px w-16 flex-shrink-0 transition-colors", n < t ? "bg-action-primary-bg" : "bg-border"].join(" ") })]
+				}), n < C.length - 1 && /* @__PURE__ */ v("div", { className: ["mx-3 mb-5 h-px w-16 flex-shrink-0 transition-colors", n < t ? "bg-action-primary-bg" : "bg-border"].join(" ") })]
 			}, e.key);
 		})
 	});
-}, C = () => {
-	let { navigate: a, basePath: p, currentUser: S } = e(), { t: C } = ee(), T = t(), E = (e, t) => {
-		let n = C(e);
+}, w = () => {
+	let { navigate: t, basePath: p, currentUser: C } = e(), { t: w } = l(), D = n(), O = (e, t) => {
+		let n = w(e);
 		return n === e ? t : n;
-	}, D = (e) => a?.(`${p}${e}`), [O, k] = l("org"), [A, oe] = l(null), [j, M] = l(null), [N, se] = l(""), [P, F] = l(""), [I, L] = l(""), [R, z] = l({}), [B, { loading: V }] = i(), [H] = r(), U = () => {
+	}, k = (e) => t?.(`${p}${e}`), [A, j] = c("org"), [M, se] = c(null), [N, ce] = c(null), [P, le] = c(""), [F, I] = c(""), [L, R] = c(""), [z, B] = c({}), [V, { loading: H }] = a(), [U] = i(), ue = () => {
 		let e = {};
-		return N.trim() ? N.length < 2 && (e.name = E("devportal.orgNameTooShort", "Name must be at least 2 characters")) : e.name = E("devportal.orgNameRequired", "Organization name is required"), P.trim() ? /^[a-z0-9-]+$/.test(P) || (e.slug = E("devportal.slugInvalid", "Lowercase letters, numbers, and hyphens only")) : e.slug = E("devportal.slugRequired", "Slug is required"), z(e), Object.keys(e).length === 0;
-	}, W = async () => {
-		if (U()) try {
-			let e = (await B({ variables: { input: {
-				name: N,
-				slug: P || void 0,
-				description: I || void 0
+		return P.trim() ? P.length < 2 && (e.name = O("devportal.orgNameTooShort", "Name must be at least 2 characters")) : e.name = O("devportal.orgNameRequired", "Organization name is required"), F.trim() ? /^[a-z0-9-]+$/.test(F) || (e.slug = O("devportal.slugInvalid", "Lowercase letters, numbers, and hyphens only")) : e.slug = O("devportal.slugRequired", "Slug is required"), B(e), Object.keys(e).length === 0;
+	}, de = async () => {
+		if (ue()) try {
+			let e = (await V({ variables: { input: {
+				name: P,
+				slug: F || void 0,
+				description: L || void 0
 			} } })).data?.createDeveloperOrganization?.id;
 			if (e) {
-				T.emit("devportal.org.created", {
+				D.emit("devportal.org.created", {
 					organizationId: e,
-					name: N
-				}), oe(e);
+					name: P
+				}), se(e);
 				try {
-					H({ variables: { input: {
-						name: N,
-						email: S?.email ?? ""
+					U({ variables: { input: {
+						name: P,
+						email: C?.email ?? ""
 					} } }).catch(() => {});
 				} catch {}
-				k("app");
+				j("app");
 			}
 		} catch {}
-	}, [G, ce] = l(""), [K, le] = l(""), [q, ue] = l(""), [J, de] = l(""), [Y, fe] = l(""), [X, Z] = l({}), [pe, { loading: Q }] = n(), me = () => {
+	}, [W, fe] = c(""), [G, pe] = c(""), [K, q] = c(null), [J, me] = c(""), [Y, he] = c(""), [X, Z] = c({}), [ge, { loading: Q }] = r(), _e = () => K === "node" ? "NODE" : K === "workflow" ? "WORKFLOW" : "API_INTEGRATION", ve = () => {
 		let e = {};
-		return G.trim() ? G.length < 3 && (e.name = E("devportal.nameTooShort", "Name must be at least 3 characters")) : e.name = E("devportal.appNameRequired", "Application name is required"), q || (e.appType = E("devportal.appTypeRequired", "Application type is required")), J || (e.category = E("devportal.categoryRequired", "Category is required")), Y.trim() || (e.shortDescription = E("devportal.shortDescriptionRequired", "Short description is required")), Z(e), Object.keys(e).length === 0;
-	}, he = async () => {
-		if (me()) try {
-			let e = (await pe({ variables: { input: {
-				name: G,
-				slug: K || void 0,
-				appType: q,
+		return W.trim() ? W.length < 3 && (e.name = O("devportal.nameTooShort", "Name must be at least 3 characters")) : e.name = O("devportal.appNameRequired", "Application name is required"), K || (e.builderType = O("devportal.appTypeRequired", "Application type is required")), J || (e.category = O("devportal.categoryRequired", "Category is required")), Y.trim() || (e.shortDescription = O("devportal.shortDescriptionRequired", "Short description is required")), Z(e), Object.keys(e).length === 0;
+	}, ye = async () => {
+		if (!ve()) return;
+		let e = _e();
+		try {
+			let t = (await ge({ variables: { input: {
+				name: W,
+				slug: G || void 0,
+				appType: e,
 				category: J || void 0,
 				shortDescription: Y || void 0,
 				visibility: "PRIVATE",
-				developerOrganizationId: A || void 0
+				developerOrganizationId: M || void 0
 			} } })).data?.createApplication?.id;
-			e && (T.emit("devportal.app.created", {
-				appId: e,
-				name: G,
-				appType: q,
-				organizationId: A
-			}), M(e), x(), k("done"));
+			t && (D.emit("devportal.app.created", {
+				appId: t,
+				name: W,
+				appType: e,
+				organizationId: M
+			}), ce(t), S(), j("done"));
 		} catch {}
 	}, $ = () => {
-		x(), D("/");
+		S(), k("/");
 	};
-	return /* @__PURE__ */ _("main", {
+	return /* @__PURE__ */ y("main", {
 		className: "min-h-screen bg-surface-default",
-		children: [/* @__PURE__ */ g("div", {
+		children: [/* @__PURE__ */ v("div", {
 			className: "border-b border-border-default bg-surface-raised",
-			children: /* @__PURE__ */ g("div", {
+			children: /* @__PURE__ */ v("div", {
 				className: "mx-auto max-w-2xl px-6 py-5",
-				children: /* @__PURE__ */ _("div", {
+				children: /* @__PURE__ */ y("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ _("div", {
+					children: [/* @__PURE__ */ y("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ g("div", {
+						children: [/* @__PURE__ */ v("div", {
 							className: "flex h-9 w-9 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
-							children: /* @__PURE__ */ g(h, { size: 20 })
-						}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+							children: /* @__PURE__ */ v(_, { size: 20 })
+						}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
 							className: "text-xs font-medium text-text-secondary",
-							children: E("devportal.developerPortal", "Developer Portal")
-						}), /* @__PURE__ */ g("h1", {
+							children: O("devportal.developerPortal", "Developer Portal")
+						}), /* @__PURE__ */ v("h1", {
 							className: "text-base font-semibold text-text-primary",
-							children: E("devportal.setup.title", "Get set up")
+							children: O("devportal.setup.title", "Get set up")
 						})] })]
-					}), O !== "done" && /* @__PURE__ */ g("button", {
+					}), A !== "done" && /* @__PURE__ */ v("button", {
 						type: "button",
 						onClick: $,
 						className: "text-sm text-text-secondary hover:text-text-primary transition-colors",
-						children: E("devportal.setup.skipForNow", "Skip for now")
+						children: O("devportal.setup.skipForNow", "Skip for now")
 					})]
 				})
 			})
-		}), /* @__PURE__ */ _("div", {
+		}), /* @__PURE__ */ y("div", {
 			className: "mx-auto max-w-2xl px-6 py-10",
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ v("div", {
 					className: "mb-10 flex justify-center",
-					children: /* @__PURE__ */ g(ae, { current: O })
+					children: /* @__PURE__ */ v(oe, { current: A })
 				}),
-				O === "org" && /* @__PURE__ */ _("div", {
+				A === "org" && /* @__PURE__ */ y("div", {
 					className: "mb-8 flex flex-col items-center gap-3 text-center",
-					children: [/* @__PURE__ */ g(re, {
+					children: [/* @__PURE__ */ v(ie, {
 						name: "onboarding",
-						alt: E("devportal.setup.illustrationAlt", "Getting started with the developer portal"),
+						alt: O("devportal.setup.illustrationAlt", "Getting started with the developer portal"),
 						size: "md"
-					}), /* @__PURE__ */ g(v, {
+					}), /* @__PURE__ */ v(ae, {
 						className: "justify-center",
-						children: E("devportal.setup.purpose", "Two quick steps to start building: create the organization that owns your apps, then register your first app. You can change everything later — this just gets you to a working starting point.")
+						children: O("devportal.setup.purpose", "Two quick steps to start building: create the organization that owns your apps, then register your first app. You can change everything later — this just gets you to a working starting point.")
 					})]
 				}),
-				O === "org" && /* @__PURE__ */ _("div", {
+				A === "org" && /* @__PURE__ */ y("div", {
 					className: "rounded-xl border border-border-default bg-surface-raised p-8 shadow-sm",
 					children: [
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							className: "mb-6 flex items-center gap-3",
-							children: [/* @__PURE__ */ g("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
-								children: /* @__PURE__ */ g(f, { size: 20 })
-							}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h2", {
+								children: /* @__PURE__ */ v(f, { size: 20 })
+							}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
 								className: "text-lg font-semibold text-text-primary",
-								children: E("devportal.setup.orgTitle", "Set up your organization")
-							}), /* @__PURE__ */ g("p", {
+								children: O("devportal.setup.orgTitle", "Set up your organization")
+							}), /* @__PURE__ */ v("p", {
 								className: "text-sm text-text-secondary",
-								children: E("devportal.setup.orgSubtitle", "This groups your apps and teams under one publisher identity.")
+								children: O("devportal.setup.orgSubtitle", "This groups your apps and teams under one publisher identity.")
 							})] })]
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							className: "space-y-5",
 							children: [
-								/* @__PURE__ */ g(o, {
-									label: E("devportal.organizationName", "Organization Name"),
-									value: N,
+								/* @__PURE__ */ v(o, {
+									label: O("devportal.organizationName", "Organization Name"),
+									value: P,
 									onChange: (e) => {
-										se(e.target.value), (!P || P === b(N)) && F(b(e.target.value)), z((e) => ({
+										le(e.target.value), (!F || F === x(P)) && I(x(e.target.value)), B((e) => ({
 											...e,
 											name: void 0
 										}));
 									},
-									placeholder: E("devportal.organizationNamePlaceholder", "Acme Development"),
+									placeholder: O("devportal.organizationNamePlaceholder", "Acme Development"),
 									required: !0,
-									error: R.name
+									error: z.name
 								}),
-								/* @__PURE__ */ g(o, {
-									label: E("devportal.slug", "Slug"),
-									value: P,
+								/* @__PURE__ */ v(o, {
+									label: O("devportal.slug", "Slug"),
+									value: F,
 									onChange: (e) => {
-										F(e.target.value.toLowerCase()), z((e) => ({
+										I(e.target.value.toLowerCase()), B((e) => ({
 											...e,
 											slug: void 0
 										}));
 									},
 									placeholder: "acme-dev",
 									required: !0,
-									error: R.slug,
-									hint: E("devportal.slugHint", "URL-friendly identifier — auto-generated from name")
+									error: z.slug,
+									hint: O("devportal.slugHint", "URL-friendly identifier — auto-generated from name")
 								}),
-								/* @__PURE__ */ g(c, {
-									label: E("devportal.description", "Description"),
-									value: I,
-									onChange: (e) => L(e.target.value),
-									placeholder: E("devportal.orgDescriptionPlaceholder", "Tell us about your organization…"),
+								/* @__PURE__ */ v(s, {
+									label: O("devportal.description", "Description"),
+									value: L,
+									onChange: (e) => R(e.target.value),
+									placeholder: O("devportal.orgDescriptionPlaceholder", "Tell us about your organization…"),
 									rows: 2
 								})
 							]
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							className: "mt-8 flex items-center justify-between border-t border-border-default pt-6",
-							children: [/* @__PURE__ */ g("button", {
+							children: [/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: $,
 								className: "text-sm text-text-secondary hover:text-text-primary transition-colors",
-								children: E("devportal.setup.skipForNow", "Skip for now")
-							}), /* @__PURE__ */ _("button", {
+								children: O("devportal.setup.skipForNow", "Skip for now")
+							}), /* @__PURE__ */ y("button", {
 								type: "button",
-								onClick: () => void W(),
-								disabled: V,
+								onClick: () => void de(),
+								disabled: H,
 								className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-5 py-2.5 text-sm font-semibold text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-60 transition-colors",
 								children: [
-									V ? /* @__PURE__ */ g("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : null,
-									E("devportal.setup.createAndContinue", "Create & Continue"),
-									!V && /* @__PURE__ */ g(m, { size: 16 })
+									H ? /* @__PURE__ */ v("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : null,
+									O("devportal.setup.createAndContinue", "Create & Continue"),
+									!H && /* @__PURE__ */ v(m, { size: 16 })
 								]
 							})]
 						})
 					]
 				}),
-				O === "app" && /* @__PURE__ */ _("div", {
+				A === "app" && /* @__PURE__ */ y("div", {
 					className: "rounded-xl border border-border-default bg-surface-raised p-8 shadow-sm",
 					children: [
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							className: "mb-6 flex items-center gap-3",
-							children: [/* @__PURE__ */ g("div", {
+							children: [/* @__PURE__ */ v("div", {
 								className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
-								children: /* @__PURE__ */ g(u, { size: 20 })
-							}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h2", {
+								children: /* @__PURE__ */ v(u, { size: 20 })
+							}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h2", {
 								className: "text-lg font-semibold text-text-primary",
-								children: E("devportal.setup.appTitle", "Create your first app")
-							}), /* @__PURE__ */ g("p", {
+								children: O("devportal.setup.appTitle", "Create your first app")
+							}), /* @__PURE__ */ v("p", {
 								className: "text-sm text-text-secondary",
-								children: E("devportal.setup.appSubtitle", "Register the app you want to publish or integrate.")
+								children: O("devportal.setup.appSubtitle", "Register the app you want to publish or integrate.")
 							})] })]
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							className: "space-y-5",
 							children: [
-								/* @__PURE__ */ g(o, {
-									label: E("devportal.applicationName", "Application Name"),
-									value: G,
+								/* @__PURE__ */ v(o, {
+									label: O("devportal.applicationName", "Application Name"),
+									value: W,
 									onChange: (e) => {
-										ce(e.target.value), (!K || K === b(G)) && le(b(e.target.value)), Z((e) => ({
+										fe(e.target.value), (!G || G === x(W)) && pe(x(e.target.value)), Z((e) => ({
 											...e,
 											name: void 0
 										}));
 									},
-									placeholder: E("devportal.applicationNamePlaceholder", "My Awesome App"),
+									placeholder: O("devportal.applicationNamePlaceholder", "My Awesome App"),
 									required: !0,
 									error: X.name
 								}),
-								/* @__PURE__ */ _("div", {
-									className: "grid grid-cols-2 gap-4",
-									children: [/* @__PURE__ */ g(s, {
-										label: E("devportal.applicationType", "Application Type"),
-										value: q,
-										onChange: (e) => {
-											ue(e.target.value), Z((e) => ({
-												...e,
-												appType: void 0
-											}));
-										},
-										options: y,
-										placeholder: E("devportal.selectType", "Select type…"),
-										required: !0,
-										error: X.appType
-									}), /* @__PURE__ */ g(s, {
-										label: E("devportal.category", "Category"),
-										value: J,
-										onChange: (e) => {
-											de(e.target.value), Z((e) => ({
-												...e,
-												category: void 0
-											}));
-										},
-										options: ie,
-										placeholder: E("devportal.selectCategory", "Select category…"),
-										required: !0,
-										error: X.category
-									})]
+								/* @__PURE__ */ y("div", { children: [
+									/* @__PURE__ */ y("p", {
+										className: "mb-2 text-sm font-medium text-text-primary",
+										children: [
+											O("devportal.applicationType", "Application Type"),
+											" ",
+											/* @__PURE__ */ v("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})
+										]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "grid grid-cols-3 gap-3",
+										children: [
+											/* @__PURE__ */ v(T, {
+												icon: ne,
+												title: "App",
+												description: "OAuth integration for the platform",
+												selected: K === "app",
+												onClick: () => {
+													q("app"), Z((e) => ({
+														...e,
+														builderType: void 0
+													}));
+												}
+											}),
+											/* @__PURE__ */ v(T, {
+												icon: g,
+												title: "Node",
+												description: "Custom FluidGrids workflow node",
+												selected: K === "node",
+												onClick: () => {
+													q("node"), Z((e) => ({
+														...e,
+														builderType: void 0
+													}));
+												}
+											}),
+											/* @__PURE__ */ v(T, {
+												icon: re,
+												title: "Workflow",
+												description: "Reusable automation template",
+												selected: K === "workflow",
+												onClick: () => {
+													q("workflow"), Z((e) => ({
+														...e,
+														builderType: void 0
+													}));
+												}
+											})
+										]
+									}),
+									X.builderType && /* @__PURE__ */ v("p", {
+										className: "mt-1.5 text-xs text-status-error-text",
+										children: X.builderType
+									})
+								] }),
+								/* @__PURE__ */ v(ee, {
+									label: O("devportal.category", "Category"),
+									value: J,
+									onChange: (e) => {
+										me(e.target.value), Z((e) => ({
+											...e,
+											category: void 0
+										}));
+									},
+									options: b,
+									placeholder: O("devportal.selectCategory", "Select category…"),
+									required: !0,
+									error: X.category
 								}),
-								/* @__PURE__ */ g(c, {
-									label: E("devportal.shortDescription", "Short Description"),
+								/* @__PURE__ */ v(s, {
+									label: O("devportal.shortDescription", "Short Description"),
 									value: Y,
 									onChange: (e) => {
-										fe(e.target.value), Z((e) => ({
+										he(e.target.value), Z((e) => ({
 											...e,
 											shortDescription: void 0
 										}));
 									},
-									placeholder: E("devportal.shortDescriptionPlaceholder", "A brief description of what your app does"),
+									placeholder: O("devportal.shortDescriptionPlaceholder", "A brief description of what your app does"),
 									required: !0,
 									error: X.shortDescription,
 									rows: 2,
@@ -358,109 +399,133 @@ var S = [
 								})
 							]
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							className: "mt-8 flex items-center justify-between border-t border-border-default pt-6",
-							children: [/* @__PURE__ */ g("button", {
+							children: [/* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: $,
 								className: "text-sm text-text-secondary hover:text-text-primary transition-colors",
-								children: E("devportal.setup.skipForNow", "Skip for now")
-							}), /* @__PURE__ */ _("button", {
+								children: O("devportal.setup.skipForNow", "Skip for now")
+							}), /* @__PURE__ */ y("button", {
 								type: "button",
-								onClick: () => void he(),
+								onClick: () => void ye(),
 								disabled: Q,
 								className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-5 py-2.5 text-sm font-semibold text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-60 transition-colors",
 								children: [
-									Q ? /* @__PURE__ */ g("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : null,
-									E("devportal.setup.createApp", "Create App"),
-									!Q && /* @__PURE__ */ g(m, { size: 16 })
+									Q ? /* @__PURE__ */ v("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : null,
+									O("devportal.setup.createApp", "Create App"),
+									!Q && /* @__PURE__ */ v(m, { size: 16 })
 								]
 							})]
 						})
 					]
 				}),
-				O === "done" && /* @__PURE__ */ _("div", {
+				A === "done" && /* @__PURE__ */ y("div", {
 					className: "text-center",
 					children: [
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ v("div", {
 							className: "mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-action-primary-bg/10 text-primary",
-							children: /* @__PURE__ */ g(h, { size: 32 })
+							children: /* @__PURE__ */ v(_, { size: 32 })
 						}),
-						/* @__PURE__ */ g("h2", {
+						/* @__PURE__ */ v("h2", {
 							className: "text-2xl font-bold text-text-primary",
-							children: E("devportal.setup.doneTitle", "You're all set!")
+							children: O("devportal.setup.doneTitle", "You're all set!")
 						}),
-						/* @__PURE__ */ g("p", {
+						/* @__PURE__ */ v("p", {
 							className: "mt-2 text-text-secondary",
-							children: E("devportal.setup.doneSubtitle", "Your organization and first app are ready. Here's what to do next.")
+							children: O("devportal.setup.doneSubtitle", "Your organization and first app are ready. Here's what to do next.")
 						}),
-						/* @__PURE__ */ _("div", {
+						/* @__PURE__ */ y("div", {
 							className: "mt-8 grid gap-3 sm:grid-cols-2",
 							children: [
-								j && /* @__PURE__ */ g(w, {
-									icon: /* @__PURE__ */ g(u, { size: 20 }),
-									title: E("devportal.setup.viewApp", "View your app"),
-									description: E("devportal.setup.viewAppDesc", "Configure OAuth, webhooks, and versioning"),
-									onClick: () => D(`/apps/${j}`),
+								N && /* @__PURE__ */ v(E, {
+									icon: /* @__PURE__ */ v(u, { size: 20 }),
+									title: O("devportal.setup.viewApp", "View your app"),
+									description: O("devportal.setup.viewAppDesc", "Configure OAuth, webhooks, and versioning"),
+									onClick: () => k(`/apps/${N}`),
 									primary: !0
 								}),
-								/* @__PURE__ */ g(w, {
-									icon: /* @__PURE__ */ g(ne, { size: 20 }),
-									title: E("devportal.setup.generateApiKey", "Generate API key"),
-									description: E("devportal.setup.generateApiKeyDesc", "Create credentials to start calling APIs"),
-									onClick: () => D("/api-keys/new")
+								/* @__PURE__ */ v(E, {
+									icon: /* @__PURE__ */ v(h, { size: 20 }),
+									title: O("devportal.setup.generateApiKey", "Generate API key"),
+									description: O("devportal.setup.generateApiKeyDesc", "Create credentials to start calling APIs"),
+									onClick: () => k("/api-keys/new")
 								}),
-								/* @__PURE__ */ g(w, {
-									icon: /* @__PURE__ */ g(d, { size: 20 }),
-									title: E("devportal.setup.browseDocs", "Browse docs"),
-									description: E("devportal.setup.browseDocsDesc", "Learn about publishing, SDKs, and webhooks"),
-									onClick: () => D("/docs")
+								/* @__PURE__ */ v(E, {
+									icon: /* @__PURE__ */ v(d, { size: 20 }),
+									title: O("devportal.setup.browseDocs", "Browse docs"),
+									description: O("devportal.setup.browseDocsDesc", "Learn about publishing, SDKs, and webhooks"),
+									onClick: () => k("/docs")
 								}),
-								A && /* @__PURE__ */ g(w, {
-									icon: /* @__PURE__ */ g(f, { size: 20 }),
-									title: E("devportal.setup.inviteTeam", "Invite your team"),
-									description: E("devportal.setup.inviteTeamDesc", "Add members to collaborate on your apps"),
-									onClick: () => D(`/organizations/${A}/members`)
+								M && /* @__PURE__ */ v(E, {
+									icon: /* @__PURE__ */ v(f, { size: 20 }),
+									title: O("devportal.setup.inviteTeam", "Invite your team"),
+									description: O("devportal.setup.inviteTeamDesc", "Add members to collaborate on your apps"),
+									onClick: () => k(`/organizations/${M}/members`)
 								})
 							]
 						}),
-						/* @__PURE__ */ _("button", {
+						/* @__PURE__ */ y("button", {
 							type: "button",
-							onClick: () => D("/"),
+							onClick: () => k("/"),
 							className: "mt-8 inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors",
-							children: [E("devportal.setup.goToDashboard", "Go to dashboard"), /* @__PURE__ */ g(te, { size: 14 })]
+							children: [O("devportal.setup.goToDashboard", "Go to dashboard"), /* @__PURE__ */ v(te, { size: 14 })]
 						})
 					]
 				})
 			]
 		})]
 	});
-}, w = ({ icon: e, title: t, description: n, onClick: r, primary: i }) => /* @__PURE__ */ _("button", {
+}, T = ({ icon: e, title: n, description: r, selected: i, onClick: a }) => /* @__PURE__ */ y("button", {
+	type: "button",
+	onClick: a,
+	className: t("relative flex flex-col gap-2 rounded-xl border-2 p-4 text-left transition-all hover:border-primary/50 hover:shadow-sm", i ? "border-primary bg-action-primary-bg/5 shadow-sm" : "border-border-subtle bg-bg-surface"),
+	children: [
+		i && /* @__PURE__ */ v("span", {
+			className: "absolute top-3 right-3 flex h-4 w-4 items-center justify-center rounded-full bg-action-primary-bg text-action-primary-text",
+			children: /* @__PURE__ */ v(p, { size: 10 })
+		}),
+		/* @__PURE__ */ v("div", {
+			className: "flex h-8 w-8 items-center justify-center rounded-lg bg-bg-sunken",
+			children: /* @__PURE__ */ v(e, {
+				size: 18,
+				className: "text-text-primary"
+			})
+		}),
+		/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
+			className: "text-sm font-semibold text-text-primary",
+			children: n
+		}), /* @__PURE__ */ v("p", {
+			className: "mt-0.5 text-xs text-text-secondary",
+			children: r
+		})] })
+	]
+}), E = ({ icon: e, title: t, description: n, onClick: r, primary: i }) => /* @__PURE__ */ y("button", {
 	type: "button",
 	onClick: r,
 	className: ["flex items-start gap-4 rounded-xl border p-5 text-left transition-colors", i ? "border-primary bg-action-primary-bg/5 hover:bg-action-primary-bg/10" : "border-border-default bg-surface-raised hover:bg-surface-hover"].join(" "),
 	children: [
-		/* @__PURE__ */ g("div", {
+		/* @__PURE__ */ v("div", {
 			className: ["flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg", i ? "bg-action-primary-bg/20 text-primary" : "bg-bg-sunken text-text-secondary"].join(" "),
 			children: e
 		}),
-		/* @__PURE__ */ _("div", {
+		/* @__PURE__ */ y("div", {
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ g("p", {
+			children: [/* @__PURE__ */ v("p", {
 				className: "font-semibold text-text-primary",
 				children: t
-			}), /* @__PURE__ */ g("p", {
+			}), /* @__PURE__ */ v("p", {
 				className: "mt-0.5 text-sm text-text-secondary",
 				children: n
 			})]
 		}),
-		/* @__PURE__ */ g(m, {
+		/* @__PURE__ */ v(m, {
 			size: 16,
 			className: "mt-0.5 flex-shrink-0 text-text-secondary"
 		})
 	]
 });
 //#endregion
-export { C as SetupPage };
+export { w as SetupPage };
 
 //# sourceMappingURL=SetupPage.js.map