@burdenoff/microfe-devportal 2026.624.7 → 2026.624.8

package/dist/devportal/pages/ApplicationDetailPage.js

@@ -176,18 +176,18 @@ var Se = [
 	className: "flex items-center justify-center gap-3 py-12",
 	children: [/* @__PURE__ */ J(V, {
 		size: 20,
-		className: "animate-spin text-muted-foreground"
+		className: "animate-spin text-text-secondary"
 	}), /* @__PURE__ */ J("p", {
-		className: "text-sm text-muted-foreground",
+		className: "text-sm text-text-secondary",
 		children: e
 	})]
 }), Z = ({ message: e }) => /* @__PURE__ */ Y("div", {
 	className: "flex flex-col items-center justify-center gap-2 py-12 text-center",
 	children: [/* @__PURE__ */ J(ie, {
 		size: 32,
-		className: "text-destructive"
+		className: "text-status-error-text"
 	}), /* @__PURE__ */ J("p", {
-		className: "text-sm text-muted-foreground",
+		className: "text-sm text-text-secondary",
 		children: e
 	})]
 }), Te = () => {
@@ -253,14 +253,14 @@ var Se = [
 			children: [
 				/* @__PURE__ */ J(ie, {
 					size: 48,
-					className: "text-destructive mb-4"
+					className: "text-status-error-text mb-4"
 				}),
 				/* @__PURE__ */ J("h3", {
 					className: "text-lg font-semibold mb-2",
 					children: p("devportal.failedToLoadApplication", "Failed to load application")
 				}),
 				/* @__PURE__ */ J("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: z.message
 				})
 			]
@@ -279,24 +279,24 @@ var Se = [
 					onClick: () => D(!0),
 					disabled: !Z.appId,
 					title: Z.appId ? p("devportal.rotateSecretHint", "Generate a new client secret") : p("devportal.rotateSecretNoClient", "Create an OAuth client first to enable secret rotation"),
-					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 					children: [/* @__PURE__ */ J(pe, { size: 16 }), p("devportal.rotateSecret", "Rotate Secret")]
 				}),
 				/* @__PURE__ */ Y("button", {
 					onClick: () => X(`/apps/${Z.id}/versions`),
-					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors",
+					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors",
 					children: [/* @__PURE__ */ J(oe, { size: 16 }), p("devportal.versions", "Versions")]
 				}),
 				Z.status !== "PUBLISHED" && (Z.appType !== "NODE" && Z.appType !== "WORKFLOW" ? !0 : (R?.application?.versions?.totalCount ?? 0) > 0) && /* @__PURE__ */ Y("button", {
 					onClick: () => T("store-listing"),
-					className: "inline-flex items-center gap-2 rounded-md border border-primary/40 px-4 py-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors",
+					className: "inline-flex items-center gap-2 rounded-md border border-primary/40 px-4 py-2 text-sm font-medium text-primary hover:bg-action-primary-bg/10 transition-colors",
 					children: [/* @__PURE__ */ J(me, { size: 16 }), p("devportal.submitForReview", "Submit for Review")]
 				}),
 				Z.appType !== "NODE" && Z.appType !== "WORKFLOW" && (q ? /* @__PURE__ */ Y("button", {
 					onClick: () => void we(q.id),
 					disabled: G || !c,
 					title: p("devportal.uninstallFromWorkspace", "Uninstall this app from your current workspace"),
-					className: "inline-flex items-center gap-2 rounded-md border border-destructive/50 px-4 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors disabled:opacity-50",
+					className: "inline-flex items-center gap-2 rounded-md border border-status-error-border/50 px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg/10 transition-colors disabled:opacity-50",
 					children: [G ? /* @__PURE__ */ J(V, {
 						size: 16,
 						className: "animate-spin"
@@ -306,25 +306,17 @@ var Se = [
 					disabled: he || !c,
 					"aria-disabled": !c,
 					title: c ? p("devportal.testInWorkspaceHint", "Install this app into your current workspace to test it") : p("devportal.noWorkspaceContext", "No workspace context available"),
-					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50",
+					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50",
 					children: [he ? /* @__PURE__ */ J(V, {
 						size: 16,
 						className: "animate-spin"
 					}) : /* @__PURE__ */ J(le, { size: 16 }), p("devportal.testInWorkspace", "Test in Workspace")]
 				})),
-				Z.appType === "NODE" && /* @__PURE__ */ Y("button", {
-					onClick: () => i?.(`/workflows/new?nodeId=${Z.id}`),
-					disabled: !c,
-					"aria-disabled": !c,
-					title: c ? p("devportal.testInWorkflowBuilderHint", "Open a new workflow with this node available in the builder") : p("devportal.noWorkspaceContext", "No workspace context available"),
-					className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50",
-					children: [/* @__PURE__ */ J(le, { size: 16 }), p("devportal.testInWorkflowBuilder", "Test in Workflow Builder")]
-				}),
 				/* @__PURE__ */ Y("button", {
 					onClick: () => X(`/apps/${Z.id}/edit`),
 					disabled: !h,
 					"aria-disabled": !h,
-					className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+					className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50",
 					children: [/* @__PURE__ */ J(ce, { size: 16 }), p("devportal.editApp", "Edit App")]
 				}),
 				/* @__PURE__ */ Y("button", {
@@ -357,7 +349,7 @@ var Se = [
 					Z.isVerified && /* @__PURE__ */ J(x, { verified: !0 }),
 					Z.isFeatured && /* @__PURE__ */ J(y, {}),
 					/* @__PURE__ */ J("span", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: v[Z.appType] || Z.appType
 					})
 				]
@@ -376,7 +368,7 @@ var Se = [
 							"aria-selected": w === e.id,
 							"aria-controls": `application-panel-${e.id}`,
 							onClick: () => T(e.id),
-							className: t("flex items-center gap-2 border-b-2 px-1 py-3 text-sm font-medium transition-colors", w === e.id ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground"),
+							className: t("flex items-center gap-2 border-b-2 px-1 py-3 text-sm font-medium transition-colors", w === e.id ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary hover:border-muted-foreground"),
 							children: [/* @__PURE__ */ J(n, { size: 16 }), e.label]
 						}, e.id);
 					})
@@ -535,7 +527,7 @@ var Se = [
 		description: s("devportal.linkAuthAppFirstDescription", "Delegations are managed through auth apps. Create or link an auth app before granting app-as-user access."),
 		action: /* @__PURE__ */ Y("button", {
 			onClick: () => a("/oauth"),
-			className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+			className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 			children: [/* @__PURE__ */ J(z, { size: 16 }), s("devportal.manageOAuthApps", "Manage OAuth Apps")]
 		})
 	});
@@ -589,7 +581,7 @@ var Se = [
 					children: /* @__PURE__ */ J("div", {
 						className: "prose prose-sm max-w-none",
 						children: /* @__PURE__ */ J("pre", {
-							className: "whitespace-pre-wrap font-sans text-sm text-foreground bg-transparent p-0 m-0",
+							className: "whitespace-pre-wrap font-sans text-sm text-text-primary bg-transparent p-0 m-0",
 							children: e.description || n("devportal.noDescriptionProvided", "No description provided.")
 						})
 					})
@@ -599,21 +591,21 @@ var Se = [
 					children: /* @__PURE__ */ Y("div", {
 						className: "space-y-3",
 						children: [e.tags.length > 0 && /* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-							className: "text-xs text-muted-foreground mb-2",
+							className: "text-xs text-text-secondary mb-2",
 							children: n("devportal.tags", "Tags")
 						}), /* @__PURE__ */ J("div", {
 							className: "flex flex-wrap gap-2",
 							children: e.tags.map((e) => /* @__PURE__ */ J("span", {
-								className: "rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary",
+								className: "rounded-full bg-action-primary-bg/10 px-3 py-1 text-xs font-medium text-primary",
 								children: e
 							}, e))
 						})] }), e.keywords.length > 0 && /* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-							className: "text-xs text-muted-foreground mb-2",
+							className: "text-xs text-text-secondary mb-2",
 							children: n("devportal.keywords", "Keywords")
 						}), /* @__PURE__ */ J("div", {
 							className: "flex flex-wrap gap-2",
 							children: e.keywords.map((e) => /* @__PURE__ */ J("span", {
-								className: "rounded-full bg-muted px-3 py-1 text-xs",
+								className: "rounded-full bg-bg-sunken px-3 py-1 text-xs",
 								children: e
 							}, e))
 						})] })]
@@ -701,7 +693,7 @@ var Se = [
 		children: [/* @__PURE__ */ Y("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ Y("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: [
 					t.length,
 					" ",
@@ -711,13 +703,13 @@ var Se = [
 				]
 			}), /* @__PURE__ */ Y("button", {
 				onClick: () => n(`/apps/${e}/webhooks/new`),
-				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 				children: [/* @__PURE__ */ J(H, { size: 16 }), a("devportal.addWebhook", "Add Webhook")]
 			})]
 		}), t.length > 0 ? /* @__PURE__ */ J("div", {
 			className: "space-y-4",
 			children: t.map((t) => /* @__PURE__ */ Y("div", {
-				className: "rounded-lg border bg-card p-4 space-y-4",
+				className: "rounded-lg border bg-bg-surface p-4 space-y-4",
 				children: [
 					/* @__PURE__ */ Y("div", {
 						className: "flex items-start justify-between",
@@ -731,28 +723,28 @@ var Se = [
 								type: "webhook"
 							})]
 						}), t.description && /* @__PURE__ */ J("p", {
-							className: "text-sm text-muted-foreground mt-1",
+							className: "text-sm text-text-secondary mt-1",
 							children: t.description
 						})] }), /* @__PURE__ */ J("button", {
 							onClick: () => n(`/apps/${e}/webhooks/${t.id}`),
-							className: "rounded-md p-1 hover:bg-muted",
+							className: "rounded-md p-1 hover:bg-bg-sunken",
 							children: /* @__PURE__ */ J(de, { size: 20 })
 						})]
 					}),
 					/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-						className: "text-xs text-muted-foreground mb-1",
