npm - @burdenoff/microfe-vibecontrols - Versions diffs - 2026.623.1 → 2026.623.2 - Mend

@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.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 (293) hide show

package/dist/components/templates/TemplateCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemplateCard.js","names":[],"sources":["../../../src/components/templates/TemplateCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { motion } from 'framer-motion';\nimport { FileCode, Tag, Copy, Layers, Variable } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { cardHoverVariants } from '../shared/cardMotion';\n\nexport interface TemplateCardData {\n id: string;\n name: string;\n description: string \| null;\n category: string \| null;\n cloneCount: number;\n variableCount: number;\n tags: string[];\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface TemplateCardProps {\n template: TemplateCardData;\n onOpen?: (template: TemplateCardData) => void;\n className?: string;\n}\n\nconst categoryStyles: Record<string, string> = {\n SERVICE: 'bg-~~action~~-~~primary~~-~~bg/10~~ text-action-primary-bg',\n FRONTEND: 'bg-status-info-bg text-status-info-text',\n LIBRARY: 'bg-status-warning-bg text-status-warning-text',\n INFRASTRUCTURE: 'bg-status-success-bg text-status-success-text',\n STARTER: 'bg-bg-sunken text-text-secondary',\n};\n\nexport const TemplateCard: FC<TemplateCardProps> = ({ template, onOpen, className = '' }) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string) => {\n const v = t(key);\n return v === key ? fallback : v;\n };\n\n return (\n <motion.div\n initial=\"rest\"\n animate=\"rest\"\n whileHover=\"hover\"\n whileTap=\"tap\"\n variants={cardHoverVariants}\n className={`bg-bg-surface border border-border-default rounded-lg p-4 hover:border-border-strong transition-colors cursor-pointer ${className}`}\n onClick={() => onOpen?.(template)}\n >\n <div className=\"flex items-start gap-2 sm:gap-3\">\n <div className=\"flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-~~action~~-~~primary~~-~~bg/10~~ flex items-center justify-center\">\n <FileCode className=\"size-4 sm:w-5 sm:h-5 text-action-primary-bg\" />\n </div>\n <div className=\"min-w-0 flex-1\">\n <h3 className=\"font-semibold text-text-primary truncate text-sm sm:text-base\">\n {template.name}\n </h3>\n <div className=\"flex items-center gap-2 mt-0.5 flex-wrap\">\n {template.category && (\n <span\n className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded ${categoryStyles[template.category] \|\| 'bg-bg-sunken text-text-secondary'}`}\n >\n <Layers className=\"size-3\" />\n {tr(`template.category.${template.category.toLowerCase()}`, template.category)}\n </span>\n )}\n <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n <Copy className=\"size-3\" />\n {template.cloneCount} {tr('template.clones', 'clones')}\n </span>\n {template.variableCount > 0 && (\n <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n <Variable className=\"size-3\" />\n {template.variableCount} var{template.variableCount !== 1 ? 's' : ''}\n </span>\n )}\n </div>\n </div>\n </div>\n\n {template.description && (\n <p className=\"mt-2 text-sm text-text-secondary line-clamp-2\">{template.description}</p>\n )}\n\n {template.tags.length > 0 && (\n <div className=\"mt-3 flex flex-wrap gap-1\">\n {template.tags.slice(0, 3).map((tag) => (\n <span\n key={tag}\n className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\"\n >\n <Tag className=\"size-3\" />\n {tag}\n </span>\n ))}\n {template.tags.length > 3 && (\n <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n +{template.tags.length - 3}\n </span>\n )}\n </div>\n )}\n </motion.div>\n );\n};\n"],"mappings":";;;;;;AAwBA,IAAM,IAAyC;CAC7C,SAAS;CACT,UAAU;CACV,SAAS;CACT,gBAAgB;CAChB,SAAS;CACV,EAEY,KAAuC,EAAE,aAAU,WAAQ,eAAY,SAAS;CAC3F,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAI,EAAE,EAAI;AAChB,SAAO,MAAM,IAAM,IAAW;;AAGhC,QACE,kBAAC,EAAO,KAAR;EACE,SAAQ;EACR,SAAQ;EACR,YAAW;EACX,UAAS;EACT,UAAU;EACV,WAAW,yHAAyH;EACpI,eAAe,IAAS,EAAS;YAPnC;GASE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAU,WAAU,+CAAgD,CAAA;KAChE,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAS;MACP,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,EAAS,YACR,kBAAC,QAAD;QACE,WAAW,gEAAgE,EAAe,EAAS,aAAa;kBADlH,CAGE,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,EAC5B,EAAG,qBAAqB,EAAS,SAAS,aAAa,IAAI,EAAS,SAAS,CACzE;;OAET,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;SAC1B,EAAS;SAAW;SAAE,EAAG,mBAAmB,SAAS;SACjD;;OACN,EAAS,gBAAgB,KACxB,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACE,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;SAC9B,EAAS;SAAc;SAAK,EAAS,kBAAkB,IAAU,KAAN;SACvD;;OAEL;QACF;OACF;;GAEL,EAAS,eACR,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAS;IAAgB,CAAA;GAGxF,EAAS,KAAK,SAAS,KACtB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAS,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC9B,kBAAC,QAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,GAAD,EAAK,WAAU,UAAW,CAAA,EACzB,EACI;OALA,EAKA,CACP,EACD,EAAS,KAAK,SAAS,KACtB,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAA+E,KAC3E,EAAS,KAAK,SAAS,EACpB;OAEL;;GAEG"}
1	+ {"version":3,"file":"TemplateCard.js","names":[],"sources":["../../../src/components/templates/TemplateCard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { motion } from 'framer-motion';\nimport { FileCode, Tag, Copy, Layers, Variable } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { cardHoverVariants } from '../shared/cardMotion';\n\nexport interface TemplateCardData {\n id: string;\n name: string;\n description: string \| null;\n category: string \| null;\n cloneCount: number;\n variableCount: number;\n tags: string[];\n createdAt: string;\n updatedAt: string;\n}\n\nexport interface TemplateCardProps {\n template: TemplateCardData;\n onOpen?: (template: TemplateCardData) => void;\n className?: string;\n}\n\nconst categoryStyles: Record<string, string> = {\n SERVICE: 'bg-[var(--color-accent-soft)] text-action-primary-bg',\n FRONTEND: 'bg-status-info-bg-subtle text-status-info-text',\n LIBRARY: 'bg-status-warning-bg-subtle text-status-warning-text',\n INFRASTRUCTURE: 'bg-status-success-bg-subtle text-status-success-text',\n STARTER: 'bg-bg-sunken text-text-secondary',\n};\n\nexport const TemplateCard: FC<TemplateCardProps> = ({ template, onOpen, className = '' }) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string) => {\n const v = t(key);\n return v === key ? fallback : v;\n };\n\n return (\n <motion.div\n initial=\"rest\"\n animate=\"rest\"\n whileHover=\"hover\"\n whileTap=\"tap\"\n variants={cardHoverVariants}\n className={`bg-bg-surface border border-border-default rounded-lg p-4 hover:border-border-strong transition-colors cursor-pointer ${className}`}\n onClick={() => onOpen?.(template)}\n >\n <div className=\"flex items-start gap-2 sm:gap-3\">\n <div className=\"flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <FileCode className=\"size-4 sm:w-5 sm:h-5 text-action-primary-bg\" />\n </div>\n <div className=\"min-w-0 flex-1\">\n <h3 className=\"font-semibold text-text-primary truncate text-sm sm:text-base\">\n {template.name}\n </h3>\n <div className=\"flex items-center gap-2 mt-0.5 flex-wrap\">\n {template.category && (\n <span\n className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded ${categoryStyles[template.category] \|\| 'bg-bg-sunken text-text-secondary'}`}\n >\n <Layers className=\"size-3\" />\n {tr(`template.category.${template.category.toLowerCase()}`, template.category)}\n </span>\n )}\n <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n <Copy className=\"size-3\" />\n {template.cloneCount} {tr('template.clones', 'clones')}\n </span>\n {template.variableCount > 0 && (\n <span className=\"inline-flex items-center gap-1 text-xs text-text-muted\">\n <Variable className=\"size-3\" />\n {template.variableCount} var{template.variableCount !== 1 ? 's' : ''}\n </span>\n )}\n </div>\n </div>\n </div>\n\n {template.description && (\n <p className=\"mt-2 text-sm text-text-secondary line-clamp-2\">{template.description}</p>\n )}\n\n {template.tags.length > 0 && (\n <div className=\"mt-3 flex flex-wrap gap-1\">\n {template.tags.slice(0, 3).map((tag) => (\n <span\n key={tag}\n className=\"inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\"\n >\n <Tag className=\"size-3\" />\n {tag}\n </span>\n ))}\n {template.tags.length > 3 && (\n <span className=\"px-2 py-0.5 text-xs bg-bg-sunken text-text-secondary rounded\">\n +{template.tags.length - 3}\n </span>\n )}\n </div>\n )}\n </motion.div>\n );\n};\n"],"mappings":";;;;;;AAwBA,IAAM,IAAyC;CAC7C,SAAS;CACT,UAAU;CACV,SAAS;CACT,gBAAgB;CAChB,SAAS;CACV,EAEY,KAAuC,EAAE,aAAU,WAAQ,eAAY,SAAS;CAC3F,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAI,EAAE,EAAI;AAChB,SAAO,MAAM,IAAM,IAAW;;AAGhC,QACE,kBAAC,EAAO,KAAR;EACE,SAAQ;EACR,SAAQ;EACR,YAAW;EACX,UAAS;EACT,UAAU;EACV,WAAW,yHAAyH;EACpI,eAAe,IAAS,EAAS;YAPnC;GASE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAU,WAAU,+CAAgD,CAAA;KAChE,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAS;MACP,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,EAAS,YACR,kBAAC,QAAD;QACE,WAAW,gEAAgE,EAAe,EAAS,aAAa;kBADlH,CAGE,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,EAC5B,EAAG,qBAAqB,EAAS,SAAS,aAAa,IAAI,EAAS,SAAS,CACzE;;OAET,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACE,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;SAC1B,EAAS;SAAW;SAAE,EAAG,mBAAmB,SAAS;SACjD;;OACN,EAAS,gBAAgB,KACxB,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACE,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;SAC9B,EAAS;SAAc;SAAK,EAAS,kBAAkB,IAAU,KAAN;SACvD;;OAEL;QACF;OACF;;GAEL,EAAS,eACR,kBAAC,KAAD;IAAG,WAAU;cAAiD,EAAS;IAAgB,CAAA;GAGxF,EAAS,KAAK,SAAS,KACtB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAS,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK,MAC9B,kBAAC,QAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,GAAD,EAAK,WAAU,UAAW,CAAA,EACzB,EACI;OALA,EAKA,CACP,EACD,EAAS,KAAK,SAAS,KACtB,kBAAC,QAAD;KAAM,WAAU;eAAhB,CAA+E,KAC3E,EAAS,KAAK,SAAS,EACpB;OAEL;;GAEG"}

