@burdenoff/microfe-vibecontrols 2026.518.2 → 2026.519.2

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 (9) hide show
  1. package/dist/pages/AgentsPage.js +7 -4
  2. package/dist/pages/AgentsPage.js.map +1 -1
  3. package/dist/pages/CatalogDetailPage.js +333 -289
  4. package/dist/pages/CatalogDetailPage.js.map +1 -1
  5. package/dist/pages/ComponentDetailPage.js +243 -199
  6. package/dist/pages/ComponentDetailPage.js.map +1 -1
  7. package/dist/pages/TemplateDetailPage.js +104 -71
  8. package/dist/pages/TemplateDetailPage.js.map +1 -1
  9. package/package.json +2 -2
package/dist/pages/ComponentDetailPage.js CHANGED
@@ -1,10 +1,11 @@
1
- import { useGetComponentQuery as e, usePublishComponentAsTemplateMutation as t, useUpdateComponentMutation as n } from "../generated/wspace-operations.js";
2
- import { useVibeNavigate as ee } from "../providers/VibeControlsProvider.js";
3
- import { PageHeader as te } from "../components/shared/PageHeader.js";
4
- import { LoadingState as r } from "../components/shared/LoadingState.js";
5
- import { ErrorState as i } from "../components/shared/ErrorState.js";
6
- import { QuotaExhaustedDialog as a } from "../components/shared/QuotaExhaustedDialog.js";
7
- import { isQuotaExhaustedError as o } from "../utils/quotaUtils.js";
1
+ import { useDeleteComponentMutation as e, useGetComponentQuery as t, usePublishComponentAsTemplateMutation as n, useUpdateComponentMutation as r } from "../generated/wspace-operations.js";
2
+ import { useVibeNavigate as i } from "../providers/VibeControlsProvider.js";
3
+ import { PageHeader as a } from "../components/shared/PageHeader.js";
4
+ import { LoadingState as o } from "../components/shared/LoadingState.js";
5
+ import { ErrorState as ee } from "../components/shared/ErrorState.js";
6
+ import { ConfirmDialog as te } from "../components/shared/ConfirmDialog.js";
7
+ import { QuotaExhaustedDialog as ne } from "../components/shared/QuotaExhaustedDialog.js";
8
+ import { isQuotaExhaustedError as re } from "../utils/quotaUtils.js";
8
9
  import { EmptyState as s } from "../components/shared/EmptyState.js";
9
10
  import { Card as c } from "../components/shared/Card.js";
10
11
  import { StatCard as l } from "../components/shared/StatCard.js";
@@ -20,15 +21,15 @@ import "../components/idp-components/index.js";
20
21
  import { CatalogCard as h } from "../components/catalog/CatalogCard.js";
21
22
  import "../components/catalog/index.js";
22
23
  import { useCallback as g, useMemo as _, useState as v } from "react";
23
- import { useI18n as y } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
24
- import { ArrowLeft as b, BarChart3 as x, BookOpen as S, Box as C, FileCode as w, FileText as ne, Layers as re, RefreshCw as ie, Settings as ae, Upload as oe } from "lucide-react";
25
- import { useParams as se } from "react-router-dom";
26
- import { usePermissions as T } from "@burdenoff/fe-libs/shared/providers/shell";
27
- import { AnimatePresence as E, motion as D } from "framer-motion";
28
- import { jsx as O, jsxs as k } from "react/jsx-runtime";
29
- import { MotionItem as A, MotionList as j, MotionPage as M } from "@burdenoff/fe-libs/shared/motion";
24
+ import { useI18n as ie } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
25
+ import { ArrowLeft as y, BarChart3 as ae, BookOpen as b, Box as x, FileCode as S, FileText as oe, Layers as se, RefreshCw as ce, Settings as le, Trash2 as ue, Upload as de } from "lucide-react";
26
+ import { useParams as fe } from "react-router-dom";
27
+ import { usePermissions as C } from "@burdenoff/fe-libs/shared/providers/shell";
28
+ import { AnimatePresence as w, motion as T } from "framer-motion";
29
+ import { jsx as E, jsxs as D } from "react/jsx-runtime";
30
+ import { MotionItem as O, MotionList as k, MotionPage as A } from "@burdenoff/fe-libs/shared/motion";
30
31
  //#region src/pages/ComponentDetailPage.tsx
