npm - @burdenoff/microfe-devportal - Versions diffs - 2026.625.1 → 2026.625.2 - Mend

@burdenoff/microfe-devportal 2026.625.1 → 2026.625.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1992) hide show

package/dist/devportal/pages/CreateApiKeyPage.js CHANGED Viewed

@@ -106,25 +106,25 @@ var w = () => {
 								children: [/* @__PURE__ */ b("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ y("span", {
-										className: "text-xs font-medium text-muted-foreground",
+										className: "text-xs font-medium text-text-secondary",
 										children: "Key ID:"
 									}), /* @__PURE__ */ y("code", {
-										className: "rounded bg-muted px-2 py-0.5 text-sm",
+										className: "rounded bg-bg-sunken px-2 py-0.5 text-sm",
 										children: D.keyId
 									})]
 								}), /* @__PURE__ */ b("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ y("span", {
-										className: "text-xs font-medium text-muted-foreground",
+										className: "text-xs font-medium text-text-secondary",
 										children: "API Key:"
 									}), /* @__PURE__ */ y("code", {
-										className: "rounded bg-muted px-2 py-0.5 text-sm",
+										className: "rounded bg-bg-sunken px-2 py-0.5 text-sm",
 										children: D.apiKey
 									})]
 								})]
 							}),
 							/* @__PURE__ */ y("p", {
-								className: "text-xs text-muted-foreground mt-2",
+								className: "text-xs text-text-secondary mt-2",
 								children: "Use the API key and secret to authenticate your requests."
 							})
 						]
@@ -134,7 +134,7 @@ var w = () => {
 					className: "flex gap-3",
 					children: /* @__PURE__ */ y("button", {
 						onClick: K,
-						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: "Continue to API Keys"
 					})
 				})