package/dist/components/templates/TemplateWizard.js CHANGED Viewed

@@ -89,7 +89,7 @@ var m = ({ templateName: m, variables: h, sourceRepoUrl: g, githubConnections: _
 							className: "flex items-center gap-2 flex-shrink-0",
 							children: [
 								/* @__PURE__ */ u("div", {
-									className: `flex items-center justify-center size-6 rounded-full text-xs font-medium transition-colors ${r < T ? "bg-status-success-bg text-status-success-text" : r === T ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-muted"}`,
+									className: `flex items-center justify-center size-6 rounded-full text-xs font-medium transition-colors ${r < T ? "bg-status-success-bg-subtle text-status-success-text" : r === T ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-muted"}`,
 									children: r < T ? /* @__PURE__ */ u(t, { className: "size-3" }) : r + 1
 								}),
 								/* @__PURE__ */ u("span", {
@@ -573,7 +573,7 @@ var m = ({ templateName: m, variables: h, sourceRepoUrl: g, githubConnections: _
 							}, "review")
 						]
 					}), B && /* @__PURE__ */ u("div", {
-						className: "mt-3 p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
+						className: "mt-3 p-3 bg-status-error-bg-subtle text-status-error-text text-sm rounded-md",
 						children: B
 					})]
 				}),

