@burdenoff/microfe-devportal 2026.1108.1 → 2026.1109.1

package/dist/devportal/components/FormField.js

@@ -1,16 +1,16 @@
-import { useTr as e } from "../utils/i18n.js";
-import { cn as t } from "../utils/cn.js";
+import { cn as e } from "../utils/cn.js";
+import { useTr as t } from "../utils/i18n.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/devportal/components/FormField.tsx
-var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "text", id: l, ...u }) => {
-	let d = l || e.toLowerCase().replace(/\s+/g, "-");
+// src/devportal/components/FormField.tsx
+var i = ({ label: t, error: i, hint: a, required: o, className: s, type: c = "text", id: l, ...u }) => {
+	let d = l || t.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: t("space-y-1", s),
+		className: e("space-y-1", s),
 		children: [
 			/* @__PURE__ */ r("label", {
 				htmlFor: d,
 				className: "block text-sm font-medium",
-				children: [e, o && /* @__PURE__ */ n("span", {
+				children: [t, o && /* @__PURE__ */ n("span", {
 					className: "text-status-error-text ml-1",
 					children: "*"
 				})]
@@ -18,7 +18,7 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 			/* @__PURE__ */ n("input", {
 				id: d,
 				type: c,
-				className: t("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-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"),
 				...u
 			}),
 			a && !i && /* @__PURE__ */ n("p", {
@@ -31,15 +31,15 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 			})
 		]
 	});
-}, a = ({ label: e, error: i, hint: a, required: o, className: s, id: c, rows: l = 4, ...u }) => {
-	let d = c || e.toLowerCase().replace(/\s+/g, "-");
+}, a = ({ label: t, error: i, hint: a, required: o, className: s, id: c, rows: l = 4, ...u }) => {
+	let d = c || t.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: t("space-y-1", s),
+		className: e("space-y-1", s),
 		children: [
 			/* @__PURE__ */ r("label", {
 				htmlFor: d,
 				className: "block text-sm font-medium",
-				children: [e, o && /* @__PURE__ */ n("span", {
+				children: [t, o && /* @__PURE__ */ n("span", {
 					className: "text-status-error-text ml-1",
 					children: "*"
 				})]
@@ -47,7 +47,7 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 			/* @__PURE__ */ n("textarea", {
 				id: d,
 				rows: l,
-				className: t("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-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"),
 				...u
 			}),
 			a && !i && /* @__PURE__ */ n("p", {
@@ -61,9 +61,9 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 		]
 	});
 }, o = ({ label: i, error: a, hint: o, required: s, className: c, options: l, placeholder: u, id: d, ...f }) => {
-	let p = e(), m = u ?? p("devportal.selectAnOption", "Select an option"), h = d || i.toLowerCase().replace(/\s+/g, "-");
+	let p = t(), m = u ?? p("devportal.selectAnOption", "Select an option"), h = d || i.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: t("space-y-1", c),
+		className: e("space-y-1", c),
 		children: [
 			/* @__PURE__ */ r("label", {
 				htmlFor: h,
@@ -75,7 +75,7 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 			}),
 			/* @__PURE__ */ r("select", {
 				id: h,
-				className: t("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", "scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary", a && "border-status-error-bg focus:ring-status-error-bg"),
+				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", "scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary", a && "border-status-error-bg focus:ring-status-error-bg"),
 				...f,
 				children: [/* @__PURE__ */ n("option", {
 					value: "",
@@ -95,20 +95,20 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 			})
 		]
 	});
-}, s = ({ label: e, description: i, error: a, className: o, id: s, ...c }) => {
-	let l = s || e.toLowerCase().replace(/\s+/g, "-");
+}, s = ({ label: t, description: i, error: a, className: o, id: s, ...c }) => {
+	let l = s || t.toLowerCase().replace(/\s+/g, "-");
 	return /* @__PURE__ */ r("div", {
-		className: t("flex items-start gap-3", o),
+		className: e("flex items-start gap-3", o),
 		children: [/* @__PURE__ */ n("input", {
 			id: l,
 			type: "checkbox",
-			className: t("mt-1 h-4 w-4 rounded border-border-default text-primary", "focus:ring-primary"),
+			className: e("mt-1 h-4 w-4 rounded border-border-default text-primary", "focus:ring-primary"),
 			...c
 		}), /* @__PURE__ */ r("div", { children: [
 			/* @__PURE__ */ n("label", {
 				htmlFor: l,
 				className: "text-sm font-medium cursor-pointer",
-				children: e
+				children: t
 			}),
 			i && /* @__PURE__ */ n("p", {
 				className: "text-xs text-text-secondary",
@@ -121,7 +121,7 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 		] })]
 	});
 }, c = ({ label: i, value: a, onChange: o, placeholder: s, error: c, hint: l, className: u }) => {
-	let d = e(), f = (e) => {
+	let d = t(), f = (e) => {
 		if (e.key === "Enter" || e.key === ",") {
 			e.preventDefault();
 			let t = e.currentTarget, n = t.value.trim();
@@ -131,7 +131,7 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 		o(a.filter((t) => t !== e));
 	};
 	return /* @__PURE__ */ r("div", {
-		className: t("space-y-1", u),
+		className: e("space-y-1", u),
 		children: [
 			/* @__PURE__ */ n("label", {
 				className: "block text-sm font-medium",
@@ -165,7 +165,6 @@ var i = ({ label: e, error: i, hint: a, required: o, className: s, type: c = "te
 		]
 	});
 };
-//#endregion
 export { s as CheckboxField, i as InputField, o as SelectField, c as TagInput, a as TextareaField };
 
 //# sourceMappingURL=FormField.js.map

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

@@ -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} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 tr = useTr();\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          \"scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\",\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 tr = useTr();\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              &times;\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\n      {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FormField.js","names":["InputField","props","fieldId","id","label","cn","className","required","error","hint","TextareaField","SelectField","tr","useTr","resolvedPlaceholder","placeholder","options","option","CheckboxField","description","TagInput","handleKeyDown","input","newValue","value","onChange","removeTag","tag","tagToRemove"],"sources":["../../../src/devportal/components/FormField.tsx"],"sourcesContent":["import type {\n  FC,\n  InputHTMLAttributes,\n  TextareaHTMLAttributes,\n  SelectHTMLAttributes,\n} from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 tr = useTr();\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          \"scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary\",\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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 tr = useTr();\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              &times;\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 && <p className=\"text-xs text-text-secondary\">{hint}</p>}\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.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-
 export interface GrantDelegationModalProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -20,4 +19,3 @@ export interface GrantDelegationModalProps {
  * an app permission to act on their behalf.
  */
 export declare const GrantDelegationModal: FC<GrantDelegationModalProps>;
-//# sourceMappingURL=GrantDelegationModal.d.ts.map

package/dist/devportal/components/GrantDelegationModal.js

@@ -6,7 +6,7 @@ import { AlertCircle as c, Check as l, CheckCircle as u, Loader2 as d, Search as
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { useGatewayClient as ne } from "@burdenoff/fe-libs/shared/graphql";
-//#region src/devportal/components/GrantDelegationModal.tsx
+// src/devportal/components/GrantDelegationModal.tsx
 function re(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
@@ -367,7 +367,6 @@ var _ = ({ open: _, onOpenChange: v, appId: y, appName: b, appScopes: x, preSele
 		})]
 	}) : null;
 };
-//#endregion
 export { _ as GrantDelegationModal };
 
 //# sourceMappingURL=GrantDelegationModal.js.map

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

@@ -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 type { ApolloClient } from \"@apollo/client/core\";\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 as unknown as ApolloClient | null) ?? 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 id={descriptionId} className=\"mt-1 text-sm text-text-secondary\">\n              Allow{\" \"}\n              <span className=\"font-medium text-text-primary\">{appName}</span>{\" \"}\n              to 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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"}
+{"version":3,"file":"GrantDelegationModal.js","names":["_Fragment","groupScopes","groups","scope","scopes","resource","group","GrantDelegationModal","titleId","useId","descriptionId","dialogRef","useRef","previousFocusRef","selectedScopes","setSelectedScopes","useState","preSelectedScopes","selectedWorkspaceIds","setSelectedWorkspaceIds","preSelectedWorkspaceIds","allWorkspaces","setAllWorkspaces","workspaceSearch","setWorkspaceSearch","expiresAt","setExpiresAt","error","setError","successMessage","setSuccessMessage","workspaceClient","useGatewayClient","workspacesData","loadingWorkspaces","useMyWorkspacesQuery","open","workspaces","workspace","grantDelegationMutation","useGrantDelegationMutation","useI18n","tr","value","t","key","fallback","useEffect","resetState","useCallback","handleClose","loading","onOpenChange","originalOverflow","onKeyDown","event","toggleScope","prev","s","toggleWorkspace","wsId","id","handleAllWorkspacesToggle","filteredWorkspaces","ws","scopeGroups","appScopes","handleGrant","parsedExpiresAt","date","result","delegation","wsCount","appName","onSuccess","err","appId","Shield","X","CheckCircle","Fragment","isSelected","action","isWrite","cn","Check","Search","Loader2","AlertCircle"],"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 type { ApolloClient } from \"@apollo/client/core\";\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 as unknown as ApolloClient | null) ?? 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 id={descriptionId} className=\"mt-1 text-sm text-text-secondary\">\n              Allow{\" \"}\n              <span className=\"font-medium text-text-primary\">{appName}</span>{\" \"}\n              to 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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"}

package/dist/devportal/components/ImageUploadField.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-
 interface ImageUploadFieldProps {
     label: string;
     value: string;
@@ -27,4 +26,3 @@ interface ScreenshotGalleryProps {
 }
 export declare const ScreenshotGallery: FC<ScreenshotGalleryProps>;
 export {};
-//# sourceMappingURL=ImageUploadField.d.ts.map

package/dist/devportal/components/ImageUploadField.js

@@ -2,7 +2,7 @@ import { cn as e } from "../utils/cn.js";
 import { useCallback as t, useRef as n, useState as r } from "react";
 import { Loader2 as i, Upload as a, X as o } from "lucide-react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/devportal/components/ImageUploadField.tsx
+// src/devportal/components/ImageUploadField.tsx
 var u = ({ label: o, value: s, onChange: u, hint: d, accept: f = "image/png,image/jpeg,image/webp,image/gif,image/svg+xml", aspectClass: p = "aspect-square", upload: m, uploading: h, progress: g, error: _ }) => {
 	let v = n(null), [y, b] = r(!1), x = n(s);
 	x.current !== s && (x.current = s, y && b(!1));
@@ -176,7 +176,6 @@ var u = ({ label: o, value: s, onChange: u, hint: d, accept: f = "image/png,imag
 		]
 	});
 };
-//#endregion
 export { u as ImageUploadField, d as ScreenshotGallery };
 
 //# sourceMappingURL=ImageUploadField.js.map

package/dist/devportal/components/ImageUploadField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploadField.js","names":[],"sources":["../../../src/devportal/components/ImageUploadField.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { Loader2, Upload, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\n\n// =============================================================================\n// IMAGE UPLOAD COMPONENTS\n//\n// Shared by the devportal App pages (Store Listing tab) and the physical\n// item create/edit pages — a single icon/banner upload field plus a\n// screenshot gallery, both backed by usePackageUpload's\n// upload(file) => Promise<{ downloadUrl }> shape.\n// =============================================================================\n\ninterface ImageUploadFieldProps {\n  label: string;\n  value: string;\n  onChange: (url: string) => void;\n  hint?: string;\n  accept?: string;\n  aspectClass?: string; // tailwind class for the preview container ratio\n  upload: (file: File) => Promise<{ downloadUrl: string }>;\n  uploading: boolean;\n  progress: number;\n  error: string | null;\n}\n\nexport const ImageUploadField: FC<ImageUploadFieldProps> = ({\n  label,\n  value,\n  onChange,\n  hint,\n  accept = \"image/png,image/jpeg,image/webp,image/gif,image/svg+xml\",\n  aspectClass = \"aspect-square\",\n  upload,\n  uploading,\n  progress,\n  error,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [imgBroken, setImgBroken] = useState(false);\n  const prevValue = useRef(value);\n  if (prevValue.current !== value) {\n    prevValue.current = value;\n    if (imgBroken) setImgBroken(false);\n  }\n\n  const handleFile = useCallback(\n    async (file: File) => {\n      try {\n        const result = await upload(file);\n        onChange(result.downloadUrl);\n      } catch {\n        // error shown via error prop\n      }\n    },\n    [upload, onChange],\n  );\n\n  return (\n    <div className=\"space-y-1.5\">\n      <label className=\"text-sm font-medium\">{label}</label>\n      <div className=\"flex gap-3 items-start\">\n        {/* Preview */}\n        <div\n          className={cn(\n            \"relative shrink-0 w-20 rounded-lg border border-border-subtle bg-bg-sunken overflow-hidden flex items-center justify-center\",\n            aspectClass,\n          )}\n        >\n          {value && !imgBroken ? (\n            <img\n              src={value}\n              alt={label}\n              className=\"w-full h-full object-cover\"\n              onError={() => setImgBroken(true)}\n            />\n          ) : (\n            <Upload size={18} className=\"text-text-secondary opacity-40\" />\n          )}\n          {uploading && (\n            <div className=\"absolute inset-0 bg-bg-overlay flex flex-col items-center justify-center gap-1\">\n              <Loader2 size={14} className=\"animate-spin text-white\" />\n              <span className=\"text-white text-xs\">{progress}%</span>\n            </div>\n          )}\n        </div>\n        {/* URL input + upload button */}\n        <div className=\"flex-1 space-y-1.5\">\n          <input\n            type=\"url\"\n            value={value}\n            onChange={(e) => onChange(e.target.value)}\n            placeholder=\"https://...\"\n            className=\"w-full rounded-md border border-border-subtle bg-bg-input px-3 py-1.5 text-sm placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-primary/30\"\n          />\n          <input\n            ref={inputRef}\n            type=\"file\"\n            accept={accept}\n            className=\"hidden\"\n            onChange={(e) => {\n              const f = e.target.files?.[0];\n              if (f) void handleFile(f);\n              e.target.value = \"\";\n            }}\n          />\n          <button\n            type=\"button\"\n            disabled={uploading}\n            onClick={() => inputRef.current?.click()}\n            className=\"inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n          >\n            <Upload size={11} />\n            {uploading ? `Uploading… ${progress}%` : \"Upload image\"}\n          </button>\n          {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n        </div>\n      </div>\n      {hint && <p className=\"text-xs text-text-secondary\">{hint}</p>}\n    </div>\n  );\n};\n\ninterface ScreenshotGalleryProps {\n  urls: string[];\n  onChange: (urls: string[]) => void;\n  upload: (file: File) => Promise<{ downloadUrl: string }>;\n  uploading: boolean;\n  progress: number;\n  error: string | null;\n}\n\nexport const ScreenshotGallery: FC<ScreenshotGalleryProps> = ({\n  urls,\n  onChange,\n  upload,\n  uploading,\n  progress,\n  error,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [urlInput, setUrlInput] = useState(\"\");\n\n  const handleFile = useCallback(\n    async (file: File) => {\n      try {\n        const result = await upload(file);\n        onChange([...urls, result.downloadUrl]);\n      } catch {\n        // error shown via error prop\n      }\n    },\n    [upload, onChange, urls],\n  );\n\n  const addUrl = () => {\n    const trimmed = urlInput.trim();\n    if (trimmed && !urls.includes(trimmed)) {\n      onChange([...urls, trimmed]);\n      setUrlInput(\"\");\n    }\n  };\n\n  const remove = (idx: number) => {\n    onChange(urls.filter((_, i) => i !== idx));\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex flex-col gap-0.5\">\n        <label className=\"text-sm font-medium\">Screenshots</label>\n        <p className=\"text-xs text-text-muted\">\n          Shown in the horizontal preview strip below the hero — wide landscape\n          proportions work best (16:9)\n        </p>\n      </div>\n      <div className=\"flex flex-wrap gap-3\">\n        {urls.map((url, idx) => (\n          <div\n            key={idx}\n            className=\"relative group w-36 aspect-video rounded-lg border border-border-subtle overflow-hidden bg-bg-sunken\"\n          >\n            <img\n              src={url}\n              alt={`Screenshot ${idx + 1}`}\n              className=\"w-full h-full object-cover\"\n            />\n            <button\n              type=\"button\"\n              onClick={() => remove(idx)}\n              className=\"absolute top-1 right-1 rounded-full bg-bg-overlay text-white p-0.5 opacity-0 group-hover:opacity-100 transition-opacity\"\n            >\n              <X size={12} />\n            </button>\n          </div>\n        ))}\n        {/* Upload slot */}\n        <button\n          type=\"button\"\n          disabled={uploading}\n          onClick={() => inputRef.current?.click()}\n          className={cn(\n            \"w-36 aspect-video rounded-lg border-2 border-dashed border-border-subtle flex flex-col items-center justify-center gap-1.5 text-text-secondary hover:border-border-strong hover:bg-bg-sunken transition-colors disabled:opacity-50\",\n          )}\n        >\n          {uploading ? (\n            <>\n              <Loader2 size={18} className=\"animate-spin text-primary\" />\n              <span className=\"text-xs\">{progress}%</span>\n            </>\n          ) : (\n            <>\n              <Upload size={18} />\n              <span className=\"text-xs\">Add screenshot</span>\n            </>\n          )}\n        </button>\n      </div>\n      {/* URL paste row */}\n      <div className=\"flex gap-2\">\n        <input\n          type=\"url\"\n          value={urlInput}\n          onChange={(e) => setUrlInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              addUrl();\n            }\n          }}\n          placeholder=\"https://... paste a screenshot URL\"\n          className=\"flex-1 rounded-md border border-border-subtle bg-bg-input px-3 py-1.5 text-sm placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-primary/30\"\n        />\n        <button\n          type=\"button\"\n          onClick={addUrl}\n          disabled={!urlInput.trim()}\n          className=\"inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n        >\n          Add\n        </button>\n      </div>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/png,image/jpeg,image/webp,image/gif\"\n        className=\"hidden\"\n        onChange={(e) => {\n          const f = e.target.files?.[0];\n          if (f) void handleFile(f);\n          e.target.value = \"\";\n        }}\n      />\n      {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ImageUploadField.js","names":["_Fragment","ImageUploadField","inputRef","useRef","imgBroken","setImgBroken","useState","prevValue","value","handleFile","useCallback","upload","file","onChange","label","cn","aspectClass","Upload","uploading","Loader2","progress","f","error","hint","ScreenshotGallery","urlInput","setUrlInput","result","urls","addUrl","trimmed","remove","i","idx","url","X","Fragment"],"sources":["../../../src/devportal/components/ImageUploadField.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport { Loader2, Upload, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\n\n// =============================================================================\n// IMAGE UPLOAD COMPONENTS\n//\n// Shared by the devportal App pages (Store Listing tab) and the physical\n// item create/edit pages — a single icon/banner upload field plus a\n// screenshot gallery, both backed by usePackageUpload's\n// upload(file) => Promise<{ downloadUrl }> shape.\n// =============================================================================\n\ninterface ImageUploadFieldProps {\n  label: string;\n  value: string;\n  onChange: (url: string) => void;\n  hint?: string;\n  accept?: string;\n  aspectClass?: string; // tailwind class for the preview container ratio\n  upload: (file: File) => Promise<{ downloadUrl: string }>;\n  uploading: boolean;\n  progress: number;\n  error: string | null;\n}\n\nexport const ImageUploadField: FC<ImageUploadFieldProps> = ({\n  label,\n  value,\n  onChange,\n  hint,\n  accept = \"image/png,image/jpeg,image/webp,image/gif,image/svg+xml\",\n  aspectClass = \"aspect-square\",\n  upload,\n  uploading,\n  progress,\n  error,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [imgBroken, setImgBroken] = useState(false);\n  const prevValue = useRef(value);\n  if (prevValue.current !== value) {\n    prevValue.current = value;\n    if (imgBroken) setImgBroken(false);\n  }\n\n  const handleFile = useCallback(\n    async (file: File) => {\n      try {\n        const result = await upload(file);\n        onChange(result.downloadUrl);\n      } catch {\n        // error shown via error prop\n      }\n    },\n    [upload, onChange],\n  );\n\n  return (\n    <div className=\"space-y-1.5\">\n      <label className=\"text-sm font-medium\">{label}</label>\n      <div className=\"flex gap-3 items-start\">\n        {/* Preview */}\n        <div\n          className={cn(\n            \"relative shrink-0 w-20 rounded-lg border border-border-subtle bg-bg-sunken overflow-hidden flex items-center justify-center\",\n            aspectClass,\n          )}\n        >\n          {value && !imgBroken ? (\n            <img\n              src={value}\n              alt={label}\n              className=\"w-full h-full object-cover\"\n              onError={() => setImgBroken(true)}\n            />\n          ) : (\n            <Upload size={18} className=\"text-text-secondary opacity-40\" />\n          )}\n          {uploading && (\n            <div className=\"absolute inset-0 bg-bg-overlay flex flex-col items-center justify-center gap-1\">\n              <Loader2 size={14} className=\"animate-spin text-white\" />\n              <span className=\"text-white text-xs\">{progress}%</span>\n            </div>\n          )}\n        </div>\n        {/* URL input + upload button */}\n        <div className=\"flex-1 space-y-1.5\">\n          <input\n            type=\"url\"\n            value={value}\n            onChange={(e) => onChange(e.target.value)}\n            placeholder=\"https://...\"\n            className=\"w-full rounded-md border border-border-subtle bg-bg-input px-3 py-1.5 text-sm placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-primary/30\"\n          />\n          <input\n            ref={inputRef}\n            type=\"file\"\n            accept={accept}\n            className=\"hidden\"\n            onChange={(e) => {\n              const f = e.target.files?.[0];\n              if (f) void handleFile(f);\n              e.target.value = \"\";\n            }}\n          />\n          <button\n            type=\"button\"\n            disabled={uploading}\n            onClick={() => inputRef.current?.click()}\n            className=\"inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n          >\n            <Upload size={11} />\n            {uploading ? `Uploading… ${progress}%` : \"Upload image\"}\n          </button>\n          {error && <p className=\"text-xs text-status-error-text\">{error}</p>}\n        </div>\n      </div>\n      {hint && <p className=\"text-xs text-text-secondary\">{hint}</p>}\n    </div>\n  );\n};\n\ninterface ScreenshotGalleryProps {\n  urls: string[];\n  onChange: (urls: string[]) => void;\n  upload: (file: File) => Promise<{ downloadUrl: string }>;\n  uploading: boolean;\n  progress: number;\n  error: string | null;\n}\n\nexport const ScreenshotGallery: FC<ScreenshotGalleryProps> = ({\n  urls,\n  onChange,\n  upload,\n  uploading,\n  progress,\n  error,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [urlInput, setUrlInput] = useState(\"\");\n\n  const handleFile = useCallback(\n    async (file: File) => {\n      try {\n        const result = await upload(file);\n        onChange([...urls, result.downloadUrl]);\n      } catch {\n        // error shown via error prop\n      }\n    },\n    [upload, onChange, urls],\n  );\n\n  const addUrl = () => {\n    const trimmed = urlInput.trim();\n    if (trimmed && !urls.includes(trimmed)) {\n      onChange([...urls, trimmed]);\n      setUrlInput(\"\");\n    }\n  };\n\n  const remove = (idx: number) => {\n    onChange(urls.filter((_, i) => i !== idx));\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex flex-col gap-0.5\">\n        <label className=\"text-sm font-medium\">Screenshots</label>\n        <p className=\"text-xs text-text-muted\">\n          Shown in the horizontal preview strip below the hero — wide landscape\n          proportions work best (16:9)\n        </p>\n      </div>\n      <div className=\"flex flex-wrap gap-3\">\n        {urls.map((url, idx) => (\n          <div\n            key={idx}\n            className=\"relative group w-36 aspect-video rounded-lg border border-border-subtle overflow-hidden bg-bg-sunken\"\n          >\n            <img\n              src={url}\n              alt={`Screenshot ${idx + 1}`}\n              className=\"w-full h-full object-cover\"\n            />\n            <button\n              type=\"button\"\n              onClick={() => remove(idx)}\n              className=\"absolute top-1 right-1 rounded-full bg-bg-overlay text-white p-0.5 opacity-0 group-hover:opacity-100 transition-opacity\"\n            >\n              <X size={12} />\n            </button>\n          </div>\n        ))}\n        {/* Upload slot */}\n        <button\n          type=\"button\"\n          disabled={uploading}\n          onClick={() => inputRef.current?.click()}\n          className={cn(\n            \"w-36 aspect-video rounded-lg border-2 border-dashed border-border-subtle flex flex-col items-center justify-center gap-1.5 text-text-secondary hover:border-border-strong hover:bg-bg-sunken transition-colors disabled:opacity-50\",\n          )}\n        >\n          {uploading ? (\n            <>\n              <Loader2 size={18} className=\"animate-spin text-primary\" />\n              <span className=\"text-xs\">{progress}%</span>\n            </>\n          ) : (\n            <>\n              <Upload size={18} />\n              <span className=\"text-xs\">Add screenshot</span>\n            </>\n          )}\n        </button>\n      </div>\n      {/* URL paste row */}\n      <div className=\"flex gap-2\">\n        <input\n          type=\"url\"\n          value={urlInput}\n          onChange={(e) => setUrlInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              addUrl();\n            }\n          }}\n          placeholder=\"https://... paste a screenshot URL\"\n          className=\"flex-1 rounded-md border border-border-subtle bg-bg-input px-3 py-1.5 text-sm placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-primary/30\"\n        />\n        <button\n          type=\"button\"\n          onClick={addUrl}\n          disabled={!urlInput.trim()}\n          className=\"inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n        >\n          Add\n        </button>\n      </div>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/png,image/jpeg,image/webp,image/gif\"\n        className=\"hidden\"\n        onChange={(e) => {\n          const f = e.target.files?.[0];\n          if (f) void handleFile(f);\n          e.target.value = \"\";\n        }}\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/LoadingState.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-
 interface LoadingStateProps {
     message?: string;
     className?: string;
@@ -28,4 +27,3 @@ export declare const TableRowSkeleton: FC<{
     columns?: number;
 }>;
 export {};
-//# sourceMappingURL=LoadingState.d.ts.map

package/dist/devportal/components/LoadingState.js

@@ -1,13 +1,13 @@
-import { useTr as e } from "../utils/i18n.js";
-import { cn as t } from "../utils/cn.js";
+import { cn as e } from "../utils/cn.js";
+import { useTr as t } from "../utils/i18n.js";
 import { Loader2 as n } from "lucide-react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/devportal/components/LoadingState.tsx
+// src/devportal/components/LoadingState.tsx
 var a = ({ message: a, className: o, size: s = "md" }) => {
-	let c = e(), l = a ?? c("devportal.loadingDots", "Loading...");
+	let c = t(), l = a ?? c("devportal.loadingDots", "Loading...");
 	return /* @__PURE__ */ i("div", {
-		className: t("flex flex-col items-center justify-center gap-4 p-8", o),
-		children: [/* @__PURE__ */ r(n, { className: t("animate-spin text-primary", {
+		className: e("flex flex-col items-center justify-center gap-4 p-8", o),
+		children: [/* @__PURE__ */ r(n, { className: e("animate-spin text-primary", {
 			sm: "h-4 w-4",
 			md: "h-8 w-8",
 			lg: "h-12 w-12"
@@ -23,7 +23,6 @@ var a = ({ message: a, className: o, size: s = "md" }) => {
 		size: "lg"
 	})
 });
-//#endregion
 export { a as LoadingState, o as PageLoadingState };
 
 //# sourceMappingURL=LoadingState.js.map

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

@@ -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 { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\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 tr = useTr();\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\n    className={cn(\n      \"rounded-card border border-border-seam bg-bg-surface p-6\",\n      className,\n    )}\n  >\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,IAAK,GAAO,EACZ,IAAkB,KAAW,EAAG,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"}
+{"version":3,"file":"LoadingState.js","names":["LoadingState","tr","useTr","resolvedMessage","message","cn","className","Loader2","size","PageLoadingState"],"sources":["../../../src/devportal/components/LoadingState.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\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 tr = useTr();\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\n    className={cn(\n      \"rounded-card border border-border-seam bg-bg-surface p-6\",\n      className,\n    )}\n  >\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,IAAaA,KAAuC,EAClD,YACA,cACA,UAAO,WACH;CACJ,IAAMC,IAAKC,EAAM,GACXC,IAAkBC,KAAWH,EAAG,yBAAyB,YAAY;CAO3E,OACE,kBAAC,OAAD;EACE,WAAWI,EACT,uDACAC,CACF;EAJF,UAAA,CAME,kBAACC,GAAD,EAAS,WAAWF,EAAG,6BAA6B;GAZtD,IAAI;GACJ,IAAI;GACJ,IAAI;EAUkD,EAAYG,EAAK,EAAI,CAAA,GACxEL,KACC,kBAAC,KAAD;GAAG,WAAU;GAA+B,UAAAA;EAAmB,CAAA,CAE9D;;AAET,GAKaM,KAA8C,EAAE,iBAC3D,kBAAC,OAAD;CAAK,WAAU;CACb,UAAA,kBAACT,GAAD;EAAuB;EAAS,MAAK;CAAM,CAAA;AACxC,CAAA"}

package/dist/devportal/components/ManifestViewer.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-
 export interface ManifestViewerProps {
     manifest: Record<string, unknown>;
     tr: (key: string, fallback: string) => string;
@@ -9,4 +8,3 @@ export interface ManifestViewerProps {
  * reviewers can validate what was uploaded without leaving the page.
  */
 export declare const ManifestViewer: FC<ManifestViewerProps>;
-//# sourceMappingURL=ManifestViewer.d.ts.map

package/dist/devportal/components/ManifestViewer.js

@@ -1,7 +1,7 @@
 import { useEffect as e, useRef as t, useState as n } from "react";
 import { FileJson as r, X as i } from "lucide-react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/devportal/components/ManifestViewer.tsx
+// src/devportal/components/ManifestViewer.tsx
 var c = ({ manifest: c, tr: l }) => {
 	let [u, d] = n(!1), f = t(null);
 	return e(() => {
@@ -52,7 +52,6 @@ var c = ({ manifest: c, tr: l }) => {
 		})]
 	})] });
 };
-//#endregion
 export { c as ManifestViewer };
 
 //# sourceMappingURL=ManifestViewer.js.map