npm - @burdenoff/microfe-devportal - Versions diffs - 2026.625.3 → 2026.625.5 - Mend

@burdenoff/microfe-devportal 2026.625.3 → 2026.625.5

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 (1996) hide show

package/dist/devportal/components/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/devportal/components/DataTable.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport {\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRight,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\nexport interface Column<T> {\n key: string;\n header: ReactNode;\n render?: (item: T) => ReactNode;\n className?: string;\n sortable?: boolean;\n}\n\nexport interface DataTableProps<T> {\n data: T[];\n columns: Column<T>[];\n keyField: keyof T;\n onRowClick?: (item: T) => void;\n className?: string;\n emptyMessage?: string;\n loading?: boolean;\n pagination?: {\n page: number;\n pageSize: number;\n totalCount: number;\n onPageChange: (page: number) => void;\n };\n}\n\n/*\n Reusable data table component with pagination\n /\nexport function DataTable<T extends { [K in keyof T]: T[K] }>({\n data,\n columns,\n keyField,\n onRowClick,\n className,\n emptyMessage,\n loading,\n pagination,\n}: DataTableProps<T>) {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedEmptyMessage =\n emptyMessage ?? tr(\"devportal.noDataAvailable\", \"No data available\");\n const totalPages = pagination\n ? Math.ceil(pagination.totalCount / pagination.pageSize)\n : 1;\n\n return (\n <div\n className={cn(\n \"rounded-lg border border-border-seam bg-bg-surface\",\n className,\n )}\n >\n <div className=\"overflow-x-auto\">\n <table className=\"w-full\">\n <thead>\n <tr className=\"border-b border-border-seam bg-bg-sunken/40\">\n {columns.map((column) => (\n <th\n key={column.key}\n className={cn(\n \"px-4 py-3 text-left text-sm font-medium text-text-secondary\",\n column.className,\n )}\n >\n {column.header}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {loading ? (\n Array.from({ length: 5 }).map((_, i) => (\n <tr key={i} className=\"animate-pulse border-b border-border-seam\">\n {columns.map((column) => (\n <td key={column.key} className=\"px-4 py-3\">\n <div className=\"h-4 rounded bg-bg-sunken\" />\n </td>\n ))}\n </tr>\n ))\n ) : data.length === 0 ? (\n <tr>\n <td\n colSpan={columns.length}\n className=\"px-4 py-8 text-center text-text-secondary\"\n >\n {resolvedEmptyMessage}\n </td>\n </tr>\n ) : (\n data.map((item) => (\n <tr\n key={String(item[keyField])}\n role={onRowClick ? \"button\" : undefined}\n tabIndex={onRowClick ? 0 : undefined}\n className={cn(\n \"border-b border-border-seam transition-colors\",\n onRowClick &&\n \"cursor-pointer hover:bg-bg-sunken/50 focus-visible:outline-none focus-visible:bg-bg-sunken/50\",\n )}\n onClick={() => onRowClick?.(item)}\n onKeyDown={(event) => {\n if (!onRowClick) return;\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n onRowClick(item);\n }\n }}\n >\n {columns.map((column) => (\n <td\n key={String(column.key)}\n className={cn(\"px-4 py-3 text-sm\", column.className)}\n >\n {column.render\n ? column.render(item)\n : String(\n (item as Record<string, unknown>)[\n column.key as string\n ] ?? \"\",\n )}\n </td>\n ))}\n </tr>\n ))\n )}\n </tbody>\n </table>\n </div>\n\n {/ Pagination /}\n {pagination && totalPages > 1 && (\n <div className=\"flex items-center justify-between border-t border-border-seam px-4 py-3\">\n <p className=\"text-sm text-text-secondary\">\n {tr(\"devportal.showingResults\", \"Showing\")}{\" \"}\n {(pagination.page - 1) pagination.pageSize + 1}{\" \"}\n {tr(\"devportal.to\", \"to\")}{\" \"}\n {Math.min(\n pagination.page * pagination.pageSize,\n pagination.totalCount,\n )}{\" \"}\n {tr(\"devportal.of\", \"of\")} {pagination.totalCount}{\" \"}\n {tr(\"devportal.results\", \"results\")}\n </p>\n <div className=\"flex items-center gap-1\">\n <button\n onClick={() => pagination.onPageChange(1)}\n disabled={pagination.page === 1}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n <ChevronsLeft size={20} />\n </button>\n <button\n onClick={() => pagination.onPageChange(pagination.page - 1)}\n disabled={pagination.page === 1}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n <ChevronLeft size={20} />\n </button>\n <span className=\"px-3 text-sm\">\n {tr(\"devportal.page\", \"Page\")} {pagination.page}{\" \"}\n {tr(\"devportal.of\", \"of\")} {totalPages}\n </span>\n <button\n onClick={() => pagination.onPageChange(pagination.page + 1)}\n disabled={pagination.page === totalPages}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n <ChevronRight size={20} />\n </button>\n <button\n onClick={() => pagination.onPageChange(totalPages)}\n disabled={pagination.page === totalPages}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-bg-sunken disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n <ChevronsRight size={20} />\n </button>\n </div>\n </div>\n )}\n </div>\n );\n}\n\n/*\n Simple key-value detail list\n */\nexport const DetailList: FC<{\n items: Array<{ label: string; value: ReactNode }>;\n className?: string;\n}> = ({ items, className }) => (\n <dl\n className={cn(\n \"divide-y divide-border-seam rounded-lg border border-border-seam\",\n className,\n )}\n >\n {items.map((item, index) => (\n <div\n key={index}\n className=\"flex flex-col gap-1 px-4 py-3 sm:flex-row sm:gap-4\"\n >\n <dt className=\"text-sm font-medium text-text-secondary sm:w-1/3\">\n {item.label}\n </dt>\n <dd className=\"text-sm sm:w-2/3\">{item.value}</dd>\n </div>\n ))}\n </dl>\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/devportal/components/DataTable.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport {\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRight,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\nexport interface Column<T> {\n key: string;\n header: ReactNode;\n render?: (item: T) => ReactNode;\n className?: string;\n sortable?: boolean;\n}\n\nexport interface DataTableProps<T> {\n data: T[];\n columns: Column<T>[];\n keyField: keyof T;\n onRowClick?: (item: T) => void;\n className?: string;\n emptyMessage?: string;\n loading?: boolean;\n pagination?: {\n page: number;\n pageSize: number;\n totalCount: number;\n onPageChange: (page: number) => void;\n };\n}\n\n/*\n Reusable data table component with pagination\n /\nexport function DataTable<T extends { [K in keyof T]: T[K] }>({\n data,\n columns,\n keyField,\n onRowClick,\n className,\n emptyMessage,\n loading,\n pagination,\n}: DataTableProps<T>) {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedEmptyMessage =\n emptyMessage ?? tr(\"devportal.noDataAvailable\", \"No data available\");\n const totalPages = pagination\n ? Math.ceil(pagination.totalCount / pagination.pageSize)\n : 1;\n\n return (\n <div className={cn(\"rounded-lg border bg-card\", className)}>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full\">\n <thead>\n <tr className=\"border-b bg-muted/50\">\n {columns.map((column) => (\n <th\n key={column.key}\n className={cn(\n \"px-4 py-3 text-left text-sm font-medium text-muted-foreground\",\n column.className,\n )}\n >\n {column.header}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {loading ? (\n Array.from({ length: 5 }).map((_, i) => (\n <tr key={i} className=\"animate-pulse border-b\">\n {columns.map((column) => (\n <td key={column.key} className=\"px-4 py-3\">\n <div className=\"h-4 rounded bg-muted\" />\n </td>\n ))}\n </tr>\n ))\n ) : data.length === 0 ? (\n <tr>\n <td\n colSpan={columns.length}\n className=\"px-4 py-8 text-center text-muted-foreground\"\n >\n {resolvedEmptyMessage}\n </td>\n </tr>\n ) : (\n data.map((item) => (\n <tr\n key={String(item[keyField])}\n role={onRowClick ? \"button\" : undefined}\n tabIndex={onRowClick ? 0 : undefined}\n className={cn(\n \"border-b transition-colors\",\n onRowClick && \"cursor-pointer hover:bg-muted/50\",\n )}\n onClick={() => onRowClick?.(item)}\n onKeyDown={(event) => {\n if (!onRowClick) return;\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n onRowClick(item);\n }\n }}\n >\n {columns.map((column) => (\n <td\n key={String(column.key)}\n className={cn(\"px-4 py-3 text-sm\", column.className)}\n >\n {column.render\n ? column.render(item)\n : String(\n (item as Record<string, unknown>)[\n column.key as string\n ] ?? \"\",\n )}\n </td>\n ))}\n </tr>\n ))\n )}\n </tbody>\n </table>\n </div>\n\n {/ Pagination /}\n {pagination && totalPages > 1 && (\n <div className=\"flex items-center justify-between border-t px-4 py-3\">\n <p className=\"text-sm text-muted-foreground\">\n {tr(\"devportal.showingResults\", \"Showing\")}{\" \"}\n {(pagination.page - 1) pagination.pageSize + 1}{\" \"}\n {tr(\"devportal.to\", \"to\")}{\" \"}\n {Math.min(\n pagination.page * pagination.pageSize,\n pagination.totalCount,\n )}{\" \"}\n {tr(\"devportal.of\", \"of\")} {pagination.totalCount}{\" \"}\n {tr(\"devportal.results\", \"results\")}\n </p>\n <div className=\"flex items-center gap-1\">\n <button\n onClick={() => pagination.onPageChange(1)}\n disabled={pagination.page === 1}\n className=\"rounded-md p-1 hover:bg-muted disabled:opacity-50\"\n >\n <ChevronsLeft size={20} />\n </button>\n <button\n onClick={() => pagination.onPageChange(pagination.page - 1)}\n disabled={pagination.page === 1}\n className=\"rounded-md p-1 hover:bg-muted disabled:opacity-50\"\n >\n <ChevronLeft size={20} />\n </button>\n <span className=\"px-3 text-sm\">\n {tr(\"devportal.page\", \"Page\")} {pagination.page}{\" \"}\n {tr(\"devportal.of\", \"of\")} {totalPages}\n </span>\n <button\n onClick={() => pagination.onPageChange(pagination.page + 1)}\n disabled={pagination.page === totalPages}\n className=\"rounded-md p-1 hover:bg-muted disabled:opacity-50\"\n >\n <ChevronRight size={20} />\n </button>\n <button\n onClick={() => pagination.onPageChange(totalPages)}\n disabled={pagination.page === totalPages}\n className=\"rounded-md p-1 hover:bg-muted disabled:opacity-50\"\n >\n <ChevronsRight size={20} />\n </button>\n </div>\n </div>\n )}\n </div>\n );\n}\n\n/*\n Simple key-value detail list\n */\nexport const DetailList: FC<{\n items: Array<{ label: string; value: ReactNode }>;\n className?: string;\n}> = ({ items, className }) => (\n <dl className={cn(\"divide-y rounded-lg border\", className)}>\n {items.map((item, index) => (\n <div\n key={index}\n className=\"flex flex-col gap-1 px-4 py-3 sm:flex-row sm:gap-4\"\n >\n <dt className=\"text-sm font-medium text-muted-foreground sm:w-1/3\">\n {item.label}\n </dt>\n <dd className=\"text-sm sm:w-2/3\">{item.value}</dd>\n </div>\n ))}\n </dl>\n);\n"],"mappings":"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"}

package/dist/devportal/components/EmptyState.js CHANGED Viewed

@@ -1,20 +1,14 @@
 import { jsx as e } from "react/jsx-runtime";
-import { EmptyState as t, IllustratedEmptyState as n } from "@burdenoff/fe-libs/ui";
+import { EmptyState as t } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/components/EmptyState.tsx
-var r = ({ icon: r, illustration: i, title: a, description: o, action: s, className: c }) => i ? /* @__PURE__ */ e(n, {
-	illustration: i,
-	title: a,
-	description: o,
-	action: s,
-	className: c
-}) : /* @__PURE__ */ e(t, {
-	icon: r,
-	title: a,
-	description: o,
-	action: s,
-	className: c
+var n = ({ icon: n, title: r, description: i, action: a, className: o }) => /* @__PURE__ */ e(t, {
+	icon: n,
+	title: r,
+	description: i,
+	action: a,
+	className: o
 });
 //#endregion
-export { r as EmptyState };
+export { n as EmptyState };
 //# sourceMappingURL=EmptyState.js.map

package/dist/devportal/components/EmptyState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/devportal/components/EmptyState.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport {\n EmptyState as CanonicalEmptyState~~,\n IllustratedEmptyState,\n~~} from \"@burdenoff/fe-libs/ui\";\n\n/*\n Standard illustration names served by the host shell at\n * `/illustrations/<name>.webp`.\n /\ntype IllustrationName =\n \| \"empty-agents\"\n \| \"empty-vibes\"\n \| \"empty-sessions\"\n \| \"empty-files\"\n \| \"empty-people\"\n \| \"empty-notifications\"\n \| \"empty-search\"\n \| \"empty-data\"\n \| \"onboarding\"\n \| \"empty-generic\";\n\ninterface EmptyStateProps {\n icon?: ReactNode;\n /\n On-brand illustration rendered instead of an icon glyph. When provided the\n * empty state renders via `IllustratedEmptyState` for a richer, more\n * welcoming zero-state. Falls back to the icon-based `EmptyState` otherwise.\n /\n illustration?: IllustrationName;\n title: string;\n description?: string;\n action?: ReactNode;\n className?: string;\n}\n\n/\n Local wrapper around ~~the~~ ~~canonical empty-state primitives~~ from\n * `@burdenoff/fe-libs/ui`.\n \n Keeps existing devportal call sites stable while routing all empty-state\n * rendering through the canonical primitive~~. When an `illustration` is\n * supplied the richer `IllustratedEmptyState` is used; otherwise the\n * icon-based `EmptyState` is rendered~~.\n */\nexport const EmptyState: FC<EmptyStateProps> = ({\n icon,\n ~~illustration,\n~~ title,\n description,\n action,\n className,\n}) => {\n ~~if (illustration) {\n~~ return (\n ~~<IllustratedEmptyState\n illustration={illustration}\n title={title}\n description={description}\n action={action}\n className={className}\n />\n~~ ~~);\n }\n\n return (\n~~ <CanonicalEmptyState\n icon={icon}\n title={title}\n description={description}\n action={action}\n className={className}\n />\n );\n};\n"],"mappings":";;;~~AA6CA~~,IAAa,KAAmC,EAC9C,SACA,~~iBACA,~~UACA,gBACA,WACA,~~mBAEI~~,~~IAEA,~~kBAAC,GAAD;~~CACgB;CACP;CACM;CACL;CACG;CACX,CAAA,GAKJ,kBAAC,GAAD;~~CACQ;CACC;CACM;CACL;CACG;CACX,CAAA"}
1	+ {"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/devportal/components/EmptyState.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { EmptyState as CanonicalEmptyState } from \"@burdenoff/fe-libs/ui\";\n\ninterface EmptyStateProps {\n icon?: ReactNode;\n title: string;\n description?: string;\n action?: ReactNode;\n className?: string;\n}\n\n/*\n Local wrapper around `EmptyState` from `@burdenoff/fe-libs/ui`.\n \n Keeps existing devportal call sites stable while routing all empty-state\n * rendering through the canonical primitive.\n */\nexport const EmptyState: FC<EmptyStateProps> = ({\n icon,\n title,\n description,\n action,\n className,\n}) => {\n return (\n <CanonicalEmptyState\n icon={icon}\n title={title}\n description={description}\n action={action}\n className={className}\n />\n );\n};\n"],"mappings":";;;AAiBA,IAAa,KAAmC,EAC9C,SACA,UACA,gBACA,WACA,mBAGE,kBAAC,GAAD;CACQ;CACC;CACM;CACL;CACG;CACX,CAAA"}

package/dist/devportal/components/FormField.js CHANGED Viewed

@@ -18,11 +18,11 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			/* @__PURE__ */ n("input", {
 				id: d,
 				type: c,
-				className: e("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-text-secondary", i && "border-status-error-bg focus:ring-status-error-bg"),
+				className: e("w-full rounded-md border bg-background px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-muted-foreground", i && "border-status-error-bg focus:ring-status-error-bg"),
 				...u
 			}),
 			a && !i && /* @__PURE__ */ n("p", {
-				className: "text-xs text-text-secondary",
+				className: "text-xs text-muted-foreground",
 				children: a
 			}),
 			i && /* @__PURE__ */ n("p", {
@@ -47,11 +47,11 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			/* @__PURE__ */ n("textarea", {
 				id: d,
 				rows: l,
-				className: e("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-text-secondary resize-none", i && "border-status-error-bg focus:ring-status-error-bg"),
+				className: e("w-full rounded-md border bg-background px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", "placeholder:text-muted-foreground resize-none", i && "border-status-error-bg focus:ring-status-error-bg"),
 				...u
 			}),
 			a && !i && /* @__PURE__ */ n("p", {
-				className: "text-xs text-text-secondary",
+				className: "text-xs text-muted-foreground",
 				children: a
 			}),
 			i && /* @__PURE__ */ n("p", {
@@ -78,7 +78,7 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 			}),
 			/* @__PURE__ */ r("select", {
 				id: h,
-				className: e("w-full rounded-md border bg-bg-surface px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", a && "border-status-error-bg focus:ring-status-error-bg"),
+				className: e("w-full rounded-md border bg-background px-3 py-2 text-sm", "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent", a && "border-status-error-bg focus:ring-status-error-bg"),
 				...f,
 				children: [/* @__PURE__ */ n("option", {
 					value: "",
@@ -89,7 +89,7 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 				}, e.value))]
 			}),
 			o && !a && /* @__PURE__ */ n("p", {
-				className: "text-xs text-text-secondary",
+				className: "text-xs text-muted-foreground",
 				children: o
 			}),
 			a && /* @__PURE__ */ n("p", {
@@ -114,7 +114,7 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 				children: t
 			}),
 			i && /* @__PURE__ */ n("p", {
-				className: "text-xs text-text-secondary",
+				className: "text-xs text-muted-foreground",
 				children: i
 			}),
 			a && /* @__PURE__ */ n("p", {
@@ -144,9 +144,9 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 				children: i
 			}),
 			/* @__PURE__ */ r("div", {
-				className: "flex flex-wrap gap-2 rounded-md border bg-bg-surface p-2",
+				className: "flex flex-wrap gap-2 rounded-md border bg-background p-2",
 				children: [a.map((e) => /* @__PURE__ */ r("span", {
-					className: "inline-flex items-center gap-1 rounded-full bg-action-primary-bg/10 px-2 py-1 text-xs",
+					className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-1 text-xs",
 					children: [e, /* @__PURE__ */ n("button", {
 						type: "button",
 						onClick: () => m(e),
@@ -161,7 +161,7 @@ var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "te
 				})]
 			}),
 			l && !c && /* @__PURE__ */ n("p", {
-				className: "text-xs text-text-secondary",
+				className: "text-xs text-muted-foreground",
 				children: l
 			}),
 			c && /* @__PURE__ */ n("p", {

package/dist/devportal/components/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","names":[],"sources":["../../../src/devportal/components/FormField.tsx"],"sourcesContent":["import type {\n FC,\n InputHTMLAttributes,\n TextareaHTMLAttributes,\n SelectHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\ninterface BaseFieldProps {\n label: string;\n error?: string;\n hint?: string;\n required?: boolean;\n className?: string;\n}\n\ninterface InputFieldProps\n extends\n BaseFieldProps,\n Omit<InputHTMLAttributes<HTMLInputElement>, \"className\"> {\n type?: \"text\" \| \"email\" \| \"password\" \| \"number\" \| \"url\" \| \"tel\";\n}\n\ninterface TextareaFieldProps\n extends\n BaseFieldProps,\n Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"className\"> {}\n\ninterface SelectFieldProps\n extends\n BaseFieldProps,\n Omit<SelectHTMLAttributes<HTMLSelectElement>, \"className\"> {\n options: Array<{ value: string; label: string }>;\n placeholder?: string;\n}\n\ninterface CheckboxFieldProps\n extends\n BaseFieldProps,\n Omit<InputHTMLAttributes<HTMLInputElement>, \"className\" \| \"type\"> {\n description?: string;\n}\n\n/*\n Text input field with label and error handling\n /\nexport const InputField: FC<InputFieldProps> = ({\n label,\n error,\n hint,\n required,\n className,\n type = \"text\",\n id,\n ...props\n}) => {\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label htmlFor={fieldId} className=\"block text-sm font-medium\">\n {label}\n {required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n <input\n id={fieldId}\n type={type}\n className={cn(\n \"w-full rounded-md border bg-bg-surface px-3 py-2 text-sm\",\n \"focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\",\n \"placeholder:text-text-secondary\",\n error && \"border-status-error-bg focus:ring-status-error-bg\",\n )}\n {...props}\n />\n {hint && !error && (\n <p className=\"text-xs text-text-secondary\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/*\n Textarea field with label and error handling\n /\nexport const TextareaField: FC<TextareaFieldProps> = ({\n label,\n error,\n hint,\n required,\n className,\n id,\n rows = 4,\n ...props\n}) => {\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label htmlFor={fieldId} className=\"block text-sm font-medium\">\n {label}\n {required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n <textarea\n id={fieldId}\n rows={rows}\n className={cn(\n \"w-full rounded-md border bg-bg-surface px-3 py-2 text-sm\",\n \"focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\",\n \"placeholder:text-text-secondary resize-none\",\n error && \"border-status-error-bg focus:ring-status-error-bg\",\n )}\n {...props}\n />\n {hint && !error && (\n <p className=\"text-xs text-text-secondary\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/*\n Select field with label and error handling\n /\nexport const SelectField: FC<SelectFieldProps> = ({\n label,\n error,\n hint,\n required,\n className,\n options,\n placeholder,\n id,\n ...props\n}) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedPlaceholder =\n placeholder ?? tr(\"devportal.selectAnOption\", \"Select an option\");\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label htmlFor={fieldId} className=\"block text-sm font-medium\">\n {label}\n {required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n <select\n id={fieldId}\n className={cn(\n \"w-full rounded-md border bg-bg-surface px-3 py-2 text-sm\",\n \"focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\",\n error && \"border-status-error-bg focus:ring-status-error-bg\",\n )}\n {...props}\n >\n <option value=\"\">{resolvedPlaceholder}</option>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n {hint && !error && (\n <p className=\"text-xs text-text-secondary\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/*\n Checkbox field with label and description\n /\nexport const CheckboxField: FC<CheckboxFieldProps> = ({\n label,\n description,\n error,\n className,\n id,\n ...props\n}) => {\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"flex items-start gap-3\", className)}>\n <input\n id={fieldId}\n type=\"checkbox\"\n className={cn(\n \"mt-1 h-4 w-4 rounded border-border-default text-primary\",\n \"focus:ring-primary\",\n )}\n {...props}\n />\n <div>\n <label htmlFor={fieldId} className=\"text-sm font-medium cursor-pointer\">\n {label}\n </label>\n {description && (\n <p className=\"text-xs text-text-secondary\">{description}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n </div>\n );\n};\n\n/\n Multi-select checkbox group\n /\nexport const CheckboxGroup: FC<{\n label: string;\n options: Array<{ value: string; label: string; description?: string }>;\n value: string[];\n onChange: (values: string[]) => void;\n error?: string;\n hint?: string;\n className?: string;\n}> = ({ label, options, value, onChange, error, hint, className }) => {\n const handleChange = (optionValue: string, checked: boolean) => {\n if (checked) {\n onChange([...value, optionValue]);\n } else {\n onChange(value.filter((v) => v !== optionValue));\n }\n };\n\n return (\n <div className={cn(\"space-y-2\", className)}>\n <label className=\"block text-sm font-medium\">{label}</label>\n <div className=\"space-y-2\">\n {options.map((option) => (\n <CheckboxField\n key={option.value}\n label={option.label}\n description={option.description}\n checked={value.includes(option.value)}\n onChange={(e) => handleChange(option.value, e.target.checked)}\n />\n ))}\n </div>\n {hint && !error && (\n <p className=\"text-xs text-text-secondary\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/\n Tag input for multiple values\n */\nexport const TagInput: FC<{\n label: string;\n value: string[];\n onChange: (values: string[]) => void;\n placeholder?: string;\n error?: string;\n hint?: string;\n className?: string;\n}> = ({ label, value, onChange, placeholder, error, hint, className }) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\" \|\| e.key === \",\") {\n e.preventDefault();\n const input = e.currentTarget;\n const newValue = input.value.trim();\n if (newValue && !value.includes(newValue)) {\n onChange([...value, newValue]);\n input.value = \"\";\n }\n }\n };\n\n const removeTag = (tagToRemove: string) => {\n onChange(value.filter((tag) => tag !== tagToRemove));\n };\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label className=\"block text-sm font-medium\">{label}</label>\n <div className=\"flex flex-wrap gap-2 rounded-md border bg-bg-surface p-2\">\n {value.map((tag) => (\n <span\n key={tag}\n className=\"inline-flex items-center gap-1 rounded-full bg-action-primary-bg/10 px-2 py-1 text-xs\"\n >\n {tag}\n <button\n type=\"button\"\n onClick={() => removeTag(tag)}\n className=\"hover:text-status-error-text\"\n >\n ×\n </button>\n </span>\n ))}\n <input\n type=\"text\"\n placeholder={\n value.length === 0\n ? placeholder\n : tr(\"devportal.addMore\", \"Add more...\")\n }\n onKeyDown={handleKeyDown}\n className=\"flex-1 min-w-[100px] bg-transparent text-sm outline-none\"\n />\n </div>\n {hint && !error && (\n <p className=\"text-xs text-text-secondary\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"FormField.js","names":[],"sources":["../../../src/devportal/components/FormField.tsx"],"sourcesContent":["import type {\n FC,\n InputHTMLAttributes,\n TextareaHTMLAttributes,\n SelectHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\ninterface BaseFieldProps {\n label: string;\n error?: string;\n hint?: string;\n required?: boolean;\n className?: string;\n}\n\ninterface InputFieldProps\n extends\n BaseFieldProps,\n Omit<InputHTMLAttributes<HTMLInputElement>, \"className\"> {\n type?: \"text\" \| \"email\" \| \"password\" \| \"number\" \| \"url\" \| \"tel\";\n}\n\ninterface TextareaFieldProps\n extends\n BaseFieldProps,\n Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"className\"> {}\n\ninterface SelectFieldProps\n extends\n BaseFieldProps,\n Omit<SelectHTMLAttributes<HTMLSelectElement>, \"className\"> {\n options: Array<{ value: string; label: string }>;\n placeholder?: string;\n}\n\ninterface CheckboxFieldProps\n extends\n BaseFieldProps,\n Omit<InputHTMLAttributes<HTMLInputElement>, \"className\" \| \"type\"> {\n description?: string;\n}\n\n/*\n Text input field with label and error handling\n /\nexport const InputField: FC<InputFieldProps> = ({\n label,\n error,\n hint,\n required,\n className,\n type = \"text\",\n id,\n ...props\n}) => {\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label htmlFor={fieldId} className=\"block text-sm font-medium\">\n {label}\n {required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n <input\n id={fieldId}\n type={type}\n className={cn(\n \"w-full rounded-md border bg-background px-3 py-2 text-sm\",\n \"focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\",\n \"placeholder:text-muted-foreground\",\n error && \"border-status-error-bg focus:ring-status-error-bg\",\n )}\n {...props}\n />\n {hint && !error && (\n <p className=\"text-xs text-muted-foreground\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/*\n Textarea field with label and error handling\n /\nexport const TextareaField: FC<TextareaFieldProps> = ({\n label,\n error,\n hint,\n required,\n className,\n id,\n rows = 4,\n ...props\n}) => {\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label htmlFor={fieldId} className=\"block text-sm font-medium\">\n {label}\n {required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n <textarea\n id={fieldId}\n rows={rows}\n className={cn(\n \"w-full rounded-md border bg-background px-3 py-2 text-sm\",\n \"focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\",\n \"placeholder:text-muted-foreground resize-none\",\n error && \"border-status-error-bg focus:ring-status-error-bg\",\n )}\n {...props}\n />\n {hint && !error && (\n <p className=\"text-xs text-muted-foreground\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/*\n Select field with label and error handling\n /\nexport const SelectField: FC<SelectFieldProps> = ({\n label,\n error,\n hint,\n required,\n className,\n options,\n placeholder,\n id,\n ...props\n}) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedPlaceholder =\n placeholder ?? tr(\"devportal.selectAnOption\", \"Select an option\");\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label htmlFor={fieldId} className=\"block text-sm font-medium\">\n {label}\n {required && <span className=\"text-status-error-text ml-1\"></span>}\n </label>\n <select\n id={fieldId}\n className={cn(\n \"w-full rounded-md border bg-background px-3 py-2 text-sm\",\n \"focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent\",\n error && \"border-status-error-bg focus:ring-status-error-bg\",\n )}\n {...props}\n >\n <option value=\"\">{resolvedPlaceholder}</option>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n {hint && !error && (\n <p className=\"text-xs text-muted-foreground\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/*\n Checkbox field with label and description\n /\nexport const CheckboxField: FC<CheckboxFieldProps> = ({\n label,\n description,\n error,\n className,\n id,\n ...props\n}) => {\n const fieldId = id \|\| label.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"flex items-start gap-3\", className)}>\n <input\n id={fieldId}\n type=\"checkbox\"\n className={cn(\n \"mt-1 h-4 w-4 rounded border-border-default text-primary\",\n \"focus:ring-primary\",\n )}\n {...props}\n />\n <div>\n <label htmlFor={fieldId} className=\"text-sm font-medium cursor-pointer\">\n {label}\n </label>\n {description && (\n <p className=\"text-xs text-muted-foreground\">{description}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n </div>\n );\n};\n\n/\n Multi-select checkbox group\n /\nexport const CheckboxGroup: FC<{\n label: string;\n options: Array<{ value: string; label: string; description?: string }>;\n value: string[];\n onChange: (values: string[]) => void;\n error?: string;\n hint?: string;\n className?: string;\n}> = ({ label, options, value, onChange, error, hint, className }) => {\n const handleChange = (optionValue: string, checked: boolean) => {\n if (checked) {\n onChange([...value, optionValue]);\n } else {\n onChange(value.filter((v) => v !== optionValue));\n }\n };\n\n return (\n <div className={cn(\"space-y-2\", className)}>\n <label className=\"block text-sm font-medium\">{label}</label>\n <div className=\"space-y-2\">\n {options.map((option) => (\n <CheckboxField\n key={option.value}\n label={option.label}\n description={option.description}\n checked={value.includes(option.value)}\n onChange={(e) => handleChange(option.value, e.target.checked)}\n />\n ))}\n </div>\n {hint && !error && (\n <p className=\"text-xs text-muted-foreground\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n\n/\n Tag input for multiple values\n */\nexport const TagInput: FC<{\n label: string;\n value: string[];\n onChange: (values: string[]) => void;\n placeholder?: string;\n error?: string;\n hint?: string;\n className?: string;\n}> = ({ label, value, onChange, placeholder, error, hint, className }) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Enter\" \|\| e.key === \",\") {\n e.preventDefault();\n const input = e.currentTarget;\n const newValue = input.value.trim();\n if (newValue && !value.includes(newValue)) {\n onChange([...value, newValue]);\n input.value = \"\";\n }\n }\n };\n\n const removeTag = (tagToRemove: string) => {\n onChange(value.filter((tag) => tag !== tagToRemove));\n };\n\n return (\n <div className={cn(\"space-y-1\", className)}>\n <label className=\"block text-sm font-medium\">{label}</label>\n <div className=\"flex flex-wrap gap-2 rounded-md border bg-background p-2\">\n {value.map((tag) => (\n <span\n key={tag}\n className=\"inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-1 text-xs\"\n >\n {tag}\n <button\n type=\"button\"\n onClick={() => removeTag(tag)}\n className=\"hover:text-status-error-text\"\n >\n ×\n </button>\n </span>\n ))}\n <input\n type=\"text\"\n placeholder={\n value.length === 0\n ? placeholder\n : tr(\"devportal.addMore\", \"Add more...\")\n }\n onKeyDown={handleKeyDown}\n className=\"flex-1 min-w-[100px] bg-transparent text-sm outline-none\"\n />\n </div>\n {hint && !error && (\n <p className=\"text-xs text-muted-foreground\">{hint}</p>\n )}\n {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/devportal/components/GrantDelegationModal.js CHANGED Viewed

@@ -141,7 +141,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 			"aria-labelledby": T,
 			"aria-describedby": E,
 			tabIndex: -1,
-			className: "relative z-10 w-full max-w-lg rounded-lg bg-bg-surface shadow-xl",
+			className: "relative z-10 w-full max-w-lg rounded-lg bg-background shadow-xl",
 			children: [
 				/* @__PURE__ */ m("div", {
 					className: "flex items-start gap-4 border-b p-6",
@@ -158,12 +158,12 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 								children: "Grant Delegation"
 							}), /* @__PURE__ */ m("p", {
 								id: E,
-								className: "mt-1 text-sm text-text-secondary",
+								className: "mt-1 text-sm text-muted-foreground",
 								children: [
 									"Allow",
 									" ",
 									/* @__PURE__ */ p("span", {
-										className: "font-medium text-text-primary",
+										className: "font-medium text-foreground",
 										children: b
 									}),
 									" to act on your behalf"
@@ -174,7 +174,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 							type: "button",
 							onClick: Q,
 							disabled: J,
-							className: "rounded-md p-1 text-text-secondary hover:bg-bg-sunken transition-colors disabled:opacity-50",
+							className: "rounded-md p-1 text-muted-foreground hover:bg-muted transition-colors disabled:opacity-50",
 							children: /* @__PURE__ */ p(re, { className: "h-5 w-5" })
 						})
 					]
@@ -199,7 +199,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
 							className: "mb-2 block text-sm font-medium",
 							children: [X("devportal.permissionsScopes", "Permissions (Scopes)"), /* @__PURE__ */ m("span", {
-								className: "ml-1.5 text-xs font-normal text-text-secondary",
+								className: "ml-1.5 text-xs font-normal text-muted-foreground",
 								children: [
 									k.length,
 									" ",
@@ -211,7 +211,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 								]
 							})]
 						}), x.length === 0 ? /* @__PURE__ */ p("p", {
-							className: "text-sm text-text-secondary",
+							className: "text-sm text-muted-foreground",
 							children: "This app has no scopes available."
 						}) : /* @__PURE__ */ m("div", {
 							className: "space-y-3",
@@ -233,12 +233,12 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 									/* @__PURE__ */ p("button", {
 										type: "button",
 										onClick: () => A([]),
-										className: "text-text-secondary hover:underline",
+										className: "text-muted-foreground hover:underline",
 										children: X("devportal.clear", "Clear")
 									})
 								]
 							}), [...se.entries()].map(([t, n]) => /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
-								className: "mb-1 text-xs font-semibold uppercase text-text-secondary",
+								className: "mb-1 text-xs font-semibold uppercase text-muted-foreground",
 								children: t
 							}), /* @__PURE__ */ p("div", {
 								className: "flex flex-wrap gap-1.5",
@@ -247,7 +247,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 									return /* @__PURE__ */ p("button", {
 										type: "button",
 										onClick: () => ie(t),
-										className: e("rounded-md px-2.5 py-1 text-xs font-medium transition-colors", n ? i ? "bg-status-warning-bg text-white" : "bg-status-success-bg text-white" : "border bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"),
+										className: e("rounded-md px-2.5 py-1 text-xs font-medium transition-colors", n ? i ? "bg-status-warning-bg text-white" : "bg-status-success-bg text-white" : "border bg-muted text-muted-foreground hover:bg-muted/80"),
 										children: r
 									}, t);
 								})
@@ -262,31 +262,31 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 								type: "button",
 								onClick: oe,
 								disabled: J,
-								className: e("mb-2 flex w-full items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors", N ? "border-status-success-bg bg-status-success-bg-subtle text-status-success-text" : "hover:bg-bg-sunken"),
+								className: e("mb-2 flex w-full items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors", N ? "border-status-success-bg bg-status-success-bg-subtle text-status-success-text" : "hover:bg-muted"),
 								children: [N && /* @__PURE__ */ p(c, { className: "h-4 w-4 text-status-success-text" }), /* @__PURE__ */ p("span", { children: X("devportal.allWorkspacesUnrestricted", "All workspaces (unrestricted)") })]
 							}),
 							!N && /* @__PURE__ */ m(f, { children: [
 								/* @__PURE__ */ m("div", {
 									className: "relative mb-2",
-									children: [/* @__PURE__ */ p(u, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ p("input", {
+									children: [/* @__PURE__ */ p(u, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ p("input", {
 										type: "text",
 										value: F,
 										onChange: (e) => I(e.target.value),
 										placeholder: X("devportal.searchWorkspaces", "Search workspaces..."),
 										disabled: J,
-										className: "block w-full rounded-md border py-2 pl-9 pr-3 text-sm placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50"
+										className: "block w-full rounded-md border py-2 pl-9 pr-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50"
 									})]
 								}),
 								/* @__PURE__ */ p("div", {
 									className: "max-h-40 overflow-y-auto rounded-md border",
 									children: G ? /* @__PURE__ */ m("div", {
 										className: "flex items-center justify-center p-4",
-										children: [/* @__PURE__ */ p(l, { className: "h-4 w-4 animate-spin text-text-secondary" }), /* @__PURE__ */ p("span", {
-											className: "ml-2 text-sm text-text-secondary",
+										children: [/* @__PURE__ */ p(l, { className: "h-4 w-4 animate-spin text-muted-foreground" }), /* @__PURE__ */ p("span", {
+											className: "ml-2 text-sm text-muted-foreground",
 											children: X("devportal.loadingWorkspaces", "Loading workspaces...")
 										})]
 									}) : $.length === 0 ? /* @__PURE__ */ p("p", {
-										className: "p-4 text-center text-sm text-text-secondary",
+										className: "p-4 text-center text-sm text-muted-foreground",
 										children: K.length === 0 ? X("devportal.noWorkspacesFound", "No workspaces found") : X("devportal.noMatchingWorkspaces", "No matching workspaces")
 									}) : $.map((t) => {
 										let n = j.includes(t.id);
@@ -294,7 +294,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 											type: "button",
 											onClick: () => ae(t.id),
 											disabled: J,
-											className: e("flex w-full items-center gap-2 border-b px-3 py-2 text-left text-sm transition-colors last:border-b-0", n ? "bg-status-success-bg-subtle text-status-success-text" : "hover:bg-bg-sunken"),
+											className: e("flex w-full items-center gap-2 border-b px-3 py-2 text-left text-sm transition-colors last:border-b-0", n ? "bg-status-success-bg-subtle text-status-success-text" : "hover:bg-muted"),
 											children: [/* @__PURE__ */ p("div", {
 												className: e("flex h-4 w-4 shrink-0 items-center justify-center rounded border", n ? "border-status-success-bg bg-status-success-bg" : "border-muted-foreground/30"),
 												children: n && /* @__PURE__ */ p(c, { className: "h-3 w-3 text-white" })
@@ -306,7 +306,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 									})
 								}),
 								j.length > 0 && /* @__PURE__ */ m("p", {
-									className: "mt-1.5 text-xs text-text-secondary",
+									className: "mt-1.5 text-xs text-muted-foreground",
 									children: [
 										j.length,
 										" workspace",
@@ -320,7 +320,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 							/* @__PURE__ */ m("label", {
 								className: "mb-2 block text-sm font-medium",
 								children: [X("devportal.expiration", "Expiration"), /* @__PURE__ */ p("span", {
-									className: "ml-1.5 text-xs font-normal text-text-secondary",
+									className: "ml-1.5 text-xs font-normal text-muted-foreground",
 									children: X("devportal.optional", "(optional)")
 								})]
 							}),
@@ -330,10 +330,10 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 								onChange: (e) => R(e.target.value),
 								disabled: J,
 								min: (/* @__PURE__ */ new Date()).toISOString().slice(0, 16),
-								className: "block w-full rounded-md border px-3 py-2 text-sm placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50"
+								className: "block w-full rounded-md border px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50"
 							}),
 							/* @__PURE__ */ p("p", {
-								className: "mt-1.5 text-xs text-text-secondary",
+								className: "mt-1.5 text-xs text-muted-foreground",
 								children: X("devportal.leaveEmptyForNonExpiring", "Leave empty for a delegation that does not expire.")
 							})
 						] }),
@@ -352,7 +352,7 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 						type: "button",
 						onClick: Q,
 						disabled: J,
-						className: "rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50",
+						className: "rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50",
 						children: X("devportal.cancel", "Cancel")
 					}), /* @__PURE__ */ p("button", {
 						type: "button",

package/dist/devportal/components/GrantDelegationModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GrantDelegationModal.js","names":[],"sources":["../../../src/devportal/components/GrantDelegationModal.tsx"],"sourcesContent":["import {\n useState,\n useCallback,\n useEffect,\n useId,\n useRef,\n type FC,\n} from \"react\";\nimport {\n Shield,\n X,\n Loader2,\n CheckCircle,\n AlertCircle,\n Search,\n Check,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\nimport { cn } from \"../utils/cn\";\nimport { useGrantDelegationMutation } from \"../../generated/global-operations\";\nimport { useMyWorkspacesQuery } from \"../../generated/wspace-operations\";\n\ninterface WorkspaceOption {\n id: string;\n name: string;\n}\n\n// ============================================================================\n// Scope grouping helper\n// ============================================================================\n\nfunction groupScopes(scopes: string[]): Map<string, string[]> {\n const groups = new Map<string, string[]>();\n for (const scope of scopes) {\n const [resource] = scope.split(\":\");\n const group = resource \|\| \"other\";\n if (!groups.has(group)) groups.set(group, []);\n groups.get(group)!.push(scope);\n }\n return groups;\n}\n\n// ============================================================================\n// Props\n// ============================================================================\n\nexport interface GrantDelegationModalProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n appId: string;\n appName: string;\n appScopes: string[];\n /** Pre-selected workspace IDs (e.g., from installation flow) /\n preSelectedWorkspaceIds?: string[];\n /* Pre-selected scopes (e.g., required scopes from app) /\n preSelectedScopes?: string[];\n onSuccess?: (delegation: unknown) => void;\n}\n\n/\n Reusable modal for granting delegation access to an app.\n \n Allows users to select scopes, specify workspace IDs,\n * and optionally set an expiration date before granting\n * an app permission to act on their behalf.\n /\nexport const GrantDelegationModal: FC<GrantDelegationModalProps> = ({\n open,\n onOpenChange,\n appId,\n appName,\n appScopes,\n preSelectedWorkspaceIds,\n preSelectedScopes,\n onSuccess,\n}) => {\n const titleId = useId();\n const descriptionId = useId();\n const dialogRef = useRef<HTMLDivElement \| null>(null);\n const previousFocusRef = useRef<HTMLElement \| null>(null);\n const [selectedScopes, setSelectedScopes] = useState<string[]>(\n preSelectedScopes ?? [],\n );\n const [selectedWorkspaceIds, setSelectedWorkspaceIds] = useState<string[]>(\n preSelectedWorkspaceIds ?? [],\n );\n const [allWorkspaces, setAllWorkspaces] = useState(false);\n const [workspaceSearch, setWorkspaceSearch] = useState(\"\");\n const [expiresAt, setExpiresAt] = useState(\"\");\n const [error, setError] = useState<string \| null>(null);\n const [successMessage, setSuccessMessage] = useState<string \| null>(null);\n\n // useGatewayClient throws when no MultiGatewayProvider is mounted (e.g. in\n // standalone tests). We intentionally swallow that to render in degraded\n // mode without the workspaces dropdown.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const workspaceClient = (() => {\n try {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useGatewayClient(\"workspace\");\n } catch {\n return null;\n }\n })();\n const { data: workspacesData, loading: loadingWorkspaces } =\n useMyWorkspacesQuery({\n client: workspaceClient ?? undefined,\n skip: !open \|\| !workspaceClient,\n variables: {\n pagination: {\n limit: 100,\n offset: 0,\n },\n },\n fetchPolicy: \"cache-and-network\",\n });\n const workspaces: WorkspaceOption[] =\n workspacesData?.myWorkspaces?.items?.map(\n (workspace: { id: string; name: string }) => ({\n id: workspace.id,\n name: workspace.name,\n }),\n ) ?? [];\n const [grantDelegationMutation, { loading }] = useGrantDelegationMutation({\n refetchQueries: [\"CurrentUserDelegations\"],\n awaitRefetchQueries: true,\n });\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n // Apply pre-selections when they change\n useEffect(() => {\n if (preSelectedWorkspaceIds?.length)\n setSelectedWorkspaceIds(preSelectedWorkspaceIds);\n }, [preSelectedWorkspaceIds]);\n useEffect(() => {\n if (preSelectedScopes?.length) setSelectedScopes(preSelectedScopes);\n }, [preSelectedScopes]);\n\n const resetState = useCallback(() => {\n setSelectedScopes(preSelectedScopes ?? []);\n setSelectedWorkspaceIds(preSelectedWorkspaceIds ?? []);\n setAllWorkspaces(false);\n setWorkspaceSearch(\"\");\n setExpiresAt(\"\");\n setError(null);\n setSuccessMessage(null);\n }, [preSelectedScopes, preSelectedWorkspaceIds]);\n\n const handleClose = useCallback(() => {\n if (loading) return;\n resetState();\n onOpenChange(false);\n }, [loading, onOpenChange, resetState]);\n\n useEffect(() => {\n if (!open) return undefined;\n\n previousFocusRef.current = document.activeElement as HTMLElement \| null;\n const originalOverflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n\n window.requestAnimationFrame(() => {\n dialogRef.current?.focus();\n });\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && !loading) {\n event.preventDefault();\n handleClose();\n }\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => {\n document.body.style.overflow = originalOverflow;\n document.removeEventListener(\"keydown\", onKeyDown);\n previousFocusRef.current?.focus();\n };\n }, [handleClose, loading, open]);\n\n const toggleScope = useCallback((scope: string) => {\n setSelectedScopes((prev) =>\n prev.includes(scope) ? prev.filter((s) => s !== scope) : [...prev, scope],\n );\n }, []);\n\n const toggleWorkspace = useCallback((wsId: string) => {\n setSelectedWorkspaceIds((prev) =>\n prev.includes(wsId) ? prev.filter((id) => id !== wsId) : [...prev, wsId],\n );\n setAllWorkspaces(false);\n }, []);\n\n const handleAllWorkspacesToggle = useCallback(() => {\n setAllWorkspaces((prev) => {\n if (!prev) setSelectedWorkspaceIds([]);\n return !prev;\n });\n }, []);\n\n const filteredWorkspaces = workspaces.filter((ws) =>\n ws.name.toLowerCase().includes(workspaceSearch.toLowerCase()),\n );\n\n const scopeGroups = groupScopes(appScopes);\n\n const handleGrant = useCallback(async () => {\n setError(null);\n\n if (selectedScopes.length === 0) {\n setError(\n tr(\n \"devportal.selectAtLeastOneScope\",\n \"Please select at least one scope to grant.\",\n ),\n );\n return;\n }\n\n let parsedExpiresAt: string \| undefined;\n if (expiresAt) {\n const date = new Date(expiresAt);\n if (Number.isNaN(date.getTime())) {\n setError(\n tr(\n \"devportal.invalidExpirationDate\",\n \"Invalid expiration date. Please use a valid date format.\",\n ),\n );\n return;\n }\n if (date <= new Date()) {\n setError(\n tr(\n \"devportal.expirationDateFuture\",\n \"Expiration date must be in the future.\",\n ),\n );\n return;\n }\n parsedExpiresAt = date.toISOString();\n }\n\n try {\n const result = await grantDelegationMutation({\n variables: {\n input: {\n appId,\n scopes: selectedScopes,\n workspaceIds:\n !allWorkspaces && selectedWorkspaceIds.length > 0\n ? selectedWorkspaceIds\n : undefined,\n expiresAt: parsedExpiresAt,\n },\n },\n });\n\n if (result.error) {\n setError(\n result.error.message ??\n tr(\n \"devportal.failedToGrantDelegation\",\n \"Failed to grant delegation.\",\n ),\n );\n return;\n }\n\n const delegation = result.data?.grantDelegation;\n if (!delegation) {\n setError(\n tr(\n \"devportal.failedToGrantDelegation\",\n \"Failed to grant delegation.\",\n ),\n );\n return;\n }\n\n const wsCount = allWorkspaces\n ? \"all workspaces\"\n : selectedWorkspaceIds.length > 0\n ? `${selectedWorkspaceIds.length} workspace${selectedWorkspaceIds.length !== 1 ? \"s\" : \"\"}`\n : \"all workspaces\";\n setSuccessMessage(\n `Delegation granted to \"${appName}\" with ${selectedScopes.length} scope${selectedScopes.length !== 1 ? \"s\" : \"\"} for ${wsCount}.`,\n );\n onSuccess?.(delegation);\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : tr(\n \"devportal.failedToGrantDelegation\",\n \"Failed to grant delegation.\",\n ),\n );\n }\n }, [\n selectedScopes,\n selectedWorkspaceIds,\n allWorkspaces,\n expiresAt,\n appId,\n appName,\n grantDelegationMutation,\n onSuccess,\n ]);\n\n if (!open) return null;\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n {/ Backdrop /}\n <button\n type=\"button\"\n aria-label=\"Close delegation dialog backdrop\"\n className=\"absolute inset-0 bg-bg-overlay\"\n onClick={handleClose}\n />\n\n {/ Dialog /}\n <div\n ref={dialogRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n tabIndex={-1}\n className=\"relative z-10 w-full max-w-lg rounded-lg bg-bg-surface shadow-xl\"\n >\n {/ Header /}\n <div className=\"flex items-start gap-4 border-b p-6\">\n <div className=\"rounded-full bg-status-success-bg-subtle p-2\">\n <Shield className=\"h-6 w-6 text-status-success-text\" />\n </div>\n <div className=\"flex-1\">\n <h3 id={titleId} className=\"text-lg font-semibold\">\n Grant Delegation\n </h3>\n <p\n id={descriptionId}\n className=\"mt-1 text-sm text-text-secondary\"\n >\n Allow{\" \"}\n <span className=\"font-medium text-text-primary\">{appName}</span> to\n act on your behalf\n </p>\n </div>\n <button\n type=\"button\"\n onClick={handleClose}\n disabled={loading}\n className=\"rounded-md p-1 text-text-secondary hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n >\n <X className=\"h-5 w-5\" />\n </button>\n </div>\n\n {/ Body /}\n <div className=\"space-y-5 p-6\">\n {/ Success state /}\n {successMessage && (\n <div className=\"flex items-start gap-3 rounded-md border border-border-subtle bg-status-success-bg-subtle p-4\">\n <CheckCircle className=\"h-5 w-5 shrink-0 text-status-success-text\" />\n <div className=\"flex-1\">\n <p className=\"text-sm font-medium text-status-success-text\">\n {successMessage}\n </p>\n <button\n type=\"button\"\n onClick={handleClose}\n className=\"mt-2 text-sm font-medium text-status-success-text hover:underline\"\n >\n {tr(\"devportal.close\", \"Close\")}\n </button>\n </div>\n </div>\n )}\n\n {/ Form fields (hidden after success) /}\n {!successMessage && (\n <>\n {/ Scope selection (grouped by resource) /}\n <div>\n <label className=\"mb-2 block text-sm font-medium\">\n {tr(\"devportal.permissionsScopes\", \"Permissions (Scopes)\")}\n <span className=\"ml-1.5 text-xs font-normal text-text-secondary\">\n {selectedScopes.length} {tr(\"devportal.of\", \"of\")}{\" \"}\n {appScopes.length} {tr(\"devportal.selected\", \"selected\")}\n </span>\n </label>\n {appScopes.length === 0 ? (\n <p className=\"text-sm text-text-secondary\">\n This app has no scopes available.\n </p>\n ) : (\n <div className=\"space-y-3\">\n {/ Quick actions /}\n <div className=\"flex gap-2 text-xs\">\n <button\n type=\"button\"\n onClick={() => setSelectedScopes([...appScopes])}\n className=\"text-status-success-text hover:underline\"\n >\n {tr(\"devportal.selectAll\", \"Select all\")}\n </button>\n <button\n type=\"button\"\n onClick={() =>\n setSelectedScopes(\n appScopes.filter(\n (s) => s.includes(\":read\") \|\| s.includes(\":list\"),\n ),\n )\n }\n className=\"text-status-success-text hover:underline\"\n >\n {tr(\"devportal.readOnly\", \"Read-only\")}\n </button>\n <button\n type=\"button\"\n onClick={() => setSelectedScopes([])}\n className=\"text-text-secondary hover:underline\"\n >\n {tr(\"devportal.clear\", \"Clear\")}\n </button>\n </div>\n {/ Grouped scopes /}\n {[...scopeGroups.entries()].map(([group, scopes]) => (\n <div key={group}>\n <p className=\"mb-1 text-xs font-semibold uppercase text-text-secondary\">\n {group}\n </p>\n <div className=\"flex flex-wrap gap-1.5\">\n {scopes.map((scope) => {\n const isSelected = selectedScopes.includes(scope);\n const action = scope.split(\":\")[1] \|\| scope;\n const isWrite =\n action.includes(\"write\") \|\|\n action.includes(\"create\") \|\|\n action.includes(\"delete\") \|\|\n action.includes(\"admin\");\n return (\n <button\n key={scope}\n type=\"button\"\n onClick={() => toggleScope(scope)}\n className={cn(\n \"rounded-md px-2.5 py-1 text-xs font-medium transition-colors\",\n isSelected\n ? isWrite\n ? \"bg-status-warning-bg text-white\"\n : \"bg-status-success-bg text-white\"\n : \"border bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80\",\n )}\n >\n {action}\n </button>\n );\n })}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/ Workspace Selection (multi-select picker) /}\n <div>\n <label className=\"mb-2 block text-sm font-medium\">\n {tr(\"devportal.workspaceAccess\", \"Workspace Access\")}\n </label>\n\n {/ All workspaces toggle /}\n <button\n type=\"button\"\n onClick={handleAllWorkspacesToggle}\n disabled={loading}\n className={cn(\n \"mb-2 flex w-full items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors\",\n allWorkspaces\n ? \"border-status-success-bg bg-status-success-bg-subtle text-status-success-text\"\n : \"hover:bg-bg-sunken\",\n )}\n >\n {allWorkspaces && (\n <Check className=\"h-4 w-4 text-status-success-text\" />\n )}\n <span>\n {tr(\n \"devportal.allWorkspacesUnrestricted\",\n \"All workspaces (unrestricted)\",\n )}\n </span>\n </button>\n\n {!allWorkspaces && (\n <>\n {/ Search /}\n <div className=\"relative mb-2\">\n <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n <input\n type=\"text\"\n value={workspaceSearch}\n onChange={(e) => setWorkspaceSearch(e.target.value)}\n placeholder={tr(\n \"devportal.searchWorkspaces\",\n \"Search workspaces...\",\n )}\n disabled={loading}\n className=\"block w-full rounded-md border py-2 pl-9 pr-3 text-sm placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50\"\n />\n </div>\n\n {/ Workspace list /}\n <div className=\"max-h-40 overflow-y-auto rounded-md border\">\n {loadingWorkspaces ? (\n <div className=\"flex items-center justify-center p-4\">\n <Loader2 className=\"h-4 w-4 animate-spin text-text-secondary\" />\n <span className=\"ml-2 text-sm text-text-secondary\">\n {tr(\n \"devportal.loadingWorkspaces\",\n \"Loading workspaces...\",\n )}\n </span>\n </div>\n ) : filteredWorkspaces.length === 0 ? (\n <p className=\"p-4 text-center text-sm text-text-secondary\">\n {workspaces.length === 0\n ? tr(\n \"devportal.noWorkspacesFound\",\n \"No workspaces found\",\n )\n : tr(\n \"devportal.noMatchingWorkspaces\",\n \"No matching workspaces\",\n )}\n </p>\n ) : (\n filteredWorkspaces.map((ws) => {\n const isSelected = selectedWorkspaceIds.includes(\n ws.id,\n );\n return (\n <button\n key={ws.id}\n type=\"button\"\n onClick={() => toggleWorkspace(ws.id)}\n disabled={loading}\n className={cn(\n \"flex w-full items-center gap-2 border-b px-3 py-2 text-left text-sm transition-colors last:border-b-0\",\n isSelected\n ? \"bg-status-success-bg-subtle text-status-success-text\"\n : \"hover:bg-bg-sunken\",\n )}\n >\n <div\n className={cn(\n \"flex h-4 w-4 shrink-0 items-center justify-center rounded border\",\n isSelected\n ? \"border-status-success-bg bg-status-success-bg\"\n : \"border-muted-foreground/30\",\n )}\n >\n {isSelected && (\n <Check className=\"h-3 w-3 text-white\" />\n )}\n </div>\n <span className=\"font-medium\">{ws.name}</span>\n </button>\n );\n })\n )}\n </div>\n\n {/ Selected count /}\n {selectedWorkspaceIds.length > 0 && (\n <p className=\"mt-1.5 text-xs text-text-secondary\">\n {selectedWorkspaceIds.length} workspace\n {selectedWorkspaceIds.length !== 1 ? \"s\" : \"\"} selected\n </p>\n )}\n </>\n )}\n </div>\n\n {/ Expiration /}\n <div>\n <label className=\"mb-2 block text-sm font-medium\">\n {tr(\"devportal.expiration\", \"Expiration\")}\n <span className=\"ml-1.5 text-xs font-normal text-text-secondary\">\n {tr(\"devportal.optional\", \"(optional)\")}\n </span>\n </label>\n <input\n type=\"datetime-local\"\n value={expiresAt}\n onChange={(e) => setExpiresAt(e.target.value)}\n disabled={loading}\n min={new Date().toISOString().slice(0, 16)}\n className=\"block w-full rounded-md border px-3 py-2 text-sm placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50\"\n />\n <p className=\"mt-1.5 text-xs text-text-secondary\">\n {tr(\n \"devportal.leaveEmptyForNonExpiring\",\n \"Leave empty for a delegation that does not expire.\",\n )}\n </p>\n </div>\n\n {/ Error /}\n {error && (\n <div className=\"flex items-start gap-3 rounded-md border border-border-subtle bg-status-error-bg-subtle p-4\">\n <AlertCircle className=\"h-5 w-5 shrink-0 text-status-error-text\" />\n <p className=\"text-sm text-status-error-text\">{error}</p>\n </div>\n )}\n </>\n )}\n </div>\n\n {/ Footer */}\n {!successMessage && (\n <div className=\"flex justify-end gap-3 border-t p-6\">\n <button\n type=\"button\"\n onClick={handleClose}\n disabled={loading}\n className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n >\n {tr(\"devportal.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"button\"\n onClick={handleGrant}\n disabled={loading \|\| selectedScopes.length === 0}\n className={cn(\n \"flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed\",\n \"bg-status-success-bg hover:bg-status-success-bg/90\",\n )}\n >\n {loading ? (\n <>\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n {tr(\"devportal.granting\", \"Granting...\")}\n </>\n ) : (\n tr(\"devportal.grant\", \"Grant\")\n )}\n </button>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"GrantDelegationModal.js","names":[],"sources":["../../../src/devportal/components/GrantDelegationModal.tsx"],"sourcesContent":["import {\n useState,\n useCallback,\n useEffect,\n useId,\n useRef,\n type FC,\n} from \"react\";\nimport {\n Shield,\n X,\n Loader2,\n CheckCircle,\n AlertCircle,\n Search,\n Check,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\nimport { cn } from \"../utils/cn\";\nimport { useGrantDelegationMutation } from \"../../generated/global-operations\";\nimport { useMyWorkspacesQuery } from \"../../generated/wspace-operations\";\n\ninterface WorkspaceOption {\n id: string;\n name: string;\n}\n\n// ============================================================================\n// Scope grouping helper\n// ============================================================================\n\nfunction groupScopes(scopes: string[]): Map<string, string[]> {\n const groups = new Map<string, string[]>();\n for (const scope of scopes) {\n const [resource] = scope.split(\":\");\n const group = resource \|\| \"other\";\n if (!groups.has(group)) groups.set(group, []);\n groups.get(group)!.push(scope);\n }\n return groups;\n}\n\n// ============================================================================\n// Props\n// ============================================================================\n\nexport interface GrantDelegationModalProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n appId: string;\n appName: string;\n appScopes: string[];\n /** Pre-selected workspace IDs (e.g., from installation flow) /\n preSelectedWorkspaceIds?: string[];\n /* Pre-selected scopes (e.g., required scopes from app) /\n preSelectedScopes?: string[];\n onSuccess?: (delegation: unknown) => void;\n}\n\n/\n Reusable modal for granting delegation access to an app.\n \n Allows users to select scopes, specify workspace IDs,\n * and optionally set an expiration date before granting\n * an app permission to act on their behalf.\n /\nexport const GrantDelegationModal: FC<GrantDelegationModalProps> = ({\n open,\n onOpenChange,\n appId,\n appName,\n appScopes,\n preSelectedWorkspaceIds,\n preSelectedScopes,\n onSuccess,\n}) => {\n const titleId = useId();\n const descriptionId = useId();\n const dialogRef = useRef<HTMLDivElement \| null>(null);\n const previousFocusRef = useRef<HTMLElement \| null>(null);\n const [selectedScopes, setSelectedScopes] = useState<string[]>(\n preSelectedScopes ?? [],\n );\n const [selectedWorkspaceIds, setSelectedWorkspaceIds] = useState<string[]>(\n preSelectedWorkspaceIds ?? [],\n );\n const [allWorkspaces, setAllWorkspaces] = useState(false);\n const [workspaceSearch, setWorkspaceSearch] = useState(\"\");\n const [expiresAt, setExpiresAt] = useState(\"\");\n const [error, setError] = useState<string \| null>(null);\n const [successMessage, setSuccessMessage] = useState<string \| null>(null);\n\n // useGatewayClient throws when no MultiGatewayProvider is mounted (e.g. in\n // standalone tests). We intentionally swallow that to render in degraded\n // mode without the workspaces dropdown.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const workspaceClient = (() => {\n try {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useGatewayClient(\"workspace\");\n } catch {\n return null;\n }\n })();\n const { data: workspacesData, loading: loadingWorkspaces } =\n useMyWorkspacesQuery({\n client: workspaceClient ?? undefined,\n skip: !open \|\| !workspaceClient,\n variables: {\n pagination: {\n limit: 100,\n offset: 0,\n },\n },\n fetchPolicy: \"cache-and-network\",\n });\n const workspaces: WorkspaceOption[] =\n workspacesData?.myWorkspaces?.items?.map(\n (workspace: { id: string; name: string }) => ({\n id: workspace.id,\n name: workspace.name,\n }),\n ) ?? [];\n const [grantDelegationMutation, { loading }] = useGrantDelegationMutation({\n refetchQueries: [\"CurrentUserDelegations\"],\n awaitRefetchQueries: true,\n });\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n // Apply pre-selections when they change\n useEffect(() => {\n if (preSelectedWorkspaceIds?.length)\n setSelectedWorkspaceIds(preSelectedWorkspaceIds);\n }, [preSelectedWorkspaceIds]);\n useEffect(() => {\n if (preSelectedScopes?.length) setSelectedScopes(preSelectedScopes);\n }, [preSelectedScopes]);\n\n const resetState = useCallback(() => {\n setSelectedScopes(preSelectedScopes ?? []);\n setSelectedWorkspaceIds(preSelectedWorkspaceIds ?? []);\n setAllWorkspaces(false);\n setWorkspaceSearch(\"\");\n setExpiresAt(\"\");\n setError(null);\n setSuccessMessage(null);\n }, [preSelectedScopes, preSelectedWorkspaceIds]);\n\n const handleClose = useCallback(() => {\n if (loading) return;\n resetState();\n onOpenChange(false);\n }, [loading, onOpenChange, resetState]);\n\n useEffect(() => {\n if (!open) return undefined;\n\n previousFocusRef.current = document.activeElement as HTMLElement \| null;\n const originalOverflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n\n window.requestAnimationFrame(() => {\n dialogRef.current?.focus();\n });\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && !loading) {\n event.preventDefault();\n handleClose();\n }\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => {\n document.body.style.overflow = originalOverflow;\n document.removeEventListener(\"keydown\", onKeyDown);\n previousFocusRef.current?.focus();\n };\n }, [handleClose, loading, open]);\n\n const toggleScope = useCallback((scope: string) => {\n setSelectedScopes((prev) =>\n prev.includes(scope) ? prev.filter((s) => s !== scope) : [...prev, scope],\n );\n }, []);\n\n const toggleWorkspace = useCallback((wsId: string) => {\n setSelectedWorkspaceIds((prev) =>\n prev.includes(wsId) ? prev.filter((id) => id !== wsId) : [...prev, wsId],\n );\n setAllWorkspaces(false);\n }, []);\n\n const handleAllWorkspacesToggle = useCallback(() => {\n setAllWorkspaces((prev) => {\n if (!prev) setSelectedWorkspaceIds([]);\n return !prev;\n });\n }, []);\n\n const filteredWorkspaces = workspaces.filter((ws) =>\n ws.name.toLowerCase().includes(workspaceSearch.toLowerCase()),\n );\n\n const scopeGroups = groupScopes(appScopes);\n\n const handleGrant = useCallback(async () => {\n setError(null);\n\n if (selectedScopes.length === 0) {\n setError(\n tr(\n \"devportal.selectAtLeastOneScope\",\n \"Please select at least one scope to grant.\",\n ),\n );\n return;\n }\n\n let parsedExpiresAt: string \| undefined;\n if (expiresAt) {\n const date = new Date(expiresAt);\n if (Number.isNaN(date.getTime())) {\n setError(\n tr(\n \"devportal.invalidExpirationDate\",\n \"Invalid expiration date. Please use a valid date format.\",\n ),\n );\n return;\n }\n if (date <= new Date()) {\n setError(\n tr(\n \"devportal.expirationDateFuture\",\n \"Expiration date must be in the future.\",\n ),\n );\n return;\n }\n parsedExpiresAt = date.toISOString();\n }\n\n try {\n const result = await grantDelegationMutation({\n variables: {\n input: {\n appId,\n scopes: selectedScopes,\n workspaceIds:\n !allWorkspaces && selectedWorkspaceIds.length > 0\n ? selectedWorkspaceIds\n : undefined,\n expiresAt: parsedExpiresAt,\n },\n },\n });\n\n if (result.error) {\n setError(\n result.error.message ??\n tr(\n \"devportal.failedToGrantDelegation\",\n \"Failed to grant delegation.\",\n ),\n );\n return;\n }\n\n const delegation = result.data?.grantDelegation;\n if (!delegation) {\n setError(\n tr(\n \"devportal.failedToGrantDelegation\",\n \"Failed to grant delegation.\",\n ),\n );\n return;\n }\n\n const wsCount = allWorkspaces\n ? \"all workspaces\"\n : selectedWorkspaceIds.length > 0\n ? `${selectedWorkspaceIds.length} workspace${selectedWorkspaceIds.length !== 1 ? \"s\" : \"\"}`\n : \"all workspaces\";\n setSuccessMessage(\n `Delegation granted to \"${appName}\" with ${selectedScopes.length} scope${selectedScopes.length !== 1 ? \"s\" : \"\"} for ${wsCount}.`,\n );\n onSuccess?.(delegation);\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : tr(\n \"devportal.failedToGrantDelegation\",\n \"Failed to grant delegation.\",\n ),\n );\n }\n }, [\n selectedScopes,\n selectedWorkspaceIds,\n allWorkspaces,\n expiresAt,\n appId,\n appName,\n grantDelegationMutation,\n onSuccess,\n ]);\n\n if (!open) return null;\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n {/ Backdrop /}\n <button\n type=\"button\"\n aria-label=\"Close delegation dialog backdrop\"\n className=\"absolute inset-0 bg-bg-overlay\"\n onClick={handleClose}\n />\n\n {/ Dialog /}\n <div\n ref={dialogRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n tabIndex={-1}\n className=\"relative z-10 w-full max-w-lg rounded-lg bg-background shadow-xl\"\n >\n {/ Header /}\n <div className=\"flex items-start gap-4 border-b p-6\">\n <div className=\"rounded-full bg-status-success-bg-subtle p-2\">\n <Shield className=\"h-6 w-6 text-status-success-text\" />\n </div>\n <div className=\"flex-1\">\n <h3 id={titleId} className=\"text-lg font-semibold\">\n Grant Delegation\n </h3>\n <p\n id={descriptionId}\n className=\"mt-1 text-sm text-muted-foreground\"\n >\n Allow{\" \"}\n <span className=\"font-medium text-foreground\">{appName}</span> to\n act on your behalf\n </p>\n </div>\n <button\n type=\"button\"\n onClick={handleClose}\n disabled={loading}\n className=\"rounded-md p-1 text-muted-foreground hover:bg-muted transition-colors disabled:opacity-50\"\n >\n <X className=\"h-5 w-5\" />\n </button>\n </div>\n\n {/ Body /}\n <div className=\"space-y-5 p-6\">\n {/ Success state /}\n {successMessage && (\n <div className=\"flex items-start gap-3 rounded-md border border-border-subtle bg-status-success-bg-subtle p-4\">\n <CheckCircle className=\"h-5 w-5 shrink-0 text-status-success-text\" />\n <div className=\"flex-1\">\n <p className=\"text-sm font-medium text-status-success-text\">\n {successMessage}\n </p>\n <button\n type=\"button\"\n onClick={handleClose}\n className=\"mt-2 text-sm font-medium text-status-success-text hover:underline\"\n >\n {tr(\"devportal.close\", \"Close\")}\n </button>\n </div>\n </div>\n )}\n\n {/ Form fields (hidden after success) /}\n {!successMessage && (\n <>\n {/ Scope selection (grouped by resource) /}\n <div>\n <label className=\"mb-2 block text-sm font-medium\">\n {tr(\"devportal.permissionsScopes\", \"Permissions (Scopes)\")}\n <span className=\"ml-1.5 text-xs font-normal text-muted-foreground\">\n {selectedScopes.length} {tr(\"devportal.of\", \"of\")}{\" \"}\n {appScopes.length} {tr(\"devportal.selected\", \"selected\")}\n </span>\n </label>\n {appScopes.length === 0 ? (\n <p className=\"text-sm text-muted-foreground\">\n This app has no scopes available.\n </p>\n ) : (\n <div className=\"space-y-3\">\n {/ Quick actions /}\n <div className=\"flex gap-2 text-xs\">\n <button\n type=\"button\"\n onClick={() => setSelectedScopes([...appScopes])}\n className=\"text-status-success-text hover:underline\"\n >\n {tr(\"devportal.selectAll\", \"Select all\")}\n </button>\n <button\n type=\"button\"\n onClick={() =>\n setSelectedScopes(\n appScopes.filter(\n (s) => s.includes(\":read\") \|\| s.includes(\":list\"),\n ),\n )\n }\n className=\"text-status-success-text hover:underline\"\n >\n {tr(\"devportal.readOnly\", \"Read-only\")}\n </button>\n <button\n type=\"button\"\n onClick={() => setSelectedScopes([])}\n className=\"text-muted-foreground hover:underline\"\n >\n {tr(\"devportal.clear\", \"Clear\")}\n </button>\n </div>\n {/ Grouped scopes /}\n {[...scopeGroups.entries()].map(([group, scopes]) => (\n <div key={group}>\n <p className=\"mb-1 text-xs font-semibold uppercase text-muted-foreground\">\n {group}\n </p>\n <div className=\"flex flex-wrap gap-1.5\">\n {scopes.map((scope) => {\n const isSelected = selectedScopes.includes(scope);\n const action = scope.split(\":\")[1] \|\| scope;\n const isWrite =\n action.includes(\"write\") \|\|\n action.includes(\"create\") \|\|\n action.includes(\"delete\") \|\|\n action.includes(\"admin\");\n return (\n <button\n key={scope}\n type=\"button\"\n onClick={() => toggleScope(scope)}\n className={cn(\n \"rounded-md px-2.5 py-1 text-xs font-medium transition-colors\",\n isSelected\n ? isWrite\n ? \"bg-status-warning-bg text-white\"\n : \"bg-status-success-bg text-white\"\n : \"border bg-muted text-muted-foreground hover:bg-muted/80\",\n )}\n >\n {action}\n </button>\n );\n })}\n </div>\n </div>\n ))}\n </div>\n )}\n </div>\n\n {/ Workspace Selection (multi-select picker) /}\n <div>\n <label className=\"mb-2 block text-sm font-medium\">\n {tr(\"devportal.workspaceAccess\", \"Workspace Access\")}\n </label>\n\n {/ All workspaces toggle /}\n <button\n type=\"button\"\n onClick={handleAllWorkspacesToggle}\n disabled={loading}\n className={cn(\n \"mb-2 flex w-full items-center gap-2 rounded-md border px-3 py-2 text-sm transition-colors\",\n allWorkspaces\n ? \"border-status-success-bg bg-status-success-bg-subtle text-status-success-text\"\n : \"hover:bg-muted\",\n )}\n >\n {allWorkspaces && (\n <Check className=\"h-4 w-4 text-status-success-text\" />\n )}\n <span>\n {tr(\n \"devportal.allWorkspacesUnrestricted\",\n \"All workspaces (unrestricted)\",\n )}\n </span>\n </button>\n\n {!allWorkspaces && (\n <>\n {/ Search /}\n <div className=\"relative mb-2\">\n <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n <input\n type=\"text\"\n value={workspaceSearch}\n onChange={(e) => setWorkspaceSearch(e.target.value)}\n placeholder={tr(\n \"devportal.searchWorkspaces\",\n \"Search workspaces...\",\n )}\n disabled={loading}\n className=\"block w-full rounded-md border py-2 pl-9 pr-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50\"\n />\n </div>\n\n {/ Workspace list /}\n <div className=\"max-h-40 overflow-y-auto rounded-md border\">\n {loadingWorkspaces ? (\n <div className=\"flex items-center justify-center p-4\">\n <Loader2 className=\"h-4 w-4 animate-spin text-muted-foreground\" />\n <span className=\"ml-2 text-sm text-muted-foreground\">\n {tr(\n \"devportal.loadingWorkspaces\",\n \"Loading workspaces...\",\n )}\n </span>\n </div>\n ) : filteredWorkspaces.length === 0 ? (\n <p className=\"p-4 text-center text-sm text-muted-foreground\">\n {workspaces.length === 0\n ? tr(\n \"devportal.noWorkspacesFound\",\n \"No workspaces found\",\n )\n : tr(\n \"devportal.noMatchingWorkspaces\",\n \"No matching workspaces\",\n )}\n </p>\n ) : (\n filteredWorkspaces.map((ws) => {\n const isSelected = selectedWorkspaceIds.includes(\n ws.id,\n );\n return (\n <button\n key={ws.id}\n type=\"button\"\n onClick={() => toggleWorkspace(ws.id)}\n disabled={loading}\n className={cn(\n \"flex w-full items-center gap-2 border-b px-3 py-2 text-left text-sm transition-colors last:border-b-0\",\n isSelected\n ? \"bg-status-success-bg-subtle text-status-success-text\"\n : \"hover:bg-muted\",\n )}\n >\n <div\n className={cn(\n \"flex h-4 w-4 shrink-0 items-center justify-center rounded border\",\n isSelected\n ? \"border-status-success-bg bg-status-success-bg\"\n : \"border-muted-foreground/30\",\n )}\n >\n {isSelected && (\n <Check className=\"h-3 w-3 text-white\" />\n )}\n </div>\n <span className=\"font-medium\">{ws.name}</span>\n </button>\n );\n })\n )}\n </div>\n\n {/ Selected count /}\n {selectedWorkspaceIds.length > 0 && (\n <p className=\"mt-1.5 text-xs text-muted-foreground\">\n {selectedWorkspaceIds.length} workspace\n {selectedWorkspaceIds.length !== 1 ? \"s\" : \"\"} selected\n </p>\n )}\n </>\n )}\n </div>\n\n {/ Expiration /}\n <div>\n <label className=\"mb-2 block text-sm font-medium\">\n {tr(\"devportal.expiration\", \"Expiration\")}\n <span className=\"ml-1.5 text-xs font-normal text-muted-foreground\">\n {tr(\"devportal.optional\", \"(optional)\")}\n </span>\n </label>\n <input\n type=\"datetime-local\"\n value={expiresAt}\n onChange={(e) => setExpiresAt(e.target.value)}\n disabled={loading}\n min={new Date().toISOString().slice(0, 16)}\n className=\"block w-full rounded-md border px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-status-success-bg/20 focus:border-status-success-bg transition-colors disabled:opacity-50\"\n />\n <p className=\"mt-1.5 text-xs text-muted-foreground\">\n {tr(\n \"devportal.leaveEmptyForNonExpiring\",\n \"Leave empty for a delegation that does not expire.\",\n )}\n </p>\n </div>\n\n {/ Error /}\n {error && (\n <div className=\"flex items-start gap-3 rounded-md border border-border-subtle bg-status-error-bg-subtle p-4\">\n <AlertCircle className=\"h-5 w-5 shrink-0 text-status-error-text\" />\n <p className=\"text-sm text-status-error-text\">{error}</p>\n </div>\n )}\n </>\n )}\n </div>\n\n {/ Footer */}\n {!successMessage && (\n <div className=\"flex justify-end gap-3 border-t p-6\">\n <button\n type=\"button\"\n onClick={handleClose}\n disabled={loading}\n className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50\"\n >\n {tr(\"devportal.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"button\"\n onClick={handleGrant}\n disabled={loading \|\| selectedScopes.length === 0}\n className={cn(\n \"flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed\",\n \"bg-status-success-bg hover:bg-status-success-bg/90\",\n )}\n >\n {loading ? (\n <>\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n {tr(\"devportal.granting\", \"Granting...\")}\n </>\n ) : (\n tr(\"devportal.grant\", \"Grant\")\n )}\n </button>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/devportal/components/LoadingState.js CHANGED Viewed

@@ -15,7 +15,7 @@ var a = ({ message: a, className: o, size: s = "md" }) => {
 			md: "h-8 w-8",
 			lg: "h-12 w-12"
 		}[s]) }), l && /* @__PURE__ */ r("p", {
-			className: "text-sm text-text-secondary",
+			className: "text-sm text-muted-foreground",
 			children: l
 		})]
 	});

package/dist/devportal/components/LoadingState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoadingState.js","names":[],"sources":["../../../src/devportal/components/LoadingState.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\ninterface LoadingStateProps {\n message?: string;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n}\n\n/*\n Loading state component with spinner and optional message\n /\nexport const LoadingState: FC<LoadingStateProps> = ({\n message,\n className,\n size = \"md\",\n}) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedMessage = message ?? tr(\"devportal.loadingDots\", \"Loading...\");\n const sizeClasses = {\n sm: \"h-4 w-4\",\n md: \"h-8 w-8\",\n lg: \"h-12 w-12\",\n };\n\n return (\n <div\n className={cn(\n \"flex flex-col items-center justify-center gap-4 p-8\",\n className,\n )}\n >\n <Loader2 className={cn(\"animate-spin text-primary\", sizeClasses[size])} />\n {resolvedMessage && (\n <p className=\"text-sm text-~~text~~-~~secondary~~\">{resolvedMessage}</p>\n )}\n </div>\n );\n};\n\n/\n Full page loading state\n /\nexport const PageLoadingState: FC<{ message?: string }> = ({ message }) => (\n <div className=\"flex min-h-[400px] w-full items-center justify-center\">\n <LoadingState message={message} size=\"lg\" />\n </div>\n);\n\n/\n Card loading skeleton\n /\nexport const CardSkeleton: FC<{ className?: string }> = ({ className }) => (\n <div className={cn(\"rounded-~~card~~ border ~~border-border-seam~~ bg-~~bg-surface~~ p-6\", className)}>\n <div className=\"h-4 w-3/4 ~~overflow-hidden~~ rounded bg-~~bg-sunken animate-vc-shimmer~~\" />\n <div className=\"mt-4 h-3 w-1/2 ~~overflow-hidden~~ rounded bg-~~bg-sunken animate-vc-shimmer~~\" />\n <div className=\"mt-2 h-3 w-2/3 ~~overflow-hidden~~ rounded bg-~~bg-sunken animate-vc-shimmer~~\" />\n </div>\n);\n\n/\n Table row skeleton\n */\nexport const TableRowSkeleton: FC<{ columns?: number }> = ({ columns = 4 }) => (\n <tr>\n {Array.from({ length: columns }).map((_, i) => (\n <td key={i} className=\"px-4 py-3\">\n <div className=\"h-4 ~~overflow-hidden~~ rounded bg-~~bg-sunken animate-vc-shimmer~~\" />\n </td>\n ))}\n </tr>\n);\n"],"mappings":";;;;;AAcA,IAAa,KAAuC,EAClD,YACA,cACA,UAAO,WACH;CACJ,IAAM,EAAE,SAAM,GAAS,EAKjB,IAAkB,OAJZ,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEE,yBAAyB,aAAa;AAO5E,QACE,kBAAC,OAAD;EACE,WAAW,EACT,uDACA,EACD;YAJH,CAME,kBAAC,GAAD,EAAS,WAAW,EAAG,6BAbP;GAClB,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CASmE,GAAM,EAAI,CAAA,EACzE,KACC,kBAAC,KAAD;GAAG,WAAU;~~aAA+B~~;GAAoB,CAAA,~~CAE9D~~;;GAOG,KAA8C,EAAE,iBAC3D,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,GAAD;EAAuB;EAAS,MAAK;EAAO,CAAA;CACxC,CAAA"}
1	+ {"version":3,"file":"LoadingState.js","names":[],"sources":["../../../src/devportal/components/LoadingState.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\n\ninterface LoadingStateProps {\n message?: string;\n className?: string;\n size?: \"sm\" \| \"md\" \| \"lg\";\n}\n\n/*\n Loading state component with spinner and optional message\n /\nexport const LoadingState: FC<LoadingStateProps> = ({\n message,\n className,\n size = \"md\",\n}) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const resolvedMessage = message ?? tr(\"devportal.loadingDots\", \"Loading...\");\n const sizeClasses = {\n sm: \"h-4 w-4\",\n md: \"h-8 w-8\",\n lg: \"h-12 w-12\",\n };\n\n return (\n <div\n className={cn(\n \"flex flex-col items-center justify-center gap-4 p-8\",\n className,\n )}\n >\n <Loader2 className={cn(\"animate-spin text-primary\", sizeClasses[size])} />\n {resolvedMessage && (\n <p className=\"text-sm text-muted-foreground\">{resolvedMessage}</p>\n )}\n </div>\n );\n};\n\n/\n Full page loading state\n /\nexport const PageLoadingState: FC<{ message?: string }> = ({ message }) => (\n <div className=\"flex min-h-[400px] w-full items-center justify-center\">\n <LoadingState message={message} size=\"lg\" />\n </div>\n);\n\n/\n Card loading skeleton\n /\nexport const CardSkeleton: FC<{ className?: string }> = ({ className }) => (\n <div className={cn(\"animate-pulse rounded-lg border bg-card p-6\", className)}>\n <div className=\"h-4 w-3/4 rounded bg-muted\" />\n <div className=\"mt-4 h-3 w-1/2 rounded bg-muted\" />\n <div className=\"mt-2 h-3 w-2/3 rounded bg-muted\" />\n </div>\n);\n\n/\n Table row skeleton\n */\nexport const TableRowSkeleton: FC<{ columns?: number }> = ({ columns = 4 }) => (\n <tr className=\"animate-pulse\">\n {Array.from({ length: columns }).map((_, i) => (\n <td key={i} className=\"px-4 py-3\">\n <div className=\"h-4 rounded bg-muted\" />\n </td>\n ))}\n </tr>\n);\n"],"mappings":";;;;;AAcA,IAAa,KAAuC,EAClD,YACA,cACA,UAAO,WACH;CACJ,IAAM,EAAE,SAAM,GAAS,EAKjB,IAAkB,OAJZ,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEE,yBAAyB,aAAa;AAO5E,QACE,kBAAC,OAAD;EACE,WAAW,EACT,uDACA,EACD;YAJH,CAME,kBAAC,GAAD,EAAS,WAAW,EAAG,6BAbP;GAClB,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CASmE,GAAM,EAAI,CAAA,EACzE,KACC,kBAAC,KAAD;GAAG,WAAU;aAAiC;GAAoB,CAAA,CAEhE;;GAOG,KAA8C,EAAE,iBAC3D,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,GAAD;EAAuB;EAAS,MAAK;EAAO,CAAA;CACxC,CAAA"}