@@ -164,8 +164,8 @@ var w = () => {
 							className: "space-y-4",
 							children: [L ? /* @__PURE__ */ b("div", {
 								className: "flex items-center gap-2 py-2",
-								children: [/* @__PURE__ */ y(g, { className: "h-4 w-4 animate-spin text-muted-foreground" }), /* @__PURE__ */ y("span", {
-									className: "text-sm text-muted-foreground",
+								children: [/* @__PURE__ */ y(g, { className: "h-4 w-4 animate-spin text-text-secondary" }), /* @__PURE__ */ y("span", {
+									className: "text-sm text-text-secondary",
 									children: "Loading apps..."
 								})]
 							}) : R.length === 0 ? /* @__PURE__ */ y(u, {
@@ -268,12 +268,12 @@ var w = () => {
 						children: [/* @__PURE__ */ b("button", {
 							type: "button",
 							onClick: H,
-							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__ */ y(v, { size: 16 }), "Cancel"]
 						}), /* @__PURE__ */ b("button", {
 							type: "submit",
 							disabled: P || R.length === 0,
-							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__ */ y(_, { size: 16 }), P ? "Generating..." : "Generate API Key"]
 						})]
 					})

package/dist/devportal/pages/CreateApiKeyPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreateApiKeyPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApiKeyPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { Save, X, Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { OptionalFields } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { InputField, SelectField, TagInput } from \"../components/FormField\";\nimport { NewSecretAlert } from \"../components/SecretDisplay\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useGenerateApiKeyMutation, useCurrentUserAppsQuery } from \"../hooks\";\nimport { useDevportalEventBus } from \"../events\";\nimport { executeRecaptcha } from \"../utils/recaptcha\";\n\ninterface CreateApiKeyFormData {\n appId: string;\n name: string;\n scopes: string[];\n expiresIn: string;\n}\n\nconst EXPIRATION_DURATIONS: Record<string, number \| null> = {\n \"30days\": 30 * 24 * 60 * 60 * 1000,\n \"90days\": 90 * 24 * 60 * 60 * 1000,\n \"180days\": 180 * 24 * 60 * 60 * 1000,\n \"1year\": 365 * 24 * 60 * 60 * 1000,\n \"2years\": 2 * 365 * 24 * 60 * 60 * 1000,\n never: null,\n};\n\nfunction computeExpiresAt(expiresIn: string): string \| undefined {\n const duration = EXPIRATION_DURATIONS[expiresIn];\n if (duration == null) return undefined;\n return new Date(Date.now() + duration).toISOString();\n}\n\n/*\n Page for generating a new API key via auth-svc.\n \n Previously created API keys through devportal-svc per application;\n * now generates keys through auth-svc's generateAPIKey mutation.\n * The user selects which OAuth app to associate the key with.\n /\nexport const CreateApiKeyPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const { navigate, basePath } = useDevportal();\n const [newApiKey, setNewApiKey] = useState<{\n apiKey: string;\n apiSecret: string;\n keyId: string;\n } \| null>(null);\n const [errors, setErrors] = useState<Record<string, string>>({});\n const [mutationError, setMutationError] = useState<string \| null>(null);\n\n const [generateApiKey, { loading: isSubmitting }] =\n useGenerateApiKeyMutation();\n const bus = useDevportalEventBus();\n\n // Fetch user's apps to populate the app selector\n const { data: appsData, loading: appsLoading } = useCurrentUserAppsQuery({\n fetchPolicy: \"cache-and-network\",\n });\n\n const apps: Array<{ id: string; name: string; clientId: string }> =\n appsData?.currentUserApps?.apps.map(\n (app: { id: string; name: string; clientId: string }) => ({\n id: app.id,\n name: app.name,\n clientId: app.clientId,\n }),\n ) ?? [];\n\n const [formData, setFormData] = useState<CreateApiKeyFormData>({\n appId: \"\",\n name: \"\",\n scopes: [],\n expiresIn: \"1year\",\n });\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n const handleCancel = () => {\n handleNavigate(\"/api-keys\");\n };\n\n const updateField = <K extends keyof CreateApiKeyFormData>(\n field: K,\n value: CreateApiKeyFormData[K],\n ) => {\n setFormData((prev) => ({ ...prev, [field]: value }));\n if (errors[field]) {\n setErrors((prev) => ({ ...prev, [field]: \"\" }));\n }\n if (mutationError) {\n setMutationError(null);\n }\n };\n\n const validateForm = (): boolean => {\n const newErrors: Record<string, string> = {};\n\n if (!formData.appId) {\n newErrors.appId = tr(\n \"devportal.selectAppError\",\n \"Please select an app to associate this key with\",\n );\n }\n\n if (!formData.name.trim()) {\n newErrors.name = tr(\n \"devportal.apiKeyNameRequired\",\n \"API key name is required\",\n );\n }\n\n if (formData.scopes.length === 0) {\n newErrors.scopes = tr(\n \"devportal.atLeastOneScopeRequired\",\n \"At least one scope is required\",\n );\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!validateForm()) return;\n\n setMutationError(null);\n\n try {\n const expiresAt = computeExpiresAt(formData.expiresIn);\n const recaptchaToken = await executeRecaptcha(\"api_key_create\");\n const input = {\n appId: formData.appId,\n name: formData.name.trim(),\n scope: formData.scopes,\n expiresAt,\n ...(recaptchaToken ? { recaptchaToken } : {}),\n };\n\n const { data } = await generateApiKey({\n variables: {\n input,\n },\n });\n\n if (data?.generateAPIKey) {\n bus.emit(\"devportal.apikey.generated\", {\n keyId: data.generateAPIKey.keyId,\n appId: formData.appId,\n });\n setNewApiKey({\n apiKey: data.generateAPIKey.apiKey,\n apiSecret: data.generateAPIKey.apiSecret,\n keyId: data.generateAPIKey.keyId,\n });\n }\n } catch (err) {\n const message =\n err instanceof Error\n ? err.message\n : tr(\n \"devportal.failedToGenerateApiKey\",\n \"Failed to generate API key\",\n );\n setMutationError(message);\n }\n };\n\n const handleKeyDismiss = () => {\n handleNavigate(\"/api-keys\");\n };\n\n const expirationOptions = [\n { value: \"30days\", label: \"30 days\" },\n { value: \"90days\", label: \"90 days\" },\n { value: \"180days\", label: \"180 days\" },\n { value: \"1year\", label: \"1 year\" },\n { value: \"2years\", label: \"2 years\" },\n { value: \"never\", label: \"Never expires\" },\n ];\n\n if (newApiKey) {\n return (\n <PageLayout\n title=\"API Key Generated\"\n description=\"Your new API key has been generated successfully\"\n >\n <div className=\"max-w-2xl space-y-6\">\n <NewSecretAlert\n title=\"API Key & Secret\"\n secret={newApiKey.apiSecret}\n description=\"Store this secret securely — you won't be able to see it again.\"\n onDismiss={handleKeyDismiss}\n />\n\n <Alert variant=\"info\" title=\"Usage Instructions\">\n <div className=\"mt-2 space-y-2\">\n <p>Your API key details:</p>\n <div className=\"space-y-1\">\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-medium text-muted-foreground\">\n Key ID:\n </span>\n <code className=\"rounded bg-muted px-2 py-0.5 text-sm\">\n {newApiKey.keyId}\n </code>\n </div>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-medium text-muted-foreground\">\n API Key:\n </span>\n <code className=\"rounded bg-muted px-2 py-0.5 text-sm\">\n {newApiKey.apiKey}\n </code>\n </div>\n </div>\n <p className=\"text-xs text-muted-foreground mt-2\">\n Use the API key and secret to authenticate your requests.\n </p>\n </div>\n </Alert>\n\n <div className=\"flex gap-3\">\n <button\n onClick={handleKeyDismiss}\n 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\"\n >\n Continue to API Keys\n </button>\n </div>\n </div>\n </PageLayout>\n );\n }\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_UPDATE}>\n <PageLayout\n title=\"Generate API Key\"\n description=\"Generate a new API key for programmatic access\"\n backLink=\"/api-keys\"\n backLabel=\"Back to API Keys\"\n >\n <form onSubmit={handleSubmit} className=\"max-w-3xl space-y-8\">\n {/ Mutation error /}\n {mutationError && (\n <Alert\n variant=\"error\"\n title=\"Error Generating API Key\"\n onDismiss={() => setMutationError(null)}\n >\n {mutationError}\n </Alert>\n )}\n\n {/ Basic Information /}\n <PageSection\n title=\"Basic Information\"\n description=\"Configure the API key settings\"\n >\n <div className=\"space-y-4\">\n {/ App Selector /}\n {appsLoading ? (\n <div className=\"flex items-center gap-2 py-2\">\n <Loader2 className=\"h-4 w-4 animate-spin text-muted-foreground\" />\n <span className=\"text-sm text-muted-foreground\">\n Loading apps...\n </span>\n </div>\n ) : apps.length === 0 ? (\n <Alert variant=\"warning\" title=\"No Apps Found\">\n <p>\n You need to create an OAuth app first before generating API\n keys.{\" \"}\n <button\n type=\"button\"\n onClick={() => handleNavigate(\"/oauth/new\")}\n className=\"text-primary underline hover:no-underline\"\n >\n Create an app\n </button>\n </p>\n </Alert>\n ) : (\n <SelectField\n label=\"App\"\n value={formData.appId}\n onChange={(e) => updateField(\"appId\", e.target.value)}\n options={apps.map((app) => ({\n value: app.id,\n label: `${app.name} (${app.clientId})`,\n }))}\n placeholder=\"Select an app…\"\n error={errors.appId}\n required\n hint=\"The OAuth app this API key will be associated with\"\n />\n )}\n\n <InputField\n label=\"Key Name\"\n placeholder=\"e.g., Production Backend Key\"\n value={formData.name}\n onChange={(e) => updateField(\"name\", e.target.value)}\n error={errors.name}\n required\n hint=\"A descriptive name to identify this key\"\n />\n </div>\n </PageSection>\n\n {/ Scopes /}\n <PageSection\n title=\"Scopes\"\n description=\"Define what this API key can access\"\n >\n <div className=\"space-y-4\">\n <TagInput\n label=\"Scopes\"\n value={formData.scopes}\n onChange={(values) => updateField(\"scopes\", values)}\n placeholder=\"e.g., workspace:read, vibecontrols:write\"\n hint=\"Press Enter to add each scope. At least one scope is required.\"\n error={errors.scopes}\n />\n </div>\n </PageSection>\n\n {/ Advanced: rate-limit overrides / allowed origins / scope tuning / expiration — collapse the long-tail knobs /}\n <OptionalFields\n title=\"Advanced settings\"\n description=\"Rate-limit overrides, allowed origins, scope tuning, and expiration.\"\n >\n <PageSection\n title=\"Key Expiration\"\n description=\"Set when this key should expire\"\n >\n <SelectField\n label=\"Expires In\"\n value={formData.expiresIn}\n onChange={(e) => updateField(\"expiresIn\", e.target.value)}\n options={expirationOptions}\n hint=\"Keys can be revoked at any time regardless of expiration\"\n />\n\n {formData.expiresIn === \"never\" && (\n <Alert variant=\"warning\" className=\"mt-4\">\n Non-expiring keys are a security risk. Consider setting an\n expiration and rotating keys periodically.\n </Alert>\n )}\n </PageSection>\n </OptionalFields>\n\n {/ Actions */}\n <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n <button\n type=\"button\"\n onClick={handleCancel}\n className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors\"\n >\n <X size={16} />\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting \|\| apps.length === 0}\n 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\"\n >\n <Save size={16} />\n {isSubmitting ? \"Generating...\" : \"Generate API Key\"}\n </button>\n </div>\n </form>\n </PageLayout>\n </PermissionGuard>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"CreateApiKeyPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApiKeyPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport { Save, X, Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { OptionalFields } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { InputField, SelectField, TagInput } from \"../components/FormField\";\nimport { NewSecretAlert } from \"../components/SecretDisplay\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useGenerateApiKeyMutation, useCurrentUserAppsQuery } from \"../hooks\";\nimport { useDevportalEventBus } from \"../events\";\nimport { executeRecaptcha } from \"../utils/recaptcha\";\n\ninterface CreateApiKeyFormData {\n appId: string;\n name: string;\n scopes: string[];\n expiresIn: string;\n}\n\nconst EXPIRATION_DURATIONS: Record<string, number \| null> = {\n \"30days\": 30 * 24 * 60 * 60 * 1000,\n \"90days\": 90 * 24 * 60 * 60 * 1000,\n \"180days\": 180 * 24 * 60 * 60 * 1000,\n \"1year\": 365 * 24 * 60 * 60 * 1000,\n \"2years\": 2 * 365 * 24 * 60 * 60 * 1000,\n never: null,\n};\n\nfunction computeExpiresAt(expiresIn: string): string \| undefined {\n const duration = EXPIRATION_DURATIONS[expiresIn];\n if (duration == null) return undefined;\n return new Date(Date.now() + duration).toISOString();\n}\n\n/*\n Page for generating a new API key via auth-svc.\n \n Previously created API keys through devportal-svc per application;\n * now generates keys through auth-svc's generateAPIKey mutation.\n * The user selects which OAuth app to associate the key with.\n /\nexport const CreateApiKeyPage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const { navigate, basePath } = useDevportal();\n const [newApiKey, setNewApiKey] = useState<{\n apiKey: string;\n apiSecret: string;\n keyId: string;\n } \| null>(null);\n const [errors, setErrors] = useState<Record<string, string>>({});\n const [mutationError, setMutationError] = useState<string \| null>(null);\n\n const [generateApiKey, { loading: isSubmitting }] =\n useGenerateApiKeyMutation();\n const bus = useDevportalEventBus();\n\n // Fetch user's apps to populate the app selector\n const { data: appsData, loading: appsLoading } = useCurrentUserAppsQuery({\n fetchPolicy: \"cache-and-network\",\n });\n\n const apps: Array<{ id: string; name: string; clientId: string }> =\n appsData?.currentUserApps?.apps.map(\n (app: { id: string; name: string; clientId: string }) => ({\n id: app.id,\n name: app.name,\n clientId: app.clientId,\n }),\n ) ?? [];\n\n const [formData, setFormData] = useState<CreateApiKeyFormData>({\n appId: \"\",\n name: \"\",\n scopes: [],\n expiresIn: \"1year\",\n });\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n const handleCancel = () => {\n handleNavigate(\"/api-keys\");\n };\n\n const updateField = <K extends keyof CreateApiKeyFormData>(\n field: K,\n value: CreateApiKeyFormData[K],\n ) => {\n setFormData((prev) => ({ ...prev, [field]: value }));\n if (errors[field]) {\n setErrors((prev) => ({ ...prev, [field]: \"\" }));\n }\n if (mutationError) {\n setMutationError(null);\n }\n };\n\n const validateForm = (): boolean => {\n const newErrors: Record<string, string> = {};\n\n if (!formData.appId) {\n newErrors.appId = tr(\n \"devportal.selectAppError\",\n \"Please select an app to associate this key with\",\n );\n }\n\n if (!formData.name.trim()) {\n newErrors.name = tr(\n \"devportal.apiKeyNameRequired\",\n \"API key name is required\",\n );\n }\n\n if (formData.scopes.length === 0) {\n newErrors.scopes = tr(\n \"devportal.atLeastOneScopeRequired\",\n \"At least one scope is required\",\n );\n }\n\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!validateForm()) return;\n\n setMutationError(null);\n\n try {\n const expiresAt = computeExpiresAt(formData.expiresIn);\n const recaptchaToken = await executeRecaptcha(\"api_key_create\");\n const input = {\n appId: formData.appId,\n name: formData.name.trim(),\n scope: formData.scopes,\n expiresAt,\n ...(recaptchaToken ? { recaptchaToken } : {}),\n };\n\n const { data } = await generateApiKey({\n variables: {\n input,\n },\n });\n\n if (data?.generateAPIKey) {\n bus.emit(\"devportal.apikey.generated\", {\n keyId: data.generateAPIKey.keyId,\n appId: formData.appId,\n });\n setNewApiKey({\n apiKey: data.generateAPIKey.apiKey,\n apiSecret: data.generateAPIKey.apiSecret,\n keyId: data.generateAPIKey.keyId,\n });\n }\n } catch (err) {\n const message =\n err instanceof Error\n ? err.message\n : tr(\n \"devportal.failedToGenerateApiKey\",\n \"Failed to generate API key\",\n );\n setMutationError(message);\n }\n };\n\n const handleKeyDismiss = () => {\n handleNavigate(\"/api-keys\");\n };\n\n const expirationOptions = [\n { value: \"30days\", label: \"30 days\" },\n { value: \"90days\", label: \"90 days\" },\n { value: \"180days\", label: \"180 days\" },\n { value: \"1year\", label: \"1 year\" },\n { value: \"2years\", label: \"2 years\" },\n { value: \"never\", label: \"Never expires\" },\n ];\n\n if (newApiKey) {\n return (\n <PageLayout\n title=\"API Key Generated\"\n description=\"Your new API key has been generated successfully\"\n >\n <div className=\"max-w-2xl space-y-6\">\n <NewSecretAlert\n title=\"API Key & Secret\"\n secret={newApiKey.apiSecret}\n description=\"Store this secret securely — you won't be able to see it again.\"\n onDismiss={handleKeyDismiss}\n />\n\n <Alert variant=\"info\" title=\"Usage Instructions\">\n <div className=\"mt-2 space-y-2\">\n <p>Your API key details:</p>\n <div className=\"space-y-1\">\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-medium text-text-secondary\">\n Key ID:\n </span>\n <code className=\"rounded bg-bg-sunken px-2 py-0.5 text-sm\">\n {newApiKey.keyId}\n </code>\n </div>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-xs font-medium text-text-secondary\">\n API Key:\n </span>\n <code className=\"rounded bg-bg-sunken px-2 py-0.5 text-sm\">\n {newApiKey.apiKey}\n </code>\n </div>\n </div>\n <p className=\"text-xs text-text-secondary mt-2\">\n Use the API key and secret to authenticate your requests.\n </p>\n </div>\n </Alert>\n\n <div className=\"flex gap-3\">\n <button\n onClick={handleKeyDismiss}\n 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\"\n >\n Continue to API Keys\n </button>\n </div>\n </div>\n </PageLayout>\n );\n }\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_UPDATE}>\n <PageLayout\n title=\"Generate API Key\"\n description=\"Generate a new API key for programmatic access\"\n backLink=\"/api-keys\"\n backLabel=\"Back to API Keys\"\n >\n <form onSubmit={handleSubmit} className=\"max-w-3xl space-y-8\">\n {/ Mutation error /}\n {mutationError && (\n <Alert\n variant=\"error\"\n title=\"Error Generating API Key\"\n onDismiss={() => setMutationError(null)}\n >\n {mutationError}\n </Alert>\n )}\n\n {/ Basic Information /}\n <PageSection\n title=\"Basic Information\"\n description=\"Configure the API key settings\"\n >\n <div className=\"space-y-4\">\n {/ App Selector /}\n {appsLoading ? (\n <div className=\"flex items-center gap-2 py-2\">\n <Loader2 className=\"h-4 w-4 animate-spin text-text-secondary\" />\n <span className=\"text-sm text-text-secondary\">\n Loading apps...\n </span>\n </div>\n ) : apps.length === 0 ? (\n <Alert variant=\"warning\" title=\"No Apps Found\">\n <p>\n You need to create an OAuth app first before generating API\n keys.{\" \"}\n <button\n type=\"button\"\n onClick={() => handleNavigate(\"/oauth/new\")}\n className=\"text-primary underline hover:no-underline\"\n >\n Create an app\n </button>\n </p>\n </Alert>\n ) : (\n <SelectField\n label=\"App\"\n value={formData.appId}\n onChange={(e) => updateField(\"appId\", e.target.value)}\n options={apps.map((app) => ({\n value: app.id,\n label: `${app.name} (${app.clientId})`,\n }))}\n placeholder=\"Select an app…\"\n error={errors.appId}\n required\n hint=\"The OAuth app this API key will be associated with\"\n />\n )}\n\n <InputField\n label=\"Key Name\"\n placeholder=\"e.g., Production Backend Key\"\n value={formData.name}\n onChange={(e) => updateField(\"name\", e.target.value)}\n error={errors.name}\n required\n hint=\"A descriptive name to identify this key\"\n />\n </div>\n </PageSection>\n\n {/ Scopes /}\n <PageSection\n title=\"Scopes\"\n description=\"Define what this API key can access\"\n >\n <div className=\"space-y-4\">\n <TagInput\n label=\"Scopes\"\n value={formData.scopes}\n onChange={(values) => updateField(\"scopes\", values)}\n placeholder=\"e.g., workspace:read, vibecontrols:write\"\n hint=\"Press Enter to add each scope. At least one scope is required.\"\n error={errors.scopes}\n />\n </div>\n </PageSection>\n\n {/ Advanced: rate-limit overrides / allowed origins / scope tuning / expiration — collapse the long-tail knobs /}\n <OptionalFields\n title=\"Advanced settings\"\n description=\"Rate-limit overrides, allowed origins, scope tuning, and expiration.\"\n >\n <PageSection\n title=\"Key Expiration\"\n description=\"Set when this key should expire\"\n >\n <SelectField\n label=\"Expires In\"\n value={formData.expiresIn}\n onChange={(e) => updateField(\"expiresIn\", e.target.value)}\n options={expirationOptions}\n hint=\"Keys can be revoked at any time regardless of expiration\"\n />\n\n {formData.expiresIn === \"never\" && (\n <Alert variant=\"warning\" className=\"mt-4\">\n Non-expiring keys are a security risk. Consider setting an\n expiration and rotating keys periodically.\n </Alert>\n )}\n </PageSection>\n </OptionalFields>\n\n {/ Actions */}\n <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n <button\n type=\"button\"\n onClick={handleCancel}\n className=\"inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors\"\n >\n <X size={16} />\n Cancel\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting \|\| apps.length === 0}\n 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\"\n >\n <Save size={16} />\n {isSubmitting ? \"Generating...\" : \"Generate API Key\"}\n </button>\n </div>\n </form>\n </PageLayout>\n </PermissionGuard>\n );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/CreateApplicationPage.js CHANGED Viewed

@@ -109,30 +109,30 @@ var k = [
 ], A = ({ icon: e, title: n, description: r, bullets: i, selected: a, onClick: o }) => /* @__PURE__ */ T("button", {
 	type: "button",
 	onClick: o,
-	className: t("relative flex flex-col gap-3 rounded-xl border-2 p-6 text-left transition-all hover:border-primary/50 hover:shadow-sm", a ? "border-primary bg-primary/5 shadow-sm" : "border-border bg-card"),
+	className: t("relative flex flex-col gap-3 rounded-xl border-2 p-6 text-left transition-all hover:border-primary/50 hover:shadow-sm", a ? "border-primary bg-action-primary-bg/5 shadow-sm" : "border-border-subtle bg-bg-surface"),
 	children: [
 		a && /* @__PURE__ */ w("span", {
-			className: "absolute top-4 right-4 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
+			className: "absolute top-4 right-4 flex h-5 w-5 items-center justify-center rounded-full bg-action-primary-bg text-action-primary-text",
 			children: /* @__PURE__ */ w(g, { size: 12 })
 		}),
 		/* @__PURE__ */ w("div", {
-			className: "flex h-10 w-10 items-center justify-center rounded-lg bg-muted",
+			className: "flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken",
 			children: /* @__PURE__ */ w(e, {
 				size: 22,
-				className: "text-foreground"
+				className: "text-text-primary"
 			})
 		}),
 		/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-			className: "font-semibold text-foreground",
+			className: "font-semibold text-text-primary",
 			children: n
 		}), /* @__PURE__ */ w("p", {
-			className: "mt-1 text-sm text-muted-foreground",
+			className: "mt-1 text-sm text-text-secondary",
 			children: r
 		})] }),
 		/* @__PURE__ */ w("ul", {
 			className: "mt-1 space-y-1",
 			children: i.map((e) => /* @__PURE__ */ T("li", {
-				className: "flex items-center gap-2 text-xs text-muted-foreground",
+				className: "flex items-center gap-2 text-xs text-text-secondary",
 				children: [/* @__PURE__ */ w(_, {
 					size: 12,
 					className: "flex-shrink-0 text-primary"
@@ -151,29 +151,29 @@ var k = [
 		write: "Read & Write"
 	};
 	return /* @__PURE__ */ w("div", {
-		className: "overflow-x-auto rounded-lg border border-border",
+		className: "overflow-x-auto rounded-lg border border-border-subtle",
 		children: /* @__PURE__ */ T("table", {
 			className: "w-full text-sm",
 			children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", {
-				className: "border-b border-border bg-muted/50",
+				className: "border-b border-border-subtle bg-bg-sunken/50",
 				children: [/* @__PURE__ */ w("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"
 				}), n.map((e) => /* @__PURE__ */ w("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: r[e]
 				}, e))]
 			}) }), /* @__PURE__ */ w("tbody", {
 				className: "divide-y divide-border",
 				children: E.map((r) => /* @__PURE__ */ T("tr", {
-					className: "hover:bg-muted/30 transition-colors",
+					className: "hover:bg-bg-sunken/30 transition-colors",
 					children: [/* @__PURE__ */ T("td", {
 						className: "px-4 py-3",
 						children: [/* @__PURE__ */ w("p", {
-							className: "font-medium text-foreground",
+							className: "font-medium text-text-primary",
 							children: r.label
 						}), /* @__PURE__ */ w("p", {
-							className: "text-xs text-muted-foreground",
+							className: "text-xs text-text-secondary",
 							children: r.description
 						})]
 					}), n.map((n) => /* @__PURE__ */ w("td", {
@@ -323,7 +323,7 @@ var k = [
 						})
 					]
 				}), /* @__PURE__ */ T("div", {
-					className: "rounded-lg border border-border-subtle bg-muted/30 p-4 flex gap-3 text-sm text-muted-foreground",
+					className: "rounded-lg border border-border-subtle bg-bg-sunken/30 p-4 flex gap-3 text-sm text-text-secondary",
 					children: [/* @__PURE__ */ w(y, {
 						size: 16,
 						className: "flex-shrink-0 mt-0.5"
@@ -349,10 +349,10 @@ var k = [
 						children: [/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => F(null),
-							className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors",
+							className: "flex items-center gap-1.5 text-sm text-text-secondary hover:text-text-primary transition-colors",
 							children: [/* @__PURE__ */ w(m, { size: 14 }), "Change type"]
 						}), /* @__PURE__ */ T("span", {
-							className: "flex items-center gap-1.5 rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium",
+							className: "flex items-center gap-1.5 rounded-full border border-border-subtle bg-bg-sunken px-3 py-1 text-xs font-medium",
 							children: [ne, $]
 						})]
 					}),
@@ -462,7 +462,7 @@ var k = [
 							permissions: I,
 							onChange: X
 						}), /* @__PURE__ */ T("div", {
-							className: "mt-3 flex gap-2 rounded-lg border border-border-subtle bg-muted/30 p-3 text-xs text-muted-foreground",
+							className: "mt-3 flex gap-2 rounded-lg border border-border-subtle bg-bg-sunken/30 p-3 text-xs text-text-secondary",
 							children: [/* @__PURE__ */ w(y, {
 								size: 14,
 								className: "flex-shrink-0 mt-0.5"
@@ -470,12 +470,12 @@ var k = [
 						})]
 					}),
 					P !== "app" && /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border-subtle bg-muted/30 p-4 flex gap-3 text-sm text-muted-foreground",
+						className: "rounded-lg border border-border-subtle bg-bg-sunken/30 p-4 flex gap-3 text-sm text-text-secondary",
 						children: [/* @__PURE__ */ w(y, {
 							size: 16,
 							className: "flex-shrink-0 mt-0.5"
 						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
-							className: "font-medium text-foreground",
+							className: "font-medium text-text-primary",
 							children: "File uploads"
 						}), /* @__PURE__ */ w("p", {
 							className: "mt-1",
@@ -488,12 +488,12 @@ var k = [
 							type: "button",
 							onClick: () => K("/apps"),
 							disabled: U,
-							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: [/* @__PURE__ */ w(S, { size: 16 }), M("devportal.cancel", "Cancel")]
 						}), /* @__PURE__ */ w("button", {
 							type: "submit",
 							disabled: U,
-							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: U ? /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(b, {
 								size: 16,
 								className: "animate-spin"

package/dist/devportal/pages/CreateApplicationPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreateApplicationPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApplicationPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport {\n ArrowLeft,\n Box,\n Check,\n ChevronRight,\n GitFork,\n Info,\n Loader2,\n Puzzle,\n Save,\n X,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n InputField,\n TextareaField,\n SelectField,\n} from \"../components/FormField\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport { cn } from \"../utils/cn\";\nimport {\n useCreateApplicationMutation,\n useGetMyOrganizationsQuery,\n} from \"../../generated/global-operations\";\n\n// ─── Builder types ────────────────────────────────────────────────────────────\n\ntype BuilderType = \"app\" \| \"node\" \| \"workflow\";\n\n// ─── Permissions (App type) ───────────────────────────────────────────────────\n\nconst RBAC_RESOURCES = [\n {\n id: \"auth\",\n label: \"Authentication\",\n description: \"User identity and session management\",\n },\n {\n id: \"billing\",\n label: \"Billing\",\n description: \"Billing accounts and subscriptions\",\n },\n {\n id: \"files\",\n label: \"Files\",\n description: \"File storage and management\",\n },\n {\n id: \"tags\",\n label: \"Tags\",\n description: \"Tags and labels on resources\",\n },\n {\n id: \"calendar\",\n label: \"Calendar\",\n description: \"Events and scheduling\",\n },\n {\n id: \"workflows\",\n label: \"Workflows\",\n description: \"Automation workflows\",\n },\n {\n id: \"channels\",\n label: \"Channels\",\n description: \"Messaging channels\",\n },\n {\n id: \"notifications\",\n label: \"Notifications\",\n description: \"Platform notifications\",\n },\n {\n id: \"users\",\n label: \"Users & Members\",\n description: \"Workspace members and profiles\",\n },\n {\n id: \"workspaces\",\n label: \"Workspaces\",\n description: \"Workspace settings and metadata\",\n },\n {\n id: \"content\",\n label: \"Content\",\n description: \"Pages, documents, and content\",\n },\n {\n id: \"analytics\",\n label: \"Analytics\",\n description: \"Usage analytics and reporting\",\n },\n {\n id: \"webhooks\",\n label: \"Webhooks\",\n description: \"Webhook subscriptions\",\n },\n {\n id: \"rbac\",\n label: \"Roles & Permissions\",\n description: \"Access control configuration\",\n },\n] as const;\n\ntype ResourceId = (typeof RBAC_RESOURCES)[number][\"id\"];\ntype PermissionLevel = \"none\" \| \"read\" \| \"write\";\n\ntype PermissionMap = Record<ResourceId, PermissionLevel>;\n\nfunction defaultPermissions(): PermissionMap {\n return Object.fromEntries(\n RBAC_RESOURCES.map((r) => [r.id, \"none\"]),\n ) as PermissionMap;\n}\n\nfunction permissionsToManifest(perms: PermissionMap) {\n const entries = Object.entries(perms).filter(([, level]) => level !== \"none\");\n return entries.map(([resource, level]) => ({ resource, level }));\n}\n\n// ─── Org options ──────────────────────────────────────────────────────────────\n\nconst VISIBILITY_OPTIONS = [\n { value: \"PUBLIC\", label: \"Public — visible to everyone\" },\n { value: \"PRIVATE\", label: \"Private — only visible to you\" },\n { value: \"UNLISTED\", label: \"Unlisted — accessible via direct link\" },\n];\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\ninterface TypeCardProps {\n icon: FC<{ size?: number; className?: string }>;\n title: string;\n description: string;\n bullets: string[];\n selected: boolean;\n onClick: () => void;\n}\n\nconst TypeCard: FC<TypeCardProps> = ({\n icon: Icon,\n title,\n description,\n bullets,\n selected,\n onClick,\n}) => (\n <button\n type=\"button\"\n onClick={onClick}\n className={cn(\n \"relative flex flex-col gap-3 rounded-xl border-2 p-6 text-left transition-all hover:border-primary/50 hover:shadow-sm\",\n selected\n ? \"border-primary bg-primary/5 shadow-sm\"\n : \"border-border bg-card\",\n )}\n >\n {selected && (\n <span className=\"absolute top-4 right-4 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n <Check size={12} />\n </span>\n )}\n <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-muted\">\n <Icon size={22} className=\"text-foreground\" />\n </div>\n <div>\n <p className=\"font-semibold text-foreground\">{title}</p>\n <p className=\"mt-1 text-sm text-muted-foreground\">{description}</p>\n </div>\n <ul className=\"mt-1 space-y-1\">\n {bullets.map((b) => (\n <li\n key={b}\n className=\"flex items-center gap-2 text-xs text-muted-foreground\"\n >\n <ChevronRight size={12} className=\"flex-shrink-0 text-primary\" />\n {b}\n </li>\n ))}\n </ul>\n </button>\n);\n\n// ─── Permissions matrix ───────────────────────────────────────────────────────\n\ninterface PermissionsMatrixProps {\n permissions: PermissionMap;\n onChange: (resource: ResourceId, level: PermissionLevel) => void;\n}\n\nconst PermissionsMatrix: FC<PermissionsMatrixProps> = ({\n permissions,\n onChange,\n}) => {\n const levels: PermissionLevel[] = [\"none\", \"read\", \"write\"];\n const levelLabels: Record<PermissionLevel, string> = {\n none: \"No access\",\n read: \"Read\",\n write: \"Read & Write\",\n };\n\n return (\n <div className=\"overflow-x-auto rounded-lg border border-border\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border bg-muted/50\">\n <th className=\"px-4 py-3 text-left font-medium text-muted-foreground w-1/2\">\n Resource\n </th>\n {levels.map((l) => (\n <th\n key={l}\n className=\"px-4 py-3 text-center font-medium text-muted-foreground\"\n >\n {levelLabels[l]}\n </th>\n ))}\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border\">\n {RBAC_RESOURCES.map((resource) => (\n <tr\n key={resource.id}\n className=\"hover:bg-muted/30 transition-colors\"\n >\n <td className=\"px-4 py-3\">\n <p className=\"font-medium text-foreground\">{resource.label}</p>\n <p className=\"text-xs text-muted-foreground\">\n {resource.description}\n </p>\n </td>\n {levels.map((level) => (\n <td key={level} className=\"px-4 py-3 text-center\">\n <input\n type=\"radio\"\n name={`permission-${resource.id}`}\n value={level}\n checked={permissions[resource.id] === level}\n onChange={() => onChange(resource.id, level)}\n className=\"h-4 w-4 accent-primary cursor-pointer\"\n />\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n\n// ─── Main component ───────────────────────────────────────────────────────────\n\ninterface FormData {\n name: string;\n slug: string;\n shortDescription: string;\n description: string;\n visibility: string;\n developerOrganizationId: string;\n websiteUrl: string;\n githubUrl: string;\n documentationUrl: string;\n supportUrl: string;\n}\n\ninterface FormErrors {\n name?: string;\n slug?: string;\n shortDescription?: string;\n}\n\nexport const CreateApplicationPage: FC = () => {\n const { navigate, basePath, activeOrgId } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const v = t(key);\n return v === key ? fallback : v;\n };\n const bus = useDevportalEventBus();\n\n const [builderType, setBuilderType] = useState<BuilderType \| null>(null);\n const [permissions, setPermissions] =\n useState<PermissionMap>(defaultPermissions());\n const [formData, setFormData] = useState<FormData>({\n name: \"\",\n slug: \"\",\n shortDescription: \"\",\n description: \"\",\n visibility: \"PRIVATE\",\n developerOrganizationId: activeOrgId ?? \"\",\n websiteUrl: \"\",\n githubUrl: \"\",\n documentationUrl: \"\",\n supportUrl: \"\",\n });\n const [errors, setErrors] = useState<FormErrors>({});\n\n const [createApplication, { loading: isSubmitting }] =\n useCreateApplicationMutation();\n const { data: orgsData } = useGetMyOrganizationsQuery({\n fetchPolicy: \"cache-and-network\",\n });\n\n const orgOptions = [\n { value: \"\", label: \"No organization (personal)\" },\n ...(orgsData?.myDeveloperOrganizations ?? []).map(\n (org: { id: string; name: string }) => ({\n value: org.id,\n label: org.name,\n }),\n ),\n ];\n\n const handleNav = (path: string) => navigate?.(`${basePath}${path}`);\n\n const generateSlug = (name: string) =>\n name\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-\|-$/g, \"\");\n\n const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const name = e.target.value;\n setFormData((prev) => ({\n ...prev,\n name,\n slug: prev.slug \|\| generateSlug(name),\n }));\n if (errors.name) setErrors((p) => ({ ...p, name: undefined }));\n };\n\n const handleChange = (field: keyof FormData, value: string) => {\n setFormData((prev) => ({ ...prev, [field]: value }));\n if (errors[field as keyof FormErrors])\n setErrors((p) => ({ ...p, [field]: undefined }));\n };\n\n const handlePermissionChange = (\n resource: ResourceId,\n level: PermissionLevel,\n ) => {\n setPermissions((prev) => ({ ...prev, [resource]: level }));\n };\n\n const validate = (): boolean => {\n const newErrors: FormErrors = {};\n if (!formData.name.trim()) {\n newErrors.name = \"Name is required\";\n } else if (formData.name.length < 3) {\n newErrors.name = \"Name must be at least 3 characters\";\n } else if (formData.name.length > 100) {\n newErrors.name = \"Name must be less than 100 characters\";\n }\n if (!formData.slug.trim()) {\n newErrors.slug = \"Slug is required\";\n } else if (!/^[a-z0-9-]+$/.test(formData.slug)) {\n newErrors.slug =\n \"Slug can only contain lowercase letters, numbers, and hyphens\";\n }\n if (!formData.shortDescription.trim()) {\n newErrors.shortDescription = \"Short description is required\";\n } else if (formData.shortDescription.length > 200) {\n newErrors.shortDescription =\n \"Short description must be less than 200 characters\";\n }\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const appTypeForBuilder = () => {\n if (builderType === \"node\") return \"NODE\" as const;\n if (builderType === \"workflow\") return \"WORKFLOW\" as const;\n return \"API_INTEGRATION\" as const;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate() \|\| !builderType) return;\n\n const permManifest =\n builderType === \"app\"\n ? { permissions: permissionsToManifest(permissions) }\n : null;\n\n try {\n const result = await createApplication({\n variables: {\n input: {\n name: formData.name,\n slug: formData.slug \|\| undefined,\n shortDescription: formData.shortDescription \|\| undefined,\n description: formData.description \|\| undefined,\n appType: appTypeForBuilder(),\n visibility: formData.visibility as\n \| \"PUBLIC\"\n \| \"PRIVATE\"\n \| \"UNLISTED\"\n \| undefined,\n developerOrganizationId:\n formData.developerOrganizationId \|\| undefined,\n websiteUrl: formData.websiteUrl \|\| undefined,\n githubUrl: formData.githubUrl \|\| undefined,\n documentationUrl: formData.documentationUrl \|\| undefined,\n supportUrl: formData.supportUrl \|\| undefined,\n manifest: permManifest ?? undefined,\n },\n },\n });\n if (result.data?.createApplication?.id) {\n bus.emit(\"devportal.app.created\", {\n appId: result.data.createApplication.id,\n name: formData.name,\n appType: appTypeForBuilder(),\n organizationId: formData.developerOrganizationId \|\| null,\n });\n handleNav(`/apps/${result.data.createApplication.id}`);\n }\n } catch (error) {\n const msg = error instanceof Error ? error.message : String(error);\n if (\n msg.includes(\"slug\") \|\|\n msg.includes(\"already exists\") \|\|\n msg.includes(\"slugConflict\")\n ) {\n setErrors((p) => ({\n ...p,\n slug: \"This slug is already in use — try a different name\",\n }));\n }\n }\n };\n\n // ── Step 1: type picker ─────────────────────────────────────────────────────\n if (!builderType) {\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_CREATE}>\n <PageLayout\n title=\"What do you want to build?\"\n description=\"Choose a builder type to get started\"\n backLink={`${basePath}/apps`}\n backLabel=\"Back to Applications\"\n >\n <div className=\"max-w-3xl space-y-6\">\n <div className=\"grid gap-4 sm:grid-cols-3\">\n <TypeCard\n icon={Box}\n title=\"App\"\n description=\"Build integrations that connect your service to the platform using OAuth tokens.\"\n bullets={[\n \"GitHub-style permissions\",\n \"OAuth token flow\",\n \"Webhook events\",\n \"Publish to app store\",\n ]}\n selected={builderType === \"app\"}\n onClick={() => setBuilderType(\"app\")}\n />\n <TypeCard\n icon={Puzzle}\n title=\"Node\"\n description=\"Build custom FluidGrids nodes that users can drag into their visual workflows.\"\n bullets={[\n \"ZIP bundle + manifest\",\n \"Custom inputs/outputs\",\n \"Versioned releases\",\n \"Publish to node store\",\n ]}\n selected={builderType === \"node\"}\n onClick={() => setBuilderType(\"node\")}\n />\n <TypeCard\n icon={GitFork}\n title=\"Workflow\"\n description=\"Build reusable automation workflows that users can import and customize.\"\n bullets={[\n \"Manifest + workflow JSON\",\n \"Trigger definitions\",\n \"Versioned releases\",\n \"Publish to workflow store\",\n ]}\n selected={builderType === \"workflow\"}\n onClick={() => setBuilderType(\"workflow\")}\n />\n </div>\n\n <div className=\"rounded-lg border border-border-subtle bg-muted/30 p-4 flex gap-3 text-sm text-muted-foreground\">\n <Info size={16} className=\"flex-shrink-0 mt-0.5\" />\n <p>\n Apps use OAuth to interact with platform data. Nodes and\n Workflows are packaged files you upload after creation.\n </p>\n </div>\n </div>\n </PageLayout>\n </PermissionGuard>\n );\n }\n\n // ── Step 2: form ────────────────────────────────────────────────────────────\n const typeLabel =\n builderType === \"app\"\n ? \"App\"\n : builderType === \"node\"\n ? \"Node\"\n : \"Workflow\";\n const typeIcon =\n builderType === \"app\" ? (\n <Box size={16} />\n ) : builderType === \"node\" ? (\n <Puzzle size={16} />\n ) : (\n <GitFork size={16} />\n );\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_CREATE}>\n <PageLayout\n title={`Create ${typeLabel}`}\n description={\n builderType === \"app\"\n ? \"Register a new app integration with OAuth permissions\"\n : builderType === \"node\"\n ? \"Register a new FluidGrids node package\"\n : \"Register a new reusable automation workflow\"\n }\n backLink={`${basePath}/apps`}\n backLabel=\"Back to Applications\"\n >\n <form onSubmit={handleSubmit} className=\"space-y-8 max-w-3xl\">\n {/* Type badge + back to picker /}\n <div className=\"flex items-center gap-3\">\n <button\n type=\"button\"\n onClick={() => setBuilderType(null)}\n className=\"flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors\"\n >\n <ArrowLeft size={14} />\n Change type\n </button>\n <span className=\"flex items-center gap-1.5 rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium\">\n {typeIcon}\n {typeLabel}\n </span>\n </div>\n\n {/ Basic info /}\n <PageSection\n title=\"Basic Information\"\n description=\"Core details about your application\"\n >\n <div className=\"space-y-4\">\n <InputField\n label=\"Name\"\n value={formData.name}\n onChange={handleNameChange}\n placeholder={\n builderType === \"app\"\n ? \"My Integration\"\n : builderType === \"node\"\n ? \"HTTP Request\"\n : \"Onboarding Flow\"\n }\n required\n error={errors.name}\n />\n <InputField\n label=\"Slug\"\n value={formData.slug}\n onChange={(e) =>\n handleChange(\"slug\", e.target.value.toLowerCase())\n }\n placeholder=\"my-integration\"\n required\n error={errors.slug}\n hint=\"URL-friendly identifier (auto-generated from name)\"\n />\n <TextareaField\n label=\"Short Description\"\n value={formData.shortDescription}\n onChange={(e) =>\n handleChange(\"shortDescription\", e.target.value)\n }\n placeholder=\"Briefly describe what this does\"\n required\n error={errors.shortDescription}\n hint={`${formData.shortDescription.length}/200 characters`}\n rows={2}\n />\n <TextareaField\n label=\"Full Description\"\n value={formData.description}\n onChange={(e) => handleChange(\"description\", e.target.value)}\n placeholder=\"Detailed description, features, and use cases...\"\n rows={5}\n hint=\"Markdown supported\"\n />\n </div>\n </PageSection>\n\n {/ Visibility + org /}\n <PageSection\n title=\"Publish Settings\"\n description=\"Control who can see this and which organization it belongs to\"\n >\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <SelectField\n label=\"Visibility\"\n value={formData.visibility}\n onChange={(e) => handleChange(\"visibility\", e.target.value)}\n options={VISIBILITY_OPTIONS}\n />\n <SelectField\n label=\"Developer Organization\"\n value={formData.developerOrganizationId}\n onChange={(e) =>\n handleChange(\"developerOrganizationId\", e.target.value)\n }\n options={orgOptions}\n />\n </div>\n </PageSection>\n\n {/ Links /}\n <PageSection title=\"Links\" description=\"External resources\">\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <InputField\n label=\"Website URL\"\n type=\"url\"\n value={formData.websiteUrl}\n onChange={(e) => handleChange(\"websiteUrl\", e.target.value)}\n placeholder=\"https://example.com\"\n />\n <InputField\n label=\"GitHub URL\"\n type=\"url\"\n value={formData.githubUrl}\n onChange={(e) => handleChange(\"githubUrl\", e.target.value)}\n placeholder=\"https://github.com/org/repo\"\n />\n <InputField\n label=\"Documentation URL\"\n type=\"url\"\n value={formData.documentationUrl}\n onChange={(e) =>\n handleChange(\"documentationUrl\", e.target.value)\n }\n placeholder=\"https://docs.example.com\"\n />\n <InputField\n label=\"Support URL\"\n type=\"url\"\n value={formData.supportUrl}\n onChange={(e) => handleChange(\"supportUrl\", e.target.value)}\n placeholder=\"https://support.example.com\"\n />\n </div>\n </PageSection>\n\n {/ Permissions — App type only /}\n {builderType === \"app\" && (\n <PageSection\n title=\"Permissions\"\n description=\"Choose what data your app can access. Users will see these permissions when authorizing your app — like GitHub Apps.\"\n >\n <PermissionsMatrix\n permissions={permissions}\n onChange={handlePermissionChange}\n />\n <div className=\"mt-3 flex gap-2 rounded-lg border border-border-subtle bg-muted/30 p-3 text-xs text-muted-foreground\">\n <Info size={14} className=\"flex-shrink-0 mt-0.5\" />\n <span>\n <strong>Read & Write</strong> implies Read. Select only\n what your app genuinely needs — fewer permissions build more\n user trust.\n </span>\n </div>\n </PageSection>\n )}\n\n {/ Node/Workflow file upload note /}\n {builderType !== \"app\" && (\n <div className=\"rounded-lg border border-border-subtle bg-muted/30 p-4 flex gap-3 text-sm text-muted-foreground\">\n <Info size={16} className=\"flex-shrink-0 mt-0.5\" />\n <div>\n <p className=\"font-medium text-foreground\">File uploads</p>\n <p className=\"mt-1\">\n {builderType === \"node\"\n ? \"After creating your Node, go to the Versions tab to upload your ZIP bundle and manifest.json.\"\n : \"After creating your Workflow, go to the Versions tab to upload your manifest and workflow JSON definition.\"}\n </p>\n </div>\n </div>\n )}\n\n {/ Actions */}\n <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n <button\n type=\"button\"\n onClick={() => handleNav(\"/apps\")}\n disabled={isSubmitting}\n 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\"\n >\n <X size={16} />\n {tr(\"devportal.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting}\n 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\"\n >\n {isSubmitting ? (\n <>\n <Loader2 size={16} className=\"animate-spin\" />\n Creating…\n </>\n ) : (\n <>\n <Save size={16} />\n Create {typeLabel}\n </>\n )}\n </button>\n </div>\n </form>\n </PageLayout>\n </PermissionGuard>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"CreateApplicationPage.js","names":[],"sources":["../../../src/devportal/pages/CreateApplicationPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState } from \"react\";\nimport {\n ArrowLeft,\n Box,\n Check,\n ChevronRight,\n GitFork,\n Info,\n Loader2,\n Puzzle,\n Save,\n X,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n InputField,\n TextareaField,\n SelectField,\n} from \"../components/FormField\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport { cn } from \"../utils/cn\";\nimport {\n useCreateApplicationMutation,\n useGetMyOrganizationsQuery,\n} from \"../../generated/global-operations\";\n\n// ─── Builder types ────────────────────────────────────────────────────────────\n\ntype BuilderType = \"app\" \| \"node\" \| \"workflow\";\n\n// ─── Permissions (App type) ───────────────────────────────────────────────────\n\nconst RBAC_RESOURCES = [\n {\n id: \"auth\",\n label: \"Authentication\",\n description: \"User identity and session management\",\n },\n {\n id: \"billing\",\n label: \"Billing\",\n description: \"Billing accounts and subscriptions\",\n },\n {\n id: \"files\",\n label: \"Files\",\n description: \"File storage and management\",\n },\n {\n id: \"tags\",\n label: \"Tags\",\n description: \"Tags and labels on resources\",\n },\n {\n id: \"calendar\",\n label: \"Calendar\",\n description: \"Events and scheduling\",\n },\n {\n id: \"workflows\",\n label: \"Workflows\",\n description: \"Automation workflows\",\n },\n {\n id: \"channels\",\n label: \"Channels\",\n description: \"Messaging channels\",\n },\n {\n id: \"notifications\",\n label: \"Notifications\",\n description: \"Platform notifications\",\n },\n {\n id: \"users\",\n label: \"Users & Members\",\n description: \"Workspace members and profiles\",\n },\n {\n id: \"workspaces\",\n label: \"Workspaces\",\n description: \"Workspace settings and metadata\",\n },\n {\n id: \"content\",\n label: \"Content\",\n description: \"Pages, documents, and content\",\n },\n {\n id: \"analytics\",\n label: \"Analytics\",\n description: \"Usage analytics and reporting\",\n },\n {\n id: \"webhooks\",\n label: \"Webhooks\",\n description: \"Webhook subscriptions\",\n },\n {\n id: \"rbac\",\n label: \"Roles & Permissions\",\n description: \"Access control configuration\",\n },\n] as const;\n\ntype ResourceId = (typeof RBAC_RESOURCES)[number][\"id\"];\ntype PermissionLevel = \"none\" \| \"read\" \| \"write\";\n\ntype PermissionMap = Record<ResourceId, PermissionLevel>;\n\nfunction defaultPermissions(): PermissionMap {\n return Object.fromEntries(\n RBAC_RESOURCES.map((r) => [r.id, \"none\"]),\n ) as PermissionMap;\n}\n\nfunction permissionsToManifest(perms: PermissionMap) {\n const entries = Object.entries(perms).filter(([, level]) => level !== \"none\");\n return entries.map(([resource, level]) => ({ resource, level }));\n}\n\n// ─── Org options ──────────────────────────────────────────────────────────────\n\nconst VISIBILITY_OPTIONS = [\n { value: \"PUBLIC\", label: \"Public — visible to everyone\" },\n { value: \"PRIVATE\", label: \"Private — only visible to you\" },\n { value: \"UNLISTED\", label: \"Unlisted — accessible via direct link\" },\n];\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\ninterface TypeCardProps {\n icon: FC<{ size?: number; className?: string }>;\n title: string;\n description: string;\n bullets: string[];\n selected: boolean;\n onClick: () => void;\n}\n\nconst TypeCard: FC<TypeCardProps> = ({\n icon: Icon,\n title,\n description,\n bullets,\n selected,\n onClick,\n}) => (\n <button\n type=\"button\"\n onClick={onClick}\n className={cn(\n \"relative flex flex-col gap-3 rounded-xl border-2 p-6 text-left transition-all hover:border-primary/50 hover:shadow-sm\",\n selected\n ? \"border-primary bg-action-primary-bg/5 shadow-sm\"\n : \"border-border-subtle bg-bg-surface\",\n )}\n >\n {selected && (\n <span className=\"absolute top-4 right-4 flex h-5 w-5 items-center justify-center rounded-full bg-action-primary-bg text-action-primary-text\">\n <Check size={12} />\n </span>\n )}\n <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken\">\n <Icon size={22} className=\"text-text-primary\" />\n </div>\n <div>\n <p className=\"font-semibold text-text-primary\">{title}</p>\n <p className=\"mt-1 text-sm text-text-secondary\">{description}</p>\n </div>\n <ul className=\"mt-1 space-y-1\">\n {bullets.map((b) => (\n <li\n key={b}\n className=\"flex items-center gap-2 text-xs text-text-secondary\"\n >\n <ChevronRight size={12} className=\"flex-shrink-0 text-primary\" />\n {b}\n </li>\n ))}\n </ul>\n </button>\n);\n\n// ─── Permissions matrix ───────────────────────────────────────────────────────\n\ninterface PermissionsMatrixProps {\n permissions: PermissionMap;\n onChange: (resource: ResourceId, level: PermissionLevel) => void;\n}\n\nconst PermissionsMatrix: FC<PermissionsMatrixProps> = ({\n permissions,\n onChange,\n}) => {\n const levels: PermissionLevel[] = [\"none\", \"read\", \"write\"];\n const levelLabels: Record<PermissionLevel, string> = {\n none: \"No access\",\n read: \"Read\",\n write: \"Read & Write\",\n };\n\n return (\n <div className=\"overflow-x-auto rounded-lg border border-border-subtle\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken/50\">\n <th className=\"px-4 py-3 text-left font-medium text-text-secondary w-1/2\">\n Resource\n </th>\n {levels.map((l) => (\n <th\n key={l}\n className=\"px-4 py-3 text-center font-medium text-text-secondary\"\n >\n {levelLabels[l]}\n </th>\n ))}\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border\">\n {RBAC_RESOURCES.map((resource) => (\n <tr\n key={resource.id}\n className=\"hover:bg-bg-sunken/30 transition-colors\"\n >\n <td className=\"px-4 py-3\">\n <p className=\"font-medium text-text-primary\">{resource.label}</p>\n <p className=\"text-xs text-text-secondary\">\n {resource.description}\n </p>\n </td>\n {levels.map((level) => (\n <td key={level} className=\"px-4 py-3 text-center\">\n <input\n type=\"radio\"\n name={`permission-${resource.id}`}\n value={level}\n checked={permissions[resource.id] === level}\n onChange={() => onChange(resource.id, level)}\n className=\"h-4 w-4 accent-primary cursor-pointer\"\n />\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n );\n};\n\n// ─── Main component ───────────────────────────────────────────────────────────\n\ninterface FormData {\n name: string;\n slug: string;\n shortDescription: string;\n description: string;\n visibility: string;\n developerOrganizationId: string;\n websiteUrl: string;\n githubUrl: string;\n documentationUrl: string;\n supportUrl: string;\n}\n\ninterface FormErrors {\n name?: string;\n slug?: string;\n shortDescription?: string;\n}\n\nexport const CreateApplicationPage: FC = () => {\n const { navigate, basePath, activeOrgId } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const v = t(key);\n return v === key ? fallback : v;\n };\n const bus = useDevportalEventBus();\n\n const [builderType, setBuilderType] = useState<BuilderType \| null>(null);\n const [permissions, setPermissions] =\n useState<PermissionMap>(defaultPermissions());\n const [formData, setFormData] = useState<FormData>({\n name: \"\",\n slug: \"\",\n shortDescription: \"\",\n description: \"\",\n visibility: \"PRIVATE\",\n developerOrganizationId: activeOrgId ?? \"\",\n websiteUrl: \"\",\n githubUrl: \"\",\n documentationUrl: \"\",\n supportUrl: \"\",\n });\n const [errors, setErrors] = useState<FormErrors>({});\n\n const [createApplication, { loading: isSubmitting }] =\n useCreateApplicationMutation();\n const { data: orgsData } = useGetMyOrganizationsQuery({\n fetchPolicy: \"cache-and-network\",\n });\n\n const orgOptions = [\n { value: \"\", label: \"No organization (personal)\" },\n ...(orgsData?.myDeveloperOrganizations ?? []).map(\n (org: { id: string; name: string }) => ({\n value: org.id,\n label: org.name,\n }),\n ),\n ];\n\n const handleNav = (path: string) => navigate?.(`${basePath}${path}`);\n\n const generateSlug = (name: string) =>\n name\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-\|-$/g, \"\");\n\n const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const name = e.target.value;\n setFormData((prev) => ({\n ...prev,\n name,\n slug: prev.slug \|\| generateSlug(name),\n }));\n if (errors.name) setErrors((p) => ({ ...p, name: undefined }));\n };\n\n const handleChange = (field: keyof FormData, value: string) => {\n setFormData((prev) => ({ ...prev, [field]: value }));\n if (errors[field as keyof FormErrors])\n setErrors((p) => ({ ...p, [field]: undefined }));\n };\n\n const handlePermissionChange = (\n resource: ResourceId,\n level: PermissionLevel,\n ) => {\n setPermissions((prev) => ({ ...prev, [resource]: level }));\n };\n\n const validate = (): boolean => {\n const newErrors: FormErrors = {};\n if (!formData.name.trim()) {\n newErrors.name = \"Name is required\";\n } else if (formData.name.length < 3) {\n newErrors.name = \"Name must be at least 3 characters\";\n } else if (formData.name.length > 100) {\n newErrors.name = \"Name must be less than 100 characters\";\n }\n if (!formData.slug.trim()) {\n newErrors.slug = \"Slug is required\";\n } else if (!/^[a-z0-9-]+$/.test(formData.slug)) {\n newErrors.slug =\n \"Slug can only contain lowercase letters, numbers, and hyphens\";\n }\n if (!formData.shortDescription.trim()) {\n newErrors.shortDescription = \"Short description is required\";\n } else if (formData.shortDescription.length > 200) {\n newErrors.shortDescription =\n \"Short description must be less than 200 characters\";\n }\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n\n const appTypeForBuilder = () => {\n if (builderType === \"node\") return \"NODE\" as const;\n if (builderType === \"workflow\") return \"WORKFLOW\" as const;\n return \"API_INTEGRATION\" as const;\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!validate() \|\| !builderType) return;\n\n const permManifest =\n builderType === \"app\"\n ? { permissions: permissionsToManifest(permissions) }\n : null;\n\n try {\n const result = await createApplication({\n variables: {\n input: {\n name: formData.name,\n slug: formData.slug \|\| undefined,\n shortDescription: formData.shortDescription \|\| undefined,\n description: formData.description \|\| undefined,\n appType: appTypeForBuilder(),\n visibility: formData.visibility as\n \| \"PUBLIC\"\n \| \"PRIVATE\"\n \| \"UNLISTED\"\n \| undefined,\n developerOrganizationId:\n formData.developerOrganizationId \|\| undefined,\n websiteUrl: formData.websiteUrl \|\| undefined,\n githubUrl: formData.githubUrl \|\| undefined,\n documentationUrl: formData.documentationUrl \|\| undefined,\n supportUrl: formData.supportUrl \|\| undefined,\n manifest: permManifest ?? undefined,\n },\n },\n });\n if (result.data?.createApplication?.id) {\n bus.emit(\"devportal.app.created\", {\n appId: result.data.createApplication.id,\n name: formData.name,\n appType: appTypeForBuilder(),\n organizationId: formData.developerOrganizationId \|\| null,\n });\n handleNav(`/apps/${result.data.createApplication.id}`);\n }\n } catch (error) {\n const msg = error instanceof Error ? error.message : String(error);\n if (\n msg.includes(\"slug\") \|\|\n msg.includes(\"already exists\") \|\|\n msg.includes(\"slugConflict\")\n ) {\n setErrors((p) => ({\n ...p,\n slug: \"This slug is already in use — try a different name\",\n }));\n }\n }\n };\n\n // ── Step 1: type picker ─────────────────────────────────────────────────────\n if (!builderType) {\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_CREATE}>\n <PageLayout\n title=\"What do you want to build?\"\n description=\"Choose a builder type to get started\"\n backLink={`${basePath}/apps`}\n backLabel=\"Back to Applications\"\n >\n <div className=\"max-w-3xl space-y-6\">\n <div className=\"grid gap-4 sm:grid-cols-3\">\n <TypeCard\n icon={Box}\n title=\"App\"\n description=\"Build integrations that connect your service to the platform using OAuth tokens.\"\n bullets={[\n \"GitHub-style permissions\",\n \"OAuth token flow\",\n \"Webhook events\",\n \"Publish to app store\",\n ]}\n selected={builderType === \"app\"}\n onClick={() => setBuilderType(\"app\")}\n />\n <TypeCard\n icon={Puzzle}\n title=\"Node\"\n description=\"Build custom FluidGrids nodes that users can drag into their visual workflows.\"\n bullets={[\n \"ZIP bundle + manifest\",\n \"Custom inputs/outputs\",\n \"Versioned releases\",\n \"Publish to node store\",\n ]}\n selected={builderType === \"node\"}\n onClick={() => setBuilderType(\"node\")}\n />\n <TypeCard\n icon={GitFork}\n title=\"Workflow\"\n description=\"Build reusable automation workflows that users can import and customize.\"\n bullets={[\n \"Manifest + workflow JSON\",\n \"Trigger definitions\",\n \"Versioned releases\",\n \"Publish to workflow store\",\n ]}\n selected={builderType === \"workflow\"}\n onClick={() => setBuilderType(\"workflow\")}\n />\n </div>\n\n <div className=\"rounded-lg border border-border-subtle bg-bg-sunken/30 p-4 flex gap-3 text-sm text-text-secondary\">\n <Info size={16} className=\"flex-shrink-0 mt-0.5\" />\n <p>\n Apps use OAuth to interact with platform data. Nodes and\n Workflows are packaged files you upload after creation.\n </p>\n </div>\n </div>\n </PageLayout>\n </PermissionGuard>\n );\n }\n\n // ── Step 2: form ────────────────────────────────────────────────────────────\n const typeLabel =\n builderType === \"app\"\n ? \"App\"\n : builderType === \"node\"\n ? \"Node\"\n : \"Workflow\";\n const typeIcon =\n builderType === \"app\" ? (\n <Box size={16} />\n ) : builderType === \"node\" ? (\n <Puzzle size={16} />\n ) : (\n <GitFork size={16} />\n );\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.APP_CREATE}>\n <PageLayout\n title={`Create ${typeLabel}`}\n description={\n builderType === \"app\"\n ? \"Register a new app integration with OAuth permissions\"\n : builderType === \"node\"\n ? \"Register a new FluidGrids node package\"\n : \"Register a new reusable automation workflow\"\n }\n backLink={`${basePath}/apps`}\n backLabel=\"Back to Applications\"\n >\n <form onSubmit={handleSubmit} className=\"space-y-8 max-w-3xl\">\n {/* Type badge + back to picker /}\n <div className=\"flex items-center gap-3\">\n <button\n type=\"button\"\n onClick={() => setBuilderType(null)}\n className=\"flex items-center gap-1.5 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n >\n <ArrowLeft size={14} />\n Change type\n </button>\n <span className=\"flex items-center gap-1.5 rounded-full border border-border-subtle bg-bg-sunken px-3 py-1 text-xs font-medium\">\n {typeIcon}\n {typeLabel}\n </span>\n </div>\n\n {/ Basic info /}\n <PageSection\n title=\"Basic Information\"\n description=\"Core details about your application\"\n >\n <div className=\"space-y-4\">\n <InputField\n label=\"Name\"\n value={formData.name}\n onChange={handleNameChange}\n placeholder={\n builderType === \"app\"\n ? \"My Integration\"\n : builderType === \"node\"\n ? \"HTTP Request\"\n : \"Onboarding Flow\"\n }\n required\n error={errors.name}\n />\n <InputField\n label=\"Slug\"\n value={formData.slug}\n onChange={(e) =>\n handleChange(\"slug\", e.target.value.toLowerCase())\n }\n placeholder=\"my-integration\"\n required\n error={errors.slug}\n hint=\"URL-friendly identifier (auto-generated from name)\"\n />\n <TextareaField\n label=\"Short Description\"\n value={formData.shortDescription}\n onChange={(e) =>\n handleChange(\"shortDescription\", e.target.value)\n }\n placeholder=\"Briefly describe what this does\"\n required\n error={errors.shortDescription}\n hint={`${formData.shortDescription.length}/200 characters`}\n rows={2}\n />\n <TextareaField\n label=\"Full Description\"\n value={formData.description}\n onChange={(e) => handleChange(\"description\", e.target.value)}\n placeholder=\"Detailed description, features, and use cases...\"\n rows={5}\n hint=\"Markdown supported\"\n />\n </div>\n </PageSection>\n\n {/ Visibility + org /}\n <PageSection\n title=\"Publish Settings\"\n description=\"Control who can see this and which organization it belongs to\"\n >\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <SelectField\n label=\"Visibility\"\n value={formData.visibility}\n onChange={(e) => handleChange(\"visibility\", e.target.value)}\n options={VISIBILITY_OPTIONS}\n />\n <SelectField\n label=\"Developer Organization\"\n value={formData.developerOrganizationId}\n onChange={(e) =>\n handleChange(\"developerOrganizationId\", e.target.value)\n }\n options={orgOptions}\n />\n </div>\n </PageSection>\n\n {/ Links /}\n <PageSection title=\"Links\" description=\"External resources\">\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <InputField\n label=\"Website URL\"\n type=\"url\"\n value={formData.websiteUrl}\n onChange={(e) => handleChange(\"websiteUrl\", e.target.value)}\n placeholder=\"https://example.com\"\n />\n <InputField\n label=\"GitHub URL\"\n type=\"url\"\n value={formData.githubUrl}\n onChange={(e) => handleChange(\"githubUrl\", e.target.value)}\n placeholder=\"https://github.com/org/repo\"\n />\n <InputField\n label=\"Documentation URL\"\n type=\"url\"\n value={formData.documentationUrl}\n onChange={(e) =>\n handleChange(\"documentationUrl\", e.target.value)\n }\n placeholder=\"https://docs.example.com\"\n />\n <InputField\n label=\"Support URL\"\n type=\"url\"\n value={formData.supportUrl}\n onChange={(e) => handleChange(\"supportUrl\", e.target.value)}\n placeholder=\"https://support.example.com\"\n />\n </div>\n </PageSection>\n\n {/ Permissions — App type only /}\n {builderType === \"app\" && (\n <PageSection\n title=\"Permissions\"\n description=\"Choose what data your app can access. Users will see these permissions when authorizing your app — like GitHub Apps.\"\n >\n <PermissionsMatrix\n permissions={permissions}\n onChange={handlePermissionChange}\n />\n <div className=\"mt-3 flex gap-2 rounded-lg border border-border-subtle bg-bg-sunken/30 p-3 text-xs text-text-secondary\">\n <Info size={14} className=\"flex-shrink-0 mt-0.5\" />\n <span>\n <strong>Read & Write</strong> implies Read. Select only\n what your app genuinely needs — fewer permissions build more\n user trust.\n </span>\n </div>\n </PageSection>\n )}\n\n {/ Node/Workflow file upload note /}\n {builderType !== \"app\" && (\n <div className=\"rounded-lg border border-border-subtle bg-bg-sunken/30 p-4 flex gap-3 text-sm text-text-secondary\">\n <Info size={16} className=\"flex-shrink-0 mt-0.5\" />\n <div>\n <p className=\"font-medium text-text-primary\">File uploads</p>\n <p className=\"mt-1\">\n {builderType === \"node\"\n ? \"After creating your Node, go to the Versions tab to upload your ZIP bundle and manifest.json.\"\n : \"After creating your Workflow, go to the Versions tab to upload your manifest and workflow JSON definition.\"}\n </p>\n </div>\n </div>\n )}\n\n {/ Actions */}\n <div className=\"flex items-center justify-end gap-3 border-t pt-6\">\n <button\n type=\"button\"\n onClick={() => handleNav(\"/apps\")}\n disabled={isSubmitting}\n 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\"\n >\n <X size={16} />\n {tr(\"devportal.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting}\n 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\"\n >\n {isSubmitting ? (\n <>\n <Loader2 size={16} className=\"animate-spin\" />\n Creating…\n </>\n ) : (\n <>\n <Save size={16} />\n Create {typeLabel}\n </>\n )}\n </button>\n </div>\n </form>\n </PageLayout>\n </PermissionGuard>\n );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/CreateOAuthClientPage.js CHANGED Viewed

@@ -70,11 +70,11 @@ var C = () => {
 					className: "mt-6 flex gap-3",
 					children: [U && /* @__PURE__ */ b("button", {
 						onClick: () => J(`/oauth/${U}`),
-						className: "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+						className: "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: E("devportal.viewAppDetails", "View App Details")
 					}), /* @__PURE__ */ b("button", {
 						onClick: () => J("/oauth"),
-						className: "rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors",
+						className: "rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors",
 						children: E("devportal.backToOAuthApps", "Back to OAuth Apps")
 					})]
 				})
@@ -103,9 +103,9 @@ var C = () => {
 				className: "space-y-6 max-w-2xl",
 				children: [
 					q && /* @__PURE__ */ b("div", {
-						className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4",
+						className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-4",
 						children: /* @__PURE__ */ b("p", {
-							className: "text-sm text-destructive",
+							className: "text-sm text-status-error-text",
 							children: r(q)
 						})
 					}),
@@ -171,21 +171,21 @@ var C = () => {
 											e.key === "Enter" && (e.preventDefault(), Y());
 										},
 										placeholder: "e.g. workspace:read",
-										className: "flex-1 rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+										className: "flex-1 rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 									}), /* @__PURE__ */ b("button", {
 										type: "button",
 										onClick: Y,
-										className: "rounded-md bg-primary/10 p-2 text-primary hover:bg-primary/20 transition-colors",
+										className: "rounded-md bg-action-primary-bg/10 p-2 text-primary hover:bg-action-primary-bg/20 transition-colors",
 										children: /* @__PURE__ */ b(g, { size: 16 })
 									})]
 								}), N.length > 0 && /* @__PURE__ */ b("div", {
 									className: "flex flex-wrap gap-2",
 									children: N.map((e) => /* @__PURE__ */ x("span", {
-										className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary",
+										className: "inline-flex items-center gap-1 rounded-full bg-action-primary-bg/10 px-3 py-1 text-xs font-medium text-primary",
 										children: [e, /* @__PURE__ */ b("button", {
 											type: "button",
 											onClick: () => X(e),
-											className: "hover:text-destructive",
+											className: "hover:text-status-error-text",
 											children: /* @__PURE__ */ b(y, { size: 12 })
 										})]
 									}, e))
@@ -205,11 +205,11 @@ var C = () => {
 											e.key === "Enter" && (e.preventDefault(), Z());
 										},
 										placeholder: "https://example.com/callback",
-										className: "flex-1 rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+										className: "flex-1 rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 									}), /* @__PURE__ */ b("button", {
 										type: "button",
 										onClick: Z,
-										className: "rounded-md bg-primary/10 p-2 text-primary hover:bg-primary/20 transition-colors",
+										className: "rounded-md bg-action-primary-bg/10 p-2 text-primary hover:bg-action-primary-bg/20 transition-colors",
 										children: /* @__PURE__ */ b(g, { size: 16 })
 									})]
 								}), L.length > 0 && /* @__PURE__ */ b("div", {
@@ -217,12 +217,12 @@ var C = () => {
 									children: L.map((e) => /* @__PURE__ */ x("div", {
 										className: "flex items-center gap-2",
 										children: [/* @__PURE__ */ b("code", {
-											className: "flex-1 rounded bg-muted px-3 py-1.5 text-sm font-mono",
+											className: "flex-1 rounded bg-bg-sunken px-3 py-1.5 text-sm font-mono",
 											children: e
 										}), /* @__PURE__ */ b("button", {
 											type: "button",
 											onClick: () => Q(e),
-											className: "rounded p-1 text-muted-foreground hover:text-destructive transition-colors",
+											className: "rounded p-1 text-text-secondary hover:text-status-error-text transition-colors",
 											children: /* @__PURE__ */ b(v, { size: 14 })
 										})]
 									}, e))
@@ -235,12 +235,12 @@ var C = () => {
 						children: [/* @__PURE__ */ x("button", {
 							type: "submit",
 							disabled: K || !D.trim(),
-							className: t("inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors", "bg-primary text-primary-foreground hover:bg-primary/90", "disabled:opacity-50 disabled:cursor-not-allowed"),
+							className: t("inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors", "bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90", "disabled:opacity-50 disabled:cursor-not-allowed"),
 							children: [/* @__PURE__ */ b(_, { size: 16 }), K ? E("devportal.creating", "Creating...") : E("devportal.createOAuthApp", "Create OAuth App")]
 						}), /* @__PURE__ */ x("button", {
 							type: "button",
 							onClick: () => J("/oauth"),
-							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__ */ b(y, { size: 16 }), E("devportal.cancel", "Cancel")]
 						})]
 					})