@burdenoff/microfe-vibecontrols 2026.610.2 → 2026.610.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/pages/CatalogDetailPage.js +290 -262
  2. package/dist/pages/CatalogDetailPage.js.map +1 -1
  3. package/dist/pages/ComponentDetailPage.js +354 -326
  4. package/dist/pages/ComponentDetailPage.js.map +1 -1
  5. package/dist/pages/VibeDetailsPage.js +5 -5
  6. package/package.json +1 -1
package/dist/pages/CatalogDetailPage.js CHANGED
@@ -9,44 +9,47 @@ import { EmptyState as m } from "../components/shared/EmptyState.js";
9
9
  import { Card as h } from "../components/shared/Card.js";
10
10
  import { StatCard as g } from "../components/shared/StatCard.js";
11
11
  import "../components/shared/index.js";
12
- import { VIBE_PERMISSIONS as _ } from "../constants/permissions.js";
13
- import { EntityShareButton as ee } from "../components/sharing/EntityShareButton.js";
12
+ import { VIBE_PERMISSIONS as ee } from "../constants/permissions.js";
13
+ import { EntityShareButton as te } from "../components/sharing/EntityShareButton.js";
14
14
  import "../components/sharing/index.js";
15
- import { PageSkeleton as te } from "../components/shared/PageSkeleton.js";
16
- import { useQueryBackedTab as ne } from "../hooks/useQueryBackedTab.js";
17
- import { DocsTabPanel as re } from "../components/docs/DocsTabPanel.js";
15
+ import { PageSkeleton as ne } from "../components/shared/PageSkeleton.js";
16
+ import { useQueryBackedTab as re } from "../hooks/useQueryBackedTab.js";
17
+ import { DocsTabPanel as ie } from "../components/docs/DocsTabPanel.js";
18
18
  import "../components/docs/index.js";
19
- import { ComponentCard as ie } from "../components/idp-components/ComponentCard.js";
19
+ import { ScorecardPanel as ae } from "../components/scorecard/ScorecardPanel.js";
20
+ import "../components/scorecard/index.js";
21
+ import { ComponentCard as oe } from "../components/idp-components/ComponentCard.js";
20
22
  import "../components/idp-components/index.js";
21
- import { CatalogForm as ae } from "../components/catalog/CatalogForm.js";
23
+ import { CatalogForm as se } from "../components/catalog/CatalogForm.js";
22
24
  import "../components/catalog/index.js";