package/dist/components/templates/TemplateWizard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemplateWizard.js","names":[],"sources":["../../../src/components/templates/TemplateWizard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Copy, ChevronRight, Check, X, Github, Eye, EyeOff } from 'lucide-react';\nimport type { TemplateVariable } from './TemplateVariableEditor';\n\nexport interface GitHubConfig {\n enabled: boolean;\n /** When set, the backend resolves the token via the OAuth connection (token stays server-side) /\n connectionId: string \| null;\n repoName: string;\n visibility: 'public' \| 'private';\n scope: 'user' \| 'org';\n orgName: string;\n /* Personal access token — only used when connectionId is null /\n token: string;\n}\n\nexport interface GitHubConnection {\n id: string;\n name: string;\n externalAccountEmail?: string \| null;\n externalAccountName?: string \| null;\n provider: { key: string; name: string };\n}\n\ninterface TemplateWizardProps {\n templateName: string;\n variables: TemplateVariable[];\n /* URL of the template's source component repository, used for forking /\n sourceRepoUrl?: string \| null;\n /* Active GitHub OAuth connections for the current workspace /\n githubConnections?: GitHubConnection[];\n onClose: () => void;\n onSubmit: (data: {\n name: string;\n description: string;\n variableValues: Record<string, unknown>;\n githubConfig: GitHubConfig \| null;\n }) => Promise<void>;\n}\n\nconst inputCls =\n 'w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:border-action-primary-bg text-sm';\n\nfunction toKebab(s: string) {\n return s\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/^-+\|-+$/g, '');\n}\n\nexport const TemplateWizard: FC<TemplateWizardProps> = ({\n templateName,\n variables,\n sourceRepoUrl,\n githubConnections = [],\n onClose,\n onSubmit,\n}) => {\n const hasVariables = variables.length > 0;\n\n // Steps: 0=BasicInfo, 1=Variables(if any), N-1=GitHub, N=Review\n const steps = [\n 'Basic Info',\n ...(hasVariables ? ['Configure Variables'] : []),\n 'GitHub Repo',\n 'Review',\n ];\n const totalSteps = steps.length;\n const githubStep = hasVariables ? 2 : 1;\n const reviewStep = hasVariables ? 3 : 2;\n\n const [step, setStep] = useState(0);\n const [name, setName] = useState('');\n const [description, setDescription] = useState('');\n const [varValues, setVarValues] = useState<Record<string, string>>(() => {\n const init: Record<string, string> = {};\n for (const v of variables) init[v.name] = v.default \|\| '';\n return init;\n });\n\n const hasConnections = githubConnections.length > 0;\n const [githubAuthMode, setGithubAuthMode] = useState<'connection' \| 'pat'>(\n hasConnections ? 'connection' : 'pat'\n );\n const [github, setGithub] = useState<GitHubConfig>({\n enabled: !!sourceRepoUrl,\n connectionId: hasConnections ? githubConnections[0].id : null,\n repoName: '',\n visibility: 'private',\n scope: 'user',\n orgName: '',\n token: '',\n });\n\n const [showToken, setShowToken] = useState(false);\n\n const [error, setError] = useState<string \| null>(null);\n const [loading, setLoading] = useState(false);\n\n const updateGithub = (patch: Partial<GitHubConfig>) => setGithub((g) => ({ ...g, ...patch }));\n\n // Keep repoName in sync with component name (only if user hasn't manually changed it)\n const [repoNameTouched, setRepoNameTouched] = useState(false);\n\n const handleNameChange = (v: string) => {\n setName(v);\n if (!repoNameTouched) {\n updateGithub({ repoName: toKebab(v) });\n }\n };\n\n const canProceed = (): boolean => {\n if (step === 0) return name.trim().length > 0;\n if (step === 1 && hasVariables) {\n return variables.filter((v) => v.required).every((v) => varValues[v.name]?.trim());\n }\n if (step === githubStep) {\n if (sourceRepoUrl && !github.enabled) return false;\n if (github.enabled) {\n if (!github.repoName.trim()) return false;\n if (github.scope === 'org' && !github.orgName.trim()) return false;\n if (githubAuthMode === 'connection') {\n if (!hasConnections) return false;\n } else {\n if (!github.token.trim()) return false;\n }\n }\n }\n return true;\n };\n\n const next = () => {\n if (!canProceed()) {\n if (step === 0) setError('Component name is required');\n else if (step === 1 && hasVariables) setError('Please fill in all required fields');\n else if (step === githubStep)\n setError(\n sourceRepoUrl\n ? 'A GitHub repository is required to fork this template — enable it and fill in the details'\n : 'Repo name, org (if applicable), and token are required to create a GitHub repo'\n );\n return;\n }\n setError(null);\n setStep((s) => Math.min(s + 1, totalSteps - 1));\n };\n\n const back = () => setStep((s) => Math.max(s - 1, 0));\n\n const handleSubmit = async () => {\n setLoading(true);\n setError(null);\n try {\n const variableValues: Record<string, unknown> = {};\n for (const v of variables) {\n const val = varValues[v.name];\n if (val !== undefined && val !== '') {\n if (v.type === 'number') variableValues[v.name] = Number(val);\n else if (v.type === 'boolean') variableValues[v.name] = val === 'true';\n else variableValues[v.name] = val;\n }\n }\n await onSubmit({\n name,\n description,\n variableValues,\n githubConfig: github.enabled ? github : null,\n });\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to create component');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <div\n className=\"fixed inset-0 flex items-center justify-center z-50 p-4\"\n style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}\n >\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"bg-bg-surface rounded-lg w-full max-w-lg shadow-xl\"\n >\n {/ Header /}\n <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n <h2 className=\"text-base font-semibold text-text-primary flex items-center gap-2\">\n <Copy className=\"size-4 text-action-primary-bg\" />\n Use Template: <span className=\"text-action-primary-bg ml-1\">{templateName}</span>\n </h2>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"p-1.5 text-text-secondary hover:text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n >\n <X className=\"size-4\" />\n </button>\n </div>\n\n {/ Step pills /}\n <div className=\"px-6 pt-4\">\n <div className=\"flex items-center gap-2 overflow-x-auto pb-1\">\n {steps.map((label, i) => (\n <div key={i} className=\"flex items-center gap-2 flex-shrink-0\">\n <div\n className={`flex items-center justify-center size-6 rounded-full text-xs font-medium transition-colors ${\n i < step\n ? 'bg-status-success-bg text-status-success-text'\n : i === step\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-sunken text-text-muted'\n }`}\n >\n {i < step ? <Check className=\"size-3\" /> : i + 1}\n </div>\n <span\n className={`text-xs ${i === step ? 'text-text-primary font-medium' : 'text-text-muted'}`}\n >\n {label}\n </span>\n {i < steps.length - 1 && (\n <ChevronRight className=\"size-3 text-text-muted flex-shrink-0\" />\n )}\n </div>\n ))}\n </div>\n </div>\n\n {/ Body /}\n <div className=\"px-6 py-5 min-h-[220px] max-h-[60vh] overflow-y-auto\">\n <AnimatePresence mode=\"wait\">\n {/ Step 0 — Basic Info /}\n {step === 0 && (\n <motion.div\n key=\"step0\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n <p className=\"text-sm text-text-secondary\">\n This wizard creates a new <strong>component</strong> — a tracked entry in your\n software catalog — pre-configured from the{' '}\n <span className=\"font-medium text-text-primary\">{templateName}</span> blueprint.\n </p>\n <div>\n <label\n htmlFor=\"templatewizard-56\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Component Name <span className=\"text-status-error-text\"></span>\n </label>\n <input\n id=\"templatewizard-56\"\n aria-label=\"my-new-service\"\n className={inputCls}\n placeholder=\"my-new-service\"\n value={name}\n onChange={(e) => handleNameChange(e.target.value)}\n />\n <p className=\"mt-1 text-xs text-text-muted\">\n Name of the new component created from this template.\n </p>\n </div>\n <div>\n <label\n htmlFor=\"templatewizard-55\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Description\n </label>\n <textarea\n id=\"templatewizard-55\"\n aria-label=\"What does this component do?\"\n className={`${inputCls} resize-none`}\n rows={3}\n placeholder=\"What does this component do?\"\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n />\n </div>\n </motion.div>\n )}\n\n {/* Step 1 — Variables (if any) /}\n {step === 1 && hasVariables && (\n <motion.div\n key=\"step1\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n <p className=\"text-sm text-text-secondary\">\n Fill in the configuration values for this template.\n </p>\n {variables.map((v) => (\n <div key={v.name}>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {v.title \|\| v.name}\n {v.required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n {v.options.length > 0 ? (\n <select\n className={inputCls}\n value={varValues[v.name] \|\| ''}\n onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n >\n <option value=\"\">Select…</option>\n {v.options.map((opt) => (\n <option key={opt} value={opt}>\n {opt}\n </option>\n ))}\n </select>\n ) : v.type === 'boolean' ? (\n <select\n className={inputCls}\n value={varValues[v.name] \|\| 'false'}\n onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n >\n <option value=\"true\">Yes</option>\n <option value=\"false\">No</option>\n </select>\n ) : (\n <input\n aria-label=\"control\"\n className={inputCls}\n type={v.type === 'number' ? 'number' : 'text'}\n placeholder={v.placeholder \|\| v.default \|\| ''}\n value={varValues[v.name] \|\| ''}\n onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n />\n )}\n </div>\n ))}\n </motion.div>\n )}\n\n {/* GitHub step /}\n {step === githubStep && (\n <motion.div\n key=\"stepGithub\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n {/ Source repo fork notice /}\n {sourceRepoUrl && (\n <div className=\"flex items-start gap-2 p-3 bg-status-info-bg rounded-md text-xs text-status-info-text\">\n <Github className=\"size-4 flex-shrink-0 mt-0.5\" />\n <div>\n <p className=\"font-medium\">Source repository detected</p>\n <p className=\"mt-0.5 text-status-info-text/80 break-all\">{sourceRepoUrl}</p>\n <p className=\"mt-1\">\n Enabling GitHub will <strong>fork</strong> this repository into your new\n repo (with fallback to a new empty repo if the fork is unavailable).\n </p>\n </div>\n </div>\n )}\n\n <div className=\"flex items-start gap-3\">\n {sourceRepoUrl ? (\n <div className=\"mt-0.5 flex-shrink-0 w-9 h-5 rounded-full bg-action-primary-bg relative opacity-70 cursor-not-allowed\">\n <span className=\"absolute top-0.5 size-4 rounded-full bg-bg-surface shadow translate-x-4\" />\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => updateGithub({ enabled: !github.enabled })}\n className={`mt-0.5 flex-shrink-0 w-9 h-5 rounded-full transition-colors relative ${\n github.enabled\n ? 'bg-action-primary-bg'\n : 'bg-bg-sunken border border-border-default'\n }`}\n >\n <span\n className={`absolute top-0.5 size-4 rounded-full bg-bg-surface shadow transition-transform ${\n github.enabled ? 'translate-x-4' : 'translate-x-0.5'\n }`}\n />\n </button>\n )}\n <div>\n <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n <Github className=\"size-4\" />\n {sourceRepoUrl\n ? 'Fork source & create GitHub repository'\n : 'Create a GitHub repository'}\n {sourceRepoUrl && (\n <span className=\"text-xs text-status-error-text font-normal\">Required</span>\n )}\n </p>\n <p className=\"text-xs text-text-muted mt-0.5\">\n {sourceRepoUrl\n ? 'Forks the template source repo and links it to the new component.'\n : 'Automatically creates a new GitHub repo and links it to the component.'}\n </p>\n </div>\n </div>\n\n {github.enabled && (\n <div className=\"space-y-3 pl-12\">\n <div>\n <label\n htmlFor=\"templatewizard-54\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Repository name <span className=\"text-status-error-text\"></span>\n </label>\n <input\n id=\"templatewizard-54\"\n aria-label=\"my-new-service\"\n className={inputCls}\n value={github.repoName}\n onChange={(e) => {\n setRepoNameTouched(true);\n updateGithub({ repoName: e.target.value });\n }}\n placeholder=\"my-new-service\"\n />\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label\n htmlFor=\"templatewizard-53\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Visibility\n </label>\n <select\n id=\"templatewizard-53\"\n className={inputCls}\n value={github.visibility}\n onChange={(e) =>\n updateGithub({\n visibility: e.target.value as GitHubConfig['visibility'],\n })\n }\n >\n <option value=\"private\">Private</option>\n <option value=\"public\">Public</option>\n </select>\n </div>\n <div>\n <label\n htmlFor=\"templatewizard-52\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Create under\n </label>\n <select\n id=\"templatewizard-52\"\n className={inputCls}\n value={github.scope}\n onChange={(e) =>\n updateGithub({ scope: e.target.value as GitHubConfig['scope'] })\n }\n >\n <option value=\"user\">My account</option>\n <option value=\"org\">Organization</option>\n </select>\n </div>\n </div>\n\n {github.scope === 'org' && (\n <div>\n <label\n htmlFor=\"templatewizard-51\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Organization name <span className=\"text-status-error-text\"></span>\n </label>\n <input\n id=\"templatewizard-51\"\n aria-label=\"my-org\"\n className={inputCls}\n value={github.orgName}\n onChange={(e) => updateGithub({ orgName: e.target.value })}\n placeholder=\"my-org\"\n />\n </div>\n )}\n\n {/ Auth method toggle — always visible /}\n <div>\n <label\n htmlFor=\"templatewizard-50\"\n className=\"block text-xs font-medium text-text-primary mb-2\"\n >\n Authentication <span className=\"text-status-error-text\"></span>\n </label>\n <div className=\"flex rounded-md border border-border-default overflow-hidden mb-3\">\n <button\n type=\"button\"\n onClick={() => {\n setGithubAuthMode('connection');\n updateGithub({\n connectionId: githubConnections[0]?.id ?? null,\n token: '',\n });\n }}\n className={`flex-1 py-1.5 text-xs font-medium transition-colors ${\n githubAuthMode === 'connection'\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n }`}\n >\n Connected Account\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setGithubAuthMode('pat');\n updateGithub({ connectionId: null });\n }}\n className={`flex-1 py-1.5 text-xs font-medium transition-colors border-l border-border-default ${\n githubAuthMode === 'pat'\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n }`}\n >\n Personal Token\n </button>\n </div>\n\n {/* Connected account panel /}\n {githubAuthMode === 'connection' &&\n (hasConnections ? (\n <div className=\"space-y-2\">\n <select\n id=\"templatewizard-50\"\n className={inputCls}\n value={github.connectionId ?? githubConnections[0]?.id ?? ''}\n onChange={(e) => updateGithub({ connectionId: e.target.value })}\n >\n {githubConnections.map((conn) => (\n <option key={conn.id} value={conn.id}>\n {conn.externalAccountEmail \|\|\n conn.externalAccountName \|\|\n conn.name}{' '}\n — {conn.provider.name}\n </option>\n ))}\n </select>\n <p className=\"text-xs text-status-success-text\">\n Token resolved server-side — never exposed to the browser.\n </p>\n </div>\n ) : (\n <div className=\"p-3 bg-bg-sunken rounded-md text-xs text-text-secondary space-y-1\">\n <p>No GitHub accounts connected to this workspace.</p>\n <p>\n <a\n href=\"/vibecontrols/settings/integrations\"\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"text-action-primary-bg underline\"\n >\n Connect GitHub in Settings →\n </a>{' '}\n then come back here to use it.\n </p>\n </div>\n ))}\n\n {/ PAT panel /}\n {githubAuthMode === 'pat' && (\n <div>\n <div className=\"relative\">\n <input\n aria-label=\"ghp_••••••••••••••••••••\"\n className={`${inputCls} pr-10`}\n type={showToken ? 'text' : 'password'}\n value={github.token}\n onChange={(e) => updateGithub({ token: e.target.value })}\n placeholder=\"ghp_••••••••••••••••••••\"\n autoComplete=\"off\"\n />\n <button\n type=\"button\"\n onClick={() => setShowToken((v) => !v)}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary\"\n >\n {showToken ? (\n <EyeOff className=\"size-4\" />\n ) : (\n <Eye className=\"size-4\" />\n )}\n </button>\n </div>\n <p className=\"mt-1 text-xs text-text-muted\">\n Needs <code className=\"font-mono\">repo</code> scope.{' '}\n <a\n href=\"https://github.com/settings/tokens/new?scopes=repo&description=VibeControls+scaffolding\"\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"text-action-primary-bg underline\"\n >\n Generate one →\n </a>\n </p>\n </div>\n )}\n </div>\n </div>\n )}\n\n {!github.enabled && !sourceRepoUrl && (\n <p className=\"text-sm text-text-muted pl-12\">\n Skip this step — the component will be created without a linked repository. You\n can add a repository URL later in the component settings.\n </p>\n )}\n </motion.div>\n )}\n\n {/ Review step /}\n {step === reviewStep && (\n <motion.div\n key=\"review\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n <p className=\"text-sm text-text-secondary\">\n Review the details before creating your component.\n </p>\n <div className=\"bg-bg-sunken rounded-lg p-4 space-y-3 text-sm\">\n <div className=\"flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0\">Name</span>\n <span className=\"text-text-primary font-medium\">{name}</span>\n </div>\n {description && (\n <div className=\"flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0\">Description</span>\n <span className=\"text-text-primary\">{description}</span>\n </div>\n )}\n {hasVariables && variables.length > 0 && (\n <div className=\"pt-2 border-t border-border-default\">\n <p className=\"text-text-muted text-xs mb-2\">Variables</p>\n {variables.map((v) => (\n <div key={v.name} className=\"flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0 truncate\">\n {v.title \|\| v.name}\n </span>\n <span className=\"text-text-primary font-mono text-xs\">\n {varValues[v.name] \|\| (\n <span className=\"text-text-muted italic\">default</span>\n )}\n </span>\n </div>\n ))}\n </div>\n )}\n <div className=\"pt-2 border-t border-border-default flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0\">GitHub repo</span>\n {github.enabled ? (\n <span className=\"text-text-primary font-mono text-xs\">\n {github.scope === 'org' ? github.orgName : 'personal'}/{github.repoName}{' '}\n <span className=\"text-text-muted\">({github.visibility})</span>\n {github.connectionId && (\n <span className=\"ml-2 text-status-success-text font-sans font-normal\">\n via connected account\n </span>\n )}\n </span>\n ) : (\n <span className=\"text-text-muted italic\">not creating</span>\n )}\n </div>\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {error && (\n <div className=\"mt-3 p-3 bg-status-error-bg text-status-error-text text-sm rounded-md\">\n {error}\n </div>\n )}\n </div>\n\n {/ Footer */}\n <div className=\"flex items-center justify-between px-6 py-4 border-t border-border-default\">\n <button\n type=\"button\"\n onClick={step === 0 ? onClose : back}\n disabled={loading}\n className=\"px-4 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n >\n {step === 0 ? 'Cancel' : 'Back'}\n </button>\n {step < reviewStep ? (\n <button\n type=\"button\"\n onClick={next}\n className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n >\n Next\n <ChevronRight className=\"size-4\" />\n </button>\n ) : (\n <button\n type=\"button\"\n onClick={handleSubmit}\n disabled={loading}\n className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n >\n <Copy className=\"size-4\" />\n {loading ? 'Creating...' : 'Create Component'}\n </button>\n )}\n </div>\n </motion.div>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"TemplateWizard.js","names":[],"sources":["../../../src/components/templates/TemplateWizard.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Copy, ChevronRight, Check, X, Github, Eye, EyeOff } from 'lucide-react';\nimport type { TemplateVariable } from './TemplateVariableEditor';\n\nexport interface GitHubConfig {\n enabled: boolean;\n /** When set, the backend resolves the token via the OAuth connection (token stays server-side) /\n connectionId: string \| null;\n repoName: string;\n visibility: 'public' \| 'private';\n scope: 'user' \| 'org';\n orgName: string;\n /* Personal access token — only used when connectionId is null /\n token: string;\n}\n\nexport interface GitHubConnection {\n id: string;\n name: string;\n externalAccountEmail?: string \| null;\n externalAccountName?: string \| null;\n provider: { key: string; name: string };\n}\n\ninterface TemplateWizardProps {\n templateName: string;\n variables: TemplateVariable[];\n /* URL of the template's source component repository, used for forking /\n sourceRepoUrl?: string \| null;\n /* Active GitHub OAuth connections for the current workspace /\n githubConnections?: GitHubConnection[];\n onClose: () => void;\n onSubmit: (data: {\n name: string;\n description: string;\n variableValues: Record<string, unknown>;\n githubConfig: GitHubConfig \| null;\n }) => Promise<void>;\n}\n\nconst inputCls =\n 'w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:border-action-primary-bg text-sm';\n\nfunction toKebab(s: string) {\n return s\n .toLowerCase()\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/^-+\|-+$/g, '');\n}\n\nexport const TemplateWizard: FC<TemplateWizardProps> = ({\n templateName,\n variables,\n sourceRepoUrl,\n githubConnections = [],\n onClose,\n onSubmit,\n}) => {\n const hasVariables = variables.length > 0;\n\n // Steps: 0=BasicInfo, 1=Variables(if any), N-1=GitHub, N=Review\n const steps = [\n 'Basic Info',\n ...(hasVariables ? ['Configure Variables'] : []),\n 'GitHub Repo',\n 'Review',\n ];\n const totalSteps = steps.length;\n const githubStep = hasVariables ? 2 : 1;\n const reviewStep = hasVariables ? 3 : 2;\n\n const [step, setStep] = useState(0);\n const [name, setName] = useState('');\n const [description, setDescription] = useState('');\n const [varValues, setVarValues] = useState<Record<string, string>>(() => {\n const init: Record<string, string> = {};\n for (const v of variables) init[v.name] = v.default \|\| '';\n return init;\n });\n\n const hasConnections = githubConnections.length > 0;\n const [githubAuthMode, setGithubAuthMode] = useState<'connection' \| 'pat'>(\n hasConnections ? 'connection' : 'pat'\n );\n const [github, setGithub] = useState<GitHubConfig>({\n enabled: !!sourceRepoUrl,\n connectionId: hasConnections ? githubConnections[0].id : null,\n repoName: '',\n visibility: 'private',\n scope: 'user',\n orgName: '',\n token: '',\n });\n\n const [showToken, setShowToken] = useState(false);\n\n const [error, setError] = useState<string \| null>(null);\n const [loading, setLoading] = useState(false);\n\n const updateGithub = (patch: Partial<GitHubConfig>) => setGithub((g) => ({ ...g, ...patch }));\n\n // Keep repoName in sync with component name (only if user hasn't manually changed it)\n const [repoNameTouched, setRepoNameTouched] = useState(false);\n\n const handleNameChange = (v: string) => {\n setName(v);\n if (!repoNameTouched) {\n updateGithub({ repoName: toKebab(v) });\n }\n };\n\n const canProceed = (): boolean => {\n if (step === 0) return name.trim().length > 0;\n if (step === 1 && hasVariables) {\n return variables.filter((v) => v.required).every((v) => varValues[v.name]?.trim());\n }\n if (step === githubStep) {\n if (sourceRepoUrl && !github.enabled) return false;\n if (github.enabled) {\n if (!github.repoName.trim()) return false;\n if (github.scope === 'org' && !github.orgName.trim()) return false;\n if (githubAuthMode === 'connection') {\n if (!hasConnections) return false;\n } else {\n if (!github.token.trim()) return false;\n }\n }\n }\n return true;\n };\n\n const next = () => {\n if (!canProceed()) {\n if (step === 0) setError('Component name is required');\n else if (step === 1 && hasVariables) setError('Please fill in all required fields');\n else if (step === githubStep)\n setError(\n sourceRepoUrl\n ? 'A GitHub repository is required to fork this template — enable it and fill in the details'\n : 'Repo name, org (if applicable), and token are required to create a GitHub repo'\n );\n return;\n }\n setError(null);\n setStep((s) => Math.min(s + 1, totalSteps - 1));\n };\n\n const back = () => setStep((s) => Math.max(s - 1, 0));\n\n const handleSubmit = async () => {\n setLoading(true);\n setError(null);\n try {\n const variableValues: Record<string, unknown> = {};\n for (const v of variables) {\n const val = varValues[v.name];\n if (val !== undefined && val !== '') {\n if (v.type === 'number') variableValues[v.name] = Number(val);\n else if (v.type === 'boolean') variableValues[v.name] = val === 'true';\n else variableValues[v.name] = val;\n }\n }\n await onSubmit({\n name,\n description,\n variableValues,\n githubConfig: github.enabled ? github : null,\n });\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to create component');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <div\n className=\"fixed inset-0 flex items-center justify-center z-50 p-4\"\n style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}\n >\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n className=\"bg-bg-surface rounded-lg w-full max-w-lg shadow-xl\"\n >\n {/ Header /}\n <div className=\"flex items-center justify-between px-6 py-4 border-b border-border-default\">\n <h2 className=\"text-base font-semibold text-text-primary flex items-center gap-2\">\n <Copy className=\"size-4 text-action-primary-bg\" />\n Use Template: <span className=\"text-action-primary-bg ml-1\">{templateName}</span>\n </h2>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"p-1.5 text-text-secondary hover:text-text-primary rounded-md hover:bg-bg-sunken transition-colors\"\n >\n <X className=\"size-4\" />\n </button>\n </div>\n\n {/ Step pills /}\n <div className=\"px-6 pt-4\">\n <div className=\"flex items-center gap-2 overflow-x-auto pb-1\">\n {steps.map((label, i) => (\n <div key={i} className=\"flex items-center gap-2 flex-shrink-0\">\n <div\n className={`flex items-center justify-center size-6 rounded-full text-xs font-medium transition-colors ${\n i < step\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : i === step\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-sunken text-text-muted'\n }`}\n >\n {i < step ? <Check className=\"size-3\" /> : i + 1}\n </div>\n <span\n className={`text-xs ${i === step ? 'text-text-primary font-medium' : 'text-text-muted'}`}\n >\n {label}\n </span>\n {i < steps.length - 1 && (\n <ChevronRight className=\"size-3 text-text-muted flex-shrink-0\" />\n )}\n </div>\n ))}\n </div>\n </div>\n\n {/ Body /}\n <div className=\"px-6 py-5 min-h-[220px] max-h-[60vh] overflow-y-auto\">\n <AnimatePresence mode=\"wait\">\n {/ Step 0 — Basic Info /}\n {step === 0 && (\n <motion.div\n key=\"step0\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n <p className=\"text-sm text-text-secondary\">\n This wizard creates a new <strong>component</strong> — a tracked entry in your\n software catalog — pre-configured from the{' '}\n <span className=\"font-medium text-text-primary\">{templateName}</span> blueprint.\n </p>\n <div>\n <label\n htmlFor=\"templatewizard-56\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Component Name <span className=\"text-status-error-text\"></span>\n </label>\n <input\n id=\"templatewizard-56\"\n aria-label=\"my-new-service\"\n className={inputCls}\n placeholder=\"my-new-service\"\n value={name}\n onChange={(e) => handleNameChange(e.target.value)}\n />\n <p className=\"mt-1 text-xs text-text-muted\">\n Name of the new component created from this template.\n </p>\n </div>\n <div>\n <label\n htmlFor=\"templatewizard-55\"\n className=\"block text-sm font-medium text-text-primary mb-1\"\n >\n Description\n </label>\n <textarea\n id=\"templatewizard-55\"\n aria-label=\"What does this component do?\"\n className={`${inputCls} resize-none`}\n rows={3}\n placeholder=\"What does this component do?\"\n value={description}\n onChange={(e) => setDescription(e.target.value)}\n />\n </div>\n </motion.div>\n )}\n\n {/* Step 1 — Variables (if any) /}\n {step === 1 && hasVariables && (\n <motion.div\n key=\"step1\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n <p className=\"text-sm text-text-secondary\">\n Fill in the configuration values for this template.\n </p>\n {variables.map((v) => (\n <div key={v.name}>\n <label className=\"block text-sm font-medium text-text-primary mb-1\">\n {v.title \|\| v.name}\n {v.required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n {v.options.length > 0 ? (\n <select\n className={inputCls}\n value={varValues[v.name] \|\| ''}\n onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n >\n <option value=\"\">Select…</option>\n {v.options.map((opt) => (\n <option key={opt} value={opt}>\n {opt}\n </option>\n ))}\n </select>\n ) : v.type === 'boolean' ? (\n <select\n className={inputCls}\n value={varValues[v.name] \|\| 'false'}\n onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n >\n <option value=\"true\">Yes</option>\n <option value=\"false\">No</option>\n </select>\n ) : (\n <input\n aria-label=\"control\"\n className={inputCls}\n type={v.type === 'number' ? 'number' : 'text'}\n placeholder={v.placeholder \|\| v.default \|\| ''}\n value={varValues[v.name] \|\| ''}\n onChange={(e) => setVarValues({ ...varValues, [v.name]: e.target.value })}\n />\n )}\n </div>\n ))}\n </motion.div>\n )}\n\n {/* GitHub step /}\n {step === githubStep && (\n <motion.div\n key=\"stepGithub\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n {/ Source repo fork notice /}\n {sourceRepoUrl && (\n <div className=\"flex items-start gap-2 p-3 bg-status-info-bg rounded-md text-xs text-status-info-text\">\n <Github className=\"size-4 flex-shrink-0 mt-0.5\" />\n <div>\n <p className=\"font-medium\">Source repository detected</p>\n <p className=\"mt-0.5 text-status-info-text/80 break-all\">{sourceRepoUrl}</p>\n <p className=\"mt-1\">\n Enabling GitHub will <strong>fork</strong> this repository into your new\n repo (with fallback to a new empty repo if the fork is unavailable).\n </p>\n </div>\n </div>\n )}\n\n <div className=\"flex items-start gap-3\">\n {sourceRepoUrl ? (\n <div className=\"mt-0.5 flex-shrink-0 w-9 h-5 rounded-full bg-action-primary-bg relative opacity-70 cursor-not-allowed\">\n <span className=\"absolute top-0.5 size-4 rounded-full bg-bg-surface shadow translate-x-4\" />\n </div>\n ) : (\n <button\n type=\"button\"\n onClick={() => updateGithub({ enabled: !github.enabled })}\n className={`mt-0.5 flex-shrink-0 w-9 h-5 rounded-full transition-colors relative ${\n github.enabled\n ? 'bg-action-primary-bg'\n : 'bg-bg-sunken border border-border-default'\n }`}\n >\n <span\n className={`absolute top-0.5 size-4 rounded-full bg-bg-surface shadow transition-transform ${\n github.enabled ? 'translate-x-4' : 'translate-x-0.5'\n }`}\n />\n </button>\n )}\n <div>\n <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n <Github className=\"size-4\" />\n {sourceRepoUrl\n ? 'Fork source & create GitHub repository'\n : 'Create a GitHub repository'}\n {sourceRepoUrl && (\n <span className=\"text-xs text-status-error-text font-normal\">Required</span>\n )}\n </p>\n <p className=\"text-xs text-text-muted mt-0.5\">\n {sourceRepoUrl\n ? 'Forks the template source repo and links it to the new component.'\n : 'Automatically creates a new GitHub repo and links it to the component.'}\n </p>\n </div>\n </div>\n\n {github.enabled && (\n <div className=\"space-y-3 pl-12\">\n <div>\n <label\n htmlFor=\"templatewizard-54\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Repository name <span className=\"text-status-error-text\"></span>\n </label>\n <input\n id=\"templatewizard-54\"\n aria-label=\"my-new-service\"\n className={inputCls}\n value={github.repoName}\n onChange={(e) => {\n setRepoNameTouched(true);\n updateGithub({ repoName: e.target.value });\n }}\n placeholder=\"my-new-service\"\n />\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label\n htmlFor=\"templatewizard-53\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Visibility\n </label>\n <select\n id=\"templatewizard-53\"\n className={inputCls}\n value={github.visibility}\n onChange={(e) =>\n updateGithub({\n visibility: e.target.value as GitHubConfig['visibility'],\n })\n }\n >\n <option value=\"private\">Private</option>\n <option value=\"public\">Public</option>\n </select>\n </div>\n <div>\n <label\n htmlFor=\"templatewizard-52\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Create under\n </label>\n <select\n id=\"templatewizard-52\"\n className={inputCls}\n value={github.scope}\n onChange={(e) =>\n updateGithub({ scope: e.target.value as GitHubConfig['scope'] })\n }\n >\n <option value=\"user\">My account</option>\n <option value=\"org\">Organization</option>\n </select>\n </div>\n </div>\n\n {github.scope === 'org' && (\n <div>\n <label\n htmlFor=\"templatewizard-51\"\n className=\"block text-xs font-medium text-text-primary mb-1\"\n >\n Organization name <span className=\"text-status-error-text\"></span>\n </label>\n <input\n id=\"templatewizard-51\"\n aria-label=\"my-org\"\n className={inputCls}\n value={github.orgName}\n onChange={(e) => updateGithub({ orgName: e.target.value })}\n placeholder=\"my-org\"\n />\n </div>\n )}\n\n {/ Auth method toggle — always visible /}\n <div>\n <label\n htmlFor=\"templatewizard-50\"\n className=\"block text-xs font-medium text-text-primary mb-2\"\n >\n Authentication <span className=\"text-status-error-text\"></span>\n </label>\n <div className=\"flex rounded-md border border-border-default overflow-hidden mb-3\">\n <button\n type=\"button\"\n onClick={() => {\n setGithubAuthMode('connection');\n updateGithub({\n connectionId: githubConnections[0]?.id ?? null,\n token: '',\n });\n }}\n className={`flex-1 py-1.5 text-xs font-medium transition-colors ${\n githubAuthMode === 'connection'\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n }`}\n >\n Connected Account\n </button>\n <button\n type=\"button\"\n onClick={() => {\n setGithubAuthMode('pat');\n updateGithub({ connectionId: null });\n }}\n className={`flex-1 py-1.5 text-xs font-medium transition-colors border-l border-border-default ${\n githubAuthMode === 'pat'\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-surface text-text-secondary hover:bg-bg-sunken'\n }`}\n >\n Personal Token\n </button>\n </div>\n\n {/* Connected account panel /}\n {githubAuthMode === 'connection' &&\n (hasConnections ? (\n <div className=\"space-y-2\">\n <select\n id=\"templatewizard-50\"\n className={inputCls}\n value={github.connectionId ?? githubConnections[0]?.id ?? ''}\n onChange={(e) => updateGithub({ connectionId: e.target.value })}\n >\n {githubConnections.map((conn) => (\n <option key={conn.id} value={conn.id}>\n {conn.externalAccountEmail \|\|\n conn.externalAccountName \|\|\n conn.name}{' '}\n — {conn.provider.name}\n </option>\n ))}\n </select>\n <p className=\"text-xs text-status-success-text\">\n Token resolved server-side — never exposed to the browser.\n </p>\n </div>\n ) : (\n <div className=\"p-3 bg-bg-sunken rounded-md text-xs text-text-secondary space-y-1\">\n <p>No GitHub accounts connected to this workspace.</p>\n <p>\n <a\n href=\"/vibecontrols/settings/integrations\"\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"text-action-primary-bg underline\"\n >\n Connect GitHub in Settings →\n </a>{' '}\n then come back here to use it.\n </p>\n </div>\n ))}\n\n {/ PAT panel /}\n {githubAuthMode === 'pat' && (\n <div>\n <div className=\"relative\">\n <input\n aria-label=\"ghp_••••••••••••••••••••\"\n className={`${inputCls} pr-10`}\n type={showToken ? 'text' : 'password'}\n value={github.token}\n onChange={(e) => updateGithub({ token: e.target.value })}\n placeholder=\"ghp_••••••••••••••••••••\"\n autoComplete=\"off\"\n />\n <button\n type=\"button\"\n onClick={() => setShowToken((v) => !v)}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-primary\"\n >\n {showToken ? (\n <EyeOff className=\"size-4\" />\n ) : (\n <Eye className=\"size-4\" />\n )}\n </button>\n </div>\n <p className=\"mt-1 text-xs text-text-muted\">\n Needs <code className=\"font-mono\">repo</code> scope.{' '}\n <a\n href=\"https://github.com/settings/tokens/new?scopes=repo&description=VibeControls+scaffolding\"\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"text-action-primary-bg underline\"\n >\n Generate one →\n </a>\n </p>\n </div>\n )}\n </div>\n </div>\n )}\n\n {!github.enabled && !sourceRepoUrl && (\n <p className=\"text-sm text-text-muted pl-12\">\n Skip this step — the component will be created without a linked repository. You\n can add a repository URL later in the component settings.\n </p>\n )}\n </motion.div>\n )}\n\n {/ Review step /}\n {step === reviewStep && (\n <motion.div\n key=\"review\"\n initial={{ opacity: 0, x: 20 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: -20 }}\n transition={{ duration: 0.15 }}\n className=\"space-y-4\"\n >\n <p className=\"text-sm text-text-secondary\">\n Review the details before creating your component.\n </p>\n <div className=\"bg-bg-sunken rounded-lg p-4 space-y-3 text-sm\">\n <div className=\"flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0\">Name</span>\n <span className=\"text-text-primary font-medium\">{name}</span>\n </div>\n {description && (\n <div className=\"flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0\">Description</span>\n <span className=\"text-text-primary\">{description}</span>\n </div>\n )}\n {hasVariables && variables.length > 0 && (\n <div className=\"pt-2 border-t border-border-default\">\n <p className=\"text-text-muted text-xs mb-2\">Variables</p>\n {variables.map((v) => (\n <div key={v.name} className=\"flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0 truncate\">\n {v.title \|\| v.name}\n </span>\n <span className=\"text-text-primary font-mono text-xs\">\n {varValues[v.name] \|\| (\n <span className=\"text-text-muted italic\">default</span>\n )}\n </span>\n </div>\n ))}\n </div>\n )}\n <div className=\"pt-2 border-t border-border-default flex gap-3\">\n <span className=\"text-text-muted w-28 flex-shrink-0\">GitHub repo</span>\n {github.enabled ? (\n <span className=\"text-text-primary font-mono text-xs\">\n {github.scope === 'org' ? github.orgName : 'personal'}/{github.repoName}{' '}\n <span className=\"text-text-muted\">({github.visibility})</span>\n {github.connectionId && (\n <span className=\"ml-2 text-status-success-text font-sans font-normal\">\n via connected account\n </span>\n )}\n </span>\n ) : (\n <span className=\"text-text-muted italic\">not creating</span>\n )}\n </div>\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {error && (\n <div className=\"mt-3 p-3 bg-status-error-bg-subtle text-status-error-text text-sm rounded-md\">\n {error}\n </div>\n )}\n </div>\n\n {/ Footer */}\n <div className=\"flex items-center justify-between px-6 py-4 border-t border-border-default\">\n <button\n type=\"button\"\n onClick={step === 0 ? onClose : back}\n disabled={loading}\n className=\"px-4 py-2 text-sm text-text-primary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n >\n {step === 0 ? 'Cancel' : 'Back'}\n </button>\n {step < reviewStep ? (\n <button\n type=\"button\"\n onClick={next}\n className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n >\n Next\n <ChevronRight className=\"size-4\" />\n </button>\n ) : (\n <button\n type=\"button\"\n onClick={handleSubmit}\n disabled={loading}\n className=\"flex items-center gap-2 px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n >\n <Copy className=\"size-4\" />\n {loading ? 'Creating...' : 'Create Component'}\n </button>\n )}\n </div>\n </motion.div>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/components/tunnels/DomainVerificationBadge.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/tunnels/DomainVerificationBadge.tsx
 var t = {
-	PENDING: "bg-status-warning-bg text-status-warning-fg",
-	VERIFYING: "bg-status-warning-bg text-status-warning-fg",
-	VERIFIED: "bg-status-success-bg text-status-success-fg",
-	FAILED: "bg-status-error-bg text-status-error-fg",
+	PENDING: "bg-status-warning-bg-subtle text-status-warning-text",
+	VERIFYING: "bg-status-warning-bg-subtle text-status-warning-text",
+	VERIFIED: "bg-status-success-bg-subtle text-status-success-text",
+	FAILED: "bg-status-error-bg-subtle text-status-error-text",
 	EXPIRED: "bg-bg-sunken text-text-muted"
 };
 function n({ status: n }) {

package/dist/components/tunnels/DomainVerificationBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DomainVerificationBadge.js","names":[],"sources":["../../../src/components/tunnels/DomainVerificationBadge.tsx"],"sourcesContent":["import type { TunnelDomainVerificationStatus } from '@/generated/wspace-types';\n\nconst STYLES: Record<string, string> = {\n PENDING: 'bg-status-warning-bg text-status-warning-fg',\n VERIFYING: 'bg-status-warning-bg text-status-warning-fg',\n VERIFIED: 'bg-status-success-bg text-status-success-fg',\n FAILED: 'bg-status-error-bg text-status-error-fg',\n EXPIRED: 'bg-bg-sunken text-text-muted',\n};\n\nexport function DomainVerificationBadge({\n status,\n}: {\n status: TunnelDomainVerificationStatus \| string;\n}) {\n const style = STYLES[status] ?? 'bg-bg-sunken text-text-secondary';\n return (\n <span\n className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${style}`}\n >\n {status}\n </span>\n );\n}\n"],"mappings":";;AAEA,IAAM,IAAiC;CACrC,SAAS;CACT,WAAW;CACX,UAAU;CACV,QAAQ;CACR,SAAS;CACV;AAED,SAAgB,EAAwB,EACtC,aAGC;AAED,QACE,kBAAC,QAAD;EACE,WAAW,yEAHD,EAAO,MAAW;YAK3B;EACI,CAAA"}
1	+ {"version":3,"file":"DomainVerificationBadge.js","names":[],"sources":["../../../src/components/tunnels/DomainVerificationBadge.tsx"],"sourcesContent":["import type { TunnelDomainVerificationStatus } from '@/generated/wspace-types';\n\nconst STYLES: Record<string, string> = {\n PENDING: 'bg-status-warning-bg-subtle text-status-warning-text',\n VERIFYING: 'bg-status-warning-bg-subtle text-status-warning-text',\n VERIFIED: 'bg-status-success-bg-subtle text-status-success-text',\n FAILED: 'bg-status-error-bg-subtle text-status-error-text',\n EXPIRED: 'bg-bg-sunken text-text-muted',\n};\n\nexport function DomainVerificationBadge({\n status,\n}: {\n status: TunnelDomainVerificationStatus \| string;\n}) {\n const style = STYLES[status] ?? 'bg-bg-sunken text-text-secondary';\n return (\n <span\n className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${style}`}\n >\n {status}\n </span>\n );\n}\n"],"mappings":";;AAEA,IAAM,IAAiC;CACrC,SAAS;CACT,WAAW;CACX,UAAU;CACV,QAAQ;CACR,SAAS;CACV;AAED,SAAgB,EAAwB,EACtC,aAGC;AAED,QACE,kBAAC,QAAD;EACE,WAAW,yEAHD,EAAO,MAAW;YAK3B;EACI,CAAA"}