+						className: "text-xs text-text-secondary mb-1",
 						children: a("devportal.endpointUrl", "Endpoint URL")
 					}), /* @__PURE__ */ J("code", {
-						className: "text-sm bg-muted px-2 py-1 rounded block truncate",
+						className: "text-sm bg-bg-sunken px-2 py-1 rounded block truncate",
 						children: t.url
 					})] }),
 					/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-						className: "text-xs text-muted-foreground mb-2",
+						className: "text-xs text-text-secondary mb-2",
 						children: a("devportal.events", "Events")
 					}), /* @__PURE__ */ J("div", {
 						className: "flex flex-wrap gap-2",
 						children: t.events.map((e) => /* @__PURE__ */ J("span", {
-							className: "rounded-full bg-muted px-2 py-0.5 text-xs",
+							className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs",
 							children: e
 						}, e))
 					})] }),
@@ -760,28 +752,28 @@ var Se = [
 						className: "grid gap-4 sm:grid-cols-4 text-sm",
 						children: [
 							/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: a("devportal.success", "Success")
 							}), /* @__PURE__ */ J("p", {
 								className: "font-medium text-status-success-text",
 								children: t.successCount.toLocaleString()
 							})] }),
 							/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: a("devportal.failed", "Failed")
 							}), /* @__PURE__ */ J("p", {
 								className: "font-medium text-status-error-text",
 								children: t.failureCount.toLocaleString()
 							})] }),
 							/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: a("devportal.successRate", "Success Rate")
 							}), /* @__PURE__ */ Y("p", {
 								className: "font-medium",
 								children: [t.successCount + t.failureCount > 0 ? (t.successCount / (t.successCount + t.failureCount) * 100).toFixed(1) : "0.0", "%"]
 							})] }),
 							/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: a("devportal.lastTriggered", "Last Triggered")
 							}), /* @__PURE__ */ J("p", {
 								className: "font-medium",
@@ -797,7 +789,7 @@ var Se = [
 			description: a("devportal.noWebhooksDescription", "Add a webhook to receive event notifications"),
 			action: /* @__PURE__ */ Y("button", {
 				onClick: () => n(`/apps/${e}/webhooks/new`),
-				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 				children: [/* @__PURE__ */ J(H, { size: 16 }), a("devportal.addWebhook", "Add Webhook")]
 			})
 		})]
