@burdenoff/microfe-vibecontrols 2026.522.2 → 2026.522.4

package/dist/pages/ComponentsPage.js

@@ -9,90 +9,95 @@ import { SearchInput as c } from "../components/shared/SearchInput.js";
 import { FilterDropdown as l } from "../components/shared/FilterDropdown.js";
 import { GetHelpButton as u } from "../components/shared/GetHelpButton.js";
 import "../components/shared/index.js";
-import { VIBE_PERMISSIONS as d } from "../constants/permissions.js";
-import { PageSkeleton as f } from "../components/shared/PageSkeleton.js";
-import { ComponentCard as p } from "../components/idp-components/ComponentCard.js";
-import { ComponentForm as m } from "../components/idp-components/ComponentForm.js";
+import { VIBE_PERMISSIONS as ee } from "../constants/permissions.js";
+import { PageSkeleton as te } from "../components/shared/PageSkeleton.js";
+import { ComponentCard as ne } from "../components/idp-components/ComponentCard.js";
+import { ComponentForm as re } from "../components/idp-components/ComponentForm.js";
 import "../components/idp-components/index.js";
-import { useCallback as h, useMemo as g, useState as _ } from "react";
-import { useI18n as ee } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Box as v, Plus as y, RefreshCw as b } from "lucide-react";
-import { usePermissions as x } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as S } from "framer-motion";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { MotionItem as T, MotionList as E, MotionPage as D } from "@burdenoff/fe-libs/shared/motion";
+import { useCallback as d, useEffect as f, useState as p } from "react";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Box as h, Plus as g, RefreshCw as _ } from "lucide-react";
+import { usePermissions as v } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as y } from "framer-motion";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { MotionItem as S, MotionList as C, MotionPage as w } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/ComponentsPage.tsx
-function O() {
-	let O = n(), { t: k } = ee(), { hasPermission: A, isLoading: j } = x(), M = h((e, t, n) => {
-		let r = k(e, n), i = r === e ? t : r;
+function T() {
+	let T = n(), { t: E } = m(), { hasPermission: ie, isLoading: ae } = v(), D = d((e, t, n) => {
+		let r = E(e, n), i = r === e ? t : r;
 		return n ? Object.entries(n).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), i) : i;
-	}, [k]), N = [
+	}, [E]), oe = [
 		{
 			value: "all",
-			label: M("component.allTypes", "All Types")
+			label: D("component.allTypes", "All Types")
 		},
 		{
 			value: "SERVICE",
-			label: M("component.typeService", "Service")
+			label: D("component.typeService", "Service")
 		},
 		{
 			value: "FRONTEND",
-			label: M("component.typeFrontend", "Frontend")
+			label: D("component.typeFrontend", "Frontend")
 		},
 		{
 			value: "LIBRARY",
-			label: M("component.typeLibrary", "Library")
+			label: D("component.typeLibrary", "Library")
 		},
 		{
 			value: "API",
-			label: M("component.typeApi", "API")
+			label: D("component.typeApi", "API")
 		},
 		{
 			value: "MOBILE",
-			label: M("component.typeMobile", "Mobile")
+			label: D("component.typeMobile", "Mobile")
 		},
 		{
 			value: "DATABASE",
-			label: M("component.typeDatabase", "Database")
+			label: D("component.typeDatabase", "Database")
 		},
 		{
 			value: "INFRASTRUCTURE",
-			label: M("component.typeInfrastructure", "Infrastructure")
+			label: D("component.typeInfrastructure", "Infrastructure")
 		},
 		{
 			value: "CUSTOM",
-			label: M("component.typeCustom", "Custom")
+			label: D("component.typeCustom", "Custom")
 		}
-	], P = [
+	], O = [
 		{
 			value: "all",
-			label: M("component.allLifecycles", "All Lifecycles")
+			label: D("component.allLifecycles", "All Lifecycles")
 		},
 		{
 			value: "EXPERIMENTAL",
-			label: M("component.lifecycleExperimental", "Experimental")
+			label: D("component.lifecycleExperimental", "Experimental")
 		},
 		{
 			value: "PRODUCTION",
-			label: M("component.lifecycleProduction", "Production")
+			label: D("component.lifecycleProduction", "Production")
 		},
 		{
 			value: "DEPRECATED",
-			label: M("component.lifecycleDeprecated", "Deprecated")
+			label: D("component.lifecycleDeprecated", "Deprecated")
 		}
-	], [F, I] = _(""), [L, R] = _("all"), [z, B] = _("all"), [V, H] = _(!1), [U, W] = _(null), { data: G, loading: K, error: q, refetch: J } = t({
+	], [k, A] = p(""), [j, M] = p("all"), [N, P] = p("all"), [F, I] = p(!1), [L, R] = p(null), [z, B] = p([]), [V, H] = p(!1), { data: U, loading: W, error: G, refetch: K, fetchMore: q } = t({
 		variables: {
 			filter: {
-				type: L === "all" ? void 0 : L,
-				lifecycle: z === "all" ? void 0 : z
+				type: j === "all" ? void 0 : j,
+				lifecycle: N === "all" ? void 0 : N,
+				search: k || void 0
 			},
-			...F ? { pagination: { limit: 1e3 } } : {}
+			pagination: {
+				limit: 50,
+				offset: 0
+			}
 		},
-		fetchPolicy: "cache-and-network"
-	}), [Y] = e({
+		fetchPolicy: "cache-and-network",
+		notifyOnNetworkStatusChange: !0
+	}), [se] = e({
 		refetchQueries: ["ListComponents"],
 		awaitRefetchQueries: !0
-	}), { setDraftTagIds: X, flushTags: Z } = o("VIBECONTROLS_COMPONENT"), Q = g(() => (G?.vibecontrolsComponents?.items ?? []).map((e) => ({
+	}), { setDraftTagIds: ce, flushTags: le } = o("VIBECONTROLS_COMPONENT"), J = d((e) => e.map((e) => ({
 		id: e.id,
 		name: e.name,
 		description: e.description || null,
@@ -104,132 +109,173 @@ function O() {
 		tags: e.tags || [],
 		createdAt: e.createdAt,
 		updatedAt: e.updatedAt
-	})), [G?.vibecontrolsComponents?.items]), $ = g(() => {
-		if (!F) return Q;
-		let e = F.toLowerCase();
-		return Q.filter((t) => t.name.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.language?.toLowerCase().includes(e) || t.framework?.toLowerCase().includes(e) || t.tags?.some((t) => t.toLowerCase().includes(e)));
-	}, [Q, F]);
-	if (j) return /* @__PURE__ */ C("div", {
+	})), []);
+	f(() => {
+		B(J(U?.vibecontrolsComponents?.items ?? []));
+	}, [U?.vibecontrolsComponents?.items, J]);
+	let Y = U?.vibecontrolsComponents?.total ?? 0, X = z.length < Y, Z = z, Q = z, $ = d(async () => {
+		if (!(V || !X)) {
+			H(!0);
+			try {
+				await q({
+					variables: { pagination: {
+						limit: 50,
+						offset: z.length
+					} },
+					updateQuery: (e, { fetchMoreResult: t }) => {
+						if (!t?.vibecontrolsComponents) return e;
+						let n = e.vibecontrolsComponents, r = t.vibecontrolsComponents;
+						return {
+							...e,
+							vibecontrolsComponents: {
+								...r,
+								items: [...n?.items ?? [], ...r.items],
+								total: r.total,
+								hasMore: r.hasMore
+							}
+						};
+					}
+				});
+			} finally {
+				H(!1);
+			}
+		}
+	}, [
+		q,
+		z.length,
+		V,
+		X
+	]);
+	if (ae) return /* @__PURE__ */ b("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ C("p", {
+		children: /* @__PURE__ */ b("p", {
 			className: "text-text-secondary",
 			children: "Loading permissions..."
 		})
 	});
-	if (!A(d.VIBE_LIST)) return /* @__PURE__ */ C("div", {
+	if (!ie(ee.VIBE_LIST)) return /* @__PURE__ */ b("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: "text-center space-y-2",
-			children: [/* @__PURE__ */ C("h2", {
+			children: [/* @__PURE__ */ b("h2", {
 				className: "text-lg font-semibold text-foreground",
 				children: "Access Denied"
-			}), /* @__PURE__ */ C("p", {
+			}), /* @__PURE__ */ b("p", {
 				className: "text-sm text-text-secondary",
 				children: "You don't have permission to access this page."
 			})]
 		})
 	});
-	let te = (e) => {
-		O(`/components/${e.id}`);
+	let ue = (e) => {
+		T(`/components/${e.id}`);
 	};
-	return q && Q.length === 0 ? /* @__PURE__ */ C(D, {
+	return G && Z.length === 0 ? /* @__PURE__ */ b(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
-		children: /* @__PURE__ */ C(i, {
-			title: M("component.failedLoad", "Failed to load components"),
-			message: q.message,
-			onRetry: () => J()
+		children: /* @__PURE__ */ b(i, {
+			title: D("component.failedLoad", "Failed to load components"),
+			message: G.message,
+			onRetry: () => K()
 		})
-	}) : /* @__PURE__ */ w(D, {
+	}) : /* @__PURE__ */ x(w, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: [
-			/* @__PURE__ */ C(r, {
-				title: M("component.title", "Components"),
-				description: M("component.description", "{{total}} components", { total: Q.length }),
-				actions: /* @__PURE__ */ w("div", {
+			/* @__PURE__ */ b(r, {
+				title: D("component.title", "Components"),
+				description: D("component.description", "{{total}} components", { total: Z.length }),
+				actions: /* @__PURE__ */ x("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ C("button", {
-						onClick: () => J(),
-						disabled: K,
+					children: [/* @__PURE__ */ b("button", {
+						onClick: () => K(),
+						disabled: W,
 						className: "flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
-						title: M("common.refresh", "Refresh"),
-						children: /* @__PURE__ */ C(b, { className: `w-4 h-4 ${K ? "animate-spin" : ""}` })
-					}), /* @__PURE__ */ w("button", {
-						onClick: () => H(!0),
+						title: D("common.refresh", "Refresh"),
+						children: /* @__PURE__ */ b(_, { className: `w-4 h-4 ${W ? "animate-spin" : ""}` })
+					}), /* @__PURE__ */ x("button", {
+						onClick: () => I(!0),
 						className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-						children: [/* @__PURE__ */ C(y, { className: "w-4 h-4" }), M("component.createComponent", "Create Component")]
+						children: [/* @__PURE__ */ b(g, { className: "w-4 h-4" }), D("component.createComponent", "Create Component")]
 					})]
 				})
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ x("div", {
 				className: "space-y-3",
-				children: [/* @__PURE__ */ C("div", {
+				children: [/* @__PURE__ */ b("div", {
 					className: "flex items-center gap-2",
-					children: /* @__PURE__ */ C(c, {
-						value: F,
-						onChange: I,
-						placeholder: M("component.searchPlaceholder", "Search components..."),
+					children: /* @__PURE__ */ b(c, {
+						value: k,
+						onChange: A,
+						placeholder: D("component.searchPlaceholder", "Search components..."),
 						className: "flex-1 sm:w-64 sm:flex-none"
 					})
-				}), /* @__PURE__ */ w("div", {
+				}), /* @__PURE__ */ x("div", {
 					className: "flex items-center gap-2 sm:gap-3 flex-wrap",
-					children: [/* @__PURE__ */ C(l, {
-						label: M("component.filterType", "Type"),
-						value: L,
-						options: N,
-						onChange: R
-					}), /* @__PURE__ */ C(l, {
-						label: M("component.filterLifecycle", "Lifecycle"),
-						value: z,
-						options: P,
-						onChange: B
+					children: [/* @__PURE__ */ b(l, {
+						label: D("component.filterType", "Type"),
+						value: j,
+						options: oe,
+						onChange: M
+					}), /* @__PURE__ */ b(l, {
+						label: D("component.filterLifecycle", "Lifecycle"),
+						value: N,
+						options: O,
+						onChange: P
 					})]
 				})]
 			}),
-			(F || L !== "all" || z !== "all") && /* @__PURE__ */ w("p", {
+			/* @__PURE__ */ x("p", {
 				className: "text-sm text-text-secondary",
-				children: [M("component.showingResults", "Showing {{filtered}} of {{total}} components", {
-					filtered: $.length,
-					total: Q.length
-				}), K && /* @__PURE__ */ C("span", {
+				children: [D("component.showingResults", "Showing {{filtered}} of {{total}} components", {
+					filtered: Q.length,
+					total: Y
+				}), W && /* @__PURE__ */ b("span", {
 					className: "ml-2 text-text-muted",
-					children: M("common.refreshing", "(refreshing...)")
+					children: D("common.refreshing", "(refreshing...)")
 				})]
 			}),
-			K && Q.length === 0 ? /* @__PURE__ */ C(f, {
+			W && Z.length === 0 ? /* @__PURE__ */ b(te, {
 				variant: "cards",
 				count: 6
-			}) : $.length > 0 ? /* @__PURE__ */ C(S, {
+			}) : Q.length > 0 ? /* @__PURE__ */ b(y, {
 				mode: "wait",
-				children: /* @__PURE__ */ C(E, {
+				children: /* @__PURE__ */ b(C, {
 					stagger: .04,
 					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-					children: $.map((e) => /* @__PURE__ */ C(T, { children: /* @__PURE__ */ C(p, {
+					children: Q.map((e) => /* @__PURE__ */ b(S, { children: /* @__PURE__ */ b(ne, {
 						component: e,
-						onOpen: te
+						onOpen: ue
 					}) }, e.id))
 				}, "component-grid")
-			}) : /* @__PURE__ */ C(s, {
-				icon: /* @__PURE__ */ C(v, { className: "w-8 h-8 text-text-secondary" }),
-				title: F || L !== "all" || z !== "all" ? M("component.emptyNoResults", "No components found") : M("component.emptyNoComponents", "No components yet"),
-				description: F || L !== "all" || z !== "all" ? M("component.emptyAdjustSearch", "Try adjusting your search or filters") : M("component.emptyCreate", "Register your first component to start tracking your software catalog"),
-				action: !F && L === "all" && z === "all" ? /* @__PURE__ */ w("div", {
+			}) : /* @__PURE__ */ b(s, {
+				icon: /* @__PURE__ */ b(h, { className: "w-8 h-8 text-text-secondary" }),
+				title: k || j !== "all" || N !== "all" ? D("component.emptyNoResults", "No components found") : D("component.emptyNoComponents", "No components yet"),
+				description: k || j !== "all" || N !== "all" ? D("component.emptyAdjustSearch", "Try adjusting your search or filters") : D("component.emptyCreate", "Register your first component to start tracking your software catalog"),
+				action: !k && j === "all" && N === "all" ? /* @__PURE__ */ x("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ w("button", {
-						onClick: () => H(!0),
+					children: [/* @__PURE__ */ x("button", {
+						onClick: () => I(!0),
 						className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-						children: [/* @__PURE__ */ C(y, { className: "w-4 h-4" }), M("component.createComponent", "Create Component")]
-					}), /* @__PURE__ */ C(u, { prompt: "What is a Component in VibeControls and how do I add one?" })]
+						children: [/* @__PURE__ */ b(g, { className: "w-4 h-4" }), D("component.createComponent", "Create Component")]
+					}), /* @__PURE__ */ b(u, { prompt: "What is a Component in VibeControls and how do I add one?" })]
 				}) : void 0
 			}),
-			U && /* @__PURE__ */ C("div", {
+			X && Q.length > 0 && /* @__PURE__ */ b("div", {
+				className: "flex justify-center pt-2",
+				children: /* @__PURE__ */ b("button", {
+					onClick: $,
+					disabled: V,
+					className: "flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50",
+					children: V ? D("common.loading", "Loading...") : D("common.loadMore", "Load more")
+				})
+			}),
+			L && /* @__PURE__ */ b("div", {
 				className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm",
-				children: U
+				children: L
 			}),
-			/* @__PURE__ */ C(m, {
-				isOpen: V,
-				onClose: () => H(!1),
+			/* @__PURE__ */ b(re, {
+				isOpen: F,
+				onClose: () => I(!1),
 				onSubmit: async (e) => {
-					let t = await Y({ variables: { input: {
+					let t = await se({ variables: { input: {
 						name: e.name,
 						description: e.description || void 0,
 						type: e.type,
@@ -240,22 +286,22 @@ function O() {
 						owner: e.owner || void 0,
 						tags: e.tags.length > 0 ? e.tags : void 0
 					} } });
-					if (!t.data?.createVibecontrolsComponent?.id) throw Error(M("component.failedCreate", "Failed to create component"));
+					if (!t.data?.createVibecontrolsComponent?.id) throw Error(D("component.failedCreate", "Failed to create component"));
 					let n = t.data.createVibecontrolsComponent.id;
-					H(!1), W(M("component.createdSuccess", "Component created successfully")), await Z(n), await J(), setTimeout(() => W(null), 3e3);
+					I(!1), R(D("component.createdSuccess", "Component created successfully")), await le(n), await K(), setTimeout(() => R(null), 3e3);
 				},
-				extraSection: /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h3", {
+				extraSection: /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h3", {
 					className: "text-sm font-medium text-text-secondary mb-2",
-					children: M("component.tags", "Tags")
-				}), /* @__PURE__ */ C(a, {
+					children: D("component.tags", "Tags")
+				}), /* @__PURE__ */ b(a, {
 					entityType: "VIBECONTROLS_COMPONENT",
-					onDraftChange: X
+					onDraftChange: ce
 				})] })
 			})
 		]
 	});
 }
 //#endregion
-export { O as ComponentsPage };
+export { T as ComponentsPage };
 
 //# sourceMappingURL=ComponentsPage.js.map

package/dist/pages/ComponentsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentsPage.js","names":[],"sources":["../../src/pages/ComponentsPage.tsx"],"sourcesContent":["import { useState, useMemo, useCallback } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Plus, Box, RefreshCw } from 'lucide-react';\nimport { ComponentCard } from '@/components/idp-components';\nimport type { ComponentCardData } from '@/components/idp-components';\nimport { ComponentForm } from '@/components/idp-components';\nimport type { ComponentFormData } from '@/components/idp-components';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListComponentsQuery, useCreateComponentMutation } from '@/generated/wspace-operations';\n\nexport function ComponentsPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const typeOptions = [\n    { value: 'all', label: tr('component.allTypes', 'All Types') },\n    { value: 'SERVICE', label: tr('component.typeService', 'Service') },\n    { value: 'FRONTEND', label: tr('component.typeFrontend', 'Frontend') },\n    { value: 'LIBRARY', label: tr('component.typeLibrary', 'Library') },\n    { value: 'API', label: tr('component.typeApi', 'API') },\n    { value: 'MOBILE', label: tr('component.typeMobile', 'Mobile') },\n    { value: 'DATABASE', label: tr('component.typeDatabase', 'Database') },\n    { value: 'INFRASTRUCTURE', label: tr('component.typeInfrastructure', 'Infrastructure') },\n    { value: 'CUSTOM', label: tr('component.typeCustom', 'Custom') },\n  ];\n\n  const lifecycleOptions = [\n    { value: 'all', label: tr('component.allLifecycles', 'All Lifecycles') },\n    { value: 'EXPERIMENTAL', label: tr('component.lifecycleExperimental', 'Experimental') },\n    { value: 'PRODUCTION', label: tr('component.lifecycleProduction', 'Production') },\n    { value: 'DEPRECATED', label: tr('component.lifecycleDeprecated', 'Deprecated') },\n  ];\n\n  const [searchQuery, setSearchQuery] = useState('');\n  const [typeFilter, setTypeFilter] = useState('all');\n  const [lifecycleFilter, setLifecycleFilter] = useState('all');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n\n  const { data, loading, error, refetch } = useListComponentsQuery({\n    variables: {\n      filter: {\n        type: typeFilter !== 'all' ? typeFilter : undefined,\n        lifecycle: lifecycleFilter !== 'all' ? lifecycleFilter : undefined,\n      },\n      ...(searchQuery ? { pagination: { limit: 1000 } } : {}),\n    },\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const [createComponent] = useCreateComponentMutation({\n    refetchQueries: ['ListComponents'],\n    awaitRefetchQueries: true,\n  });\n  const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_COMPONENT');\n\n  const components: ComponentCardData[] = useMemo(() => {\n    const items = data?.vibecontrolsComponents?.items ?? [];\n    return items.map((item: Record<string, unknown>) => ({\n      id: item.id as string,\n      name: item.name as string,\n      description: (item.description as string) || null,\n      type: item.type as ComponentCardData['type'],\n      lifecycle: item.lifecycle as ComponentCardData['lifecycle'],\n      version: (item.version as string) || null,\n      language: (item.language as string) || null,\n      framework: (item.framework as string) || null,\n      tags: (item.tags as string[]) || [],\n      createdAt: item.createdAt as string,\n      updatedAt: item.updatedAt as string,\n    }));\n  }, [data?.vibecontrolsComponents?.items]);\n\n  const filteredComponents = useMemo(() => {\n    if (!searchQuery) return components;\n    const query = searchQuery.toLowerCase();\n    return components.filter(\n      (c) =>\n        c.name.toLowerCase().includes(query) ||\n        c.description?.toLowerCase().includes(query) ||\n        c.language?.toLowerCase().includes(query) ||\n        c.framework?.toLowerCase().includes(query) ||\n        c.tags?.some((tag) => tag.toLowerCase().includes(query))\n    );\n  }, [components, searchQuery]);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  const handleComponentSelect = (component: ComponentCardData) => {\n    navigate(`/components/${component.id}`);\n  };\n\n  const handleCreateComponent = async (formData: ComponentFormData) => {\n    const result = await createComponent({\n      variables: {\n        input: {\n          name: formData.name,\n          description: formData.description || undefined,\n          type: formData.type,\n          lifecycle: formData.lifecycle,\n          language: formData.language || undefined,\n          framework: formData.framework || undefined,\n          version: formData.version || undefined,\n          owner: formData.owner || undefined,\n          tags: formData.tags.length > 0 ? formData.tags : undefined,\n        },\n      },\n    });\n    if (!result.data?.createVibecontrolsComponent?.id) {\n      throw new Error(tr('component.failedCreate', 'Failed to create component'));\n    }\n    const newComponentId = result.data.createVibecontrolsComponent.id;\n    setShowCreateForm(false);\n    setSuccessMessage(tr('component.createdSuccess', 'Component created successfully'));\n    await flushTags(newComponentId);\n    await refetch();\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  if (error && components.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('component.failedLoad', 'Failed to load components')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\n    );\n  }\n\n  return (\n    <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n      <PageHeader\n        title={tr('component.title', 'Components')}\n        description={tr('component.description', '{{total}} components', {\n          total: components.length,\n        })}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('common.refresh', 'Refresh')}\n            >\n              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <button\n              onClick={() => setShowCreateForm(true)}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"w-4 h-4\" />\n              {tr('component.createComponent', 'Create Component')}\n            </button>\n          </div>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-2\">\n          <SearchInput\n            value={searchQuery}\n            onChange={setSearchQuery}\n            placeholder={tr('component.searchPlaceholder', 'Search components...')}\n            className=\"flex-1 sm:w-64 sm:flex-none\"\n          />\n        </div>\n        <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n          <FilterDropdown\n            label={tr('component.filterType', 'Type')}\n            value={typeFilter}\n            options={typeOptions}\n            onChange={setTypeFilter}\n          />\n          <FilterDropdown\n            label={tr('component.filterLifecycle', 'Lifecycle')}\n            value={lifecycleFilter}\n            options={lifecycleOptions}\n            onChange={setLifecycleFilter}\n          />\n        </div>\n      </div>\n\n      {/* Results count */}\n      {(searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all') && (\n        <p className=\"text-sm text-text-secondary\">\n          {tr('component.showingResults', 'Showing {{filtered}} of {{total}} components', {\n            filtered: filteredComponents.length,\n            total: components.length,\n          })}\n          {loading && (\n            <span className=\"ml-2 text-text-muted\">\n              {tr('common.refreshing', '(refreshing...)')}\n            </span>\n          )}\n        </p>\n      )}\n\n      {/* Grid */}\n      {loading && components.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredComponents.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"component-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredComponents.map((component) => (\n              <MotionItem key={component.id}>\n                <ComponentCard component={component} onOpen={handleComponentSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<Box className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyNoResults', 'No components found')\n              : tr('component.emptyNoComponents', 'No components yet')\n          }\n          description={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr(\n                  'component.emptyCreate',\n                  'Register your first component to start tracking your software catalog'\n                )\n          }\n          action={\n            !searchQuery && typeFilter === 'all' && lifecycleFilter === 'all' ? (\n              <div className=\"flex items-center gap-2\">\n                <button\n                  onClick={() => setShowCreateForm(true)}\n                  className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  <Plus className=\"w-4 h-4\" />\n                  {tr('component.createComponent', 'Create Component')}\n                </button>\n                <GetHelpButton prompt=\"What is a Component in VibeControls and how do I add one?\" />\n              </div>\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm\">\n          {successMessage}\n        </div>\n      )}\n\n      {/* Create Form */}\n      <ComponentForm\n        isOpen={showCreateForm}\n        onClose={() => setShowCreateForm(false)}\n        onSubmit={handleCreateComponent}\n        extraSection={\n          <div>\n            <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n              {tr('component.tags', 'Tags')}\n            </h3>\n            <EntityTagPicker entityType=\"VIBECONTROLS_COMPONENT\" onDraftChange={setDraftTagIds} />\n          </div>\n        }\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ComponentsPage.js","names":[],"sources":["../../src/pages/ComponentsPage.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from 'react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { Plus, Box, RefreshCw } from 'lucide-react';\nimport { ComponentCard } from '@/components/idp-components';\nimport type { ComponentCardData } from '@/components/idp-components';\nimport { ComponentForm } from '@/components/idp-components';\nimport type { ComponentFormData } from '@/components/idp-components';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { PageSkeleton } from '@/components/shared/PageSkeleton';\nimport { useDraftEntityTags } from '@/hooks/useDraftEntityTags';\nimport {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  ErrorState,\n  GetHelpButton,\n} from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { AnimatePresence } from 'framer-motion';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useListComponentsQuery, useCreateComponentMutation } from '@/generated/wspace-operations';\n\nexport function ComponentsPage() {\n  const navigate = useVibeNavigate();\n  const { t } = useI18n();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string, params?: Record<string, string | number>): string => {\n      const translated = t(key, params);\n      const template = translated === key ? fallback : translated;\n      if (!params) return template;\n      return Object.entries(params).reduce(\n        (acc, [paramKey, paramValue]) => acc.replace(`{{${paramKey}}}`, String(paramValue)),\n        template\n      );\n    },\n    [t]\n  );\n\n  const typeOptions = [\n    { value: 'all', label: tr('component.allTypes', 'All Types') },\n    { value: 'SERVICE', label: tr('component.typeService', 'Service') },\n    { value: 'FRONTEND', label: tr('component.typeFrontend', 'Frontend') },\n    { value: 'LIBRARY', label: tr('component.typeLibrary', 'Library') },\n    { value: 'API', label: tr('component.typeApi', 'API') },\n    { value: 'MOBILE', label: tr('component.typeMobile', 'Mobile') },\n    { value: 'DATABASE', label: tr('component.typeDatabase', 'Database') },\n    { value: 'INFRASTRUCTURE', label: tr('component.typeInfrastructure', 'Infrastructure') },\n    { value: 'CUSTOM', label: tr('component.typeCustom', 'Custom') },\n  ];\n\n  const lifecycleOptions = [\n    { value: 'all', label: tr('component.allLifecycles', 'All Lifecycles') },\n    { value: 'EXPERIMENTAL', label: tr('component.lifecycleExperimental', 'Experimental') },\n    { value: 'PRODUCTION', label: tr('component.lifecycleProduction', 'Production') },\n    { value: 'DEPRECATED', label: tr('component.lifecycleDeprecated', 'Deprecated') },\n  ];\n\n  const PAGE_SIZE = 50;\n  const [searchQuery, setSearchQuery] = useState('');\n  const [typeFilter, setTypeFilter] = useState('all');\n  const [lifecycleFilter, setLifecycleFilter] = useState('all');\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [accumulated, setAccumulated] = useState<ComponentCardData[]>([]);\n  const [loadingMore, setLoadingMore] = useState(false);\n\n  const { data, loading, error, refetch, fetchMore } = useListComponentsQuery({\n    variables: {\n      filter: {\n        type: typeFilter !== 'all' ? typeFilter : undefined,\n        lifecycle: lifecycleFilter !== 'all' ? lifecycleFilter : undefined,\n        search: searchQuery || undefined,\n      },\n      pagination: { limit: PAGE_SIZE, offset: 0 },\n    },\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const [createComponent] = useCreateComponentMutation({\n    refetchQueries: ['ListComponents'],\n    awaitRefetchQueries: true,\n  });\n  const { setDraftTagIds, flushTags } = useDraftEntityTags('VIBECONTROLS_COMPONENT');\n\n  const mapItems = useCallback(\n    (items: ReadonlyArray<Record<string, unknown>>): ComponentCardData[] =>\n      items.map((item) => ({\n        id: item.id as string,\n        name: item.name as string,\n        description: (item.description as string) || null,\n        type: item.type as ComponentCardData['type'],\n        lifecycle: item.lifecycle as ComponentCardData['lifecycle'],\n        version: (item.version as string) || null,\n        language: (item.language as string) || null,\n        framework: (item.framework as string) || null,\n        tags: (item.tags as string[]) || [],\n        createdAt: item.createdAt as string,\n        updatedAt: item.updatedAt as string,\n      })),\n    []\n  );\n\n  useEffect(() => {\n    const items = data?.vibecontrolsComponents?.items ?? [];\n    setAccumulated(mapItems(items as ReadonlyArray<Record<string, unknown>>));\n  }, [data?.vibecontrolsComponents?.items, mapItems]);\n\n  const total = data?.vibecontrolsComponents?.total ?? 0;\n  const hasMore = accumulated.length < total;\n  const components = accumulated;\n  const filteredComponents = accumulated;\n\n  const handleLoadMore = useCallback(async () => {\n    if (loadingMore || !hasMore) return;\n    setLoadingMore(true);\n    try {\n      await fetchMore({\n        variables: { pagination: { limit: PAGE_SIZE, offset: accumulated.length } },\n        updateQuery: (prev, { fetchMoreResult }) => {\n          if (!fetchMoreResult?.vibecontrolsComponents) return prev;\n          const prevList = prev.vibecontrolsComponents;\n          const nextList = fetchMoreResult.vibecontrolsComponents;\n          return {\n            ...prev,\n            vibecontrolsComponents: {\n              ...nextList,\n              items: [...(prevList?.items ?? []), ...nextList.items],\n              total: nextList.total,\n              hasMore: nextList.hasMore,\n            },\n          };\n        },\n      });\n    } finally {\n      setLoadingMore(false);\n    }\n  }, [fetchMore, accumulated.length, loadingMore, hasMore]);\n\n  if (permissionsLoading)\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <p className=\"text-text-secondary\">Loading permissions...</p>\n      </div>\n    );\n  if (!hasPermission(VIBE_PERMISSIONS.VIBE_LIST))\n    return (\n      <div className=\"flex items-center justify-center min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don't have permission to access this page.\n          </p>\n        </div>\n      </div>\n    );\n\n  const handleComponentSelect = (component: ComponentCardData) => {\n    navigate(`/components/${component.id}`);\n  };\n\n  const handleCreateComponent = async (formData: ComponentFormData) => {\n    const result = await createComponent({\n      variables: {\n        input: {\n          name: formData.name,\n          description: formData.description || undefined,\n          type: formData.type,\n          lifecycle: formData.lifecycle,\n          language: formData.language || undefined,\n          framework: formData.framework || undefined,\n          version: formData.version || undefined,\n          owner: formData.owner || undefined,\n          tags: formData.tags.length > 0 ? formData.tags : undefined,\n        },\n      },\n    });\n    if (!result.data?.createVibecontrolsComponent?.id) {\n      throw new Error(tr('component.failedCreate', 'Failed to create component'));\n    }\n    const newComponentId = result.data.createVibecontrolsComponent.id;\n    setShowCreateForm(false);\n    setSuccessMessage(tr('component.createdSuccess', 'Component created successfully'));\n    await flushTags(newComponentId);\n    await refetch();\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  if (error && components.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <ErrorState\n          title={tr('component.failedLoad', 'Failed to load components')}\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      </MotionPage>\n    );\n  }\n\n  return (\n    <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n      <PageHeader\n        title={tr('component.title', 'Components')}\n        description={tr('component.description', '{{total}} components', {\n          total: components.length,\n        })}\n        actions={\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => refetch()}\n              disabled={loading}\n              className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50\"\n              title={tr('common.refresh', 'Refresh')}\n            >\n              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />\n            </button>\n            <button\n              onClick={() => setShowCreateForm(true)}\n              className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n            >\n              <Plus className=\"w-4 h-4\" />\n              {tr('component.createComponent', 'Create Component')}\n            </button>\n          </div>\n        }\n      />\n\n      {/* Filters */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center gap-2\">\n          <SearchInput\n            value={searchQuery}\n            onChange={setSearchQuery}\n            placeholder={tr('component.searchPlaceholder', 'Search components...')}\n            className=\"flex-1 sm:w-64 sm:flex-none\"\n          />\n        </div>\n        <div className=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n          <FilterDropdown\n            label={tr('component.filterType', 'Type')}\n            value={typeFilter}\n            options={typeOptions}\n            onChange={setTypeFilter}\n          />\n          <FilterDropdown\n            label={tr('component.filterLifecycle', 'Lifecycle')}\n            value={lifecycleFilter}\n            options={lifecycleOptions}\n            onChange={setLifecycleFilter}\n          />\n        </div>\n      </div>\n\n      {/* Results count */}\n      <p className=\"text-sm text-text-secondary\">\n        {tr('component.showingResults', 'Showing {{filtered}} of {{total}} components', {\n          filtered: filteredComponents.length,\n          total,\n        })}\n        {loading && (\n          <span className=\"ml-2 text-text-muted\">{tr('common.refreshing', '(refreshing...)')}</span>\n        )}\n      </p>\n\n      {/* Grid */}\n      {loading && components.length === 0 ? (\n        <PageSkeleton variant=\"cards\" count={6} />\n      ) : filteredComponents.length > 0 ? (\n        <AnimatePresence mode=\"wait\">\n          <MotionList\n            key=\"component-grid\"\n            stagger={0.04}\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n          >\n            {filteredComponents.map((component) => (\n              <MotionItem key={component.id}>\n                <ComponentCard component={component} onOpen={handleComponentSelect} />\n              </MotionItem>\n            ))}\n          </MotionList>\n        </AnimatePresence>\n      ) : (\n        <EmptyState\n          icon={<Box className=\"w-8 h-8 text-text-secondary\" />}\n          title={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyNoResults', 'No components found')\n              : tr('component.emptyNoComponents', 'No components yet')\n          }\n          description={\n            searchQuery || typeFilter !== 'all' || lifecycleFilter !== 'all'\n              ? tr('component.emptyAdjustSearch', 'Try adjusting your search or filters')\n              : tr(\n                  'component.emptyCreate',\n                  'Register your first component to start tracking your software catalog'\n                )\n          }\n          action={\n            !searchQuery && typeFilter === 'all' && lifecycleFilter === 'all' ? (\n              <div className=\"flex items-center gap-2\">\n                <button\n                  onClick={() => setShowCreateForm(true)}\n                  className=\"flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n                >\n                  <Plus className=\"w-4 h-4\" />\n                  {tr('component.createComponent', 'Create Component')}\n                </button>\n                <GetHelpButton prompt=\"What is a Component in VibeControls and how do I add one?\" />\n              </div>\n            ) : undefined\n          }\n        />\n      )}\n\n      {/* Load more */}\n      {hasMore && filteredComponents.length > 0 && (\n        <div className=\"flex justify-center pt-2\">\n          <button\n            onClick={handleLoadMore}\n            disabled={loadingMore}\n            className=\"flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken-hover transition-colors disabled:opacity-50\"\n          >\n            {loadingMore\n              ? tr('common.loading', 'Loading...')\n              : tr('common.loadMore', 'Load more')}\n          </button>\n        </div>\n      )}\n\n      {/* Success Toast */}\n      {successMessage && (\n        <div className=\"fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm\">\n          {successMessage}\n        </div>\n      )}\n\n      {/* Create Form */}\n      <ComponentForm\n        isOpen={showCreateForm}\n        onClose={() => setShowCreateForm(false)}\n        onSubmit={handleCreateComponent}\n        extraSection={\n          <div>\n            <h3 className=\"text-sm font-medium text-text-secondary mb-2\">\n              {tr('component.tags', 'Tags')}\n            </h3>\n            <EntityTagPicker entityType=\"VIBECONTROLS_COMPONENT\" onDraftChange={setDraftTagIds} />\n          </div>\n        }\n      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}