package/dist/components/tunnels/ProviderBadge.js CHANGED Viewed

@@ -6,7 +6,7 @@ var t = {
 };
 function n({ providerKey: n }) {
 	return /* @__PURE__ */ e("span", {
-		className: "inline-flex items-center rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-fg",
+		className: "inline-flex items-center rounded-full bg-status-info-bg-subtle px-2 py-0.5 text-xs font-medium text-status-info-text",
 		children: t[n] ?? n
 	});
 }

package/dist/components/tunnels/ProviderBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProviderBadge.js","names":[],"sources":["../../../src/components/tunnels/ProviderBadge.tsx"],"sourcesContent":["import type { TunnelProviderKey } from '@/generated/wspace-types';\n\nconst LABELS: Record<string, string> = {\n VIBETUNNELS: 'VibeTunnels',\n CLOUDFLARE: 'Cloudflare',\n};\n\nexport function ProviderBadge({ providerKey }: { providerKey: TunnelProviderKey \| string }) {\n return (\n <span className=\"inline-flex items-center rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-fg\">\n {LABELS[providerKey] ?? providerKey}\n </span>\n );\n}\n"],"mappings":";;AAEA,IAAM,IAAiC;CACrC,aAAa;CACb,YAAY;CACb;AAED,SAAgB,EAAc,EAAE,kBAA4D;AAC1F,QACE,kBAAC,QAAD;EAAM,WAAU;YACb,EAAO,MAAgB;EACnB,CAAA"}
1	+ {"version":3,"file":"ProviderBadge.js","names":[],"sources":["../../../src/components/tunnels/ProviderBadge.tsx"],"sourcesContent":["import type { TunnelProviderKey } from '@/generated/wspace-types';\n\nconst LABELS: Record<string, string> = {\n VIBETUNNELS: 'VibeTunnels',\n CLOUDFLARE: 'Cloudflare',\n};\n\nexport function ProviderBadge({ providerKey }: { providerKey: TunnelProviderKey \| string }) {\n return (\n <span className=\"inline-flex items-center rounded-full bg-status-info-bg-subtle px-2 py-0.5 text-xs font-medium text-status-info-text\">\n {LABELS[providerKey] ?? providerKey}\n </span>\n );\n}\n"],"mappings":";;AAEA,IAAM,IAAiC;CACrC,aAAa;CACb,YAAY;CACb;AAED,SAAgB,EAAc,EAAE,kBAA4D;AAC1F,QACE,kBAAC,QAAD;EAAM,WAAU;YACb,EAAO,MAAgB;EACnB,CAAA"}