@@ -813,7 +805,7 @@ var Se = [
 			/* @__PURE__ */ Y("div", {
 				className: "flex items-center justify-between",
 				children: [/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ Y("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: [
 						n.length,
 						" ",
@@ -824,7 +816,7 @@ var Se = [
 						e
 					]
 				}), h.length > 0 && /* @__PURE__ */ Y("p", {
-					className: "text-xs text-muted-foreground mt-0.5",
+					className: "text-xs text-text-secondary mt-0.5",
 					children: [
 						h.length,
 						" ",
@@ -837,12 +829,12 @@ var Se = [
 					]
 				})] }), /* @__PURE__ */ Y("button", {
 					onClick: i,
-					className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+					className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 					children: [/* @__PURE__ */ J(H, { size: 16 }), m("devportal.grantDelegation", "Grant Delegation")]
 				})]
 			}),
 			h.length > 0 && /* @__PURE__ */ J("div", {
-				className: "rounded-lg border bg-card p-4",
+				className: "rounded-lg border bg-bg-surface p-4",
 				children: /* @__PURE__ */ Y("div", {
 					className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
 					children: [/* @__PURE__ */ Y("div", {
@@ -860,13 +852,13 @@ var Se = [
 							})]
 						}), o.size > 0 && /* @__PURE__ */ J("button", {
 							onClick: l,
-							className: "text-sm text-muted-foreground hover:text-foreground",
+							className: "text-sm text-text-secondary hover:text-text-primary",
 							children: m("devportal.clearSelection", "Clear selection")
 						})]
 					}), /* @__PURE__ */ Y("div", {
 						className: "flex flex-wrap items-center gap-2",
 						children: [/* @__PURE__ */ Y("span", {
-							className: "rounded-full bg-muted px-3 py-1 text-sm font-medium text-muted-foreground",
+							className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
 							children: [
 								o.size,
 								" ",
@@ -884,7 +876,7 @@ var Se = [
 			n.length > 0 ? /* @__PURE__ */ J("div", {
 				className: "space-y-4",
 				children: n.map((e) => /* @__PURE__ */ Y("div", {
-					className: "rounded-lg border bg-card p-4 space-y-4",
+					className: "rounded-lg border bg-bg-surface p-4 space-y-4",
 					children: [
 						/* @__PURE__ */ Y("div", {
 							className: "flex items-start justify-between",
@@ -908,7 +900,7 @@ var Se = [
 										children: e.status
 									})]
 								}), /* @__PURE__ */ Y("p", {
-									className: "text-sm text-muted-foreground mt-1",
+									className: "text-sm text-text-secondary mt-1",
 									children: [
 										m("devportal.granted", "Granted"),
 										" ",
@@ -926,7 +918,7 @@ var Se = [
 							})]
 						}),
 						/* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-							className: "text-xs text-muted-foreground mb-2",
+							className: "text-xs text-text-secondary mb-2",
 							children: m("devportal.grantedScopes", "Granted Scopes")
 						}), /* @__PURE__ */ J("div", {
 							className: "flex flex-wrap gap-2",
@@ -936,17 +928,17 @@ var Se = [
 							}, e))
 						})] }),
 						e.workspaceIds.length > 0 && /* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("p", {
-							className: "text-xs text-muted-foreground mb-2",
+							className: "text-xs text-text-secondary mb-2",
 							children: m("devportal.workspaceScope", "Workspace Scope")
 						}), /* @__PURE__ */ J("div", {
 							className: "flex flex-wrap gap-2",
 							children: e.workspaceIds.map((e) => /* @__PURE__ */ J("code", {
-								className: "rounded bg-muted px-2 py-0.5 text-xs",
+								className: "rounded bg-bg-sunken px-2 py-0.5 text-xs",
 								children: e
 							}, e))
 						})] }),
 						/* @__PURE__ */ Y("div", {
-							className: "flex items-center gap-4 text-xs text-muted-foreground",
+							className: "flex items-center gap-4 text-xs text-text-secondary",
 							children: [
 								e.expiresAt && /* @__PURE__ */ Y("span", {
 									className: "flex items-center gap-1",
@@ -986,7 +978,7 @@ var Se = [
 				description: m("devportal.noDelegationsDescription", "Grant a delegation to allow this app to act on your behalf"),
 				action: /* @__PURE__ */ Y("button", {
 					onClick: i,
-					className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+					className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 					children: [/* @__PURE__ */ J(H, { size: 16 }), m("devportal.grantDelegation", "Grant Delegation")]
 				})
 			})
@@ -1119,13 +1111,13 @@ var Se = [
 					className: "text-lg font-semibold",
 					children: o("devportal.apiPlayground", "API Playground")
 				}), /* @__PURE__ */ Y("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: [
 						o("devportal.apiPlaygroundDescription", "Test GraphQL APIs in the context of"),
 						" ",
 						/* @__PURE__ */ J("strong", { children: t.name }),
 						t.appId && /* @__PURE__ */ Y("span", {
-							className: "ml-1 text-xs text-muted-foreground",
+							className: "ml-1 text-xs text-text-secondary",
 							children: [
 								"(OAuth App: ",
 								t.appId.slice(0, 8),
@@ -1189,10 +1181,10 @@ var Se = [
 					type: "text",
 					value: h,
 					onChange: (e) => g(e.target.value),
-					className: "flex-1 rounded-md border px-3 py-2 text-sm font-mono bg-background"
+					className: "flex-1 rounded-md border px-3 py-2 text-sm font-mono bg-bg-surface"
 				}), /* @__PURE__ */ Y("select", {
 					onChange: (e) => g(e.target.value),
-					className: "rounded-md border px-3 py-2 text-sm bg-background",
+					className: "rounded-md border px-3 py-2 text-sm bg-bg-surface",
 					value: h,
 					children: [/* @__PURE__ */ J("option", {
 						value: `${n || "https://gw-global.local.burdenoff.com"}/global/graphql`,
@@ -1211,7 +1203,7 @@ var Se = [
 				value: _,
 				onChange: (e) => v(e.target.value),
 				placeholder: o("devportal.pasteAccessToken", "Paste access token here..."),
-				className: "w-full rounded-md border px-3 py-2 text-sm font-mono bg-background"
+				className: "w-full rounded-md border px-3 py-2 text-sm font-mono bg-bg-surface"
 			})] }),
 			/* @__PURE__ */ Y("div", {
 				className: "grid grid-cols-1 lg:grid-cols-2 gap-4",
@@ -1221,7 +1213,7 @@ var Se = [
 				}), /* @__PURE__ */ J("textarea", {
 					value: s,
 					onChange: (e) => c(e.target.value),
-					className: "w-full h-64 rounded-md border px-3 py-2 text-sm font-mono bg-background resize-y",
+					className: "w-full h-64 rounded-md border px-3 py-2 text-sm font-mono bg-bg-surface resize-y",
 					spellCheck: !1
 				})] }), /* @__PURE__ */ Y("div", { children: [/* @__PURE__ */ J("label", {
 					className: "block text-sm font-medium mb-1",
@@ -1229,14 +1221,14 @@ var Se = [
 				}), /* @__PURE__ */ J("textarea", {
 					value: l,
 					onChange: (e) => u(e.target.value),
-					className: "w-full h-64 rounded-md border px-3 py-2 text-sm font-mono bg-background resize-y",
+					className: "w-full h-64 rounded-md border px-3 py-2 text-sm font-mono bg-bg-surface resize-y",
 					spellCheck: !1
 				})] })]
 			}),
 			/* @__PURE__ */ Y("button", {
 				onClick: x,
 				disabled: p,
-				className: "flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+				className: "flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50",
 				children: [p ? /* @__PURE__ */ J(V, {
 					size: 16,
 					className: "animate-spin"
@@ -1246,7 +1238,7 @@ var Se = [
 				className: "block text-sm font-medium mb-1",
 				children: o("devportal.response", "Response")
 			}), /* @__PURE__ */ J("pre", {
-				className: "w-full max-h-96 overflow-auto rounded-md border bg-muted p-4 text-xs font-mono",
+				className: "w-full max-h-96 overflow-auto rounded-md border bg-bg-sunken p-4 text-xs font-mono",
 				children: d
 			})] })
 		]
@@ -1267,7 +1259,7 @@ var Se = [
 			/* @__PURE__ */ Y("div", {
 				className: "flex gap-3 items-start",
 				children: [/* @__PURE__ */ Y("div", {
-					className: t("relative shrink-0 w-20 rounded-lg border border-border bg-bg-sunken overflow-hidden flex items-center justify-center", o),
+					className: t("relative shrink-0 w-20 rounded-lg border border-border-subtle bg-bg-sunken overflow-hidden flex items-center justify-center", o),
 					children: [n ? /* @__PURE__ */ J("img", {
 						src: n,
 						alt: e,
@@ -1293,7 +1285,7 @@ var Se = [
 							value: n,
 							onChange: (e) => r(e.target.value),
 							placeholder: "https://...",
-							className: "w-full rounded-md border border-border bg-bg-input px-3 py-1.5 text-sm placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-primary/30"
+							className: "w-full rounded-md border border-border-subtle bg-bg-input px-3 py-1.5 text-sm placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-primary/30"
 						}),
 						/* @__PURE__ */ J("input", {
 							ref: d,
@@ -1309,7 +1301,7 @@ var Se = [
 							type: "button",
 							disabled: c,
 							onClick: () => d.current?.click(),
-							className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-muted transition-colors disabled:opacity-50",
+							className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50",
 							children: [/* @__PURE__ */ J(W, { size: 11 }), c ? `Uploading… ${l}%` : "Upload image"]
 						}),
 						u && /* @__PURE__ */ J("p", {
@@ -1348,7 +1340,7 @@ var Se = [
 			/* @__PURE__ */ Y("div", {
 				className: "flex flex-wrap gap-3",
 				children: [e.map((e, t) => /* @__PURE__ */ Y("div", {
-					className: "relative group w-36 aspect-video rounded-lg border border-border overflow-hidden bg-bg-sunken",
+					className: "relative group w-36 aspect-video rounded-lg border border-border-subtle overflow-hidden bg-bg-sunken",
 					children: [/* @__PURE__ */ J("img", {
 						src: e,
 						alt: `Screenshot ${t + 1}`,
@@ -1363,7 +1355,7 @@ var Se = [
 					type: "button",
 					disabled: i,
 					onClick: () => s.current?.click(),
-					className: t("w-36 aspect-video rounded-lg border-2 border-dashed border-border flex flex-col items-center justify-center gap-1.5 text-text-secondary hover:border-border-strong hover:bg-bg-sunken transition-colors disabled:opacity-50"),
+					className: t("w-36 aspect-video rounded-lg border-2 border-dashed border-border-subtle flex flex-col items-center justify-center gap-1.5 text-text-secondary hover:border-border-strong hover:bg-bg-sunken transition-colors disabled:opacity-50"),
 					children: i ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J(V, {
 						size: 18,
 						className: "animate-spin text-primary"
@@ -1638,7 +1630,7 @@ var Ve = ({ app: n }) => {
 						className: "font-medium text-success",
 						children: c("devportal.storeListing.published", "Published")
 					}), n.publishedAt && /* @__PURE__ */ Y("span", {
-						className: "text-muted-foreground ml-2",
+						className: "text-text-secondary ml-2",
 						children: [
 							c("devportal.storeListing.since", "since"),
 							" ",
@@ -1647,7 +1639,7 @@ var Ve = ({ app: n }) => {
 					})]
 				})]
 			}) : xe ? /* @__PURE__ */ Y("div", {
-				className: "flex items-start gap-3 rounded-lg border border-primary/30 bg-primary/5 px-4 py-3",
+				className: "flex items-start gap-3 rounded-lg border border-primary/30 bg-action-primary-bg/5 px-4 py-3",
 				children: [/* @__PURE__ */ J(oe, {
 					size: 16,
 					className: "text-primary mt-0.5 shrink-0"
@@ -1659,11 +1651,11 @@ var Ve = ({ app: n }) => {
 							children: c("devportal.storeListing.underReview", "Submitted for review")
 						}),
 						n.submittedAt && /* @__PURE__ */ J("span", {
-							className: "text-muted-foreground ml-2",
+							className: "text-text-secondary ml-2",
 							children: new Date(n.submittedAt).toLocaleDateString()
 						}),
 						n.reviewStatus && /* @__PURE__ */ Y("span", {
-							className: "text-muted-foreground ml-2",
+							className: "text-text-secondary ml-2",
 							children: ["· ", n.reviewStatus]
 						})
 					]
@@ -1679,7 +1671,7 @@ var Ve = ({ app: n }) => {
 						className: "font-medium text-warning",
 						children: c("devportal.storeListing.draft", "Draft")
 					}), /* @__PURE__ */ J("span", {
-						className: "text-muted-foreground ml-2",
+						className: "text-text-secondary ml-2",
 						children: c("devportal.storeListing.draftHint", "Complete your store listing and submit for review to publish.")
 					})]
 				})]
@@ -1738,7 +1730,7 @@ var Ve = ({ app: n }) => {
 											type: "checkbox",
 											checked: ye,
 											onChange: (e) => S("manifestInstallType", e.target.checked ? "builtin" : "zip"),
-											className: "h-4 w-4 rounded border-border accent-primary"
+											className: "h-4 w-4 rounded border-border-subtle accent-primary"
 										}), /* @__PURE__ */ J("span", {
 											className: "text-text-secondary",
 											children: c("devportal.builtinToggle", "Built-in (pre-installed, no upload needed)")
@@ -1754,7 +1746,7 @@ var Ve = ({ app: n }) => {
 										}), /* @__PURE__ */ Y("span", { children: [
 											c("devportal.zipModelHint", "Package your code and a "),
 											/* @__PURE__ */ J("code", {
-												className: "rounded bg-muted px-1 py-0.5 font-mono text-xs",
+												className: "rounded bg-bg-sunken px-1 py-0.5 font-mono text-xs",
 												children: "manifest.json"
 											}),
 											c("devportal.zipModelHint2", " into a single zip — like a Chrome extension. Upload it below and FluidGrid handles the rest automatically.")
@@ -1767,7 +1759,7 @@ var Ve = ({ app: n }) => {
 										onDragLeave: () => g(!1),
 										onDrop: (e) => void ge(e),
 										onClick: () => !te && k.current?.click(),
-										className: t("relative flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors cursor-pointer", m ? "border-primary bg-primary/5" : "border-border hover:border-border-strong hover:bg-bg-sunken", te && "pointer-events-none opacity-75"),
+										className: t("relative flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors cursor-pointer", m ? "border-primary bg-action-primary-bg/5" : "border-border-subtle hover:border-border-strong hover:bg-bg-sunken", te && "pointer-events-none opacity-75"),
 										children: [/* @__PURE__ */ J("input", {
 											ref: k,
 											type: "file",
@@ -1792,9 +1784,9 @@ var Ve = ({ app: n }) => {
 												children: c("devportal.uploadingHint", "Stored securely in your workspace")
 											})] }),
 											/* @__PURE__ */ J("div", {
-												className: "w-48 h-1.5 rounded-full bg-muted overflow-hidden",
+												className: "w-48 h-1.5 rounded-full bg-bg-sunken overflow-hidden",
 												children: /* @__PURE__ */ J("div", {
-													className: "h-full bg-primary transition-all",
+													className: "h-full bg-action-primary-bg transition-all",
 													style: { width: `${ne}%` }
 												})
 											})
@@ -1849,13 +1841,13 @@ var Ve = ({ app: n }) => {
 								/* @__PURE__ */ Y("button", {
 									type: "button",
 									onClick: () => T.current?.click(),
-									className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-muted transition-colors",
+									className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-bg-sunken transition-colors",
 									children: [/* @__PURE__ */ J(W, { size: 12 }), c("devportal.importManifest", "Import")]
 								}),
 								/* @__PURE__ */ Y("button", {
 									type: "button",
 									onClick: _e,
-									className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-muted transition-colors",
+									className: "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-bg-sunken transition-colors",
 									children: [/* @__PURE__ */ J(se, { size: 12 }), c("devportal.exportManifest", "Export")]
 								}),
 								/* @__PURE__ */ J("span", {
@@ -1990,7 +1982,7 @@ var Ve = ({ app: n }) => {
 						children: Re.map((e) => /* @__PURE__ */ J("button", {
 							type: "button",
 							onClick: () => S("pricingType", e.value),
-							className: t("rounded-md border px-3 py-1.5 text-sm font-medium transition-colors", l.pricingType === e.value ? "bg-primary text-primary-foreground border-primary" : "hover:bg-muted"),
+							className: t("rounded-md border px-3 py-1.5 text-sm font-medium transition-colors", l.pricingType === e.value ? "bg-action-primary-bg text-action-primary-text border-primary" : "hover:bg-bg-sunken"),
 							children: e.label
 						}, e.value))
 					})] }), X && /* @__PURE__ */ Y("div", {
@@ -2016,7 +2008,7 @@ var Ve = ({ app: n }) => {
 					type: "button",
 					onClick: ee,
 					disabled: d,
-					className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+					className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50",
 					children: d ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J(V, {
 						size: 16,
 						className: "animate-spin"
@@ -2025,7 +2017,7 @@ var Ve = ({ app: n }) => {
 					type: "button",
 					onClick: () => void w(),
 					disabled: x || d,
-					className: "inline-flex items-center gap-2 rounded-md border border-primary px-4 py-2 text-sm font-medium text-primary hover:bg-primary/5 transition-colors disabled:opacity-50",
+					className: "inline-flex items-center gap-2 rounded-md border border-primary px-4 py-2 text-sm font-medium text-primary hover:bg-action-primary-bg/5 transition-colors disabled:opacity-50",
 					children: x ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J(V, {
 						size: 16,
 						className: "animate-spin"
@@ -2037,10 +2029,10 @@ var Ve = ({ app: n }) => {
 }, Q = ({ label: e, value: n, trend: r }) => {
 	let { t: i } = I();
 	return /* @__PURE__ */ Y("div", {
-		className: "rounded-lg border bg-card p-4",
+		className: "rounded-lg border bg-bg-surface p-4",
 		children: [
 			/* @__PURE__ */ J("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: e
 			}),
 			/* @__PURE__ */ J("p", {
@@ -2048,7 +2040,7 @@ var Ve = ({ app: n }) => {
 				children: n
 			}),
 			r !== void 0 && /* @__PURE__ */ Y("p", {
-				className: t("text-xs mt-1", r > 0 ? "text-status-success-text" : r < 0 ? "text-status-error-text" : "text-muted-foreground"),
+				className: t("text-xs mt-1", r > 0 ? "text-status-success-text" : r < 0 ? "text-status-error-text" : "text-text-secondary"),
 				children: [
 					r > 0 ? "+" : "",
 					r.toFixed(1),
@@ -2184,29 +2176,29 @@ var We = ({ app: e }) => {
 			className: "space-y-4",
 			children: [
 				/* @__PURE__ */ J("div", {
-					className: "overflow-x-auto rounded-lg border border-border",
+					className: "overflow-x-auto rounded-lg border border-border-subtle",
 					children: /* @__PURE__ */ Y("table", {
 						className: "w-full text-sm",
 						children: [/* @__PURE__ */ J("thead", { children: /* @__PURE__ */ Y("tr", {
-							className: "border-b border-border bg-muted/50",
+							className: "border-b border-border-subtle bg-bg-sunken/50",
 							children: [/* @__PURE__ */ J("th", {
-								className: "px-4 py-3 text-left font-medium text-muted-foreground w-1/2",
+								className: "px-4 py-3 text-left font-medium text-text-secondary w-1/2",
 								children: "Resource"
 							}), f.map((e) => /* @__PURE__ */ J("th", {
-								className: "px-4 py-3 text-center font-medium text-muted-foreground",
+								className: "px-4 py-3 text-center font-medium text-text-secondary",
 								children: d[e]
 							}, e))]
 						}) }), /* @__PURE__ */ J("tbody", {
 							className: "divide-y divide-border",
 							children: He.map((e) => /* @__PURE__ */ Y("tr", {
-								className: "hover:bg-muted/30 transition-colors",
+								className: "hover:bg-bg-sunken/30 transition-colors",
 								children: [/* @__PURE__ */ Y("td", {
 									className: "px-4 py-3",
 									children: [/* @__PURE__ */ J("p", {
-										className: "font-medium text-foreground",
+										className: "font-medium text-text-primary",
 										children: e.label
 									}), /* @__PURE__ */ J("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: e.description
 									})]
 								}), f.map((t) => /* @__PURE__ */ J("td", {
@@ -2225,7 +2217,7 @@ var We = ({ app: e }) => {
 					})
 				}),
 				/* @__PURE__ */ Y("div", {
-					className: "rounded-lg border border-border-subtle bg-muted/30 p-3 flex gap-2 text-xs text-muted-foreground",
+					className: "rounded-lg border border-border-subtle bg-bg-sunken/30 p-3 flex gap-2 text-xs text-text-secondary",
 					children: [/* @__PURE__ */ J(B, {
 						size: 14,
 						className: "flex-shrink-0 mt-0.5"
@@ -2240,7 +2232,7 @@ var We = ({ app: e }) => {
 						type: "button",
 						onClick: () => void u(),
 						disabled: i,
-						className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+						className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50",
 						children: [i ? /* @__PURE__ */ J(V, {
 							size: 14,
 							className: "animate-spin"