@burdenoff/microfe-vibecontrols 2026.528.6 → 2026.528.7

package/dist/pages/PluginsCatalogPage.js

@@ -0,0 +1,287 @@
+import { useTr as e } from "../shared/hooks/useTr.js";
+import { PLUGIN_CATALOG as t } from "../constants/pluginCatalog.js";
+import { useCallback as n, useMemo as r, useState as i } from "react";
+import { Check as a, ChevronDown as o, Copy as s, Package as c, Plug as l, Search as u, X as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Card as m, PageContainer as h } from "@burdenoff/fe-libs/ui";
+import { MotionPage as g } from "@burdenoff/fe-libs/shared/motion";
+//#region src/pages/PluginsCatalogPage.tsx
+var _ = [
+	{
+		value: "all",
+		labelKey: "vibecontrols.plugins.category.all",
+		labelFallback: "All"
+	},
+	{
+		value: "ai-core",
+		labelKey: "vibecontrols.plugins.category.aiCore",
+		labelFallback: "AI Core"
+	},
+	{
+		value: "ai-provider",
+		labelKey: "vibecontrols.plugins.category.aiProvider",
+		labelFallback: "AI Providers"
+	},
+	{
+		value: "plan-core",
+		labelKey: "vibecontrols.plugins.category.planCore",
+		labelFallback: "Plan Core"
+	},
+	{
+		value: "plan-provider",
+		labelKey: "vibecontrols.plugins.category.planProvider",
+		labelFallback: "Plan Providers"
+	},
+	{
+		value: "session-core",
+		labelKey: "vibecontrols.plugins.category.sessionCore",
+		labelFallback: "Session Core"
+	},
+	{
+		value: "session-provider",
+		labelKey: "vibecontrols.plugins.category.sessionProvider",
+		labelFallback: "Session Providers"
+	},
+	{
+		value: "tunnel",
+		labelKey: "vibecontrols.plugins.category.tunnel",
+		labelFallback: "Tunnel"
+	},
+	{
+		value: "vcs",
+		labelKey: "vibecontrols.plugins.category.vcs",
+		labelFallback: "VCS"
+	},
+	{
+		value: "api-playground",
+		labelKey: "vibecontrols.plugins.category.apiPlayground",
+		labelFallback: "API Playground"
+	},
+	{
+		value: "gitops-core",
+		labelKey: "vibecontrols.plugins.category.gitopsCore",
+		labelFallback: "GitOps Core"
+	},
+	{
+		value: "gitops-provider",
+		labelKey: "vibecontrols.plugins.category.gitopsProvider",
+		labelFallback: "GitOps Providers"
+	},
+	{
+		value: "security-core",
+		labelKey: "vibecontrols.plugins.category.securityCore",
+		labelFallback: "Security Core"
+	},
+	{
+		value: "security-provider",
+		labelKey: "vibecontrols.plugins.category.securityProvider",
+		labelFallback: "Security Providers"
+	},
+	{
+		value: "tool",
+		labelKey: "vibecontrols.plugins.category.tool",
+		labelFallback: "Tools"
+	}
+];
+function v(e) {
+	return e.endsWith("-core") ? "Meta" : e.endsWith("-provider") ? "Provider" : "Plugin";
+}
+function y(e) {
+	switch (e) {
+		case "Meta": return "bg-accent-purple-subtle text-accent-purple border-accent-purple/30";
+		case "Provider": return "bg-status-info-bg text-status-info-text border-status-info-border";
+		default: return "bg-bg-sunken text-text-secondary border-border-default";
+	}
+}
+function b({ text: e, ariaLabel: t }) {
+	let [r, o] = i(!1);
+	return /* @__PURE__ */ f("button", {
+		type: "button",
+		onClick: n(async () => {
+			try {
+				typeof navigator < "u" && navigator.clipboard && await navigator.clipboard.writeText(e), o(!0), window.setTimeout(() => o(!1), 1500);
+			} catch {
+				o(!1);
+			}
+		}, [e]),
+		"aria-label": t,
+		className: "inline-flex items-center justify-center size-7 rounded border border-border-default bg-bg-surface text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors flex-shrink-0",
+		children: f(r ? a : s, { className: "size-3.5" })
+	});
+}
+function x({ plugin: t }) {
+	let n = e(), r = v(t.category), a = `npm install ${t.packageName}`, s = `import plugin from '${t.packageName}';`, [c, l] = i(!1), [u, d] = i(!1);
+	return /* @__PURE__ */ f(m, {
+		className: "flex flex-col h-full p-0 bg-bg-surface border-border-default",
+		children: /* @__PURE__ */ p("div", {
+			className: "flex flex-col gap-3 p-4",
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: "flex items-start justify-between gap-3",
+					children: [/* @__PURE__ */ p("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ f("h3", {
+							className: "text-base font-semibold text-text-primary truncate",
+							children: t.displayName
+						}), /* @__PURE__ */ f("p", {
+							className: "text-xs text-text-secondary font-mono truncate mt-1",
+							children: t.packageName
+						})]
+					}), /* @__PURE__ */ f("span", {
+						className: `inline-flex items-center gap-1 px-2 py-0.5 text-[10px] uppercase tracking-wide font-semibold rounded-full border ${y(r)} flex-shrink-0`,
+						children: r
+					})]
+				}),
+				/* @__PURE__ */ f("p", {
+					className: "text-sm text-text-secondary leading-snug",
+					children: t.description
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "mt-1 space-y-1.5",
+					children: [/* @__PURE__ */ f("p", {
+						className: "text-[11px] font-medium uppercase tracking-wide text-text-secondary",
+						children: n("vibecontrols.plugins.install", "Install")
+					}), /* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-2.5 py-1.5",
+						children: [/* @__PURE__ */ f("code", {
+							className: "flex-1 text-xs font-mono text-text-primary truncate",
+							children: a
+						}), /* @__PURE__ */ f(b, {
+							text: a,
+							ariaLabel: n("vibecontrols.plugins.copyInstall", "Copy install command for {{name}}", { name: t.displayName })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ p("button", {
+						type: "button",
+						onClick: () => l((e) => !e),
+						className: "w-full flex items-center justify-between gap-2 text-left text-xs font-medium text-text-secondary hover:text-text-primary transition-colors",
+						"aria-expanded": c,
+						children: [/* @__PURE__ */ f("span", { children: n("vibecontrols.plugins.usage", "Usage") }), /* @__PURE__ */ f(o, { className: `size-3.5 transition-transform ${c ? "rotate-180" : ""}` })]
+					}), c && /* @__PURE__ */ p("div", {
+						className: "flex items-start gap-2 rounded-md border border-border-default bg-bg-sunken px-2.5 py-2",
+						children: [/* @__PURE__ */ f("code", {
+							className: "flex-1 text-xs font-mono text-text-primary whitespace-pre-wrap break-all",
+							children: s
+						}), /* @__PURE__ */ f(b, {
+							text: s,
+							ariaLabel: n("vibecontrols.plugins.copyUsage", "Copy usage snippet for {{name}}", { name: t.displayName })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ p("button", {
+						type: "button",
+						onClick: () => d((e) => !e),
+						className: "w-full flex items-center justify-between gap-2 text-left text-xs font-medium text-text-secondary hover:text-text-primary transition-colors",
+						"aria-expanded": u,
+						children: [/* @__PURE__ */ f("span", { children: n("vibecontrols.plugins.commands", "Command reference") }), /* @__PURE__ */ f(o, { className: `size-3.5 transition-transform ${u ? "rotate-180" : ""}` })]
+					}), u && /* @__PURE__ */ f("div", {
+						className: "rounded-md border border-border-default bg-bg-sunken px-2.5 py-2",
+						children: /* @__PURE__ */ f("p", {
+							className: "text-xs text-text-secondary",
+							children: n("vibecontrols.plugins.commandsHint", "See the agent admin sub-panel or the plugin README for the documented command list.")
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+function S() {
+	let n = e(), [a, o] = i(""), [s, m] = i("all"), v = r(() => Object.values(t).sort((e, t) => e.displayName.localeCompare(t.displayName)), []), y = r(() => {
+		let e = a.trim().toLowerCase();
+		return v.filter((t) => s !== "all" && t.category !== s ? !1 : e ? `${t.displayName} ${t.description} ${t.packageName}`.toLowerCase().includes(e) : !0);
+	}, [
+		v,
+		a,
+		s
+	]);
+	return /* @__PURE__ */ f(h, {
+		padded: !1,
+		children: /* @__PURE__ */ p(g, {
+			className: "flex flex-col h-full",
+			children: [/* @__PURE__ */ p("div", {
+				className: "sticky top-0 z-10 border-b border-border-default bg-bg-surface px-4 sm:px-6 pt-4 pb-3 space-y-3",
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "flex items-start gap-3",
+						children: [/* @__PURE__ */ f(l, { className: "size-6 text-text-primary mt-0.5 flex-shrink-0" }), /* @__PURE__ */ p("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ f("h1", {
+								className: "text-xl font-bold text-text-primary",
+								children: n("vibecontrols.plugins.title", "Plugins")
+							}), /* @__PURE__ */ f("p", {
+								className: "text-sm text-text-secondary mt-0.5",
+								children: n("vibecontrols.plugins.description", "Browse and install plugins to extend your VibeControls agents.")
+							})]
+						})]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "relative",
+						children: [
+							/* @__PURE__ */ f(u, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary" }),
+							/* @__PURE__ */ f("input", {
+								type: "search",
+								value: a,
+								onChange: (e) => o(e.target.value),
+								placeholder: n("vibecontrols.plugins.searchPlaceholder", "Search by name, description, or package…"),
+								"aria-label": n("vibecontrols.plugins.searchLabel", "Search plugins"),
+								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"
+							}),
+							a && /* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => o(""),
+								"aria-label": n("vibecontrols.plugins.clearSearch", "Clear search"),
+								className: "absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-bg-elevated transition-colors",
+								children: /* @__PURE__ */ f(d, { className: "size-4 text-text-secondary" })
+							})
+						]
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "flex flex-wrap gap-2",
+						role: "tablist",
+						"aria-label": n("vibecontrols.plugins.categories", "Plugin categories"),
+						children: _.map((e) => {
+							let t = s === e.value;
+							return /* @__PURE__ */ f("button", {
+								type: "button",
+								role: "tab",
+								"aria-selected": t,
+								onClick: () => m(e.value),
+								className: `px-3 py-1 text-xs rounded-full border transition-colors ${t ? "bg-action-primary-bg text-action-primary-text border-action-primary-bg" : "bg-bg-surface text-text-secondary border-border-default hover:bg-bg-sunken hover:text-text-primary"}`,
+								children: n(e.labelKey, e.labelFallback)
+							}, e.value);
+						})
+					})
+				]
+			}), /* @__PURE__ */ f("div", {
+				className: "flex-1 px-4 sm:px-6 py-4",
+				children: y.length === 0 ? /* @__PURE__ */ p("div", {
+					className: "flex flex-col items-center justify-center text-center py-16 text-text-secondary",
+					children: [
+						/* @__PURE__ */ f(c, { className: "size-12 mb-3 opacity-50" }),
+						/* @__PURE__ */ f("p", {
+							className: "text-sm font-medium text-text-primary",
+							children: n("vibecontrols.plugins.empty.title", "No matching plugins")
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "text-xs mt-1",
+							children: n("vibecontrols.plugins.empty.description", "Try a different search term or category.")
+						})
+					]
+				}) : /* @__PURE__ */ f("div", {
+					className: "grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3",
+					children: y.map((e) => /* @__PURE__ */ f(x, { plugin: e }, e.packageName))
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { S as PluginsCatalogPage };
+
+//# sourceMappingURL=PluginsCatalogPage.js.map

package/dist/pages/PluginsCatalogPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginsCatalogPage.js","names":[],"sources":["../../src/pages/PluginsCatalogPage.tsx"],"sourcesContent":["import { useMemo, useState, useCallback } from 'react';\nimport { Check, ChevronDown, Copy, Package, Plug, Search, X } from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { PageContainer, Card } from '@burdenoff/fe-libs/ui';\nimport { PLUGIN_CATALOG, type PluginMeta } from '@/constants/pluginCatalog';\nimport { useTr } from '@/shared/hooks/useTr';\n\ntype PluginType = 'Meta' | 'Provider' | 'Plugin';\n\ninterface CategoryOption {\n  value: string;\n  labelKey: string;\n  labelFallback: string;\n}\n\nconst CATEGORY_OPTIONS: CategoryOption[] = [\n  { value: 'all', labelKey: 'vibecontrols.plugins.category.all', labelFallback: 'All' },\n  { value: 'ai-core', labelKey: 'vibecontrols.plugins.category.aiCore', labelFallback: 'AI Core' },\n  {\n    value: 'ai-provider',\n    labelKey: 'vibecontrols.plugins.category.aiProvider',\n    labelFallback: 'AI Providers',\n  },\n  {\n    value: 'plan-core',\n    labelKey: 'vibecontrols.plugins.category.planCore',\n    labelFallback: 'Plan Core',\n  },\n  {\n    value: 'plan-provider',\n    labelKey: 'vibecontrols.plugins.category.planProvider',\n    labelFallback: 'Plan Providers',\n  },\n  {\n    value: 'session-core',\n    labelKey: 'vibecontrols.plugins.category.sessionCore',\n    labelFallback: 'Session Core',\n  },\n  {\n    value: 'session-provider',\n    labelKey: 'vibecontrols.plugins.category.sessionProvider',\n    labelFallback: 'Session Providers',\n  },\n  { value: 'tunnel', labelKey: 'vibecontrols.plugins.category.tunnel', labelFallback: 'Tunnel' },\n  { value: 'vcs', labelKey: 'vibecontrols.plugins.category.vcs', labelFallback: 'VCS' },\n  {\n    value: 'api-playground',\n    labelKey: 'vibecontrols.plugins.category.apiPlayground',\n    labelFallback: 'API Playground',\n  },\n  {\n    value: 'gitops-core',\n    labelKey: 'vibecontrols.plugins.category.gitopsCore',\n    labelFallback: 'GitOps Core',\n  },\n  {\n    value: 'gitops-provider',\n    labelKey: 'vibecontrols.plugins.category.gitopsProvider',\n    labelFallback: 'GitOps Providers',\n  },\n  {\n    value: 'security-core',\n    labelKey: 'vibecontrols.plugins.category.securityCore',\n    labelFallback: 'Security Core',\n  },\n  {\n    value: 'security-provider',\n    labelKey: 'vibecontrols.plugins.category.securityProvider',\n    labelFallback: 'Security Providers',\n  },\n  { value: 'tool', labelKey: 'vibecontrols.plugins.category.tool', labelFallback: 'Tools' },\n];\n\nfunction derivePluginType(category: PluginMeta['category']): PluginType {\n  if (category.endsWith('-core')) return 'Meta';\n  if (category.endsWith('-provider')) return 'Provider';\n  return 'Plugin';\n}\n\nfunction typeBadgeClasses(type: PluginType): string {\n  switch (type) {\n    case 'Meta':\n      return 'bg-accent-purple-subtle text-accent-purple border-accent-purple/30';\n    case 'Provider':\n      return 'bg-status-info-bg text-status-info-text border-status-info-border';\n    default:\n      return 'bg-bg-sunken text-text-secondary border-border-default';\n  }\n}\n\ninterface CopyButtonProps {\n  text: string;\n  ariaLabel: string;\n}\n\nfunction CopyButton({ text, ariaLabel }: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const handleCopy = useCallback(async () => {\n    try {\n      if (typeof navigator !== 'undefined' && navigator.clipboard) {\n        await navigator.clipboard.writeText(text);\n      }\n      setCopied(true);\n      window.setTimeout(() => setCopied(false), 1500);\n    } catch {\n      setCopied(false);\n    }\n  }, [text]);\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleCopy}\n      aria-label={ariaLabel}\n      className=\"inline-flex items-center justify-center size-7 rounded border border-border-default bg-bg-surface text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors flex-shrink-0\"\n    >\n      {copied ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n    </button>\n  );\n}\n\ninterface PluginCardProps {\n  plugin: PluginMeta;\n}\n\nfunction PluginCard({ plugin }: PluginCardProps) {\n  const tr = useTr();\n  const type = derivePluginType(plugin.category);\n  const installCommand = `npm install ${plugin.packageName}`;\n  const usageSnippet = `import plugin from '${plugin.packageName}';`;\n\n  const [showUsage, setShowUsage] = useState(false);\n  const [showCommands, setShowCommands] = useState(false);\n\n  return (\n    <Card className=\"flex flex-col h-full p-0 bg-bg-surface border-border-default\">\n      <div className=\"flex flex-col gap-3 p-4\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0 flex-1\">\n            <h3 className=\"text-base font-semibold text-text-primary truncate\">\n              {plugin.displayName}\n            </h3>\n            <p className=\"text-xs text-text-secondary font-mono truncate mt-1\">\n              {plugin.packageName}\n            </p>\n          </div>\n          <span\n            className={`inline-flex items-center gap-1 px-2 py-0.5 text-[10px] uppercase tracking-wide font-semibold rounded-full border ${typeBadgeClasses(type)} flex-shrink-0`}\n          >\n            {type}\n          </span>\n        </div>\n\n        <p className=\"text-sm text-text-secondary leading-snug\">{plugin.description}</p>\n\n        <div className=\"mt-1 space-y-1.5\">\n          <p className=\"text-[11px] font-medium uppercase tracking-wide text-text-secondary\">\n            {tr('vibecontrols.plugins.install', 'Install')}\n          </p>\n          <div className=\"flex items-center gap-2 rounded-md border border-border-default bg-bg-sunken px-2.5 py-1.5\">\n            <code className=\"flex-1 text-xs font-mono text-text-primary truncate\">\n              {installCommand}\n            </code>\n            <CopyButton\n              text={installCommand}\n              ariaLabel={tr(\n                'vibecontrols.plugins.copyInstall',\n                'Copy install command for {{name}}',\n                {\n                  name: plugin.displayName,\n                }\n              )}\n            />\n          </div>\n        </div>\n\n        <div className=\"space-y-2\">\n          <button\n            type=\"button\"\n            onClick={() => setShowUsage((value) => !value)}\n            className=\"w-full flex items-center justify-between gap-2 text-left text-xs font-medium text-text-secondary hover:text-text-primary transition-colors\"\n            aria-expanded={showUsage}\n          >\n            <span>{tr('vibecontrols.plugins.usage', 'Usage')}</span>\n            <ChevronDown\n              className={`size-3.5 transition-transform ${showUsage ? 'rotate-180' : ''}`}\n            />\n          </button>\n          {showUsage && (\n            <div className=\"flex items-start gap-2 rounded-md border border-border-default bg-bg-sunken px-2.5 py-2\">\n              <code className=\"flex-1 text-xs font-mono text-text-primary whitespace-pre-wrap break-all\">\n                {usageSnippet}\n              </code>\n              <CopyButton\n                text={usageSnippet}\n                ariaLabel={tr('vibecontrols.plugins.copyUsage', 'Copy usage snippet for {{name}}', {\n                  name: plugin.displayName,\n                })}\n              />\n            </div>\n          )}\n        </div>\n\n        <div className=\"space-y-2\">\n          <button\n            type=\"button\"\n            onClick={() => setShowCommands((value) => !value)}\n            className=\"w-full flex items-center justify-between gap-2 text-left text-xs font-medium text-text-secondary hover:text-text-primary transition-colors\"\n            aria-expanded={showCommands}\n          >\n            <span>{tr('vibecontrols.plugins.commands', 'Command reference')}</span>\n            <ChevronDown\n              className={`size-3.5 transition-transform ${showCommands ? 'rotate-180' : ''}`}\n            />\n          </button>\n          {showCommands && (\n            <div className=\"rounded-md border border-border-default bg-bg-sunken px-2.5 py-2\">\n              <p className=\"text-xs text-text-secondary\">\n                {tr(\n                  'vibecontrols.plugins.commandsHint',\n                  'See the agent admin sub-panel or the plugin README for the documented command list.'\n                )}\n              </p>\n            </div>\n          )}\n        </div>\n      </div>\n    </Card>\n  );\n}\n\nexport function PluginsCatalogPage() {\n  const tr = useTr();\n  const [search, setSearch] = useState('');\n  const [activeCategory, setActiveCategory] = useState<string>('all');\n\n  const pluginList = useMemo(() => {\n    return Object.values(PLUGIN_CATALOG).sort((a, b) => a.displayName.localeCompare(b.displayName));\n  }, []);\n\n  const filteredPlugins = useMemo(() => {\n    const term = search.trim().toLowerCase();\n    return pluginList.filter((plugin) => {\n      if (activeCategory !== 'all' && plugin.category !== activeCategory) return false;\n      if (!term) return true;\n      const haystack =\n        `${plugin.displayName} ${plugin.description} ${plugin.packageName}`.toLowerCase();\n      return haystack.includes(term);\n    });\n  }, [pluginList, search, activeCategory]);\n\n  return (\n    <PageContainer padded={false}>\n      <MotionPage className=\"flex flex-col h-full\">\n        {/* Sticky header with search + filter chips */}\n        <div className=\"sticky top-0 z-10 border-b border-border-default bg-bg-surface px-4 sm:px-6 pt-4 pb-3 space-y-3\">\n          <div className=\"flex items-start gap-3\">\n            <Plug className=\"size-6 text-text-primary mt-0.5 flex-shrink-0\" />\n            <div className=\"min-w-0 flex-1\">\n              <h1 className=\"text-xl font-bold text-text-primary\">\n                {tr('vibecontrols.plugins.title', 'Plugins')}\n              </h1>\n              <p className=\"text-sm text-text-secondary mt-0.5\">\n                {tr(\n                  'vibecontrols.plugins.description',\n                  'Browse and install plugins to extend your VibeControls agents.'\n                )}\n              </p>\n            </div>\n          </div>\n\n          <div className=\"relative\">\n            <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary\" />\n            <input\n              type=\"search\"\n              value={search}\n              onChange={(event) => setSearch(event.target.value)}\n              placeholder={tr(\n                'vibecontrols.plugins.searchPlaceholder',\n                'Search by name, description, or package…'\n              )}\n              aria-label={tr('vibecontrols.plugins.searchLabel', 'Search plugins')}\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            {search && (\n              <button\n                type=\"button\"\n                onClick={() => setSearch('')}\n                aria-label={tr('vibecontrols.plugins.clearSearch', 'Clear search')}\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              </button>\n            )}\n          </div>\n\n          <div\n            className=\"flex flex-wrap gap-2\"\n            role=\"tablist\"\n            aria-label={tr('vibecontrols.plugins.categories', 'Plugin categories')}\n          >\n            {CATEGORY_OPTIONS.map((option) => {\n              const isActive = activeCategory === option.value;\n              return (\n                <button\n                  key={option.value}\n                  type=\"button\"\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  onClick={() => setActiveCategory(option.value)}\n                  className={`px-3 py-1 text-xs rounded-full border transition-colors ${\n                    isActive\n                      ? 'bg-action-primary-bg text-action-primary-text border-action-primary-bg'\n                      : 'bg-bg-surface text-text-secondary border-border-default hover:bg-bg-sunken hover:text-text-primary'\n                  }`}\n                >\n                  {tr(option.labelKey, option.labelFallback)}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Grid body */}\n        <div className=\"flex-1 px-4 sm:px-6 py-4\">\n          {filteredPlugins.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center text-center py-16 text-text-secondary\">\n              <Package className=\"size-12 mb-3 opacity-50\" />\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tr('vibecontrols.plugins.empty.title', 'No matching plugins')}\n              </p>\n              <p className=\"text-xs mt-1\">\n                {tr(\n                  'vibecontrols.plugins.empty.description',\n                  'Try a different search term or category.'\n                )}\n              </p>\n            </div>\n          ) : (\n            <div className=\"grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3\">\n              {filteredPlugins.map((plugin) => (\n                <PluginCard key={plugin.packageName} plugin={plugin} />\n              ))}\n            </div>\n          )}\n        </div>\n      </MotionPage>\n    </PageContainer>\n  );\n}\n"],"mappings":"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"}