package/dist/components/tunnels/TunnelCard.js CHANGED Viewed

@@ -18,19 +18,19 @@ function m({ tunnel: m, isPending: h = !1, onOpen: g, onStart: _, onStop: v, onD
 			opacity: 1,
 			y: 0
 		},
-		className: "rounded-lg border border-border-subtle bg-bg-surface p-4 hover:border-border-default transition-colors",
+		className: "rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 transition-all duration-200 ease-[var(--motion-easing-out)]",
 		children: [/* @__PURE__ */ p("div", {
-			className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3",
+			className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4",
 			children: [/* @__PURE__ */ p("button", {
 				type: "button",
 				onClick: () => g(m.id),
-				className: "flex-1 text-left min-w-0",
+				className: "flex-1 text-left min-w-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus rounded-button",
 				children: [
 					/* @__PURE__ */ p("div", {
-						className: "flex flex-wrap items-center gap-2 mb-1",
+						className: "flex flex-wrap items-center gap-2 mb-1.5",
 						children: [
 							/* @__PURE__ */ f("h3", {
-								className: "text-base font-semibold text-text-primary truncate",
+								className: "text-base font-semibold text-text-primary truncate tracking-tight",
 								children: m.name
 							}),
 							/* @__PURE__ */ f(i, { status: m.status }),
@@ -45,7 +45,7 @@ function m({ tunnel: m, isPending: h = !1, onOpen: g, onStart: _, onStop: v, onD
 						children: b("vibecontrols.tunnels.noDomain", "No domain attached")
 					}),
 					/* @__PURE__ */ p("p", {
-						className: "text-xs text-text-muted mt-1",
+						className: "text-xs font-mono text-text-muted mt-1 tabular-nums",
 						children: [
 							m.protocol,
 							":",
@@ -62,25 +62,25 @@ function m({ tunnel: m, isPending: h = !1, onOpen: g, onStart: _, onStop: v, onD
 						href: w,
 						target: "_blank",
 						rel: "noreferrer",
-						className: "inline-flex items-center rounded-md border border-border-default px-3 py-1.5 text-xs text-text-primary hover:bg-bg-elevated",
+						className: "inline-flex items-center rounded-button border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors",
 						onClick: (e) => e.stopPropagation(),
-						children: [/* @__PURE__ */ f(o, { className: "size-3.5 mr-1" }), b("vibecontrols.tunnels.open", "Open")]
+						children: [/* @__PURE__ */ f(o, { className: "size-3.5 mr-1.5" }), b("vibecontrols.tunnels.open", "Open")]
 					}),
 					h && /* @__PURE__ */ p("span", {
-						className: "inline-flex items-center rounded-md border border-border-default px-3 py-1.5 text-xs text-text-muted",
-						children: [/* @__PURE__ */ f(s, { className: "size-3.5 mr-1 animate-spin" }), m.status === "ACTIVE" ? b("vibecontrols.tunnels.stopping", "Stopping…") : b("vibecontrols.tunnels.starting", "Starting…")]
+						className: "inline-flex items-center rounded-button border border-border-subtle bg-bg-sunken px-3 py-1.5 text-xs text-text-muted",
+						children: [/* @__PURE__ */ f(s, { className: "size-3.5 mr-1.5 animate-spin" }), m.status === "ACTIVE" ? b("vibecontrols.tunnels.stopping", "Stopping…") : b("vibecontrols.tunnels.starting", "Starting…")]
 					}),
 					x && _ && /* @__PURE__ */ p("button", {
 						type: "button",
 						onClick: () => _(m.id),
-						className: "inline-flex items-center rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-fg hover:bg-action-primary-bg-hover",
-						children: [/* @__PURE__ */ f(c, { className: "size-3.5 mr-1" }), b("vibecontrols.tunnels.start", "Start")]
+						className: "inline-flex items-center rounded-button bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bgHover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+						children: [/* @__PURE__ */ f(c, { className: "size-3.5 mr-1.5" }), b("vibecontrols.tunnels.start", "Start")]
 					}),
 					S && v && /* @__PURE__ */ p("button", {
 						type: "button",
 						onClick: () => v(m.id),
-						className: "inline-flex items-center rounded-md border border-border-default px-3 py-1.5 text-xs text-text-primary hover:bg-bg-elevated",
-						children: [/* @__PURE__ */ f(l, { className: "size-3.5 mr-1" }), b("vibecontrols.tunnels.stop", "Stop")]
+						className: "inline-flex items-center rounded-button border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors",
+						children: [/* @__PURE__ */ f(l, { className: "size-3.5 mr-1.5" }), b("vibecontrols.tunnels.stop", "Stop")]
 					}),
 					/* @__PURE__ */ f(r, {
 						entityType: n.Tunnel,
@@ -92,14 +92,14 @@ function m({ tunnel: m, isPending: h = !1, onOpen: g, onStart: _, onStop: v, onD
 					y && /* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => y(m.id, m.name),
-						className: "inline-flex items-center rounded-md border border-border-default px-2 py-1.5 text-xs text-status-error-fg hover:bg-status-error-bg",
+						className: "inline-flex items-center rounded-button border border-border-subtle px-2 py-1.5 text-xs text-status-error-text hover:bg-status-error-bg-subtle hover:border-status-error-border transition-colors",
 						"aria-label": "Delete tunnel",
 						children: /* @__PURE__ */ f(u, { className: "size-3.5" })
 					})
 				]
 			})]
 		}), m.lastError && /* @__PURE__ */ f("div", {
-			className: "mt-3 rounded-md bg-status-error-bg px-3 py-2 text-xs text-status-error-fg",
+			className: "mt-4 rounded-button border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text",
 			children: m.lastError
 		})]
 	});

package/dist/components/tunnels/TunnelCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TunnelCard.js","names":[],"sources":["../../../src/components/tunnels/TunnelCard.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport { Loader2, Play, Square, Trash2, ExternalLink } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport type { ListTunnelsQuery } from '@/generated/wspace-operations';\nimport { TunnelStatus, VibeEntityType } from '@/generated/wspace-types';\nimport { TunnelStatusBadge } from './TunnelStatusBadge';\nimport { ProviderBadge } from './ProviderBadge';\nimport { EntityVibeLinkControl } from '../shared/EntityVibeLinkControl';\n\ntype TunnelRow = NonNullable<ListTunnelsQuery['tunnels']>['items'][number];\n\ninterface TunnelCardProps {\n tunnel: TunnelRow;\n isPending?: boolean;\n onOpen: (id: string) => void;\n // Mutation callbacks are optional: the parent omits them when the actor\n // lacks the permission (tunnel:execute for start/stop, tunnel:delete), so\n // the corresponding control is hidden rather than 403-ing on click.\n onStart?: (id: string) => void;\n onStop?: (id: string) => void;\n onDelete?: (id: string, name: string) => void;\n}\n\nexport function TunnelCard({\n tunnel,\n isPending = false,\n onOpen,\n onStart,\n onStop,\n onDelete,\n}: TunnelCardProps) {\n const tr = useTr();\n const canStart =\n !isPending &&\n tunnel.status !== TunnelStatus.Active &&\n tunnel.status !== TunnelStatus.Provisioning;\n const canStop = !isPending && tunnel.status === TunnelStatus.Active;\n const hostname = tunnel.primaryDomain?.hostname;\n const publicUrl = hostname\n ? `${tunnel.protocol.toLowerCase() === 'tcp' ? 'tcp' : 'https'}://${hostname}`\n : null;\n\n return (\n <motion.div\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 hover:border-border-~~default~~ transition-~~colors~~\"\n >\n <div className=\"flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3\">\n <button\n type=\"button\"\n onClick={() => onOpen(tunnel.id)}\n className=\"flex-1 text-left min-w-0\"\n >\n <div className=\"flex flex-wrap items-center gap-2 mb-1\">\n <h3 className=\"text-base font-semibold text-text-primary truncate\">{tunnel.name}</h3>\n <TunnelStatusBadge status={tunnel.status} />\n <ProviderBadge providerKey={tunnel.providerKey} />\n </div>\n {publicUrl ? (\n <p className=\"text-sm text-text-secondary truncate\">{publicUrl}</p>\n ) : (\n <p className=\"text-sm text-text-muted\">\n {tr('vibecontrols.tunnels.noDomain', 'No domain attached')}\n </p>\n )}\n <p className=\"text-xs text-text-muted mt-1\">\n {tunnel.protocol}:{tunnel.localPort} on {tunnel.localHost}\n </p>\n </button>\n\n <div className=\"flex items-center gap-2 flex-shrink-0 flex-wrap\">\n {publicUrl && (\n <a\n href={publicUrl}\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"inline-flex items-center rounded-md border border-border-~~default~~ px-3 py-1.5 text-xs text-text-primary hover:bg-bg-~~elevated~~\"\n onClick={(e) => e.stopPropagation()}\n >\n <ExternalLink className=\"size-3.5 mr-1\" />\n {tr('vibecontrols.tunnels.open', 'Open')}\n </a>\n )}\n {isPending && (\n <span className=\"inline-flex items-center rounded-md border border-border-~~default~~ px-3 py-1.5 text-xs text-text-muted\">\n <Loader2 className=\"size-3.5 mr-1 animate-spin\" />\n {tunnel.status === 'ACTIVE'\n ? tr('vibecontrols.tunnels.stopping', 'Stopping…')\n : tr('vibecontrols.tunnels.starting', 'Starting…')}\n </span>\n )}\n {canStart && onStart && (\n <button\n type=\"button\"\n onClick={() => onStart(tunnel.id)}\n className=\"inline-flex items-center rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-fg hover:bg-action-primary-bg-~~hover~~\"\n >\n <Play className=\"size-3.5 mr-1\" />\n {tr('vibecontrols.tunnels.start', 'Start')}\n </button>\n )}\n {canStop && onStop && (\n <button\n type=\"button\"\n onClick={() => onStop(tunnel.id)}\n className=\"inline-flex items-center rounded-md border border-border-~~default~~ px-3 py-1.5 text-xs text-text-primary hover:bg-bg-~~elevated~~\"\n >\n <Square className=\"size-3.5 mr-1\" />\n {tr('vibecontrols.tunnels.stop', 'Stop')}\n </button>\n )}\n <EntityVibeLinkControl\n entityType={VibeEntityType.Tunnel}\n entityId={tunnel.id}\n currentVibeId={tunnel.vibeId ?? null}\n currentVisibility={tunnel.visibility ?? null}\n refetchQueries={['ListTunnels']}\n />\n {onDelete && (\n <button\n type=\"button\"\n onClick={() => onDelete(tunnel.id, tunnel.name)}\n className=\"inline-flex items-center rounded-md border border-border-~~default~~ px-2 py-1.5 text-xs text-status-error-fg hover:bg-status-error-bg\"\n aria-label=\"Delete tunnel\"\n >\n <Trash2 className=\"size-3.5\" />\n </button>\n )}\n </div>\n </div>\n {tunnel.lastError && (\n <div className=\"mt-3 rounded-md bg-status-error-bg px-3 py-2 text-xs text-status-error-fg\">\n {tunnel.lastError}\n </div>\n )}\n </motion.div>\n );\n}\n"],"mappings":";;;;;;;;;AAwBA,SAAgB,EAAW,EACzB,WACA,eAAY,IACZ,WACA,YACA,WACA,eACkB;CAClB,IAAM,IAAK,GAAO,EACZ,IACJ,CAAC,KACD,EAAO,WAAW,EAAa,UAC/B,EAAO,WAAW,EAAa,cAC3B,IAAU,CAAC,KAAa,EAAO,WAAW,EAAa,QACvD,IAAW,EAAO,eAAe,UACjC,IAAY,IACd,GAAG,EAAO,SAAS,aAAa,KAAK,QAAQ,QAAQ,QAAQ,KAAK,MAClE;AAEJ,QACE,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,WAAU;YAHZ,CAKE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAO,EAAO,GAAG;IAChC,WAAU;cAHZ;KAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;~~kBAAsD~~,EAAO;~~QAAU~~,CAAA;~~OACrF~~,kBAAC,GAAD,EAAmB,QAAQ,EAAO,QAAU,CAAA;OAC5C,kBAAC,GAAD,EAAe,aAAa,EAAO,aAAe,CAAA;OAC9C;;KACL,IACC,kBAAC,KAAD;MAAG,WAAU;gBAAwC;MAAc,CAAA,GAEnE,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,iCAAiC,qBAAqB;MACxD,CAAA;KAEN,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAO;OAAS;OAAE,EAAO;OAAU;OAAK,EAAO;OAC9C;;KACG;OAET,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KACC,kBAAC,KAAD;MACE,MAAM;MACN,QAAO;MACP,KAAI;MACJ,WAAU;MACV,UAAU,MAAM,EAAE,iBAAiB;gBALrC,CAOE,kBAAC,GAAD,EAAc,WAAU,~~iBAAkB~~,CAAA,~~EACzC~~,EAAG,6BAA6B,OAAO,CACtC;;KAEL,KACC,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAS,WAAU,~~8BAA+B~~,CAAA,~~EACjD~~,EAAO,WAAW,WACf,EAAG,iCAAiC,YAAY,GAChD,EAAG,iCAAiC,YAAY,CAC/C;;KAER,KAAY,KACX,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAQ,EAAO,GAAG;MACjC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,~~iBAAkB~~,CAAA,~~EACjC~~,EAAG,8BAA8B,QAAQ,CACnC;;KAEV,KAAW,KACV,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAO,EAAO,GAAG;MAChC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,~~iBAAkB~~,CAAA,~~EACnC~~,EAAG,6BAA6B,OAAO,CACjC;;KAEX,kBAAC,GAAD;MACE,YAAY,EAAe;MAC3B,UAAU,EAAO;MACjB,eAAe,EAAO,UAAU;MAChC,mBAAmB,EAAO,cAAc;MACxC,gBAAgB,CAAC,cAAc;MAC/B,CAAA;KACD,KACC,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,EAAO,IAAI,EAAO,KAAK;MAC/C,WAAU;MACV,cAAW;gBAEX,kBAAC,GAAD,EAAQ,WAAU,YAAa,CAAA;MACxB,CAAA;KAEP;MACF;MACL,EAAO,aACN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAO;GACJ,CAAA,CAEG"}
1	+ {"version":3,"file":"TunnelCard.js","names":[],"sources":["../../../src/components/tunnels/TunnelCard.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport { Loader2, Play, Square, Trash2, ExternalLink } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport type { ListTunnelsQuery } from '@/generated/wspace-operations';\nimport { TunnelStatus, VibeEntityType } from '@/generated/wspace-types';\nimport { TunnelStatusBadge } from './TunnelStatusBadge';\nimport { ProviderBadge } from './ProviderBadge';\nimport { EntityVibeLinkControl } from '../shared/EntityVibeLinkControl';\n\ntype TunnelRow = NonNullable<ListTunnelsQuery['tunnels']>['items'][number];\n\ninterface TunnelCardProps {\n tunnel: TunnelRow;\n isPending?: boolean;\n onOpen: (id: string) => void;\n // Mutation callbacks are optional: the parent omits them when the actor\n // lacks the permission (tunnel:execute for start/stop, tunnel:delete), so\n // the corresponding control is hidden rather than 403-ing on click.\n onStart?: (id: string) => void;\n onStop?: (id: string) => void;\n onDelete?: (id: string, name: string) => void;\n}\n\nexport function TunnelCard({\n tunnel,\n isPending = false,\n onOpen,\n onStart,\n onStop,\n onDelete,\n}: TunnelCardProps) {\n const tr = useTr();\n const canStart =\n !isPending &&\n tunnel.status !== TunnelStatus.Active &&\n tunnel.status !== TunnelStatus.Provisioning;\n const canStop = !isPending && tunnel.status === TunnelStatus.Active;\n const hostname = tunnel.primaryDomain?.hostname;\n const publicUrl = hostname\n ? `${tunnel.protocol.toLowerCase() === 'tcp' ? 'tcp' : 'https'}://${hostname}`\n : null;\n\n return (\n <motion.div\n initial={{ opacity: 0, y: 4 }}\n animate={{ opacity: 1, y: 0 }}\n className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 transition-all duration-200 ease-[var(--motion-easing-out)]\"\n >\n <div className=\"flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4\">\n <button\n type=\"button\"\n onClick={() => onOpen(tunnel.id)}\n className=\"flex-1 text-left min-w-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus rounded-button\"\n >\n <div className=\"flex flex-wrap items-center gap-2 mb-1.5\">\n <h3 className=\"text-base font-semibold text-text-primary truncate tracking-tight\">\n {tunnel.name}\n </h3>\n <TunnelStatusBadge status={tunnel.status} />\n <ProviderBadge providerKey={tunnel.providerKey} />\n </div>\n {publicUrl ? (\n <p className=\"text-sm text-text-secondary truncate\">{publicUrl}</p>\n ) : (\n <p className=\"text-sm text-text-muted\">\n {tr('vibecontrols.tunnels.noDomain', 'No domain attached')}\n </p>\n )}\n <p className=\"text-xs font-mono text-text-muted mt-1 tabular-nums\">\n {tunnel.protocol}:{tunnel.localPort} on {tunnel.localHost}\n </p>\n </button>\n\n <div className=\"flex items-center gap-2 flex-shrink-0 flex-wrap\">\n {publicUrl && (\n <a\n href={publicUrl}\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"inline-flex items-center rounded-button border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors\"\n onClick={(e) => e.stopPropagation()}\n >\n <ExternalLink className=\"size-3.5 mr-1.5\" />\n {tr('vibecontrols.tunnels.open', 'Open')}\n </a>\n )}\n {isPending && (\n <span className=\"inline-flex items-center rounded-button border border-border-subtle bg-bg-sunken px-3 py-1.5 text-xs text-text-muted\">\n <Loader2 className=\"size-3.5 mr-1.5 animate-spin\" />\n {tunnel.status === 'ACTIVE'\n ? tr('vibecontrols.tunnels.stopping', 'Stopping…')\n : tr('vibecontrols.tunnels.starting', 'Starting…')}\n </span>\n )}\n {canStart && onStart && (\n <button\n type=\"button\"\n onClick={() => onStart(tunnel.id)}\n className=\"inline-flex items-center rounded-button bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bgHover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\"\n >\n <Play className=\"size-3.5 mr-1.5\" />\n {tr('vibecontrols.tunnels.start', 'Start')}\n </button>\n )}\n {canStop && onStop && (\n <button\n type=\"button\"\n onClick={() => onStop(tunnel.id)}\n className=\"inline-flex items-center rounded-button border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-colors\"\n >\n <Square className=\"size-3.5 mr-1.5\" />\n {tr('vibecontrols.tunnels.stop', 'Stop')}\n </button>\n )}\n <EntityVibeLinkControl\n entityType={VibeEntityType.Tunnel}\n entityId={tunnel.id}\n currentVibeId={tunnel.vibeId ?? null}\n currentVisibility={tunnel.visibility ?? null}\n refetchQueries={['ListTunnels']}\n />\n {onDelete && (\n <button\n type=\"button\"\n onClick={() => onDelete(tunnel.id, tunnel.name)}\n className=\"inline-flex items-center rounded-button border border-border-subtle px-2 py-1.5 text-xs text-status-error-text hover:bg-status-error-bg-subtle hover:border-status-error-border transition-colors\"\n aria-label=\"Delete tunnel\"\n >\n <Trash2 className=\"size-3.5\" />\n </button>\n )}\n </div>\n </div>\n {tunnel.lastError && (\n <div className=\"mt-4 rounded-button border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\">\n {tunnel.lastError}\n </div>\n )}\n </motion.div>\n );\n}\n"],"mappings":";;;;;;;;;AAwBA,SAAgB,EAAW,EACzB,WACA,eAAY,IACZ,WACA,YACA,WACA,eACkB;CAClB,IAAM,IAAK,GAAO,EACZ,IACJ,CAAC,KACD,EAAO,WAAW,EAAa,UAC/B,EAAO,WAAW,EAAa,cAC3B,IAAU,CAAC,KAAa,EAAO,WAAW,EAAa,QACvD,IAAW,EAAO,eAAe,UACjC,IAAY,IACd,GAAG,EAAO,SAAS,aAAa,KAAK,QAAQ,QAAQ,QAAQ,KAAK,MAClE;AAEJ,QACE,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,WAAU;YAHZ,CAKE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAO,EAAO,GAAG;IAChC,WAAU;cAHZ;KAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAO;QACL,CAAA;OACL,kBAAC,GAAD,EAAmB,QAAQ,EAAO,QAAU,CAAA;OAC5C,kBAAC,GAAD,EAAe,aAAa,EAAO,aAAe,CAAA;OAC9C;;KACL,IACC,kBAAC,KAAD;MAAG,WAAU;gBAAwC;MAAc,CAAA,GAEnE,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,iCAAiC,qBAAqB;MACxD,CAAA;KAEN,kBAAC,KAAD;MAAG,WAAU;gBAAb;OACG,EAAO;OAAS;OAAE,EAAO;OAAU;OAAK,EAAO;OAC9C;;KACG;OAET,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KACC,kBAAC,KAAD;MACE,MAAM;MACN,QAAO;MACP,KAAI;MACJ,WAAU;MACV,UAAU,MAAM,EAAE,iBAAiB;gBALrC,CAOE,kBAAC,GAAD,EAAc,WAAU,mBAAoB,CAAA,EAC3C,EAAG,6BAA6B,OAAO,CACtC;;KAEL,KACC,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACE,kBAAC,GAAD,EAAS,WAAU,gCAAiC,CAAA,EACnD,EAAO,WAAW,WACf,EAAG,iCAAiC,YAAY,GAChD,EAAG,iCAAiC,YAAY,CAC/C;;KAER,KAAY,KACX,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAQ,EAAO,GAAG;MACjC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAM,WAAU,mBAAoB,CAAA,EACnC,EAAG,8BAA8B,QAAQ,CACnC;;KAEV,KAAW,KACV,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAO,EAAO,GAAG;MAChC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,mBAAoB,CAAA,EACrC,EAAG,6BAA6B,OAAO,CACjC;;KAEX,kBAAC,GAAD;MACE,YAAY,EAAe;MAC3B,UAAU,EAAO;MACjB,eAAe,EAAO,UAAU;MAChC,mBAAmB,EAAO,cAAc;MACxC,gBAAgB,CAAC,cAAc;MAC/B,CAAA;KACD,KACC,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,EAAO,IAAI,EAAO,KAAK;MAC/C,WAAU;MACV,cAAW;gBAEX,kBAAC,GAAD,EAAQ,WAAU,YAAa,CAAA;MACxB,CAAA;KAEP;MACF;MACL,EAAO,aACN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAO;GACJ,CAAA,CAEG"}

package/dist/components/tunnels/TunnelCreateWizard.js CHANGED Viewed

@@ -479,7 +479,7 @@ function E() {
 									})]
 								}),
 								I && /* @__PURE__ */ y("div", {
-									className: "rounded-md bg-status-error-bg p-3 text-sm text-status-error-fg",
+									className: "rounded-card border border-status-error-border bg-status-error-bg-subtle p-3 text-sm text-status-error-text",
 									children: I
 								})
 							]