@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/pages/ComponentDocsPage.js

@@ -0,0 +1,154 @@
+import { useDocsContentQuery as e, useGetVibeDocsSiteQuery as t } from "../generated/wspace-operations.js";
+import { useVibeControls as n } from "../providers/VibeControlsProvider.js";
+import { LoadingState as r } from "../components/shared/LoadingState.js";
+import { ErrorState as i } from "../components/shared/ErrorState.js";
+import "../components/shared/index.js";
+import { VIBE_PERMISSIONS as a } from "../constants/permissions.js";
+import { createDocsPreviewHtml as o } from "../components/docs/previewHtml.js";
+import { useCallback as s, useState as c } from "react";
+import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowLeft as u, Edit3 as d, Maximize2 as f, Minimize2 as p } from "lucide-react";
+import { useNavigate as m, useParams as h } from "react-router-dom";
+import { usePermissions as g } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/pages/ComponentDocsPage.tsx
+function y() {
+	let { t: y } = l(), { id: b } = h(), x = m(), { basePath: S } = n(), C = S || "", { hasPermission: w, isLoading: T } = g(), E = s((e, t) => {
+		let n = y(e);
+		return n === e ? t : n;
+	}, [y]), [D, O] = c(!1), { data: k, loading: A, error: j } = t({
+		variables: {
+			ownerType: "COMPONENT",
+			ownerId: b || ""
+		},
+		skip: !b,
+		fetchPolicy: "cache-and-network"
+	}), M = k?.vibecontrolsDocsSiteByOwner ?? null, { data: N, loading: P, error: F } = e({
+		variables: {
+			siteId: M?.id || "",
+			path: ""
+		},
+		skip: !M?.id || !M.currentRevisionId,
+		fetchPolicy: "network-only"
+	}), I = N?.docsContent?.html ?? null, L = I ? o(I) : null;
+	if (T) return /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ _("p", {
+			className: "text-text-secondary",
+			children: "Loading permissions..."
+		})
+	});
+	if (!w(a.DOCS_SITE_READ)) return /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ v("div", {
+			className: "text-center space-y-2",
+			children: [/* @__PURE__ */ _("h2", {
+				className: "text-lg font-semibold text-foreground",
+				children: "Access Denied"
+			}), /* @__PURE__ */ _("p", {
+				className: "text-sm text-text-secondary",
+				children: "You don't have permission to access this page."
+			})]
+		})
+	});
+	let R = () => {
+		x(`${C}/components/${b}`);
+	};
+	return A && !M ? /* @__PURE__ */ _("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ _(r, { message: E("componentDocs.loading", "Loading documentation...") })
+	}) : j ? /* @__PURE__ */ _("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ _(i, {
+			title: E("componentDocs.failedLoad", "Failed to load docs"),
+			message: j.message
+		})
+	}) : !M || !M.currentRevisionId ? /* @__PURE__ */ v("div", {
+		className: "p-6",
+		children: [/* @__PURE__ */ v("button", {
+			onClick: R,
+			className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors mb-4",
+			children: [/* @__PURE__ */ _(u, { className: "w-4 h-4" }), E("componentDocs.backToComponent", "Back to Component")]
+		}), /* @__PURE__ */ v("div", {
+			className: "text-center py-12",
+			children: [/* @__PURE__ */ _("p", {
+				className: "text-text-secondary",
+				children: E("componentDocs.noPublished", "No published documentation available for this component.")
+			}), /* @__PURE__ */ _("button", {
+				onClick: R,
+				className: "mt-4 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
+				children: E("componentDocs.goToComponent", "Go to Component Details")
+			})]
+		})]
+	}) : /* @__PURE__ */ v("div", {
+		className: `flex flex-col ${D ? "fixed inset-0 z-50 bg-bg-surface" : ""}`,
+		children: [/* @__PURE__ */ v("div", {
+			className: "flex flex-col gap-3 border-b border-border-default bg-bg-surface px-4 py-2 flex-shrink-0 sm:flex-row sm:items-center sm:justify-between",
+			children: [/* @__PURE__ */ v("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-2 sm:gap-3",
+				children: [
+					/* @__PURE__ */ v("button", {
+						onClick: R,
+						className: "flex items-center gap-1.5 text-sm text-text-secondary hover:text-text-primary transition-colors",
+						children: [/* @__PURE__ */ _(u, { className: "w-4 h-4" }), E("componentDocs.backToComponent", "Back to Component")]
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "text-border-default",
+						children: "|"
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "min-w-0 break-words text-sm font-medium text-text-primary",
+						children: M.name
+					}),
+					M.currentRevision && /* @__PURE__ */ v("span", {
+						className: "text-xs text-text-muted bg-bg-sunken px-2 py-0.5 rounded",
+						children: ["Rev #", M.currentRevision.revisionNumber]
+					})
+				]
+			}), /* @__PURE__ */ v("div", {
+				className: "flex w-full items-center gap-2 sm:w-auto sm:justify-end",
+				children: [/* @__PURE__ */ v("button", {
+					onClick: () => x(`${C}/components/${b}`),
+					className: "flex flex-1 items-center justify-center gap-1.5 rounded-md bg-bg-sunken px-3 py-1.5 text-sm text-text-primary transition-colors hover:bg-bg-sunken/80 sm:flex-none",
+					children: [/* @__PURE__ */ _(d, { className: "w-3.5 h-3.5" }), E("common.edit", "Edit")]
+				}), /* @__PURE__ */ _("button", {
+					onClick: () => O(!D),
+					className: "p-1.5 text-text-secondary hover:text-text-primary transition-colors",
+					title: D ? E("common.exitFullscreen", "Exit fullscreen") : E("common.fullscreen", "Fullscreen"),
+					children: _(D ? p : f, { className: "w-4 h-4" })
+				})]
+			})]
+		}), L ? /* @__PURE__ */ _("div", {
+			className: "relative flex-1",
+			children: /* @__PURE__ */ _("iframe", {
+				srcDoc: L,
+				className: "flex-1 w-full border-0",
+				style: { minHeight: D ? "calc(100vh - 48px)" : "calc(100vh - 180px)" },
+				title: `${M.name} Documentation`,
+				sandbox: "allow-same-origin allow-forms allow-popups"
+			}, M.currentRevisionId)
+		}) : P ? /* @__PURE__ */ _("div", {
+			className: "relative flex-1",
+			children: /* @__PURE__ */ _("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-bg-surface z-10",
+				children: /* @__PURE__ */ _(r, { message: E("componentDocs.loading", "Loading documentation...") })
+			})
+		}) : F || M.currentRevisionId ? /* @__PURE__ */ _("div", {
+			className: "relative flex-1",
+			children: /* @__PURE__ */ _("div", {
+				className: "absolute inset-0 flex flex-col items-center justify-center bg-bg-surface z-10 gap-3",
+				children: /* @__PURE__ */ _("p", {
+					className: "text-sm text-status-error-text",
+					children: E("componentDocs.failedLoadDocs", "Failed to load documentation")
+				})
+			})
+		}) : /* @__PURE__ */ _("div", {
+			className: "flex-1 flex items-center justify-center text-text-muted",
+			children: E("common.loading", "Loading...")
+		})]
+	});
+}
+//#endregion
+export { y as ComponentDocsPage };
+
+//# sourceMappingURL=ComponentDocsPage.js.map