23
- import { useCallback as v, useEffect as y, useMemo as b, useState as x } from "react";
24
- import { useI18n as oe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
25
- import { ArrowLeft as S, ArrowRight as C, BookOpen as w, FileText as se, Layers as T, Network as E, Plus as D, RefreshCw as O, Settings as ce, Tag as le, Trash2 as ue, Zap as de } from "lucide-react";
26
- import { useParams as fe } from "react-router-dom";
27
- import { usePermissions as pe } from "@burdenoff/fe-libs/shared/providers/shell";
28
- import { AnimatePresence as me, motion as k } from "framer-motion";
29
- import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
30
- import { MotionItem as N, MotionList as P, MotionPage as F } from "@burdenoff/fe-libs/shared/motion";
31
- import { Background as I, BackgroundVariant as L, Controls as R, Handle as z, MarkerType as B, Position as V, ReactFlow as H, addEdge as U, useEdgesState as W, useNodesState as G } from "@xyflow/react";
25
+ import { useCallback as _, useEffect as v, useMemo as y, useState as b } from "react";
26
+ import { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
27
+ import { ArrowLeft as x, ArrowRight as S, BarChart3 as le, BookOpen as C, FileText as ue, Layers as w, Network as T, Plus as E, RefreshCw as D, Settings as de, Tag as fe, Trash2 as pe, Zap as me } from "lucide-react";
28
+ import { useParams as he } from "react-router-dom";
29
+ import { usePermissions as ge } from "@burdenoff/fe-libs/shared/providers/shell";
30
+ import { AnimatePresence as _e, motion as O } from "framer-motion";
31
+ import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
32
+ import { MotionItem as M, MotionList as N, MotionPage as P } from "@burdenoff/fe-libs/shared/motion";
33
+ import { Background as F, BackgroundVariant as I, Controls as L, Handle as R, MarkerType as z, Position as B, ReactFlow as V, addEdge as H, useEdgesState as U, useNodesState as W } from "@xyflow/react";
32
34
  import "@xyflow/react/dist/style.css";
33
35
  //#region src/pages/CatalogDetailPage.tsx
34
- var he = [
36
+ var ve = [
35
37
  "overview",
36
38
  "components",
37
39
  "dependency-graph",
40
+ "scorecard",
38
41
  "docs",
39
42
  "settings"
40
43
  ];
41
- function K() {
42
- let { t: n } = oe(), { id: i } = fe(), s = l(), { hasPermission: d, isLoading: y } = pe(), C = v((e, t) => {
44
+ function G() {
45
+ let { t: n } = ce(), { id: i } = he(), s = l(), { hasPermission: d, isLoading: v } = ge(), S = _((e, t) => {
43
46
  let r = n(e);
44
47
  return r === e ? t : r;
45
- }, [n]), [A, I] = ne(he, "overview"), [L, R] = x(!1), [z, B] = x(!1), [V, H] = x(!1), [U, W] = x(!1), [G, K] = x(null), { data: q, loading: J, error: Y, refetch: X } = r({
48
+ }, [n]), [k, F] = re(ve, "overview"), [I, L] = b(!1), [R, z] = b(!1), [B, V] = b(!1), [H, U] = b(!1), [W, G] = b(null), { data: K, loading: q, error: J, refetch: Y } = r({
46
49
  variables: { id: i || "" },
47
50
  skip: !i,
48
51
  fetchPolicy: "cache-and-network"
49
- }), [ve] = o({ refetchQueries: ["GetCatalog"] }), [ye] = t({ refetchQueries: ["ListCatalogs"] }), [be] = e({ refetchQueries: ["GetCatalog"] }), [xe] = a({ refetchQueries: ["GetCatalog"] }), Z = q?.vibecontrolsCatalog ?? null, Q = b(() => (Z?.components ?? []).map((e) => {
52
+ }), [be] = o({ refetchQueries: ["GetCatalog"] }), [xe] = t({ refetchQueries: ["ListCatalogs"] }), [Se] = e({ refetchQueries: ["GetCatalog"] }), [Ce] = a({ refetchQueries: ["GetCatalog"] }), Z = K?.vibecontrolsCatalog ?? null, Q = y(() => (Z?.components ?? []).map((e) => {
50
53
  let t = e.component || {};
51
54
  return {
52
55
  id: t.id,
@@ -62,21 +65,21 @@ function K() {
62
65
  updatedAt: t.updatedAt
63
66
  };
64
67
  }), [Z?.components]);
65
- if (y) return /* @__PURE__ */ j("div", {
68
+ if (v) return /* @__PURE__ */ A("div", {
66
69
  className: "flex items-center justify-center min-h-[400px]",
67
- children: /* @__PURE__ */ j("p", {
70
+ children: /* @__PURE__ */ A("p", {
68
71
  className: "text-text-secondary",
69
72
  children: "Loading permissions…"
70
73
  })
71
74
  });
72
- if (!d(_.VIBE_READ)) return /* @__PURE__ */ j("div", {
75
+ if (!d(ee.VIBE_READ)) return /* @__PURE__ */ A("div", {
73
76
  className: "flex items-center justify-center min-h-[400px]",
74
- children: /* @__PURE__ */ M("div", {
77
+ children: /* @__PURE__ */ j("div", {
75
78
  className: "text-center space-y-2",
76
- children: [/* @__PURE__ */ j("h2", {
79
+ children: [/* @__PURE__ */ A("h2", {
77
80
  className: "text-lg font-semibold text-foreground",
78
81
  children: "Access Denied"
79
- }), /* @__PURE__ */ j("p", {
82
+ }), /* @__PURE__ */ A("p", {
80
83
  className: "text-sm text-text-secondary",
81
84
  children: "You don't have permission to access this page."
82
85
  })]
@@ -84,10 +87,10 @@ function K() {
84
87
  });
85
88
  let $ = () => {
86
89
  s("/catalogs");
87
- }, Se = (e) => {
90
+ }, we = (e) => {
88
91
  s(`/components/${e.id}`);
89
- }, Ce = async (e) => {
90
- i && (await ve({ variables: {
92
+ }, Te = async (e) => {
93
+ i && (await be({ variables: {
91
94
  id: i,
92
95
  input: {
93
96
  name: e.name,
@@ -96,158 +99,163 @@ function K() {
96
99
  ownerName: e.owner || void 0,
97
100
  tags: e.tags.length > 0 ? e.tags : void 0
98
101
  }
99
- } }), K(C("catalog.updatedSuccess", "Catalog updated successfully")), setTimeout(() => K(null), 3e3));
100
- }, we = async () => {
102
+ } }), G(S("catalog.updatedSuccess", "Catalog updated successfully")), setTimeout(() => G(null), 3e3));
103
+ }, Ee = async () => {
101
104
  if (i) {
102
- W(!0);
105
+ U(!0);
103
106
  try {
104
- await ye({ variables: { id: i } }), H(!1), s("/catalogs");
107
+ await xe({ variables: { id: i } }), V(!1), s("/catalogs");
105
108
  } finally {
106
- W(!1);
109
+ U(!1);
107
110
  }
108
111
  }
109
- }, Te = [
112
+ }, De = [
110
113
  {
111
114
  id: "overview",
112
- label: C("nav.overview", "Overview"),
113
- icon: w
115
+ label: S("nav.overview", "Overview"),
116
+ icon: C
114
117
  },
115
118
  {
116
119
  id: "components",
117
- label: C("catalog.components", "Components"),
118
- icon: T,
120
+ label: S("catalog.components", "Components"),
121
+ icon: w,
119
122
  badge: `${Z?.componentCount ?? 0}`
120
123
  },
121
124
  {
122
125
  id: "dependency-graph",
123
- label: C("catalog.dependencyGraph", "Dependency Graph"),
124
- icon: E
126
+ label: S("catalog.dependencyGraph", "Dependency Graph"),
127
+ icon: T
128
+ },
129
+ {
130
+ id: "scorecard",
131
+ label: S("catalog.scorecard", "Scorecard"),
132
+ icon: le
125
133
  },
126
134
  {
127
135
  id: "docs",
128
- label: C("catalog.docs", "Docs"),
129
- icon: se
136
+ label: S("catalog.docs", "Docs"),
137
+ icon: ue
130
138
  },
131
139
  {
132
140
  id: "settings",
133
- label: C("common.settings", "Settings"),
134
- icon: ce
141
+ label: S("common.settings", "Settings"),
142
+ icon: de
135
143
  }
136
144
  ];
137
- return J && !Z ? /* @__PURE__ */ M(F, {
145
+ return q && !Z ? /* @__PURE__ */ j(P, {
138
146
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
139
- children: [/* @__PURE__ */ M("button", {
147
+ children: [/* @__PURE__ */ j("button", {
140
148
  type: "button",
141
149
  onClick: $,
142
150
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
143
- children: [/* @__PURE__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
144
- }), /* @__PURE__ */ j(te, { variant: "detail" })]
145
- }) : Y && !Z ? /* @__PURE__ */ M(F, {
151
+ children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
152
+ }), /* @__PURE__ */ A(ne, { variant: "detail" })]
153
+ }) : J && !Z ? /* @__PURE__ */ j(P, {
146
154
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
147
- children: [/* @__PURE__ */ M("button", {
155
+ children: [/* @__PURE__ */ j("button", {
148
156
  type: "button",
149
157
  onClick: $,
150
158
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
151
- children: [/* @__PURE__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
152
- }), /* @__PURE__ */ j(f, {
153
- title: C("catalog.failedLoad", "Failed to load catalog"),
154
- message: Y.message,
155
- onRetry: () => X()
159
+ children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
160
+ }), /* @__PURE__ */ A(f, {
161
+ title: S("catalog.failedLoad", "Failed to load catalog"),
162
+ message: J.message,
163
+ onRetry: () => Y()
156
164
  })]
157
- }) : Z ? /* @__PURE__ */ M(F, {
165
+ }) : Z ? /* @__PURE__ */ j(P, {
158
166
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
159
167
  children: [
160
- G && /* @__PURE__ */ j("div", {
168
+ W && /* @__PURE__ */ A("div", {
161
169
  className: "fixed top-4 left-4 right-4 sm:left-auto z-50 bg-status-success-bg text-status-success-text px-4 py-3 rounded-md shadow-lg",
162
- children: G
170
+ children: W
163
171
  }),
164
- /* @__PURE__ */ M("button", {
172
+ /* @__PURE__ */ j("button", {
165
173
  type: "button",
166
174
  onClick: $,
167
175
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
168
- children: [/* @__PURE__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
176
+ children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
169
177
  }),
170
- /* @__PURE__ */ j(u, {
178
+ /* @__PURE__ */ A(u, {
171
179
  title: Z.name,
172
- description: Z.description || C("catalog.noDescription", "No description"),
173
- actions: /* @__PURE__ */ M("div", {
180
+ description: Z.description || S("catalog.noDescription", "No description"),
181
+ actions: /* @__PURE__ */ j("div", {
174
182
  className: "flex items-center gap-2 flex-wrap",
175
183
  children: [
176
- /* @__PURE__ */ j(ee, {
184
+ /* @__PURE__ */ A(te, {
177
185
  entity: "catalog",
178
186
  resource: {
179
187
  id: Z.id,
180
188
  name: Z.name
181
189
  },
182
- label: C("catalog.share", "Share"),
190
+ label: S("catalog.share", "Share"),
183
191
  variant: "button"
184
192
  }),
185
- /* @__PURE__ */ j("button", {
193
+ /* @__PURE__ */ A("button", {
186
194
  type: "button",
187
- onClick: () => X(),
188
- disabled: J,
195
+ onClick: () => Y(),
196
+ disabled: q,
189
197
  className: "flex items-center justify-center p-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors disabled:opacity-50",
190
- title: C("common.refresh", "Refresh"),
191
- children: /* @__PURE__ */ j(O, { className: `size-4 ${J ? "animate-spin" : ""}` })
198
+ title: S("common.refresh", "Refresh"),
199
+ children: /* @__PURE__ */ A(D, { className: `size-4 ${q ? "animate-spin" : ""}` })
192
200
  }),
193
- /* @__PURE__ */ j("span", {
201
+ /* @__PURE__ */ A("span", {
194
202
  className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${Z.visibility === "PUBLIC" ? "bg-status-success-bg text-status-success-text" : Z.visibility === "INTERNAL" ? "bg-status-warning-bg text-status-warning-text" : "bg-bg-sunken text-text-secondary"}`,
195
203
  children: Z.visibility
196
204
  })
197
205
  ]
198
206
  })
199
207
  }),
200
- /* @__PURE__ */ M(P, {
208
+ /* @__PURE__ */ j(N, {
201
209
  stagger: .04,
202
210
  className: "grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4",
203
211
  children: [
204
- /* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(g, {
205
- title: C("catalog.components", "Components"),
212
+ /* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
213
+ title: S("catalog.components", "Components"),
206
214
  value: Z.componentCount ?? 0,
207
- icon: /* @__PURE__ */ j(T, { className: "size-4" })
215
+ icon: /* @__PURE__ */ A(w, { className: "size-4" })
208
216
  }) }),
209
- /* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(g, {
210
- title: C("catalog.vibes", "Vibes"),
217
+ /* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
218
+ title: S("catalog.vibes", "Vibes"),
211
219
  value: Z.vibeCount ?? 0,
212
- icon: /* @__PURE__ */ j(de, { className: "size-4" })
220
+ icon: /* @__PURE__ */ A(me, { className: "size-4" })
213
221
  }) }),
214
- /* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(g, {
215
- title: C("catalog.ownerName", "Owner"),
222
+ /* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(g, {
223
+ title: S("catalog.ownerName", "Owner"),
216
224
  value: Z.ownerNameName || "Unassigned",
217
- icon: /* @__PURE__ */ j(w, { className: "size-4" })
225
+ icon: /* @__PURE__ */ A(C, { className: "size-4" })
218
226
  }) })
219
227
  ]
220
228
  }),
221
- /* @__PURE__ */ M(h, { children: [/* @__PURE__ */ M("div", {
229
+ /* @__PURE__ */ j(h, { children: [/* @__PURE__ */ j("div", {
222
230
  className: "p-4 border-b border-border-default flex items-center gap-2",
223
- children: [/* @__PURE__ */ j(le, { className: "size-5" }), /* @__PURE__ */ j("h3", {
231
+ children: [/* @__PURE__ */ A(fe, { className: "size-5" }), /* @__PURE__ */ A("h3", {
224
232
  className: "font-semibold text-text-primary",
225
- children: C("catalog.tags", "Tags")
233
+ children: S("catalog.tags", "Tags")
226
234
  })]
227
- }), /* @__PURE__ */ j("div", {
235
+ }), /* @__PURE__ */ A("div", {
228
236
  className: "p-4",
229
- children: /* @__PURE__ */ j(p, {
237
+ children: /* @__PURE__ */ A(p, {
230
238
  entityType: "VIBECONTROLS_CATALOG",
231
239
  entityId: Z.id
232
240
  })
233
241
  })] }),
234
- /* @__PURE__ */ j("div", {
242
+ /* @__PURE__ */ A("div", {
235
243
  className: "border-b border-border-default",
236
- children: /* @__PURE__ */ j("nav", {
244
+ children: /* @__PURE__ */ A("nav", {
237
245
  className: "flex gap-1 -mb-px overflow-x-auto pb-1",
238
- "aria-label": C("catalog.tabsAriaLabel", "Catalog tabs"),
239
- children: Te.map((e) => {
240
- let t = e.icon, n = A === e.id;
241
- return /* @__PURE__ */ M("button", {
246
+ "aria-label": S("catalog.tabsAriaLabel", "Catalog tabs"),
247
+ children: De.map((e) => {
248
+ let t = e.icon, n = k === e.id;
249
+ return /* @__PURE__ */ j("button", {
242
250
  type: "button",
243
- onClick: () => I(e.id),
251
+ onClick: () => F(e.id),
244
252
  className: `flex shrink-0 items-center gap-1.5 px-3 py-2.5 text-xs sm:gap-2 sm:px-4 sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${n ? "border-action-primary-bg text-action-primary-text" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-default"}`,
245
253
  "aria-selected": n,
246
254
  role: "tab",
247
255
  children: [
248
- /* @__PURE__ */ j(t, { className: "size-4" }),
256
+ /* @__PURE__ */ A(t, { className: "size-4" }),
249
257
  e.label,
250
- e.badge && /* @__PURE__ */ j("span", {
258
+ e.badge && /* @__PURE__ */ A("span", {
251
259
  className: `hidden rounded-full px-1.5 py-0.5 text-[10px] sm:inline-flex sm:text-xs ${n ? "bg-action-primary-bg/10 text-action-primary-bg" : "bg-bg-sunken text-text-muted"}`,
252
260
  children: e.badge
253
261
  })
@@ -256,10 +264,10 @@ function K() {
256
264
  })
257
265
  })
258
266
  }),
259
- /* @__PURE__ */ M(me, {
267
+ /* @__PURE__ */ j(_e, {
260
268
  mode: "wait",
261
269
  children: [
262
- A === "overview" && /* @__PURE__ */ M(k.div, {
270
+ k === "overview" && /* @__PURE__ */ j(O.div, {
263
271
  initial: {
264
272
  opacity: 0,
265
273
  y: 8
@@ -275,63 +283,63 @@ function K() {
275
283
  transition: { duration: .2 },
276
284
  className: "space-y-6",
277
285
  children: [
278
- Z.description && /* @__PURE__ */ j(h, { children: /* @__PURE__ */ j("div", {
286
+ Z.description && /* @__PURE__ */ A(h, { children: /* @__PURE__ */ A("div", {
279
287
  className: "p-4",
280
- children: /* @__PURE__ */ j("p", {
288
+ children: /* @__PURE__ */ A("p", {
281
289
  className: "text-text-primary",
282
290
  children: Z.description
283
291
  })
284
292
  }) }),
285
- /* @__PURE__ */ M(h, { children: [/* @__PURE__ */ j("div", {
293
+ /* @__PURE__ */ j(h, { children: [/* @__PURE__ */ A("div", {
286
294
  className: "p-4 border-b border-border-default",
287
- children: /* @__PURE__ */ j("h3", {
295
+ children: /* @__PURE__ */ A("h3", {
288
296
  className: "font-semibold text-text-primary",
289
- children: C("catalog.metadata", "Metadata")
297
+ children: S("catalog.metadata", "Metadata")
290
298
  })
291
- }), /* @__PURE__ */ j("div", {
299
+ }), /* @__PURE__ */ A("div", {
292
300
  className: "p-4",
293
- children: /* @__PURE__ */ M("div", {
301
+ children: /* @__PURE__ */ j("div", {
294
302
  className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
295
303
  children: [
296
- /* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
304
+ /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
297
305
  className: "text-text-secondary",
298
- children: C("catalog.ownerNameLabel", "Owner")
299
- }), /* @__PURE__ */ j("p", {
306
+ children: S("catalog.ownerNameLabel", "Owner")
307
+ }), /* @__PURE__ */ A("p", {
300
308
  className: "font-medium text-text-primary",
301
- children: Z.ownerName || C("common.unset", "Unset")
309
+ children: Z.ownerName || S("common.unset", "Unset")
302
310
  })] }),
303
- /* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
311
+ /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
304
312
  className: "text-text-secondary",
305
- children: C("catalog.visibility", "Visibility")
306
- }), /* @__PURE__ */ j("p", {
313
+ children: S("catalog.visibility", "Visibility")
314
+ }), /* @__PURE__ */ A("p", {
307
315
  className: "font-medium text-text-primary",
308
316
  children: Z.visibility
309
317
  })] }),
310
- /* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
318
+ /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
311
319
  className: "text-text-secondary",
312
- children: C("common.created", "Created")
313
- }), /* @__PURE__ */ j("p", {
320
+ children: S("common.created", "Created")
321
+ }), /* @__PURE__ */ A("p", {
314
322
  className: "font-medium text-text-primary",
315
323
  children: new Date(Z.createdAt).toLocaleDateString()
316
324
  })] }),
317
- /* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
325
+ /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
318
326
  className: "text-text-secondary",
319
- children: C("common.updated", "Updated")
320
- }), /* @__PURE__ */ j("p", {
327
+ children: S("common.updated", "Updated")
328
+ }), /* @__PURE__ */ A("p", {
321
329
  className: "font-medium text-text-primary",
322
330
  children: new Date(Z.updatedAt).toLocaleDateString()
323
331
  })] })
324
332
  ]
325
333
  })
326
334
  })] }),
327
- Z.tags?.length > 0 && /* @__PURE__ */ j(h, { children: /* @__PURE__ */ M("div", {
335
+ Z.tags?.length > 0 && /* @__PURE__ */ A(h, { children: /* @__PURE__ */ j("div", {
328
336
  className: "p-4",
329
- children: [/* @__PURE__ */ j("h3", {
337
+ children: [/* @__PURE__ */ A("h3", {
330
338
  className: "font-semibold text-text-primary mb-3",
331
- children: C("catalog.tags", "Tags")
332
- }), /* @__PURE__ */ j("div", {
339
+ children: S("catalog.tags", "Tags")
340
+ }), /* @__PURE__ */ A("div", {
333
341
  className: "flex flex-wrap gap-2",
334
- children: Z.tags.map((e) => /* @__PURE__ */ j("span", {
342
+ children: Z.tags.map((e) => /* @__PURE__ */ A("span", {
335
343
  className: "px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
336
344
  children: e
337
345
  }, e))
@@ -339,7 +347,7 @@ function K() {
339
347
  }) })
340
348
  ]
341
349
  }, "overview"),
342
- A === "components" && /* @__PURE__ */ M(k.div, {
350
+ k === "components" && /* @__PURE__ */ j(O.div, {
343
351
  initial: {
344
352
  opacity: 0,
345
353
  y: 8
@@ -354,39 +362,39 @@ function K() {
354
362
  },
355
363
  transition: { duration: .2 },
356
364
  className: "space-y-4",
357
- children: [/* @__PURE__ */ M("div", {
365
+ children: [/* @__PURE__ */ j("div", {
358
366
  className: "flex items-center justify-between",
359
- children: [/* @__PURE__ */ M("p", {
367
+ children: [/* @__PURE__ */ j("p", {
360
368
  className: "text-sm text-text-secondary",
361
369
  children: [
362
370
  Q.length,
363
371
  " ",
364
- C("catalog.componentsInCatalog", "components in this catalog")
372
+ S("catalog.componentsInCatalog", "components in this catalog")
365
373
  ]
366
- }), /* @__PURE__ */ M("button", {
374
+ }), /* @__PURE__ */ j("button", {
367
375
  type: "button",
368
- onClick: () => B(!0),
376
+ onClick: () => z(!0),
369
377
  className: "flex items-center gap-2 px-3 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
370
- children: [/* @__PURE__ */ j(D, { className: "size-4" }), C("catalog.addComponent", "Add Component")]
378
+ children: [/* @__PURE__ */ A(E, { className: "size-4" }), S("catalog.addComponent", "Add Component")]
371
379
  })]
372
- }), Q.length > 0 ? /* @__PURE__ */ j(P, {
380
+ }), Q.length > 0 ? /* @__PURE__ */ A(N, {
373
381
  stagger: .04,
374
382
  className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
375
- children: Q.map((e) => /* @__PURE__ */ j(N, { children: /* @__PURE__ */ j(ie, {
383
+ children: Q.map((e) => /* @__PURE__ */ A(M, { children: /* @__PURE__ */ A(oe, {
376
384
  component: e,
377
- onOpen: Se
385
+ onOpen: we
378
386
  }) }, e.id))
379
- }) : /* @__PURE__ */ j(m, {
380
- icon: /* @__PURE__ */ j(T, { className: "size-8 text-text-secondary" }),
381
- title: C("catalog.noComponents", "No components"),
382
- description: C("catalog.noComponentsDescription", "Add components to this catalog to track them")
387
+ }) : /* @__PURE__ */ A(m, {
388
+ icon: /* @__PURE__ */ A(w, { className: "size-8 text-text-secondary" }),
389
+ title: S("catalog.noComponents", "No components"),
390
+ description: S("catalog.noComponentsDescription", "Add components to this catalog to track them")
383
391
  })]
384
392
  }, "components"),
385
- A === "dependency-graph" && /* @__PURE__ */ j(ge, {
393
+ k === "dependency-graph" && /* @__PURE__ */ A(ye, {
386
394
  catalogId: i || "",
387
- tr: C
395
+ tr: S
388
396
  }),
389
- A === "docs" && /* @__PURE__ */ j(k.div, {
397
+ k === "scorecard" && /* @__PURE__ */ A(O.div, {
390
398
  initial: {
391
399
  opacity: 0,
392
400
  y: 8
@@ -401,12 +409,32 @@ function K() {
401
409
  },
402
410
  transition: { duration: .2 },
403
411
  className: "space-y-6",
404
- children: /* @__PURE__ */ j(re, {
412
+ children: /* @__PURE__ */ A(ae, {
413
+ ownerType: "CATALOG",
414
+ ownerId: i || ""
415
+ })
416
+ }, "scorecard"),
417
+ k === "docs" && /* @__PURE__ */ A(O.div, {
418
+ initial: {
419
+ opacity: 0,
420
+ y: 8
421
+ },
422
+ animate: {
423
+ opacity: 1,
424
+ y: 0
425
+ },
426
+ exit: {
427
+ opacity: 0,
428
+ y: -8
429
+ },
430
+ transition: { duration: .2 },
431
+ className: "space-y-6",
432
+ children: /* @__PURE__ */ A(ie, {
405
433
  ownerType: "CATALOG",
406
434
  ownerId: i || ""
407
435
  })
408
436
  }, "docs"),
409
- A === "settings" && /* @__PURE__ */ j(k.div, {
437
+ k === "settings" && /* @__PURE__ */ A(O.div, {
410
438
  initial: {
411
439
  opacity: 0,
412
440
  y: 8
@@ -420,39 +448,39 @@ function K() {
420
448
  y: -8
421
449
  },
422
450
  transition: { duration: .2 },
423
- children: /* @__PURE__ */ M("div", {
451
+ children: /* @__PURE__ */ j("div", {
424
452
  className: "space-y-4",
425
- children: [/* @__PURE__ */ M(h, {
453
+ children: [/* @__PURE__ */ j(h, {
426
454
  padding: "lg",
427
- children: [/* @__PURE__ */ j("h3", {
455
+ children: [/* @__PURE__ */ A("h3", {
428
456
  className: "font-semibold text-text-primary mb-4",
429
- children: C("catalog.editCatalog", "Edit Catalog")
430
- }), /* @__PURE__ */ j("button", {
457
+ children: S("catalog.editCatalog", "Edit Catalog")
458
+ }), /* @__PURE__ */ A("button", {
431
459
  type: "button",
432
- onClick: () => R(!0),
460
+ onClick: () => L(!0),
433
461
  className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
434
- children: C("catalog.editDetails", "Edit Details")
462
+ children: S("catalog.editDetails", "Edit Details")
435
463
  })]
436
- }), /* @__PURE__ */ M(h, {
464
+ }), /* @__PURE__ */ j(h, {
437
465
  padding: "lg",
438
466
  children: [
439
- /* @__PURE__ */ j("h3", {
467
+ /* @__PURE__ */ A("h3", {
440
468
  className: "font-semibold text-status-error-text mb-2",
441
- children: C("catalog.dangerZone", "Danger Zone")
469
+ children: S("catalog.dangerZone", "Danger Zone")
442
470
  }),
443
- /* @__PURE__ */ j("p", {
471
+ /* @__PURE__ */ A("p", {
444
472
  className: "text-sm text-text-secondary mb-4",
445
- children: C("catalog.deleteWarning", "Deleting this catalog will detach all components and vibes. This cannot be undone.")
473
+ children: S("catalog.deleteWarning", "Deleting this catalog will detach all components and vibes. This cannot be undone.")
446
474
  }),
447
- /* @__PURE__ */ M("button", {
475
+ /* @__PURE__ */ j("button", {
448
476
  type: "button",
449
477
  "data-testid": "catalog-delete-button",
450
- onClick: () => H(!0),
478
+ onClick: () => V(!0),
451
479
  className: "inline-flex items-center gap-2 px-4 py-2 bg-status-error-bg text-status-error-text rounded-md hover:opacity-90 transition-opacity",
452
- children: [/* @__PURE__ */ j(ue, {
480
+ children: [/* @__PURE__ */ A(pe, {
453
481
  className: "size-4",
454
482
  "aria-hidden": "true"
455
- }), C("catalog.deleteCatalog", "Delete Catalog")]
483
+ }), S("catalog.deleteCatalog", "Delete Catalog")]
456
484
  })
457
485
  ]
458
486
  })]
@@ -460,10 +488,10 @@ function K() {
460
488
  }, "settings")
461
489
  ]
462
490
  }),
463
- /* @__PURE__ */ j(ae, {
464
- isOpen: L,
465
- onClose: () => R(!1),
466
- onSubmit: Ce,
491
+ /* @__PURE__ */ A(se, {
492
+ isOpen: I,
493
+ onClose: () => L(!1),
494
+ onSubmit: Te,
467
495
  initialData: {
468
496
  name: Z.name,
469
497
  description: Z.description || "",
@@ -471,66 +499,66 @@ function K() {
471
499
  owner: Z.ownerName || "",
472
500
  tags: Z.tags || []
473
501
  },
474
- title: C("catalog.editCatalog", "Edit Catalog")
502
+ title: S("catalog.editCatalog", "Edit Catalog")
475
503
  }),
476
- z && /* @__PURE__ */ j(_e, {
504
+ R && /* @__PURE__ */ A(X, {
477
505
  catalogId: i || "",
478
506
  existingComponentIds: Q.map((e) => e.id),
479
507
  onAdd: async (e) => {
480
- await be({ variables: {
508
+ await Se({ variables: {
481
509
  catalogId: i,
482
510
  componentId: e
483
- } }), K(C("catalog.componentAdded", "Component added to catalog")), setTimeout(() => K(null), 3e3), B(!1);
511
+ } }), G(S("catalog.componentAdded", "Component added to catalog")), setTimeout(() => G(null), 3e3), z(!1);
484
512
  },
485
- onClose: () => B(!1),
486
- tr: C
513
+ onClose: () => z(!1),
514
+ tr: S
487
515
  }),
488
- /* @__PURE__ */ j(c, {
489
- isOpen: V,
490
- onClose: () => H(!1),
491
- onConfirm: we,
492
- title: C("catalog.deleteCatalog", "Delete Catalog"),
493
- message: C("catalog.deleteConfirmMessage", `Are you sure you want to delete "${Z.name}"? This action cannot be undone.`),
494
- confirmLabel: C("common.delete", "Delete"),
516
+ /* @__PURE__ */ A(c, {
517
+ isOpen: B,
518
+ onClose: () => V(!1),
519
+ onConfirm: Ee,
520
+ title: S("catalog.deleteCatalog", "Delete Catalog"),
521
+ message: S("catalog.deleteConfirmMessage", `Are you sure you want to delete "${Z.name}"? This action cannot be undone.`),
522
+ confirmLabel: S("common.delete", "Delete"),
495
523
  variant: "danger",
496
- isLoading: U
524
+ isLoading: H
497
525
  })
498
526
  ]
499
- }) : /* @__PURE__ */ M(F, {
527
+ }) : /* @__PURE__ */ j(P, {
500
528
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
501
- children: [/* @__PURE__ */ M("button", {
529
+ children: [/* @__PURE__ */ j("button", {
502
530
  type: "button",
503
531
  onClick: $,
504
532
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
505
- children: [/* @__PURE__ */ j(S, { className: "size-4" }), C("catalog.backToCatalogs", "Back to Catalogs")]
506
- }), /* @__PURE__ */ j(m, {
507
- icon: /* @__PURE__ */ j(w, { className: "size-8 text-text-secondary" }),
508
- title: C("catalog.notFound", "Catalog not found"),
533
+ children: [/* @__PURE__ */ A(x, { className: "size-4" }), S("catalog.backToCatalogs", "Back to Catalogs")]
534
+ }), /* @__PURE__ */ A(m, {
535
+ icon: /* @__PURE__ */ A(C, { className: "size-8 text-text-secondary" }),
536
+ title: S("catalog.notFound", "Catalog not found"),
509
537
  description: `No catalog with ID "${i}" exists`,
510
- action: /* @__PURE__ */ j("button", {
538
+ action: /* @__PURE__ */ A("button", {
511
539
  type: "button",
512
540
  onClick: $,
513
541
  className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
514
- children: C("catalog.backToCatalogs", "Back to Catalogs")
542
+ children: S("catalog.backToCatalogs", "Back to Catalogs")
515
543
  })
516
544
  })]
517
545
  });
518
546
  }
519
- function q({ data: e }) {
520
- return /* @__PURE__ */ M(A, { children: [
521
- /* @__PURE__ */ j(z, {
547
+ function K({ data: e }) {
548
+ return /* @__PURE__ */ j(k, { children: [
549
+ /* @__PURE__ */ A(R, {
522
550
  type: "target",
523
- position: V.Left,
551
+ position: B.Left,
524
552
  style: {
525
553
  width: 8,
526
554
  height: 8,
527
555
  background: "var(--color-border-strong)"
528
556
  }
529
557
  }),
530
- /* @__PURE__ */ j("div", { children: e.label }),
531
- /* @__PURE__ */ j(z, {
558
+ /* @__PURE__ */ A("div", { children: e.label }),
559
+ /* @__PURE__ */ A(R, {
532
560
  type: "source",
533
- position: V.Right,
561
+ position: B.Right,
534
562
  style: {
535
563
  width: 8,
536
564
  height: 8,
@@ -539,8 +567,8 @@ function q({ data: e }) {
539
567
  })
540
568
  ] });
541
569
  }
542
- var J = { catalog: q };
543
- function Y(e, t) {
570
+ var q = { catalog: K };
571
+ function J(e, t) {
544
572
  let n = Math.max(1, Math.ceil(Math.sqrt(e.length))), r = new Map(e.map((e) => [e.name, e.id])), i = t.filter((e) => r.has(e.target));
545
573
  return {
546
574
  nodes: e.map((e, t) => {
@@ -552,13 +580,13 @@ function Y(e, t) {
552
580
  x: r * 220 + 40,
553
581
  y: a * 120 + 40
554
582
  },
555
- data: { label: /* @__PURE__ */ M("div", {
583
+ data: { label: /* @__PURE__ */ j("div", {
556
584
  style: {
557
585
  lineHeight: 1.4,
558
586
  textAlign: "center"
559
587
  },
560
588
  children: [
561
- /* @__PURE__ */ j("div", {
589
+ /* @__PURE__ */ A("div", {
562
590
  style: {
563
591
  fontWeight: 700,
564
592
  fontSize: 12,
@@ -569,7 +597,7 @@ function Y(e, t) {
569
597
  },
570
598
  children: e.name
571
599
  }),
572
- /* @__PURE__ */ M("div", {
600
+ /* @__PURE__ */ j("div", {
573
601
  style: {
574
602
  fontSize: 10,
575
603
  color: o > 0 ? "rgba(255,255,255,0.75)" : "var(--color-text-muted)",
@@ -577,7 +605,7 @@ function Y(e, t) {
577
605
  },
578
606
  children: [e.type, e.version ? ` v${e.version}` : ""]
579
607
  }),
580
- o > 0 && /* @__PURE__ */ M("div", {
608
+ o > 0 && /* @__PURE__ */ j("div", {
581
609
  style: {
582
610
  fontSize: 10,
583
611
  marginTop: 3,
@@ -611,7 +639,7 @@ function Y(e, t) {
611
639
  target: r.get(e.target),
612
640
  label: e.version || void 0,
613
641
  animated: e.dependencyType !== "dev",
614
- markerEnd: { type: B.ArrowClosed },
642
+ markerEnd: { type: z.ArrowClosed },
615
643
  style: {
616
644
  stroke: "var(--color-border-strong)",
617
645
  strokeWidth: 1.5,
@@ -628,10 +656,10 @@ function Y(e, t) {
628
656
  }))
629
657
  };
630
658
  }
631
- function X({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r }) {
632
- let { nodes: i, edges: a } = b(() => Y(e, t), [e, t]), [o, s, c] = G(i), [l, u, d] = W(a);
633
- y(() => {
634
- let { nodes: n, edges: r } = Y(e, t);
659
+ function Y({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r }) {
660
+ let { nodes: i, edges: a } = y(() => J(e, t), [e, t]), [o, s, c] = W(i), [l, u, d] = U(a);
661
+ v(() => {
662
+ let { nodes: n, edges: r } = J(e, t);
635
663
  s(n), u(r);
636
664
  }, [
637
665
  e,
@@ -639,33 +667,33 @@ function X({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r })
639
667
  s,
640
668
  u
641
669
  ]);
642
- let f = Math.ceil(e.length / Math.max(1, Math.ceil(Math.sqrt(e.length)))), p = Math.max(380, Math.min(f * 140 + 120, 600)), m = v((e, t) => {
670
+ let f = Math.ceil(e.length / Math.max(1, Math.ceil(Math.sqrt(e.length)))), p = Math.max(380, Math.min(f * 140 + 120, 600)), m = _((e, t) => {
643
671
  n?.(t.id);
644
- }, [n]), h = v((e) => {
645
- !e.source || !e.target || (u((t) => U({
672
+ }, [n]), h = _((e) => {
673
+ !e.source || !e.target || (u((t) => H({
646
674
  ...e,
647
675
  animated: !0,
648
- markerEnd: { type: B.ArrowClosed },
676
+ markerEnd: { type: z.ArrowClosed },
649
677
  style: {
650
678
  stroke: "var(--color-border-strong)",
651
679
  strokeWidth: 1.5
652
680
  }
653
681
  }, t)), r?.(e.source, e.target));
654
682
  }, [r, u]);
655
- return /* @__PURE__ */ j("div", {
683
+ return /* @__PURE__ */ A("div", {
656
684
  className: "w-full rounded-lg border border-border-default overflow-hidden",
657
685
  style: {
658
686
  height: p,
659
687
  background: "var(--color-bg-secondary)"
660
688
  },
661
- children: /* @__PURE__ */ M(H, {
689
+ children: /* @__PURE__ */ j(V, {
662
690
  nodes: o,
663
691
  edges: l,
664
692
  onNodesChange: c,
665
693
  onEdgesChange: d,
666
694
  onNodeClick: m,
667
695
  onConnect: h,
668
- nodeTypes: J,
696
+ nodeTypes: q,
669
697
  fitView: !0,
670
698
  fitViewOptions: { padding: .25 },
671
699
  minZoom: .15,
@@ -674,12 +702,12 @@ function X({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r })
674
702
  panOnScroll: !1,
675
703
  zoomOnScroll: !0,
676
704
  proOptions: { hideAttribution: !0 },
677
- children: [/* @__PURE__ */ j(I, {
678
- variant: L.Dots,
705
+ children: [/* @__PURE__ */ A(F, {
706
+ variant: I.Dots,
679
707
  gap: 20,
680
708
  size: 1,
681
709
  className: "!fill-text-tertiary/10"
682
- }), /* @__PURE__ */ j(R, {
710
+ }), /* @__PURE__ */ A(L, {
683
711
  showInteractive: !1,
684
712
  style: {
685
713
  background: "var(--color-bg-primary)",
@@ -691,12 +719,12 @@ function X({ graphNodes: e, graphEdges: t, onComponentClick: n, onConnect: r })
691
719
  })
692
720
  });
693
721
  }
694
- function ge({ catalogId: e, tr: t }) {
722
+ function ye({ catalogId: e, tr: t }) {
695
723
  let r = l(), { data: i, loading: a, error: o, refetch: c } = n({
696
724
  variables: { catalogId: e },
697
725
  skip: !e,
698
726
  fetchPolicy: "cache-and-network"
699
- }), [u] = s(), p = i?.vibecontrolsCatalogDependencyGraph, g = v(async (e, t) => {
727
+ }), [u] = s(), p = i?.vibecontrolsCatalogDependencyGraph, g = _(async (e, t) => {
700
728
  if (!p) return;
701
729
  let n = p.nodes.find((e) => e.id === t);
702
730
  if (!n) return;
@@ -724,7 +752,7 @@ function ge({ catalogId: e, tr: t }) {
724
752
  u,
725
753
  c
726
754
  ]);
727
- return /* @__PURE__ */ M(k.div, {
755
+ return /* @__PURE__ */ j(O.div, {
728
756
  initial: {
729
757
  opacity: 0,
730
758
  y: 8
@@ -740,89 +768,89 @@ function ge({ catalogId: e, tr: t }) {
740
768
  transition: { duration: .2 },
741
769
  className: "space-y-4",
742
770
  children: [
743
- /* @__PURE__ */ M("div", {
771
+ /* @__PURE__ */ j("div", {
744
772
  className: "flex items-center justify-between",
745
- children: [/* @__PURE__ */ M("h3", {
773
+ children: [/* @__PURE__ */ j("h3", {
746
774
  className: "font-semibold text-text-primary flex items-center gap-2",
747
- children: [/* @__PURE__ */ j(E, { className: "size-5" }), t("catalog.dependencyGraph", "Dependency Graph")]
748
- }), /* @__PURE__ */ j("button", {
775
+ children: [/* @__PURE__ */ A(T, { className: "size-5" }), t("catalog.dependencyGraph", "Dependency Graph")]
776
+ }), /* @__PURE__ */ A("button", {
749
777
  type: "button",
750
778
  onClick: () => c(),
751
779
  disabled: a,
752
780
  className: "p-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
753
781
  title: t("common.refresh", "Refresh"),
754
- children: /* @__PURE__ */ j(O, { className: `size-4 ${a ? "animate-spin" : ""}` })
782
+ children: /* @__PURE__ */ A(D, { className: `size-4 ${a ? "animate-spin" : ""}` })
755
783
  })]
756
784
  }),
757
- a && !p && /* @__PURE__ */ j(d, { message: t("catalog.loadingGraph", "Loading dependency graph...") }),
758
- o && !p && /* @__PURE__ */ j(f, {
785
+ a && !p && /* @__PURE__ */ A(d, { message: t("catalog.loadingGraph", "Loading dependency graph...") }),
786
+ o && !p && /* @__PURE__ */ A(f, {
759
787
  title: t("catalog.graphError", "Failed to load graph"),
760
788
  message: o.message,
761
789
  onRetry: () => c()
762
790
  }),
763
- p && p.nodes.length === 0 && /* @__PURE__ */ j(m, {
764
- icon: /* @__PURE__ */ j(E, { className: "size-8 text-text-secondary" }),
791
+ p && p.nodes.length === 0 && /* @__PURE__ */ A(m, {
792
+ icon: /* @__PURE__ */ A(T, { className: "size-8 text-text-secondary" }),
765
793
  title: t("catalog.noGraphNodes", "No components in catalog"),
766
794
  description: t("catalog.noGraphNodesDesc", "Add components to this catalog to visualize the dependency graph")
767
795
  }),
768
- p && p.nodes.length > 0 && /* @__PURE__ */ M(A, { children: [
769
- /* @__PURE__ */ M("div", {
796
+ p && p.nodes.length > 0 && /* @__PURE__ */ j(k, { children: [
797
+ /* @__PURE__ */ j("div", {
770
798
  className: "grid grid-cols-2 gap-4",
771
- children: [/* @__PURE__ */ M(h, {
799
+ children: [/* @__PURE__ */ j(h, {
772
800
  padding: "md",
773
- children: [/* @__PURE__ */ j("p", {
801
+ children: [/* @__PURE__ */ A("p", {
774
802
  className: "text-sm text-text-secondary",
775
803
  children: t("catalog.graphNodes", "Components")
776
- }), /* @__PURE__ */ j("p", {
804
+ }), /* @__PURE__ */ A("p", {
777
805
  className: "text-2xl font-bold text-text-primary",
778
806
  children: p.nodes.length
779
807
  })]
780
- }), /* @__PURE__ */ M(h, {
808
+ }), /* @__PURE__ */ j(h, {
781
809
  padding: "md",
782
- children: [/* @__PURE__ */ j("p", {
810
+ children: [/* @__PURE__ */ A("p", {
783
811
  className: "text-sm text-text-secondary",
784
812
  children: t("catalog.graphEdges", "Dependencies")
785
- }), /* @__PURE__ */ j("p", {
813
+ }), /* @__PURE__ */ A("p", {
786
814
  className: "text-2xl font-bold text-text-primary",
787
815
  children: p.edges.length
788
816
  })]
789
817
  })]
790
818
  }),
791
- /* @__PURE__ */ j(X, {
819
+ /* @__PURE__ */ A(Y, {
792
820
  graphNodes: p.nodes,
793
821
  graphEdges: p.edges,
794
822
  onComponentClick: (e) => r(`/components/${e}`),
795
823
  onConnect: g
796
824
  }),
797
- p.edges.length === 0 && /* @__PURE__ */ j("p", {
825
+ p.edges.length === 0 && /* @__PURE__ */ A("p", {
798
826
  className: "text-xs text-text-muted text-center",
799
827
  children: "No inter-component dependencies yet. Drag from a node's right handle to another node to create a dependency."
800
828
  }),
801
- p.edges.length > 0 && /* @__PURE__ */ M(h, { children: [/* @__PURE__ */ j("div", {
829
+ p.edges.length > 0 && /* @__PURE__ */ j(h, { children: [/* @__PURE__ */ A("div", {
802
830
  className: "p-4 border-b border-border-default",
803
- children: /* @__PURE__ */ j("h4", {
831
+ children: /* @__PURE__ */ A("h4", {
804
832
  className: "font-medium text-text-primary",
805
833
  children: t("catalog.graphEdgesList", "Dependency Edges")
806
834
  })
807
- }), /* @__PURE__ */ j("div", {
835
+ }), /* @__PURE__ */ A("div", {
808
836
  className: "divide-y divide-border-default",
809
- children: p.edges.map((e, t) => /* @__PURE__ */ M("div", {
837
+ children: p.edges.map((e, t) => /* @__PURE__ */ j("div", {
810
838
  className: "p-3 flex items-center gap-3 text-sm",
811
839
  children: [
812
- /* @__PURE__ */ j("span", {
840
+ /* @__PURE__ */ A("span", {
813
841
  className: "font-medium text-text-primary truncate max-w-[120px]",
814
842
  children: p.nodes.find((t) => t.id === e.source)?.name || e.source
815
843
  }),
816
- /* @__PURE__ */ j(C, { className: "size-4 text-text-muted flex-shrink-0" }),
817
- /* @__PURE__ */ j("span", {
844
+ /* @__PURE__ */ A(S, { className: "size-4 text-text-muted flex-shrink-0" }),
845
+ /* @__PURE__ */ A("span", {
818
846
  className: "text-text-primary truncate max-w-[120px]",
819
847
  children: p.nodes.find((t) => t.id === e.target)?.name || e.target
820
848
  }),
821
- e.version && /* @__PURE__ */ j("span", {
849
+ e.version && /* @__PURE__ */ A("span", {
822
850
  className: "text-xs text-text-muted ml-auto",
823
851
  children: e.version
824
852
  }),
825
- e.dependencyType && /* @__PURE__ */ j("span", {
853
+ e.dependencyType && /* @__PURE__ */ A("span", {
826
854
  className: "text-xs bg-bg-sunken text-text-secondary px-1.5 py-0.5 rounded",
827
855
  children: e.dependencyType
828
856
  })
@@ -833,8 +861,8 @@ function ge({ catalogId: e, tr: t }) {
833
861
  ]
834
862
  }, "dependency-graph");
835
863
  }
836
- function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a }) {
837
- let [o, s] = x(!1), [c, l] = x(""), { data: u, loading: f } = i({ fetchPolicy: "cache-and-network" }), p = b(() => {
864
+ function X({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a }) {
865
+ let [o, s] = b(!1), [c, l] = b(""), { data: u, loading: f } = i({ fetchPolicy: "cache-and-network" }), p = y(() => {
838
866
  let e = (u?.vibecontrolsComponents?.items ?? []).filter((e) => !t.includes(e.id));
839
867
  if (!c) return e;
840
868
  let n = c.toLowerCase();
@@ -851,9 +879,9 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
851
879
  s(!1);
852
880
  }
853
881
  };
854
- return /* @__PURE__ */ j("div", {
882
+ return /* @__PURE__ */ A("div", {
855
883
  className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
856
- children: /* @__PURE__ */ M(k.div, {
884
+ children: /* @__PURE__ */ j(O.div, {
857
885
  initial: {
858
886
  opacity: 0,
859
887
  scale: .95
@@ -864,14 +892,14 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
864
892
  },
865
893
  className: "bg-bg-surface rounded-lg w-full max-w-md max-h-[70vh] flex flex-col",
866
894
  children: [
867
- /* @__PURE__ */ M("div", {
895
+ /* @__PURE__ */ j("div", {
868
896
  className: "p-4 border-b border-border-default",
869
- children: [/* @__PURE__ */ j("h2", {
897
+ children: [/* @__PURE__ */ A("h2", {
870
898
  className: "text-lg font-semibold text-text-primary",
871
899
  children: a("catalog.addComponentTitle", "Add Component to Catalog")
872
- }), /* @__PURE__ */ j("div", {
900
+ }), /* @__PURE__ */ A("div", {
873
901
  className: "mt-3",
874
- children: /* @__PURE__ */ j("input", {
902
+ children: /* @__PURE__ */ A("input", {
875
903
  "aria-label": "control",
876
904
  type: "text",
877
905
  value: c,
@@ -881,36 +909,36 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
881
909
  })
882
910
  })]
883
911
  }),
884
- /* @__PURE__ */ M("div", {
912
+ /* @__PURE__ */ j("div", {
885
913
  className: "flex-1 overflow-y-auto p-2",
886
914
  children: [
887
- f && /* @__PURE__ */ j(d, { message: a("common.loading", "Loading...") }),
888
- !f && p.length === 0 && /* @__PURE__ */ j("div", {
915
+ f && /* @__PURE__ */ A(d, { message: a("common.loading", "Loading...") }),
916
+ !f && p.length === 0 && /* @__PURE__ */ A("div", {
889
917
  className: "p-4 text-center text-text-secondary text-sm",
890
918
  children: a("catalog.noAvailableComponents", "No available components to add")
891
919
  }),
892
- p.map((e) => /* @__PURE__ */ M("button", {
920
+ p.map((e) => /* @__PURE__ */ j("button", {
893
921
  type: "button",
894
922
  onClick: () => m(e.id),
895
923
  disabled: o,
896
924
  className: "w-full flex items-center justify-between p-3 rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50 text-left",
897
- children: [/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
925
+ children: [/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
898
926
  className: "font-medium text-text-primary text-sm",
899
927
  children: e.name
900
- }), /* @__PURE__ */ M("p", {
928
+ }), /* @__PURE__ */ j("p", {
901
929
  className: "text-xs text-text-secondary",
902
930
  children: [
903
931
  e.type,
904
932
  " · ",
905
933
  e.lifecycle
906
934
  ]
907
- })] }), /* @__PURE__ */ j(D, { className: "size-4 text-text-secondary" })]
935
+ })] }), /* @__PURE__ */ A(E, { className: "size-4 text-text-secondary" })]
908
936
  }, e.id))
909
937
  ]
910
938
  }),
911
- /* @__PURE__ */ j("div", {
939
+ /* @__PURE__ */ A("div", {
912
940
  className: "p-4 border-t border-border-default",
913
- children: /* @__PURE__ */ j("button", {
941
+ children: /* @__PURE__ */ A("button", {
914
942
  type: "button",
915
943
  onClick: r,
916
944
  className: "w-full px-4 py-2 text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
@@ -922,6 +950,6 @@ function _e({ catalogId: e, existingComponentIds: t, onAdd: n, onClose: r, tr: a
922
950
  });
923
951
  }
924
952
  //#endregion
925
- export { K as CatalogDetailPage };
953
+ export { G as CatalogDetailPage };
926
954
 
927
955
  //# sourceMappingURL=CatalogDetailPage.js.map