31
- var N = [
32
+ var j = [
32
33
  "overview",
33
34
  "catalogs",
34
35
  "docs",
@@ -36,15 +37,15 @@ var N = [
36
37
  "template",
37
38
  "settings"
38
39
  ];
39
- function P() {
40
- let { t: P } = y(), { id: F } = se(), I = ee(), { hasPermission: L, isLoading: R } = T(), z = g((e, t) => {
41
- let n = P(e);
40
+ function M() {
41
+ let { t: M } = ie(), { id: N } = fe(), P = i(), { hasPermission: F, isLoading: I } = C(), L = g((e, t) => {
42
+ let n = M(e);
42
43
  return n === e ? t : n;
43
- }, [P]), [B, ce] = d(N, "overview"), [V, H] = v(!1), [U, W] = v(null), [G, K] = v(!1), { data: le, loading: q, error: J, refetch: Y } = e({
44
- variables: { id: F || "" },
45
- skip: !F,
44
+ }, [M]), [R, z] = d(j, "overview"), [B, V] = v(!1), [pe, H] = v(!1), [me, U] = v(!1), [W, G] = v(null), [he, K] = v(!1), { data: ge, loading: q, error: J, refetch: Y } = t({
45
+ variables: { id: N || "" },
46
+ skip: !N,
46
47
  fetchPolicy: "cache-and-network"
47
- }), [X] = n({ refetchQueries: ["GetComponent"] }), [ue] = t({ refetchQueries: ["GetComponent"] }), Z = le?.vibecontrolsComponent ?? null, Q = _(() => (Z?.catalogs ?? []).map((e) => {
48
+ }), [X] = r({ refetchQueries: ["GetComponent"] }), [_e] = e({ refetchQueries: ["ListComponents"] }), [ve] = n({ refetchQueries: ["GetComponent"] }), Z = ge?.vibecontrolsComponent ?? null, Q = _(() => (Z?.catalogs ?? []).map((e) => {
48
49
  let t = e.catalog || {};
49
50
  return {
50
51
  id: t.id,
@@ -58,33 +59,33 @@ function P() {
58
59
  updatedAt: t.updatedAt
59
60
  };
60
61
  }), [Z?.catalogs]);
61
- if (R) return /* @__PURE__ */ O("div", {
62
+ if (I) return /* @__PURE__ */ E("div", {
62
63
  className: "flex items-center justify-center min-h-[400px]",
63
- children: /* @__PURE__ */ O("p", {
64
+ children: /* @__PURE__ */ E("p", {
64
65
  className: "text-text-secondary",
65
66
  children: "Loading permissions..."
66
67
  })
67
68
  });
68
- if (!L(u.VIBE_READ)) return /* @__PURE__ */ O("div", {
69
+ if (!F(u.VIBE_READ)) return /* @__PURE__ */ E("div", {
69
70
  className: "flex items-center justify-center min-h-[400px]",
70
- children: /* @__PURE__ */ k("div", {
71
+ children: /* @__PURE__ */ D("div", {
71
72
  className: "text-center space-y-2",
72
- children: [/* @__PURE__ */ O("h2", {
73
+ children: [/* @__PURE__ */ E("h2", {
73
74
  className: "text-lg font-semibold text-foreground",
74
75
  children: "Access Denied"
75
- }), /* @__PURE__ */ O("p", {
76
+ }), /* @__PURE__ */ E("p", {
76
77
  className: "text-sm text-text-secondary",
77
78
  children: "You don't have permission to access this page."
78
79
  })]
79
80
  })
80
81
  });
81
82
  let $ = () => {
82
- I("/components");
83
- }, de = (e) => {
84
- I(`/catalogs/${e.id}`);
85
- }, fe = async (e) => {
86
- F && (await X({ variables: {
87
- id: F,
83
+ P("/components");
84
+ }, ye = (e) => {
85
+ P(`/catalogs/${e.id}`);
86
+ }, be = async (e) => {
87
+ N && (await X({ variables: {
88
+ id: N,
88
89
  input: {
89
90
  name: e.name,
90
91
  description: e.description || void 0,
@@ -96,154 +97,163 @@ function P() {
96
97
  ownerName: e.owner || void 0,
97
98
  tags: e.tags.length > 0 ? e.tags : void 0
98
99
  }
99
- } }), W(z("component.updatedSuccess", "Component updated successfully")), setTimeout(() => W(null), 3e3));
100
- }, pe = async () => {
101
- if (F) try {
102
- await ue({ variables: {
103
- componentId: F,
100
+ } }), G(L("component.updatedSuccess", "Component updated successfully")), setTimeout(() => G(null), 3e3));
101
+ }, xe = async () => {
102
+ if (N) {
103
+ U(!0);
104
+ try {
105
+ await _e({ variables: { id: N } }), H(!1), P("/components");
106
+ } finally {
107
+ U(!1);
108
+ }
109
+ }
110
+ }, Se = async () => {
111
+ if (N) try {
112
+ await ve({ variables: {
113
+ componentId: N,
104
114
  input: { name: Z?.name || "Template" }
105
- } }), W(z("component.publishedAsTemplate", "Published as template successfully")), setTimeout(() => W(null), 3e3);
115
+ } }), G(L("component.publishedAsTemplate", "Published as template successfully")), setTimeout(() => G(null), 3e3);
106
116
  } catch (e) {
107
- if (o(e)) {
117
+ if (re(e)) {
108
118
  K(!0);
109
119
  return;
110
120
  }
111
- W(e instanceof Error ? e.message : z("component.failedPublish", "Failed to publish")), setTimeout(() => W(null), 3e3);
121
+ G(e instanceof Error ? e.message : L("component.failedPublish", "Failed to publish")), setTimeout(() => G(null), 3e3);
112
122
  }
113
- }, me = {
123
+ }, Ce = {
114
124
  EXPERIMENTAL: "bg-status-warning-bg text-status-warning-text",
115
125
  PRODUCTION: "bg-status-success-bg text-status-success-text",
116
126
  DEPRECATED: "bg-status-error-bg text-status-error-text"
117
- }, he = [
127
+ }, we = [
118
128
  {
119
129
  id: "overview",
120
- label: z("nav.overview", "Overview"),
121
- icon: C
130
+ label: L("nav.overview", "Overview"),
131
+ icon: x
122
132
  },
123
133
  {
124
134
  id: "catalogs",
125
- label: z("component.catalogs", "Catalogs"),
126
- icon: S,
135
+ label: L("component.catalogs", "Catalogs"),
136
+ icon: b,
127
137
  badge: `${Q.length}`
128
138
  },
129
139
  {
130
140
  id: "docs",
131
- label: z("component.docs", "Docs"),
132
- icon: ne
141
+ label: L("component.docs", "Docs"),
142
+ icon: oe
133
143
  },
134
144
  {
135
145
  id: "scorecard",
136
- label: z("component.scorecard", "Scorecard"),
137
- icon: x
146
+ label: L("component.scorecard", "Scorecard"),
147
+ icon: ae
138
148
  },
139
149
  {
140
150
  id: "template",
141
- label: z("component.template", "Template"),
142
- icon: w
151
+ label: L("component.template", "Template"),
152
+ icon: S
143
153
  },
144
154
  {
145
155
  id: "settings",
146
- label: z("common.settings", "Settings"),
147
- icon: ae
156
+ label: L("common.settings", "Settings"),
157
+ icon: le
148
158
  }
149
159
  ];
150
- return q && !Z ? /* @__PURE__ */ k(M, {
160
+ return q && !Z ? /* @__PURE__ */ D(A, {
151
161
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
152
- children: [/* @__PURE__ */ k("button", {
162
+ children: [/* @__PURE__ */ D("button", {
153
163
  onClick: $,
154
164
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
155
- children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
156
- }), /* @__PURE__ */ O(r, { message: z("component.loadingDetails", "Loading component details...") })]
157
- }) : J && !Z ? /* @__PURE__ */ k(M, {
165
+ children: [/* @__PURE__ */ E(y, { className: "w-4 h-4" }), L("component.backToComponents", "Back to Components")]
166
+ }), /* @__PURE__ */ E(o, { message: L("component.loadingDetails", "Loading component details...") })]
167
+ }) : J && !Z ? /* @__PURE__ */ D(A, {
158
168
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
159
- children: [/* @__PURE__ */ k("button", {
169
+ children: [/* @__PURE__ */ D("button", {
160
170
  onClick: $,
161
171
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
162
- children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
163
- }), /* @__PURE__ */ O(i, {
164
- title: z("component.failedLoad", "Failed to load component"),
172
+ children: [/* @__PURE__ */ E(y, { className: "w-4 h-4" }), L("component.backToComponents", "Back to Components")]
173
+ }), /* @__PURE__ */ E(ee, {
174
+ title: L("component.failedLoad", "Failed to load component"),
165
175
  message: J.message,
166
176
  onRetry: () => Y()
167
177
  })]
168
- }) : Z ? /* @__PURE__ */ k(M, {
178
+ }) : Z ? /* @__PURE__ */ D(A, {
169
179
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
170
180
  children: [
171
- U && /* @__PURE__ */ O("div", {
181
+ W && /* @__PURE__ */ E("div", {
172
182
  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",
173
- children: U
183
+ children: W
174
184
  }),
175
- /* @__PURE__ */ k("button", {
185
+ /* @__PURE__ */ D("button", {
176
186
  onClick: $,
177
187
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
178
- children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
188
+ children: [/* @__PURE__ */ E(y, { className: "w-4 h-4" }), L("component.backToComponents", "Back to Components")]
179
189
  }),
180
- /* @__PURE__ */ O(te, {
190
+ /* @__PURE__ */ E(a, {
181
191
  title: Z.name,
182
- description: Z.description || z("component.noDescription", "No description"),
183
- actions: /* @__PURE__ */ k("div", {
192
+ description: Z.description || L("component.noDescription", "No description"),
193
+ actions: /* @__PURE__ */ D("div", {
184
194
  className: "flex items-center gap-2 flex-wrap",
185
195
  children: [
186
- /* @__PURE__ */ O("button", {
196
+ /* @__PURE__ */ E("button", {
187
197
  onClick: () => Y(),
188
198
  disabled: q,
189
199
  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: z("common.refresh", "Refresh"),
191
- children: /* @__PURE__ */ O(ie, { className: `w-4 h-4 ${q ? "animate-spin" : ""}` })
200
+ title: L("common.refresh", "Refresh"),
201
+ children: /* @__PURE__ */ E(ce, { className: `w-4 h-4 ${q ? "animate-spin" : ""}` })
192
202
  }),
193
- /* @__PURE__ */ O("span", {
203
+ /* @__PURE__ */ E("span", {
194
204
  className: "inline-flex items-center px-2.5 py-1 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
195
205
  children: Z.type
196
206
  }),
197
- /* @__PURE__ */ O("span", {
198
- className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${me[Z.lifecycle] || "bg-bg-sunken text-text-secondary"}`,
207
+ /* @__PURE__ */ E("span", {
208
+ className: `inline-flex items-center px-2.5 py-1 text-xs font-medium rounded ${Ce[Z.lifecycle] || "bg-bg-sunken text-text-secondary"}`,
199
209
  children: Z.lifecycle
200
210
  })
201
211
  ]
202
212
  })
203
213
  }),
204
- /* @__PURE__ */ k(j, {
214
+ /* @__PURE__ */ D(k, {
205
215
  stagger: .04,
206
216
  className: "grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4",
207
217
  children: [
208
- /* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
209
- title: z("component.type", "Type"),
218
+ /* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(l, {
219
+ title: L("component.type", "Type"),
210
220
  value: Z.type,
211
- icon: /* @__PURE__ */ O(C, { className: "w-4 h-4" })
221
+ icon: /* @__PURE__ */ E(x, { className: "w-4 h-4" })
212
222
  }) }),
213
- /* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
214
- title: z("component.lifecycle", "Lifecycle"),
223
+ /* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(l, {
224
+ title: L("component.lifecycle", "Lifecycle"),
215
225
  value: Z.lifecycle,
216
- icon: /* @__PURE__ */ O(re, { className: "w-4 h-4" }),
226
+ icon: /* @__PURE__ */ E(se, { className: "w-4 h-4" }),
217
227
  variant: Z.lifecycle === "PRODUCTION" ? "success" : Z.lifecycle === "DEPRECATED" ? "error" : "warning"
218
228
  }) }),
219
- /* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
220
- title: z("component.version", "Version"),
229
+ /* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(l, {
230
+ title: L("component.version", "Version"),
221
231
  value: Z.version || "-",
222
- icon: /* @__PURE__ */ O(w, { className: "w-4 h-4" })
232
+ icon: /* @__PURE__ */ E(S, { className: "w-4 h-4" })
223
233
  }) }),
224
- /* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(l, {
225
- title: z("component.catalogs", "Catalogs"),
234
+ /* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(l, {
235
+ title: L("component.catalogs", "Catalogs"),
226
236
  value: Q.length,
227
- icon: /* @__PURE__ */ O(S, { className: "w-4 h-4" })
237
+ icon: /* @__PURE__ */ E(b, { className: "w-4 h-4" })
228
238
  }) })
229
239
  ]
230
240
  }),
231
- /* @__PURE__ */ O("div", {
241
+ /* @__PURE__ */ E("div", {
232
242
  className: "border-b border-border-default",
233
- children: /* @__PURE__ */ O("nav", {
243
+ children: /* @__PURE__ */ E("nav", {
234
244
  className: "flex gap-1 -mb-px overflow-x-auto pb-1",
235
- "aria-label": z("component.tabsAriaLabel", "Component tabs"),
236
- children: he.map((e) => {
237
- let t = e.icon, n = B === e.id;
238
- return /* @__PURE__ */ k("button", {
239
- onClick: () => ce(e.id),
245
+ "aria-label": L("component.tabsAriaLabel", "Component tabs"),
246
+ children: we.map((e) => {
247
+ let t = e.icon, n = R === e.id;
248
+ return /* @__PURE__ */ D("button", {
249
+ onClick: () => z(e.id),
240
250
  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"}`,
241
251
  "aria-selected": n,
242
252
  role: "tab",
243
253
  children: [
244
- /* @__PURE__ */ O(t, { className: "w-4 h-4" }),
254
+ /* @__PURE__ */ E(t, { className: "w-4 h-4" }),
245
255
  e.label,
246
- e.badge && /* @__PURE__ */ O("span", {
256
+ e.badge && /* @__PURE__ */ E("span", {
247
257
  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"}`,
248
258
  children: e.badge
249
259
  })
@@ -252,10 +262,10 @@ function P() {
252
262
  })
253
263
  })
254
264
  }),
255
- /* @__PURE__ */ k(E, {
265
+ /* @__PURE__ */ D(w, {
256
266
  mode: "wait",
257
267
  children: [
258
- B === "overview" && /* @__PURE__ */ k(D.div, {
268
+ R === "overview" && /* @__PURE__ */ D(T.div, {
259
269
  initial: {
260
270
  opacity: 0,
261
271
  y: 8
@@ -271,58 +281,58 @@ function P() {
271
281
  transition: { duration: .2 },
272
282
  className: "space-y-6",
273
283
  children: [
274
- Z.description && /* @__PURE__ */ O(c, { children: /* @__PURE__ */ O("div", {
284
+ Z.description && /* @__PURE__ */ E(c, { children: /* @__PURE__ */ E("div", {
275
285
  className: "p-4",
276
- children: /* @__PURE__ */ O("p", {
286
+ children: /* @__PURE__ */ E("p", {
277
287
  className: "text-text-primary",
278
288
  children: Z.description
279
289
  })
280
290
  }) }),
281
- /* @__PURE__ */ k(c, { children: [/* @__PURE__ */ O("div", {
291
+ /* @__PURE__ */ D(c, { children: [/* @__PURE__ */ E("div", {
282
292
  className: "p-4 border-b border-border-default",
283
- children: /* @__PURE__ */ O("h3", {
293
+ children: /* @__PURE__ */ E("h3", {
284
294
  className: "font-semibold text-text-primary",
285
- children: z("component.metadata", "Metadata")
295
+ children: L("component.metadata", "Metadata")
286
296
  })
287
- }), /* @__PURE__ */ O("div", {
297
+ }), /* @__PURE__ */ E("div", {
288
298
  className: "p-4",
289
- children: /* @__PURE__ */ k("div", {
299
+ children: /* @__PURE__ */ D("div", {
290
300
  className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm",
291
301
  children: [
292
- /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
302
+ /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
293
303
  className: "text-text-secondary",
294
- children: z("component.ownerNameLabel", "Owner")
295
- }), /* @__PURE__ */ O("p", {
304
+ children: L("component.ownerNameLabel", "Owner")
305
+ }), /* @__PURE__ */ E("p", {
296
306
  className: "font-medium text-text-primary",
297
- children: Z.ownerName || z("common.unset", "Unset")
307
+ children: Z.ownerName || L("common.unset", "Unset")
298
308
  })] }),
299
- /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
309
+ /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
300
310
  className: "text-text-secondary",
301
- children: z("component.languageLabel", "Language")
302
- }), /* @__PURE__ */ O("p", {
311
+ children: L("component.languageLabel", "Language")
312
+ }), /* @__PURE__ */ E("p", {
303
313
  className: "font-medium text-text-primary",
304
- children: Z.language || z("common.unset", "Unset")
314
+ children: Z.language || L("common.unset", "Unset")
305
315
  })] }),
306
- /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
316
+ /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
307
317
  className: "text-text-secondary",
308
- children: z("component.frameworkLabel", "Framework")
309
- }), /* @__PURE__ */ O("p", {
318
+ children: L("component.frameworkLabel", "Framework")
319
+ }), /* @__PURE__ */ E("p", {
310
320
  className: "font-medium text-text-primary",
311
- children: Z.framework || z("common.unset", "Unset")
321
+ children: Z.framework || L("common.unset", "Unset")
312
322
  })] }),
313
- /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
323
+ /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
314
324
  className: "text-text-secondary",
315
- children: z("component.versionLabel", "Version")
316
- }), /* @__PURE__ */ O("p", {
325
+ children: L("component.versionLabel", "Version")
326
+ }), /* @__PURE__ */ E("p", {
317
327
  className: "font-medium text-text-primary",
318
- children: Z.version || z("common.unset", "Unset")
328
+ children: Z.version || L("common.unset", "Unset")
319
329
  })] }),
320
- Z.repositoryUrl && /* @__PURE__ */ k("div", {
330
+ Z.repositoryUrl && /* @__PURE__ */ D("div", {
321
331
  className: "sm:col-span-2",
322
- children: [/* @__PURE__ */ O("p", {
332
+ children: [/* @__PURE__ */ E("p", {
323
333
  className: "text-text-secondary",
324
- children: z("component.repository", "Repository")
325
- }), /* @__PURE__ */ O("a", {
334
+ children: L("component.repository", "Repository")
335
+ }), /* @__PURE__ */ E("a", {
326
336
  href: Z.repositoryUrl,
327
337
  target: "_blank",
328
338
  rel: "noopener noreferrer",
@@ -330,31 +340,31 @@ function P() {
330
340
  children: Z.repositoryUrl
331
341
  })]
332
342
  }),
333
- /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
343
+ /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
334
344
  className: "text-text-secondary",
335
- children: z("common.created", "Created")
336
- }), /* @__PURE__ */ O("p", {
345
+ children: L("common.created", "Created")
346
+ }), /* @__PURE__ */ E("p", {
337
347
  className: "font-medium text-text-primary",
338
348
  children: new Date(Z.createdAt).toLocaleDateString()
339
349
  })] }),
340
- /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
350
+ /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
341
351
  className: "text-text-secondary",
342
- children: z("common.updated", "Updated")
343
- }), /* @__PURE__ */ O("p", {
352
+ children: L("common.updated", "Updated")
353
+ }), /* @__PURE__ */ E("p", {
344
354
  className: "font-medium text-text-primary",
345
355
  children: new Date(Z.updatedAt).toLocaleDateString()
346
356
  })] })
347
357
  ]
348
358
  })
349
359
  })] }),
350
- Z.tags?.length > 0 && /* @__PURE__ */ O(c, { children: /* @__PURE__ */ k("div", {
360
+ Z.tags?.length > 0 && /* @__PURE__ */ E(c, { children: /* @__PURE__ */ D("div", {
351
361
  className: "p-4",
352
- children: [/* @__PURE__ */ O("h3", {
362
+ children: [/* @__PURE__ */ E("h3", {
353
363
  className: "font-semibold text-text-primary mb-3",
354
- children: z("component.tags", "Tags")
355
- }), /* @__PURE__ */ O("div", {
364
+ children: L("component.tags", "Tags")
365
+ }), /* @__PURE__ */ E("div", {
356
366
  className: "flex flex-wrap gap-2",
357
- children: Z.tags.map((e) => /* @__PURE__ */ O("span", {
367
+ children: Z.tags.map((e) => /* @__PURE__ */ E("span", {
358
368
  className: "px-2.5 py-1 text-sm bg-bg-sunken text-text-secondary rounded-md",
359
369
  children: e
360
370
  }, e))
@@ -362,7 +372,7 @@ function P() {
362
372
  }) })
363
373
  ]
364
374
  }, "overview"),
365
- B === "catalogs" && /* @__PURE__ */ k(D.div, {
375
+ R === "catalogs" && /* @__PURE__ */ D(T.div, {
366
376
  initial: {
367
377
  opacity: 0,
368
378
  y: 8
@@ -377,27 +387,27 @@ function P() {
377
387
  },
378
388
  transition: { duration: .2 },
379
389
  className: "space-y-4",
380
- children: [/* @__PURE__ */ k("p", {
390
+ children: [/* @__PURE__ */ D("p", {
381
391
  className: "text-sm text-text-secondary",
382
392
  children: [
383
393
  Q.length,
384
394
  " ",
385
- z("component.catalogsContaining", "catalogs containing this component")
395
+ L("component.catalogsContaining", "catalogs containing this component")
386
396
  ]
387
- }), Q.length > 0 ? /* @__PURE__ */ O(j, {
397
+ }), Q.length > 0 ? /* @__PURE__ */ E(k, {
388
398
  stagger: .04,
389
399
  className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
390
- children: Q.map((e) => /* @__PURE__ */ O(A, { children: /* @__PURE__ */ O(h, {
400
+ children: Q.map((e) => /* @__PURE__ */ E(O, { children: /* @__PURE__ */ E(h, {
391
401
  catalog: e,
392
- onOpen: de
402
+ onOpen: ye
393
403
  }) }, e.id))
394
- }) : /* @__PURE__ */ O(s, {
395
- icon: /* @__PURE__ */ O(S, { className: "w-8 h-8 text-text-secondary" }),
396
- title: z("component.noCatalogs", "Not in any catalogs"),
397
- description: z("component.noCatalogsDescription", "This component has not been added to any catalogs yet")
404
+ }) : /* @__PURE__ */ E(s, {
405
+ icon: /* @__PURE__ */ E(b, { className: "w-8 h-8 text-text-secondary" }),
406
+ title: L("component.noCatalogs", "Not in any catalogs"),
407
+ description: L("component.noCatalogsDescription", "This component has not been added to any catalogs yet")
398
408
  })]
399
409
  }, "catalogs"),
400
- B === "docs" && /* @__PURE__ */ O(D.div, {
410
+ R === "docs" && /* @__PURE__ */ E(T.div, {
401
411
  initial: {
402
412
  opacity: 0,
403
413
  y: 8
@@ -412,12 +422,12 @@ function P() {
412
422
  },
413
423
  transition: { duration: .2 },
414
424
  className: "space-y-6",
415
- children: /* @__PURE__ */ O(p, {
425
+ children: /* @__PURE__ */ E(p, {
416
426
  ownerType: "COMPONENT",
417
- ownerId: F || ""
427
+ ownerId: N || ""
418
428
  })
419
429
  }, "docs"),
420
- B === "scorecard" && /* @__PURE__ */ O(D.div, {
430
+ R === "scorecard" && /* @__PURE__ */ E(T.div, {
421
431
  initial: {
422
432
  opacity: 0,
423
433
  y: 8
@@ -431,12 +441,12 @@ function P() {
431
441
  y: -8
432
442
  },
433
443
  transition: { duration: .2 },
434
- children: /* @__PURE__ */ O(f, {
444
+ children: /* @__PURE__ */ E(f, {
435
445
  ownerType: "COMPONENT",
436
- ownerId: F || ""
446
+ ownerId: N || ""
437
447
  })
438
448
  }, "scorecard"),
439
- B === "template" && /* @__PURE__ */ O(D.div, {
449
+ R === "template" && /* @__PURE__ */ E(T.div, {
440
450
  initial: {
441
451
  opacity: 0,
442
452
  y: 8
@@ -450,35 +460,35 @@ function P() {
450
460
  y: -8
451
461
  },
452
462
  transition: { duration: .2 },
453
- children: /* @__PURE__ */ O(c, {
463
+ children: /* @__PURE__ */ E(c, {
454
464
  padding: "lg",
455
- children: /* @__PURE__ */ k("div", {
465
+ children: /* @__PURE__ */ D("div", {
456
466
  className: "flex flex-col items-center justify-center py-12 text-center",
457
467
  children: [
458
- /* @__PURE__ */ O(w, { className: "w-12 h-12 text-text-muted mb-4" }),
459
- /* @__PURE__ */ O("h3", {
468
+ /* @__PURE__ */ E(S, { className: "w-12 h-12 text-text-muted mb-4" }),
469
+ /* @__PURE__ */ E("h3", {
460
470
  className: "text-lg font-semibold text-text-primary mb-2",
461
- children: z("component.template", "Template")
471
+ children: L("component.template", "Template")
462
472
  }),
463
- /* @__PURE__ */ O("p", {
473
+ /* @__PURE__ */ E("p", {
464
474
  className: "text-sm text-text-secondary max-w-md mb-4",
465
- children: (Z.templates?.length ?? 0) > 0 ? z("component.alreadyPublished", "This component has been published as a template.") : z("component.publishDescription", "Publish this component as a reusable template that others can clone.")
475
+ children: (Z.templates?.length ?? 0) > 0 ? L("component.alreadyPublished", "This component has been published as a template.") : L("component.publishDescription", "Publish this component as a reusable template that others can clone.")
466
476
  }),
467
- (Z.templates?.length ?? 0) === 0 && /* @__PURE__ */ k("button", {
468
- onClick: pe,
477
+ (Z.templates?.length ?? 0) === 0 && /* @__PURE__ */ D("button", {
478
+ onClick: Se,
469
479
  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",
470
- children: [/* @__PURE__ */ O(oe, { className: "w-4 h-4" }), z("component.publishAsTemplate", "Publish as Template")]
480
+ children: [/* @__PURE__ */ E(de, { className: "w-4 h-4" }), L("component.publishAsTemplate", "Publish as Template")]
471
481
  }),
472
- (Z.templates?.length ?? 0) > 0 && /* @__PURE__ */ O("button", {
473
- onClick: () => I(`/templates/${Z.templates[0].id}`),
482
+ (Z.templates?.length ?? 0) > 0 && /* @__PURE__ */ E("button", {
483
+ onClick: () => P(`/templates/${Z.templates[0].id}`),
474
484
  className: "flex items-center gap-2 px-4 py-2 bg-bg-sunken text-text-primary rounded-md hover:bg-bg-sunken/80 transition-colors",
475
- children: z("component.viewTemplate", "View Template")
485
+ children: L("component.viewTemplate", "View Template")
476
486
  })
477
487
  ]
478
488
  })
479
489
  })
480
490
  }, "template"),
481
- B === "settings" && /* @__PURE__ */ O(D.div, {
491
+ R === "settings" && /* @__PURE__ */ E(T.div, {
482
492
  initial: {
483
493
  opacity: 0,
484
494
  y: 8
@@ -492,24 +502,48 @@ function P() {
492
502
  y: -8
493
503
  },
494
504
  transition: { duration: .2 },
495
- children: /* @__PURE__ */ k(c, {
496
- padding: "lg",
497
- children: [/* @__PURE__ */ O("h3", {
498
- className: "font-semibold text-text-primary mb-4",
499
- children: z("component.editComponent", "Edit Component")
500
- }), /* @__PURE__ */ O("button", {
501
- onClick: () => H(!0),
502
- className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
503
- children: z("component.editDetails", "Edit Details")
505
+ children: /* @__PURE__ */ D("div", {
506
+ className: "space-y-4",
507
+ children: [/* @__PURE__ */ D(c, {
508
+ padding: "lg",
509
+ children: [/* @__PURE__ */ E("h3", {
510
+ className: "font-semibold text-text-primary mb-4",
511
+ children: L("component.editComponent", "Edit Component")
512
+ }), /* @__PURE__ */ E("button", {
513
+ onClick: () => V(!0),
514
+ className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
515
+ children: L("component.editDetails", "Edit Details")
516
+ })]
517
+ }), /* @__PURE__ */ D(c, {
518
+ padding: "lg",
519
+ children: [
520
+ /* @__PURE__ */ E("h3", {
521
+ className: "font-semibold text-status-error-text mb-2",
522
+ children: L("component.dangerZone", "Danger Zone")
523
+ }),
524
+ /* @__PURE__ */ E("p", {
525
+ className: "text-sm text-text-secondary mb-4",
526
+ children: L("component.deleteWarning", "Deleting this component will remove it from all catalogs and break any templates derived from it. This cannot be undone.")
527
+ }),
528
+ /* @__PURE__ */ D("button", {
529
+ "data-testid": "component-delete-button",
530
+ onClick: () => H(!0),
531
+ 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",
532
+ children: [/* @__PURE__ */ E(ue, {
533
+ className: "w-4 h-4",
534
+ "aria-hidden": "true"
535
+ }), L("component.deleteComponent", "Delete Component")]
536
+ })
537
+ ]
504
538
  })]
505
539
  })
506
540
  }, "settings")
507
541
  ]
508
542
  }),
509
- /* @__PURE__ */ O(m, {
510
- isOpen: V,
511
- onClose: () => H(!1),
512
- onSubmit: fe,
543
+ /* @__PURE__ */ E(m, {
544
+ isOpen: B,
545
+ onClose: () => V(!1),
546
+ onSubmit: be,
513
547
  initialData: {
514
548
  name: Z.name,
515
549
  description: Z.description || "",
@@ -521,37 +555,47 @@ function P() {
521
555
  owner: Z.ownerName || "",
522
556
  tags: Z.tags || []
523
557
  },
524
- title: z("component.editComponent", "Edit Component")
558
+ title: L("component.editComponent", "Edit Component")
559
+ }),
560
+ /* @__PURE__ */ E(te, {
561
+ isOpen: pe,
562
+ onClose: () => H(!1),
563
+ onConfirm: xe,
564
+ title: L("component.deleteComponent", "Delete Component"),
565
+ message: L("component.deleteConfirmMessage", `Are you sure you want to delete "${Z.name}"? This action cannot be undone.`),
566
+ confirmLabel: L("common.delete", "Delete"),
567
+ variant: "danger",
568
+ isLoading: me
525
569
  }),
526
- /* @__PURE__ */ O(a, {
527
- isOpen: G,
570
+ /* @__PURE__ */ E(ne, {
571
+ isOpen: he,
528
572
  onClose: () => K(!1),
529
573
  onConfirm: () => {
530
- K(!1), I("/billing");
574
+ K(!1), P("/billing");
531
575
  },
532
576
  title: "Template Publish Quota Reached",
533
577
  message: "You have used the template publishing quota for your current plan. Upgrade to publish more templates."
534
578
  })
535
579
  ]
536
- }) : /* @__PURE__ */ k(M, {
580
+ }) : /* @__PURE__ */ D(A, {
537
581
  className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
538
- children: [/* @__PURE__ */ k("button", {
582
+ children: [/* @__PURE__ */ D("button", {
539
583
  onClick: $,
540
584
  className: "flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors",
541
- children: [/* @__PURE__ */ O(b, { className: "w-4 h-4" }), z("component.backToComponents", "Back to Components")]
542
- }), /* @__PURE__ */ O(s, {
543
- icon: /* @__PURE__ */ O(C, { className: "w-8 h-8 text-text-secondary" }),
544
- title: z("component.notFound", "Component not found"),
545
- description: `No component with ID "${F}" exists`,
546
- action: /* @__PURE__ */ O("button", {
585
+ children: [/* @__PURE__ */ E(y, { className: "w-4 h-4" }), L("component.backToComponents", "Back to Components")]
586
+ }), /* @__PURE__ */ E(s, {
587
+ icon: /* @__PURE__ */ E(x, { className: "w-8 h-8 text-text-secondary" }),
588
+ title: L("component.notFound", "Component not found"),
589
+ description: `No component with ID "${N}" exists`,
590
+ action: /* @__PURE__ */ E("button", {
547
591
  onClick: $,
548
592
  className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
549
- children: z("component.backToComponents", "Back to Components")
593
+ children: L("component.backToComponents", "Back to Components")
550
594
  })
551
595
  })]
552
596
  });
553
597
  }
554
598
  //#endregion
555
- export { P as ComponentDetailPage };
599
+ export { M as ComponentDetailPage };
556
600
 
557
601
  //# sourceMappingURL=ComponentDetailPage.js.map