package/dist/pages/ComponentDocsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDocsPage.js","names":[],"sources":["../../src/pages/ComponentDocsPage.tsx"],"sourcesContent":["/**\n * ComponentDocsPage - Documentation viewer for a component\n *\n * URL: /vibecontrols/components/:id/docs\n *\n * Thin wrapper following the same pattern as VibeDocsPage\n * but scoped to ownerType=\"COMPONENT\".\n */\nimport { useState, useCallback } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '../constants/permissions';\nimport { ArrowLeft, Edit3, Maximize2, Minimize2 } from 'lucide-react';\nimport { LoadingState, ErrorState } from '@/components/shared';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { createDocsPreviewHtml } from '@/components/docs/previewHtml';\nimport { useDocsContentQuery, useGetVibeDocsSiteQuery } from '@/generated/wspace-operations';\n\ninterface ComponentDocsSite {\n  id: string;\n  workspaceId: string;\n  componentId: string;\n  name: string;\n  visibility: string;\n  currentRevisionId: string | null;\n  currentRevision: {\n    id: string;\n    revisionNumber: number;\n    status: string;\n    buildDurationMs: number | null;\n    publishedAt: string | null;\n  } | null;\n}\n\nexport function ComponentDocsPage() {\n  const { t } = useI18n();\n  const { id: componentId } = useParams<{ id: string }>();\n  const navigateRouter = useNavigate();\n  const { basePath } = useVibeControls();\n  const base = basePath || '';\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const [fullscreen, setFullscreen] = useState(false);\n\n  const {\n    data: siteData,\n    loading: siteLoading,\n    error: siteError,\n  } = useGetVibeDocsSiteQuery({\n    variables: { ownerType: 'COMPONENT' as const, ownerId: componentId || '' },\n    skip: !componentId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const site = siteData?.vibecontrolsDocsSiteByOwner ?? null;\n\n  const {\n    data: docsContentData,\n    loading: docsContentLoading,\n    error: docsContentError,\n  } = useDocsContentQuery({\n    variables: { siteId: site?.id || '', path: '' },\n    skip: !site?.id || !site.currentRevisionId,\n    fetchPolicy: 'network-only',\n  });\n  const docsHtml = docsContentData?.docsContent?.html ?? null;\n  const previewHtml = docsHtml ? createDocsPreviewHtml(docsHtml) : null;\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.DOCS_SITE_READ))\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 handleBack = () => {\n    navigateRouter(`${base}/components/${componentId}`);\n  };\n\n  if (siteLoading && !site) {\n    return (\n      <div className=\"p-6\">\n        <LoadingState message={tr('componentDocs.loading', 'Loading documentation...')} />\n      </div>\n    );\n  }\n\n  if (siteError) {\n    return (\n      <div className=\"p-6\">\n        <ErrorState\n          title={tr('componentDocs.failedLoad', 'Failed to load docs')}\n          message={siteError.message}\n        />\n      </div>\n    );\n  }\n\n  if (!site || !site.currentRevisionId) {\n    return (\n      <div className=\"p-6\">\n        <button\n          onClick={handleBack}\n          className=\"flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors mb-4\"\n        >\n          <ArrowLeft className=\"w-4 h-4\" />\n          {tr('componentDocs.backToComponent', 'Back to Component')}\n        </button>\n        <div className=\"text-center py-12\">\n          <p className=\"text-text-secondary\">\n            {tr(\n              'componentDocs.noPublished',\n              'No published documentation available for this component.'\n            )}\n          </p>\n          <button\n            onClick={handleBack}\n            className=\"mt-4 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors\"\n          >\n            {tr('componentDocs.goToComponent', 'Go to Component Details')}\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`flex flex-col ${fullscreen ? 'fixed inset-0 z-50 bg-bg-surface' : ''}`}>\n      {/* Top bar */}\n      <div className=\"flex flex-col gap-3 border-b border-border-default bg-bg-surface px-4 py-2 flex-shrink-0 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex min-w-0 flex-wrap items-center gap-2 sm:gap-3\">\n          <button\n            onClick={handleBack}\n            className=\"flex items-center gap-1.5 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            <ArrowLeft className=\"w-4 h-4\" />\n            {tr('componentDocs.backToComponent', 'Back to Component')}\n          </button>\n          <span className=\"text-border-default\">|</span>\n          <span className=\"min-w-0 break-words text-sm font-medium text-text-primary\">\n            {site.name}\n          </span>\n          {site.currentRevision && (\n            <span className=\"text-xs text-text-muted bg-bg-sunken px-2 py-0.5 rounded\">\n              Rev #{site.currentRevision.revisionNumber}\n            </span>\n          )}\n        </div>\n        <div className=\"flex w-full items-center gap-2 sm:w-auto sm:justify-end\">\n          <button\n            onClick={() => navigateRouter(`${base}/components/${componentId}`)}\n            className=\"flex flex-1 items-center justify-center gap-1.5 rounded-md bg-bg-sunken px-3 py-1.5 text-sm text-text-primary transition-colors hover:bg-bg-sunken/80 sm:flex-none\"\n          >\n            <Edit3 className=\"w-3.5 h-3.5\" />\n            {tr('common.edit', 'Edit')}\n          </button>\n          <button\n            onClick={() => setFullscreen(!fullscreen)}\n            className=\"p-1.5 text-text-secondary hover:text-text-primary transition-colors\"\n            title={\n              fullscreen\n                ? tr('common.exitFullscreen', 'Exit fullscreen')\n                : tr('common.fullscreen', 'Fullscreen')\n            }\n          >\n            {fullscreen ? <Minimize2 className=\"w-4 h-4\" /> : <Maximize2 className=\"w-4 h-4\" />}\n          </button>\n        </div>\n      </div>\n\n      {/* Docs iframe */}\n      {previewHtml ? (\n        <div className=\"relative flex-1\">\n          <iframe\n            key={site.currentRevisionId}\n            srcDoc={previewHtml}\n            className=\"flex-1 w-full border-0\"\n            style={{ minHeight: fullscreen ? 'calc(100vh - 48px)' : 'calc(100vh - 180px)' }}\n            title={`${site.name} Documentation`}\n            sandbox=\"allow-same-origin allow-forms allow-popups\"\n          />\n        </div>\n      ) : docsContentLoading ? (\n        <div className=\"relative flex-1\">\n          <div className=\"absolute inset-0 flex items-center justify-center bg-bg-surface z-10\">\n            <LoadingState message={tr('componentDocs.loading', 'Loading documentation...')} />\n          </div>\n        </div>\n      ) : docsContentError || site.currentRevisionId ? (\n        <div className=\"relative flex-1\">\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-bg-surface z-10 gap-3\">\n            <p className=\"text-sm text-status-error-text\">\n              {tr('componentDocs.failedLoadDocs', 'Failed to load documentation')}\n            </p>\n          </div>\n        </div>\n      ) : (\n        <div className=\"flex-1 flex items-center justify-center text-text-muted\">\n          {tr('common.loading', 'Loading...')}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/ComponentsPage.d.ts

@@ -0,0 +1,2 @@
+export declare function ComponentsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComponentsPage.d.ts.map

package/dist/pages/ComponentsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsPage.d.ts","sourceRoot":"","sources":["../../src/pages/ComponentsPage.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,cAAc,4CAgS7B"}

package/dist/pages/ComponentsPage.js

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

package/dist/pages/ComponentsPage.js.map

@@ -0,0 +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 {\n  PageHeader,\n  SearchInput,\n  FilterDropdown,\n  EmptyState,\n  LoadingState,\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\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    await refetch();\n    setShowCreateForm(false);\n    setSuccessMessage(tr('component.createdSuccess', 'Component created successfully'));\n    setTimeout(() => setSuccessMessage(null), 3000);\n  };\n\n  if (loading && components.length === 0) {\n    return (\n      <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n        <LoadingState message={tr('component.loading', 'Loading components...')} />\n      </MotionPage>\n    );\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      {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      />\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/GettingStartedPage.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Getting Started page — a tabbed guide to installing and using the
+ * VibeControls Agent CLI. Two top-level tabs:
+ *
+ *   • Install — shows curl / npm commands for Linux, macOS, Windows via
+ *     the shared `InstallTabs` component.
+ *   • CLI Reference — a compact reference of the most common commands.
+ *
+ * Bun is the only machine prerequisite — the curl install script installs
+ * it automatically at a pinned version (v1.3.10). OAuth2 is always enabled
+ * in the gateway so no manual configuration is needed; `vibe start` also
+ * runs the equivalent of `vibe setup` automatically, so users don't need
+ * to worry about that step either.
+ */
+export declare function GettingStartedPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GettingStartedPage.d.ts.map

package/dist/pages/GettingStartedPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GettingStartedPage.d.ts","sourceRoot":"","sources":["../../src/pages/GettingStartedPage.tsx"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,4CA2OjC"}