@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.3

package/dist/components/shared/PageSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSkeleton.js","names":[],"sources":["../../../src/components/shared/PageSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\ninterface SkeletonLineProps {\n  width?: string;\n  height?: string;\n  className?: string;\n}\n\nexport function SkeletonLine({\n  width = 'w-full',\n  height = 'h-4',\n  className = '',\n}: SkeletonLineProps) {\n  return <div className={`animate-pulse rounded bg-muted ${width} ${height} ${className}`} />;\n}\n\ninterface SkeletonRowsProps {\n  count?: number;\n  rowClassName?: string;\n}\n\nexport function SkeletonRows({ count = 6, rowClassName = '' }: SkeletonRowsProps) {\n  return (\n    <div className=\"space-y-2\" aria-hidden=\"true\">\n      {Array.from({ length: count }).map((_, i) => (\n        <div\n          key={i}\n          className={`flex items-center gap-3 rounded-md border border-border-subtle bg-bg-surface p-3 ${rowClassName}`}\n        >\n          <SkeletonLine width=\"w-8\" height=\"h-8\" className=\"rounded-full\" />\n          <div className=\"flex-1 space-y-2\">\n            <SkeletonLine width=\"w-1/3\" />\n            <SkeletonLine width=\"w-1/2\" height=\"h-3\" />\n          </div>\n          <SkeletonLine width=\"w-16\" height=\"h-6\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface SkeletonCardsProps {\n  count?: number;\n  columns?: number;\n}\n\nexport function SkeletonCards({ count = 6, columns = 3 }: SkeletonCardsProps) {\n  const gridCols =\n    columns === 4\n      ? 'sm:grid-cols-2 lg:grid-cols-4'\n      : columns === 2\n        ? 'sm:grid-cols-2'\n        : 'sm:grid-cols-2 lg:grid-cols-3';\n  return (\n    <div className={`grid grid-cols-1 gap-3 ${gridCols}`} aria-hidden=\"true\">\n      {Array.from({ length: count }).map((_, i) => (\n        <div key={i} className=\"rounded-md border border-border-subtle bg-bg-surface p-4 space-y-3\">\n          <SkeletonLine width=\"w-2/3\" height=\"h-5\" />\n          <SkeletonLine width=\"w-full\" height=\"h-3\" />\n          <SkeletonLine width=\"w-1/2\" height=\"h-3\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface PageSkeletonProps {\n  header?: ReactNode;\n  variant?: 'rows' | 'cards' | 'detail';\n  count?: number;\n}\n\nexport function PageSkeleton({ header, variant = 'rows', count = 6 }: PageSkeletonProps) {\n  return (\n    <div className=\"space-y-4\" role=\"status\" aria-label=\"Loading content\">\n      {header}\n      {variant === 'cards' ? (\n        <SkeletonCards count={count} />\n      ) : variant === 'detail' ? (\n        <div className=\"space-y-3\">\n          <SkeletonLine width=\"w-1/3\" height=\"h-6\" />\n          <SkeletonLine width=\"w-2/3\" height=\"h-3\" />\n          <SkeletonLine width=\"w-full\" height=\"h-3\" />\n          <SkeletonLine width=\"w-3/4\" height=\"h-3\" />\n          <SkeletonRows count={Math.max(count - 2, 3)} />\n        </div>\n      ) : (\n        <SkeletonRows count={count} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;AAQA,SAAgB,EAAa,EAC3B,WAAQ,UACR,YAAS,OACT,eAAY,MACQ;AACpB,QAAO,kBAAC,OAAD,EAAK,WAAW,kCAAkC,EAAM,GAAG,EAAO,GAAG,KAAe,CAAA;;AAQ7F,SAAgB,EAAa,EAAE,WAAQ,GAAG,kBAAe,MAAyB;AAChF,QACE,kBAAC,OAAD;EAAK,WAAU;EAAY,eAAY;YACpC,MAAM,KAAK,EAAE,QAAQ,GAAO,CAAC,CAAC,KAAK,GAAG,MACrC,kBAAC,OAAD;GAEE,WAAW,oFAAoF;aAFjG;IAIE,kBAAC,GAAD;KAAc,OAAM;KAAM,QAAO;KAAM,WAAU;KAAiB,CAAA;IAClE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAc,OAAM,SAAU,CAAA,EAC9B,kBAAC,GAAD;MAAc,OAAM;MAAQ,QAAO;MAAQ,CAAA,CACvC;;IACN,kBAAC,GAAD;KAAc,OAAM;KAAO,QAAO;KAAQ,CAAA;IACtC;KATC,EASD,CACN;EACE,CAAA;;AASV,SAAgB,EAAc,EAAE,WAAQ,GAAG,aAAU,KAAyB;AAO5E,QACE,kBAAC,OAAD;EAAK,WAAW,0BANhB,MAAY,IACR,kCACA,MAAY,IACV,mBACA;EAEgD,eAAY;YAC/D,MAAM,KAAK,EAAE,QAAQ,GAAO,CAAC,CAAC,KAAK,GAAG,MACrC,kBAAC,OAAD;GAAa,WAAU;aAAvB;IACE,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD;KAAc,OAAM;KAAS,QAAO;KAAQ,CAAA;IAC5C,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IACvC;KAJI,EAIJ,CACN;EACE,CAAA;;AAUV,SAAgB,EAAa,EAAE,WAAQ,aAAU,QAAQ,WAAQ,KAAwB;AACvF,QACE,kBAAC,OAAD;EAAK,WAAU;EAAY,MAAK;EAAS,cAAW;YAApD,CACG,GACA,MAAY,UACX,kBAAC,GAAD,EAAsB,UAAS,CAAA,GAC7B,MAAY,WACd,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD;KAAc,OAAM;KAAS,QAAO;KAAQ,CAAA;IAC5C,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD,EAAc,OAAO,KAAK,IAAI,IAAQ,GAAG,EAAE,EAAI,CAAA;IAC3C;OAEN,kBAAC,GAAD,EAAqB,UAAS,CAAA,CAE5B"}
+{"version":3,"file":"PageSkeleton.js","names":[],"sources":["../../../src/components/shared/PageSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\ninterface SkeletonLineProps {\n  width?: string;\n  height?: string;\n  className?: string;\n}\n\nexport function SkeletonLine({\n  width = 'w-full',\n  height = 'h-4',\n  className = '',\n}: SkeletonLineProps) {\n  return <div className={`animate-pulse rounded bg-bg-sunken ${width} ${height} ${className}`} />;\n}\n\ninterface SkeletonRowsProps {\n  count?: number;\n  rowClassName?: string;\n}\n\nexport function SkeletonRows({ count = 6, rowClassName = '' }: SkeletonRowsProps) {\n  return (\n    <div className=\"space-y-3\" aria-hidden=\"true\">\n      {Array.from({ length: count }).map((_, i) => (\n        <div\n          key={i}\n          className={`flex items-center gap-3 rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4 ${rowClassName}`}\n        >\n          <SkeletonLine width=\"w-8\" height=\"h-8\" className=\"rounded-full\" />\n          <div className=\"flex-1 space-y-2\">\n            <SkeletonLine width=\"w-1/3\" />\n            <SkeletonLine width=\"w-1/2\" height=\"h-3\" />\n          </div>\n          <SkeletonLine width=\"w-16\" height=\"h-6\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface SkeletonCardsProps {\n  count?: number;\n  columns?: number;\n}\n\nexport function SkeletonCards({ count = 6, columns = 3 }: SkeletonCardsProps) {\n  const gridCols =\n    columns === 4\n      ? 'sm:grid-cols-2 lg:grid-cols-4'\n      : columns === 2\n        ? 'sm:grid-cols-2'\n        : 'sm:grid-cols-2 lg:grid-cols-3';\n  return (\n    <div className={`grid grid-cols-1 gap-4 ${gridCols}`} aria-hidden=\"true\">\n      {Array.from({ length: count }).map((_, i) => (\n        <div\n          key={i}\n          className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 space-y-3\"\n        >\n          <SkeletonLine width=\"w-2/3\" height=\"h-5\" />\n          <SkeletonLine width=\"w-full\" height=\"h-3\" />\n          <SkeletonLine width=\"w-1/2\" height=\"h-3\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface PageSkeletonProps {\n  header?: ReactNode;\n  variant?: 'rows' | 'cards' | 'detail';\n  count?: number;\n}\n\nexport function PageSkeleton({ header, variant = 'rows', count = 6 }: PageSkeletonProps) {\n  return (\n    <div className=\"space-y-6\" role=\"status\" aria-label=\"Loading content\">\n      {header}\n      {variant === 'cards' ? (\n        <SkeletonCards count={count} />\n      ) : variant === 'detail' ? (\n        <div className=\"space-y-3\">\n          <SkeletonLine width=\"w-1/3\" height=\"h-6\" />\n          <SkeletonLine width=\"w-2/3\" height=\"h-3\" />\n          <SkeletonLine width=\"w-full\" height=\"h-3\" />\n          <SkeletonLine width=\"w-3/4\" height=\"h-3\" />\n          <SkeletonRows count={Math.max(count - 2, 3)} />\n        </div>\n      ) : (\n        <SkeletonRows count={count} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;AAQA,SAAgB,EAAa,EAC3B,WAAQ,UACR,YAAS,OACT,eAAY,MACQ;AACpB,QAAO,kBAAC,OAAD,EAAK,WAAW,sCAAsC,EAAM,GAAG,EAAO,GAAG,KAAe,CAAA;;AAQjG,SAAgB,EAAa,EAAE,WAAQ,GAAG,kBAAe,MAAyB;AAChF,QACE,kBAAC,OAAD;EAAK,WAAU;EAAY,eAAY;YACpC,MAAM,KAAK,EAAE,QAAQ,GAAO,CAAC,CAAC,KAAK,GAAG,MACrC,kBAAC,OAAD;GAEE,WAAW,yGAAyG;aAFtH;IAIE,kBAAC,GAAD;KAAc,OAAM;KAAM,QAAO;KAAM,WAAU;KAAiB,CAAA;IAClE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAc,OAAM,SAAU,CAAA,EAC9B,kBAAC,GAAD;MAAc,OAAM;MAAQ,QAAO;MAAQ,CAAA,CACvC;;IACN,kBAAC,GAAD;KAAc,OAAM;KAAO,QAAO;KAAQ,CAAA;IACtC;KATC,EASD,CACN;EACE,CAAA;;AASV,SAAgB,EAAc,EAAE,WAAQ,GAAG,aAAU,KAAyB;AAO5E,QACE,kBAAC,OAAD;EAAK,WAAW,0BANhB,MAAY,IACR,kCACA,MAAY,IACV,mBACA;EAEgD,eAAY;YAC/D,MAAM,KAAK,EAAE,QAAQ,GAAO,CAAC,CAAC,KAAK,GAAG,MACrC,kBAAC,OAAD;GAEE,WAAU;aAFZ;IAIE,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD;KAAc,OAAM;KAAS,QAAO;KAAQ,CAAA;IAC5C,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IACvC;KANC,EAMD,CACN;EACE,CAAA;;AAUV,SAAgB,EAAa,EAAE,WAAQ,aAAU,QAAQ,WAAQ,KAAwB;AACvF,QACE,kBAAC,OAAD;EAAK,WAAU;EAAY,MAAK;EAAS,cAAW;YAApD,CACG,GACA,MAAY,UACX,kBAAC,GAAD,EAAsB,UAAS,CAAA,GAC7B,MAAY,WACd,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD;KAAc,OAAM;KAAS,QAAO;KAAQ,CAAA;IAC5C,kBAAC,GAAD;KAAc,OAAM;KAAQ,QAAO;KAAQ,CAAA;IAC3C,kBAAC,GAAD,EAAc,OAAO,KAAK,IAAI,IAAQ,GAAG,EAAE,EAAI,CAAA;IAC3C;OAEN,kBAAC,GAAD,EAAqB,UAAS,CAAA,CAE5B"}

package/dist/components/shared/SearchInput.js

@@ -17,7 +17,7 @@ function c({ value: c, onChange: l, placeholder: u, className: d = "" }) {
 				value: c,
 				onChange: (e) => l(e.target.value),
 				placeholder: p,
-				className: "w-full pl-10 pr-10 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-transparent transition-all"
+				className: "w-full pl-10 pr-10 py-2 text-sm bg-bg-sunken border border-border-subtle rounded-input text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)] focus:border-border-strong transition-all duration-200"
 			}),
 			/* @__PURE__ */ o(i, { children: c && /* @__PURE__ */ o(a.button, {
 				initial: {

package/dist/components/shared/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/shared/SearchInput.tsx"],"sourcesContent":["import { Search, X } from 'lucide-react';\nimport { useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface SearchInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  className?: string;\n}\n\nexport function SearchInput({ value, onChange, placeholder, className = '' }: SearchInputProps) {\n  const tr = useTr();\n  const resolvedPlaceholder =\n    placeholder ?? tr('vibecontrols.shared.searchInput.placeholder', 'Search...');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleClear = () => {\n    onChange('');\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div className={`relative ${className}`}>\n      <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary\" />\n      <input\n        aria-label=\"control\"\n        ref={inputRef}\n        type=\"text\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={resolvedPlaceholder}\n        className=\"w-full pl-10 pr-10 py-2 text-sm bg-bg-sunken border border-border-default rounded-md text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-transparent transition-all\"\n      />\n      <AnimatePresence>\n        {value && (\n          <motion.button\n            initial={{ opacity: 0, scale: 0.8 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={{ duration: 0.15 }}\n            onClick={handleClear}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n          >\n            <X className=\"size-4 text-text-secondary\" />\n          </motion.button>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,EAAY,EAAE,UAAO,aAAU,gBAAa,eAAY,MAAwB;CAC9F,IAAM,IAAK,GAAO,EACZ,IACJ,KAAe,EAAG,+CAA+C,YAAY,EACzE,IAAW,EAAyB,KAAK;AAO/C,QACE,kBAAC,OAAD;EAAK,WAAW,YAAY;YAA5B;GACE,kBAAC,GAAD,EAAQ,WAAU,uEAAwE,CAAA;GAC1F,kBAAC,SAAD;IACE,cAAW;IACX,KAAK;IACL,MAAK;IACE;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;IACzC,aAAa;IACb,WAAU;IACV,CAAA;GACF,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,QAAR;IACE,SAAS;KAAE,SAAS;KAAG,OAAO;KAAK;IACnC,SAAS;KAAE,SAAS;KAAG,OAAO;KAAG;IACjC,MAAM;KAAE,SAAS;KAAG,OAAO;KAAK;IAChC,YAAY,EAAE,UAAU,KAAM;IAC9B,eAxBgB;AAExB,KADA,EAAS,GAAG,EACZ,EAAS,SAAS,OAAO;;IAuBjB,WAAU;cAEV,kBAAC,GAAD,EAAG,WAAU,8BAA+B,CAAA;IAC9B,CAAA,EAEF,CAAA;GACd"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/shared/SearchInput.tsx"],"sourcesContent":["import { Search, X } from 'lucide-react';\nimport { useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface SearchInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder?: string;\n  className?: string;\n}\n\nexport function SearchInput({ value, onChange, placeholder, className = '' }: SearchInputProps) {\n  const tr = useTr();\n  const resolvedPlaceholder =\n    placeholder ?? tr('vibecontrols.shared.searchInput.placeholder', 'Search...');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleClear = () => {\n    onChange('');\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div className={`relative ${className}`}>\n      <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary\" />\n      <input\n        aria-label=\"control\"\n        ref={inputRef}\n        type=\"text\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={resolvedPlaceholder}\n        className=\"w-full pl-10 pr-10 py-2 text-sm bg-bg-sunken border border-border-subtle rounded-input text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-1 focus:ring-[var(--color-focus-ring)] focus:border-border-strong transition-all duration-200\"\n      />\n      <AnimatePresence>\n        {value && (\n          <motion.button\n            initial={{ opacity: 0, scale: 0.8 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={{ duration: 0.15 }}\n            onClick={handleClear}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n          >\n            <X className=\"size-4 text-text-secondary\" />\n          </motion.button>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,EAAY,EAAE,UAAO,aAAU,gBAAa,eAAY,MAAwB;CAC9F,IAAM,IAAK,GAAO,EACZ,IACJ,KAAe,EAAG,+CAA+C,YAAY,EACzE,IAAW,EAAyB,KAAK;AAO/C,QACE,kBAAC,OAAD;EAAK,WAAW,YAAY;YAA5B;GACE,kBAAC,GAAD,EAAQ,WAAU,uEAAwE,CAAA;GAC1F,kBAAC,SAAD;IACE,cAAW;IACX,KAAK;IACL,MAAK;IACE;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;IACzC,aAAa;IACb,WAAU;IACV,CAAA;GACF,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,QAAR;IACE,SAAS;KAAE,SAAS;KAAG,OAAO;KAAK;IACnC,SAAS;KAAE,SAAS;KAAG,OAAO;KAAG;IACjC,MAAM;KAAE,SAAS;KAAG,OAAO;KAAK;IAChC,YAAY,EAAE,UAAU,KAAM;IAC9B,eAxBgB;AAExB,KADA,EAAS,GAAG,EACZ,EAAS,SAAS,OAAO;;IAuBjB,WAAU;cAEV,kBAAC,GAAD,EAAG,WAAU,8BAA+B,CAAA;IAC9B,CAAA,EAEF,CAAA;GACd"}

package/dist/components/shared/StatCard.js

@@ -5,14 +5,14 @@ import { AnimatedCounter as a } from "@burdenoff/fe-libs/shared/motion";
 function o({ title: o, value: s, subtitle: c, icon: l, trend: u, variant: d = "default", onClick: f }) {
 	return /* @__PURE__ */ r(f ? "button" : "div", {
 		onClick: f,
-		className: `p-4 rounded-card border border-border-default ${{
+		className: `p-5 rounded-card border border-border-subtle shadow-elevation-1 ${{
 			default: "bg-bg-surface",
 			success: "bg-status-success-bg-subtle",
 			warning: "bg-status-warning-bg-subtle",
 			error: "bg-status-error-bg-subtle"
-		}[d]} ${f ? "hover:border-border-strong hover:shadow-[var(--shadow-elevation-1)] transition-[colors,box-shadow] duration-150 cursor-pointer w-full text-left" : ""}`,
+		}[d]} ${f ? "hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer w-full text-left" : ""}`,
 		children: /* @__PURE__ */ i("div", {
-			className: "flex flex-col gap-2",
+			className: "flex flex-col gap-2.5",
 			children: [
 				/* @__PURE__ */ i("div", {
 					className: "flex items-center justify-between",
@@ -20,8 +20,8 @@ function o({ title: o, value: s, subtitle: c, icon: l, trend: u, variant: d = "d
 						className: "text-sm font-medium text-text-secondary",
 						children: o
 					}), l && /* @__PURE__ */ r("div", {
-						className: `flex-shrink-0 size-8 rounded-lg flex items-center justify-center ${{
-							default: "bg-bg-sunken text-text-secondary",
+						className: `flex-shrink-0 size-9 rounded-lg flex items-center justify-center ${{
+							default: "bg-[var(--color-accent-soft)] text-text-primary",
 							success: "bg-status-success-bg-subtle text-status-success-text",
 							warning: "bg-status-warning-bg-subtle text-status-warning-text",
 							error: "bg-status-error-bg-subtle text-status-error-text"
@@ -30,7 +30,7 @@ function o({ title: o, value: s, subtitle: c, icon: l, trend: u, variant: d = "d
 					})]
 				}),
 				/* @__PURE__ */ r("div", {
-					className: "text-2xl font-bold text-text-primary",
+					className: "text-2xl font-semibold text-text-primary tabular-nums",
 					children: typeof s == "number" ? /* @__PURE__ */ r(a, { value: s }) : s
 				}),
 				c && /* @__PURE__ */ r("p", {
@@ -42,7 +42,7 @@ function o({ title: o, value: s, subtitle: c, icon: l, trend: u, variant: d = "d
 					children: [
 						u.value > 0 ? /* @__PURE__ */ r(n, { className: "size-4 text-status-success-text" }) : u.value < 0 ? /* @__PURE__ */ r(t, { className: "size-4 text-status-error-text" }) : /* @__PURE__ */ r(e, { className: "size-4 text-text-secondary" }),
 						/* @__PURE__ */ i("span", {
-							className: `text-xs font-medium ${u.value > 0 ? "text-status-success-text" : u.value < 0 ? "text-status-error-text" : "text-text-secondary"}`,
+							className: `text-xs font-medium tabular-nums ${u.value > 0 ? "text-status-success-text" : u.value < 0 ? "text-status-error-text" : "text-text-secondary"}`,
 							children: [
 								u.value > 0 ? "+" : "",
 								u.value,

package/dist/components/shared/StatCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.js","names":[],"sources":["../../../src/components/shared/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { TrendingUp, TrendingDown, Minus } from 'lucide-react';\nimport { AnimatedCounter } from '@burdenoff/fe-libs/shared/motion';\n\ninterface StatCardProps {\n  title: string;\n  value: string | number;\n  subtitle?: string;\n  icon?: ReactNode;\n  trend?: {\n    value: number;\n    label?: string;\n  };\n  variant?: 'default' | 'success' | 'warning' | 'error';\n  onClick?: () => void;\n}\n\nexport function StatCard({\n  title,\n  value,\n  subtitle,\n  icon,\n  trend,\n  variant = 'default',\n  onClick,\n}: StatCardProps) {\n  const variantStyles = {\n    default: 'bg-bg-surface',\n    success: 'bg-status-success-bg-subtle',\n    warning: 'bg-status-warning-bg-subtle',\n    error: 'bg-status-error-bg-subtle',\n  };\n\n  // Subtle tint + same-hue saturated text (passes AA in both themes); the old\n  // solid `bg-status-X-bg` + `text-status-X-text` was same-hue low-contrast.\n  const iconVariantStyles = {\n    default: 'bg-bg-sunken text-text-secondary',\n    success: 'bg-status-success-bg-subtle text-status-success-text',\n    warning: 'bg-status-warning-bg-subtle text-status-warning-text',\n    error: 'bg-status-error-bg-subtle text-status-error-text',\n  };\n\n  const Component = onClick ? 'button' : 'div';\n\n  return (\n    <Component\n      onClick={onClick}\n      className={`p-4 rounded-card border border-border-default ${variantStyles[variant]} ${onClick ? 'hover:border-border-strong hover:shadow-[var(--shadow-elevation-1)] transition-[colors,box-shadow] duration-150 cursor-pointer w-full text-left' : ''}`}\n    >\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-sm font-medium text-text-secondary\">{title}</p>\n          {icon && (\n            <div\n              className={`flex-shrink-0 size-8 rounded-lg flex items-center justify-center ${iconVariantStyles[variant]} [&>svg]:w-4 [&>svg]:h-4`}\n            >\n              {icon}\n            </div>\n          )}\n        </div>\n        <div className=\"text-2xl font-bold text-text-primary\">\n          {typeof value === 'number' ? <AnimatedCounter value={value} /> : value}\n        </div>\n        {subtitle && <p className=\"text-xs text-text-secondary\">{subtitle}</p>}\n        {trend && (\n          <div className=\"flex items-center gap-1\">\n            {trend.value > 0 ? (\n              <TrendingUp className=\"size-4 text-status-success-text\" />\n            ) : trend.value < 0 ? (\n              <TrendingDown className=\"size-4 text-status-error-text\" />\n            ) : (\n              <Minus className=\"size-4 text-text-secondary\" />\n            )}\n            <span\n              className={`text-xs font-medium ${\n                trend.value > 0\n                  ? 'text-status-success-text'\n                  : trend.value < 0\n                    ? 'text-status-error-text'\n                    : 'text-text-secondary'\n              }`}\n            >\n              {trend.value > 0 ? '+' : ''}\n              {trend.value}%\n            </span>\n            {trend.label && <span className=\"text-xs text-text-secondary\">{trend.label}</span>}\n          </div>\n        )}\n      </div>\n    </Component>\n  );\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAS,EACvB,UACA,UACA,aACA,SACA,UACA,aAAU,WACV,cACgB;AAmBhB,QACE,kBAHgB,IAAU,WAAW,OAGrC;EACW;EACT,WAAW,iDArBO;GACpB,SAAS;GACT,SAAS;GACT,SAAS;GACT,OAAO;GACR,CAgB6E,GAAS,GAAG,IAAU,oJAAoJ;YAEpP,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAA2C;MAAU,CAAA,EACjE,KACC,kBAAC,OAAD;MACE,WAAW,oEAnBG;OACxB,SAAS;OACT,SAAS;OACT,SAAS;OACT,OAAO;OACR,CAc4G,GAAS;gBAEzG;MACG,CAAA,CAEJ;;IACN,kBAAC,OAAD;KAAK,WAAU;eACZ,OAAO,KAAU,WAAW,kBAAC,GAAD,EAAwB,UAAS,CAAA,GAAG;KAC7D,CAAA;IACL,KAAY,kBAAC,KAAD;KAAG,WAAU;eAA+B;KAAa,CAAA;IACrE,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAM,QAAQ,IACb,kBAAC,GAAD,EAAY,WAAU,mCAAoC,CAAA,GACxD,EAAM,QAAQ,IAChB,kBAAC,GAAD,EAAc,WAAU,iCAAkC,CAAA,GAE1D,kBAAC,GAAD,EAAO,WAAU,8BAA+B,CAAA;MAElD,kBAAC,QAAD;OACE,WAAW,uBACT,EAAM,QAAQ,IACV,6BACA,EAAM,QAAQ,IACZ,2BACA;iBANV;QASG,EAAM,QAAQ,IAAI,MAAM;QACxB,EAAM;QAAM;QACR;;MACN,EAAM,SAAS,kBAAC,QAAD;OAAM,WAAU;iBAA+B,EAAM;OAAa,CAAA;MAC9E;;IAEJ;;EACI,CAAA"}
+{"version":3,"file":"StatCard.js","names":[],"sources":["../../../src/components/shared/StatCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { TrendingUp, TrendingDown, Minus } from 'lucide-react';\nimport { AnimatedCounter } from '@burdenoff/fe-libs/shared/motion';\n\ninterface StatCardProps {\n  title: string;\n  value: string | number;\n  subtitle?: string;\n  icon?: ReactNode;\n  trend?: {\n    value: number;\n    label?: string;\n  };\n  variant?: 'default' | 'success' | 'warning' | 'error';\n  onClick?: () => void;\n}\n\nexport function StatCard({\n  title,\n  value,\n  subtitle,\n  icon,\n  trend,\n  variant = 'default',\n  onClick,\n}: StatCardProps) {\n  const variantStyles = {\n    default: 'bg-bg-surface',\n    success: 'bg-status-success-bg-subtle',\n    warning: 'bg-status-warning-bg-subtle',\n    error: 'bg-status-error-bg-subtle',\n  };\n\n  // Subtle tint + same-hue saturated text (passes AA in both themes); the old\n  // solid `bg-status-X-bg` + `text-status-X-text` was same-hue low-contrast.\n  // The neutral/default tile uses the brand accent wash so metric cards lead\n  // with the theme accent rather than a flat grey.\n  const iconVariantStyles = {\n    default: 'bg-[var(--color-accent-soft)] text-text-primary',\n    success: 'bg-status-success-bg-subtle text-status-success-text',\n    warning: 'bg-status-warning-bg-subtle text-status-warning-text',\n    error: 'bg-status-error-bg-subtle text-status-error-text',\n  };\n\n  const Component = onClick ? 'button' : 'div';\n\n  return (\n    <Component\n      onClick={onClick}\n      className={`p-5 rounded-card border border-border-subtle shadow-elevation-1 ${variantStyles[variant]} ${onClick ? 'hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer w-full text-left' : ''}`}\n    >\n      <div className=\"flex flex-col gap-2.5\">\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-sm font-medium text-text-secondary\">{title}</p>\n          {icon && (\n            <div\n              className={`flex-shrink-0 size-9 rounded-lg flex items-center justify-center ${iconVariantStyles[variant]} [&>svg]:w-4 [&>svg]:h-4`}\n            >\n              {icon}\n            </div>\n          )}\n        </div>\n        <div className=\"text-2xl font-semibold text-text-primary tabular-nums\">\n          {typeof value === 'number' ? <AnimatedCounter value={value} /> : value}\n        </div>\n        {subtitle && <p className=\"text-xs text-text-secondary\">{subtitle}</p>}\n        {trend && (\n          <div className=\"flex items-center gap-1\">\n            {trend.value > 0 ? (\n              <TrendingUp className=\"size-4 text-status-success-text\" />\n            ) : trend.value < 0 ? (\n              <TrendingDown className=\"size-4 text-status-error-text\" />\n            ) : (\n              <Minus className=\"size-4 text-text-secondary\" />\n            )}\n            <span\n              className={`text-xs font-medium tabular-nums ${\n                trend.value > 0\n                  ? 'text-status-success-text'\n                  : trend.value < 0\n                    ? 'text-status-error-text'\n                    : 'text-text-secondary'\n              }`}\n            >\n              {trend.value > 0 ? '+' : ''}\n              {trend.value}%\n            </span>\n            {trend.label && <span className=\"text-xs text-text-secondary\">{trend.label}</span>}\n          </div>\n        )}\n      </div>\n    </Component>\n  );\n}\n"],"mappings":";;;;AAiBA,SAAgB,EAAS,EACvB,UACA,UACA,aACA,SACA,UACA,aAAU,WACV,cACgB;AAqBhB,QACE,kBAHgB,IAAU,WAAW,OAGrC;EACW;EACT,WAAW,mEAvBO;GACpB,SAAS;GACT,SAAS;GACT,SAAS;GACT,OAAO;GACR,CAkB+F,GAAS,GAAG,IAAU,2KAA2K;YAE7R,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAA2C;MAAU,CAAA,EACjE,KACC,kBAAC,OAAD;MACE,WAAW,oEAnBG;OACxB,SAAS;OACT,SAAS;OACT,SAAS;OACT,OAAO;OACR,CAc4G,GAAS;gBAEzG;MACG,CAAA,CAEJ;;IACN,kBAAC,OAAD;KAAK,WAAU;eACZ,OAAO,KAAU,WAAW,kBAAC,GAAD,EAAwB,UAAS,CAAA,GAAG;KAC7D,CAAA;IACL,KAAY,kBAAC,KAAD;KAAG,WAAU;eAA+B;KAAa,CAAA;IACrE,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,EAAM,QAAQ,IACb,kBAAC,GAAD,EAAY,WAAU,mCAAoC,CAAA,GACxD,EAAM,QAAQ,IAChB,kBAAC,GAAD,EAAc,WAAU,iCAAkC,CAAA,GAE1D,kBAAC,GAAD,EAAO,WAAU,8BAA+B,CAAA;MAElD,kBAAC,QAAD;OACE,WAAW,oCACT,EAAM,QAAQ,IACV,6BACA,EAAM,QAAQ,IACZ,2BACA;iBANV;QASG,EAAM,QAAQ,IAAI,MAAM;QACxB,EAAM;QAAM;QACR;;MACN,EAAM,SAAS,kBAAC,QAAD;OAAM,WAAU;iBAA+B,EAAM;OAAa,CAAA;MAC9E;;IAEJ;;EACI,CAAA"}

package/dist/components/templates/PublishTemplateForm.js

@@ -45,7 +45,7 @@ var u = [
 					className: "px-6 py-5 space-y-4",
 					children: [
 						N && /* @__PURE__ */ c("div", {
-							className: "p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
+							className: "p-3 bg-status-error-bg-subtle text-status-error-text text-sm rounded-md",
 							children: N
 						}),
 						/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ l("label", {
@@ -198,7 +198,7 @@ var u = [
 												let t = `{{${e.name}}}`;
 												navigator.clipboard?.writeText(t).catch(() => {}), w((e) => e + t);
 											},
-											className: "px-1.5 py-0.5 bg-bg-sunken hover:bg-action-primary-bg/10 border border-border-default rounded text-xs font-mono text-text-secondary hover:text-action-primary-bg transition-colors",
+											className: "px-1.5 py-0.5 bg-bg-sunken hover:bg-[var(--color-accent-soft)] border border-border-default rounded text-xs font-mono text-text-secondary hover:text-action-primary-bg transition-colors",
 											children: `{{${e.name}}}`
 										}, e.name))]
 									})]

package/dist/components/templates/PublishTemplateForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PublishTemplateForm.js","names":[],"sources":["../../../src/components/templates/PublishTemplateForm.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState, useRef } from 'react';\nimport { motion } from 'framer-motion';\nimport { Upload, X, ChevronDown, Github } from 'lucide-react';\nimport { TemplateVariableEditor } from './TemplateVariableEditor';\nimport type { TemplateVariable } from './TemplateVariableEditor';\n\nexport interface PublishTemplateFormData {\n  name: string;\n  description: string;\n  category: string;\n  version: string;\n  setupInstructions: string;\n  variables: TemplateVariable[];\n  sourceRepositoryUrl: string;\n}\n\ninterface PublishTemplateFormProps {\n  componentName: string;\n  componentRepositoryUrl?: string | null;\n  onClose: () => void;\n  onSubmit: (data: PublishTemplateFormData) => Promise<void>;\n}\n\nconst CATEGORIES = [\n  'STARTER',\n  'MICROSERVICE',\n  'FRONTEND',\n  'BACKEND',\n  'FULLSTACK',\n  'INFRASTRUCTURE',\n  'LIBRARY',\n  'CUSTOM',\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\nexport const PublishTemplateForm: FC<PublishTemplateFormProps> = ({\n  componentName,\n  componentRepositoryUrl,\n  onClose,\n  onSubmit,\n}) => {\n  const nameRef = useRef<HTMLInputElement>(null);\n  const [description, setDescription] = useState('');\n  const [category, setCategory] = useState('CUSTOM');\n  const [version, setVersion] = useState('');\n  const [setupInstructions, setSetupInstructions] = useState('');\n  const [variables, setVariables] = useState<TemplateVariable[]>([]);\n  const [sourceRepositoryUrl, setSourceRepositoryUrl] = useState(componentRepositoryUrl ?? '');\n  const [showAdvanced, setShowAdvanced] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleSubmit = async () => {\n    const name = nameRef.current?.value?.trim();\n    if (!name) {\n      setError('Template name is required');\n      return;\n    }\n    const repoUrl = sourceRepositoryUrl.trim();\n    if (!repoUrl) {\n      setError(\n        'GitHub repository URL is required — templates without a source repo cannot be forked'\n      );\n      return;\n    }\n    if (!/^https?:\\/\\/github\\.com\\/.+\\/.+/.test(repoUrl)) {\n      setError('Repository URL must be a valid GitHub URL (https://github.com/owner/repo)');\n      return;\n    }\n    setLoading(true);\n    setError(null);\n    try {\n      await onSubmit({\n        name,\n        description,\n        category,\n        version,\n        setupInstructions,\n        variables,\n        sourceRepositoryUrl: repoUrl,\n      });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to publish template');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 flex items-start justify-center z-50 p-4 overflow-y-auto\"\n      style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}\n    >\n      <motion.div\n        initial={{ opacity: 0, y: -20 }}\n        animate={{ opacity: 1, y: 0 }}\n        className=\"bg-bg-surface rounded-lg w-full max-w-xl my-8 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            <Upload className=\"size-4 text-action-primary-bg\" />\n            Publish as Template\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        {/* Body */}\n        <div className=\"px-6 py-5 space-y-4\">\n          {error && (\n            <div className=\"p-3 bg-status-error-bg text-status-error-text text-sm rounded-md\">\n              {error}\n            </div>\n          )}\n\n          <div>\n            <label\n              htmlFor=\"publishtemplateform-29\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              Template Name <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"publishtemplateform-29\"\n              aria-label=\"My Reusable Service Template\"\n              ref={nameRef}\n              className={inputCls}\n              defaultValue={componentName}\n              placeholder=\"My Reusable Service Template\"\n            />\n          </div>\n\n          <div>\n            <label\n              htmlFor=\"publishtemplateform-28\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              <span className=\"flex items-center gap-1.5\">\n                <Github className=\"size-3.5\" />\n                Source Repository <span className=\"text-status-error-text\">*</span>\n              </span>\n            </label>\n            <input\n              id=\"publishtemplateform-28\"\n              aria-label=\"https://github.com/your-org/your-repo\"\n              className={inputCls}\n              placeholder=\"https://github.com/your-org/your-repo\"\n              value={sourceRepositoryUrl}\n              onChange={(e) => setSourceRepositoryUrl(e.target.value)}\n            />\n            <p className=\"mt-1 text-xs text-text-muted\">\n              When someone uses this template, this repo will be forked into their new component\n              repo.\n            </p>\n          </div>\n\n          <div>\n            <label\n              htmlFor=\"publishtemplateform-27\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              Description\n            </label>\n            <textarea\n              id=\"publishtemplateform-27\"\n              aria-label=\"What does this template create? Who is it for?\"\n              className={`${inputCls} resize-none`}\n              rows={2}\n              placeholder=\"What does this template create? Who is it for?\"\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n            />\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <label\n                htmlFor=\"publishtemplateform-26\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Category\n              </label>\n              <select\n                id=\"publishtemplateform-26\"\n                className={inputCls}\n                value={category}\n                onChange={(e) => setCategory(e.target.value)}\n              >\n                {CATEGORIES.map((c) => (\n                  <option key={c} value={c}>\n                    {c.charAt(0) + c.slice(1).toLowerCase()}\n                  </option>\n                ))}\n              </select>\n            </div>\n            <div>\n              <label\n                htmlFor=\"publishtemplateform-25\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Version\n              </label>\n              <input\n                id=\"publishtemplateform-25\"\n                aria-label=\"1.0.0\"\n                className={inputCls}\n                placeholder=\"1.0.0\"\n                value={version}\n                onChange={(e) => setVersion(e.target.value)}\n              />\n            </div>\n          </div>\n\n          {/* Advanced section */}\n          <div>\n            <button\n              type=\"button\"\n              onClick={() => setShowAdvanced(!showAdvanced)}\n              className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            >\n              <ChevronDown\n                className={`size-4 transition-transform ${showAdvanced ? 'rotate-180' : ''}`}\n              />\n              {showAdvanced ? 'Hide' : 'Show'} Advanced Options\n            </button>\n\n            {showAdvanced && (\n              <div className=\"mt-4 space-y-4\">\n                <div>\n                  <label\n                    htmlFor=\"publishtemplateform-24\"\n                    className=\"block text-sm font-medium text-text-primary mb-2\"\n                  >\n                    Template Variables\n                    <span className=\"text-text-muted font-normal ml-1\">\n                      — inputs users fill when cloning\n                    </span>\n                  </label>\n                  <TemplateVariableEditor value={variables} onChange={setVariables} />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"publishtemplateform-24\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    Setup Instructions\n                    <span className=\"text-text-muted font-normal ml-1\">(Markdown)</span>\n                  </label>\n                  <textarea\n                    id=\"publishtemplateform-24\"\n                    aria-label=\"control\"\n                    className={`${inputCls} resize-none font-mono text-xs`}\n                    rows={6}\n                    placeholder={`## Getting Started\\n\\n1. Clone the repository\\n2. Run \\`bun install\\`\\n3. Set the image source: {{source_repo}}`}\n                    value={setupInstructions}\n                    onChange={(e) => setSetupInstructions(e.target.value)}\n                  />\n                  <div className=\"mt-1.5 space-y-1\">\n                    <p className=\"text-xs text-text-muted\">\n                      Supports Markdown. Use{' '}\n                      <code className=\"px-1 py-0.5 bg-bg-sunken rounded text-text-secondary font-mono\">\n                        {'{{variableName}}'}\n                      </code>{' '}\n                      to insert the value a user provides when cloning.\n                    </p>\n                    {variables.filter((v) => v.name.trim()).length > 0 && (\n                      <div className=\"flex flex-wrap gap-1 items-center\">\n                        <span className=\"text-xs text-text-muted\">Available:</span>\n                        {variables\n                          .filter((v) => v.name.trim())\n                          .map((v) => (\n                            <button\n                              key={v.name}\n                              type=\"button\"\n                              title=\"Click to copy\"\n                              onClick={() => {\n                                const token = `{{${v.name}}}`;\n                                navigator.clipboard?.writeText(token).catch(() => {});\n                                setSetupInstructions((prev) => prev + token);\n                              }}\n                              className=\"px-1.5 py-0.5 bg-bg-sunken hover:bg-action-primary-bg/10 border border-border-default rounded text-xs font-mono text-text-secondary hover:text-action-primary-bg transition-colors\"\n                            >\n                              {`{{${v.name}}}`}\n                            </button>\n                          ))}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex justify-end gap-3 px-6 py-4 border-t border-border-default\">\n          <button\n            type=\"button\"\n            onClick={onClose}\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            Cancel\n          </button>\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            <Upload className=\"size-4\" />\n            {loading ? 'Publishing...' : 'Publish Template'}\n          </button>\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PublishTemplateForm.js","names":[],"sources":["../../../src/components/templates/PublishTemplateForm.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useState, useRef } from 'react';\nimport { motion } from 'framer-motion';\nimport { Upload, X, ChevronDown, Github } from 'lucide-react';\nimport { TemplateVariableEditor } from './TemplateVariableEditor';\nimport type { TemplateVariable } from './TemplateVariableEditor';\n\nexport interface PublishTemplateFormData {\n  name: string;\n  description: string;\n  category: string;\n  version: string;\n  setupInstructions: string;\n  variables: TemplateVariable[];\n  sourceRepositoryUrl: string;\n}\n\ninterface PublishTemplateFormProps {\n  componentName: string;\n  componentRepositoryUrl?: string | null;\n  onClose: () => void;\n  onSubmit: (data: PublishTemplateFormData) => Promise<void>;\n}\n\nconst CATEGORIES = [\n  'STARTER',\n  'MICROSERVICE',\n  'FRONTEND',\n  'BACKEND',\n  'FULLSTACK',\n  'INFRASTRUCTURE',\n  'LIBRARY',\n  'CUSTOM',\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\nexport const PublishTemplateForm: FC<PublishTemplateFormProps> = ({\n  componentName,\n  componentRepositoryUrl,\n  onClose,\n  onSubmit,\n}) => {\n  const nameRef = useRef<HTMLInputElement>(null);\n  const [description, setDescription] = useState('');\n  const [category, setCategory] = useState('CUSTOM');\n  const [version, setVersion] = useState('');\n  const [setupInstructions, setSetupInstructions] = useState('');\n  const [variables, setVariables] = useState<TemplateVariable[]>([]);\n  const [sourceRepositoryUrl, setSourceRepositoryUrl] = useState(componentRepositoryUrl ?? '');\n  const [showAdvanced, setShowAdvanced] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleSubmit = async () => {\n    const name = nameRef.current?.value?.trim();\n    if (!name) {\n      setError('Template name is required');\n      return;\n    }\n    const repoUrl = sourceRepositoryUrl.trim();\n    if (!repoUrl) {\n      setError(\n        'GitHub repository URL is required — templates without a source repo cannot be forked'\n      );\n      return;\n    }\n    if (!/^https?:\\/\\/github\\.com\\/.+\\/.+/.test(repoUrl)) {\n      setError('Repository URL must be a valid GitHub URL (https://github.com/owner/repo)');\n      return;\n    }\n    setLoading(true);\n    setError(null);\n    try {\n      await onSubmit({\n        name,\n        description,\n        category,\n        version,\n        setupInstructions,\n        variables,\n        sourceRepositoryUrl: repoUrl,\n      });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to publish template');\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div\n      className=\"fixed inset-0 flex items-start justify-center z-50 p-4 overflow-y-auto\"\n      style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}\n    >\n      <motion.div\n        initial={{ opacity: 0, y: -20 }}\n        animate={{ opacity: 1, y: 0 }}\n        className=\"bg-bg-surface rounded-lg w-full max-w-xl my-8 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            <Upload className=\"size-4 text-action-primary-bg\" />\n            Publish as Template\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        {/* Body */}\n        <div className=\"px-6 py-5 space-y-4\">\n          {error && (\n            <div className=\"p-3 bg-status-error-bg-subtle text-status-error-text text-sm rounded-md\">\n              {error}\n            </div>\n          )}\n\n          <div>\n            <label\n              htmlFor=\"publishtemplateform-29\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              Template Name <span className=\"text-status-error-text\">*</span>\n            </label>\n            <input\n              id=\"publishtemplateform-29\"\n              aria-label=\"My Reusable Service Template\"\n              ref={nameRef}\n              className={inputCls}\n              defaultValue={componentName}\n              placeholder=\"My Reusable Service Template\"\n            />\n          </div>\n\n          <div>\n            <label\n              htmlFor=\"publishtemplateform-28\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              <span className=\"flex items-center gap-1.5\">\n                <Github className=\"size-3.5\" />\n                Source Repository <span className=\"text-status-error-text\">*</span>\n              </span>\n            </label>\n            <input\n              id=\"publishtemplateform-28\"\n              aria-label=\"https://github.com/your-org/your-repo\"\n              className={inputCls}\n              placeholder=\"https://github.com/your-org/your-repo\"\n              value={sourceRepositoryUrl}\n              onChange={(e) => setSourceRepositoryUrl(e.target.value)}\n            />\n            <p className=\"mt-1 text-xs text-text-muted\">\n              When someone uses this template, this repo will be forked into their new component\n              repo.\n            </p>\n          </div>\n\n          <div>\n            <label\n              htmlFor=\"publishtemplateform-27\"\n              className=\"block text-sm font-medium text-text-primary mb-1\"\n            >\n              Description\n            </label>\n            <textarea\n              id=\"publishtemplateform-27\"\n              aria-label=\"What does this template create? Who is it for?\"\n              className={`${inputCls} resize-none`}\n              rows={2}\n              placeholder=\"What does this template create? Who is it for?\"\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n            />\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <label\n                htmlFor=\"publishtemplateform-26\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Category\n              </label>\n              <select\n                id=\"publishtemplateform-26\"\n                className={inputCls}\n                value={category}\n                onChange={(e) => setCategory(e.target.value)}\n              >\n                {CATEGORIES.map((c) => (\n                  <option key={c} value={c}>\n                    {c.charAt(0) + c.slice(1).toLowerCase()}\n                  </option>\n                ))}\n              </select>\n            </div>\n            <div>\n              <label\n                htmlFor=\"publishtemplateform-25\"\n                className=\"block text-sm font-medium text-text-primary mb-1\"\n              >\n                Version\n              </label>\n              <input\n                id=\"publishtemplateform-25\"\n                aria-label=\"1.0.0\"\n                className={inputCls}\n                placeholder=\"1.0.0\"\n                value={version}\n                onChange={(e) => setVersion(e.target.value)}\n              />\n            </div>\n          </div>\n\n          {/* Advanced section */}\n          <div>\n            <button\n              type=\"button\"\n              onClick={() => setShowAdvanced(!showAdvanced)}\n              className=\"flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            >\n              <ChevronDown\n                className={`size-4 transition-transform ${showAdvanced ? 'rotate-180' : ''}`}\n              />\n              {showAdvanced ? 'Hide' : 'Show'} Advanced Options\n            </button>\n\n            {showAdvanced && (\n              <div className=\"mt-4 space-y-4\">\n                <div>\n                  <label\n                    htmlFor=\"publishtemplateform-24\"\n                    className=\"block text-sm font-medium text-text-primary mb-2\"\n                  >\n                    Template Variables\n                    <span className=\"text-text-muted font-normal ml-1\">\n                      — inputs users fill when cloning\n                    </span>\n                  </label>\n                  <TemplateVariableEditor value={variables} onChange={setVariables} />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"publishtemplateform-24\"\n                    className=\"block text-sm font-medium text-text-primary mb-1\"\n                  >\n                    Setup Instructions\n                    <span className=\"text-text-muted font-normal ml-1\">(Markdown)</span>\n                  </label>\n                  <textarea\n                    id=\"publishtemplateform-24\"\n                    aria-label=\"control\"\n                    className={`${inputCls} resize-none font-mono text-xs`}\n                    rows={6}\n                    placeholder={`## Getting Started\\n\\n1. Clone the repository\\n2. Run \\`bun install\\`\\n3. Set the image source: {{source_repo}}`}\n                    value={setupInstructions}\n                    onChange={(e) => setSetupInstructions(e.target.value)}\n                  />\n                  <div className=\"mt-1.5 space-y-1\">\n                    <p className=\"text-xs text-text-muted\">\n                      Supports Markdown. Use{' '}\n                      <code className=\"px-1 py-0.5 bg-bg-sunken rounded text-text-secondary font-mono\">\n                        {'{{variableName}}'}\n                      </code>{' '}\n                      to insert the value a user provides when cloning.\n                    </p>\n                    {variables.filter((v) => v.name.trim()).length > 0 && (\n                      <div className=\"flex flex-wrap gap-1 items-center\">\n                        <span className=\"text-xs text-text-muted\">Available:</span>\n                        {variables\n                          .filter((v) => v.name.trim())\n                          .map((v) => (\n                            <button\n                              key={v.name}\n                              type=\"button\"\n                              title=\"Click to copy\"\n                              onClick={() => {\n                                const token = `{{${v.name}}}`;\n                                navigator.clipboard?.writeText(token).catch(() => {});\n                                setSetupInstructions((prev) => prev + token);\n                              }}\n                              className=\"px-1.5 py-0.5 bg-bg-sunken hover:bg-[var(--color-accent-soft)] border border-border-default rounded text-xs font-mono text-text-secondary hover:text-action-primary-bg transition-colors\"\n                            >\n                              {`{{${v.name}}}`}\n                            </button>\n                          ))}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex justify-end gap-3 px-6 py-4 border-t border-border-default\">\n          <button\n            type=\"button\"\n            onClick={onClose}\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            Cancel\n          </button>\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            <Upload className=\"size-4\" />\n            {loading ? 'Publishing...' : 'Publish Template'}\n          </button>\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/templates/TemplateCard.js

@@ -5,10 +5,10 @@ import { motion as s } from "framer-motion";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/templates/TemplateCard.tsx
 var u = {
-	SERVICE: "bg-action-primary-bg/10 text-action-primary-bg",
-	FRONTEND: "bg-status-info-bg text-status-info-text",
-	LIBRARY: "bg-status-warning-bg text-status-warning-text",
-	INFRASTRUCTURE: "bg-status-success-bg text-status-success-text",
+	SERVICE: "bg-[var(--color-accent-soft)] text-text-primary",
+	FRONTEND: "bg-status-info-bg-subtle text-status-info-text",
+	LIBRARY: "bg-status-warning-bg-subtle text-status-warning-text",
+	INFRASTRUCTURE: "bg-status-success-bg-subtle text-status-success-text",
 	STARTER: "bg-bg-sunken text-text-secondary"
 }, d = ({ template: d, onOpen: f, className: p = "" }) => {
 	let { t: m } = t(), h = (e, t) => {
@@ -27,7 +27,7 @@ var u = {
 			/* @__PURE__ */ l("div", {
 				className: "flex items-start gap-2 sm:gap-3",
 				children: [/* @__PURE__ */ c("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",
+					className: "flex-shrink-0 size-8 sm:w-10 sm:h-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center",
 					children: /* @__PURE__ */ c(r, { className: "size-4 sm:w-5 sm:h-5 text-action-primary-bg" })
 				}), /* @__PURE__ */ l("div", {
 					className: "min-w-0 flex-1",

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

@@ -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"}
+{"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-text-primary',\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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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"}