@burdenoff/microfe-devportal 2026.916.7 → 2026.917.1

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

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+
+interface ImageUploadFieldProps {
+    label: string;
+    value: string;
+    onChange: (url: string) => void;
+    hint?: string;
+    accept?: string;
+    aspectClass?: string;
+    upload: (file: File) => Promise<{
+        downloadUrl: string;
+    }>;
+    uploading: boolean;
+    progress: number;
+    error: string | null;
+}
+export declare const ImageUploadField: FC<ImageUploadFieldProps>;
+interface ScreenshotGalleryProps {
+    urls: string[];
+    onChange: (urls: string[]) => void;
+    upload: (file: File) => Promise<{
+        downloadUrl: string;
+    }>;
+    uploading: boolean;
+    progress: number;
+    error: string | null;
+}
+export declare const ScreenshotGallery: FC<ScreenshotGalleryProps>;
+export {};
+//# sourceMappingURL=ImageUploadField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadField.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/ImageUploadField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAchC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+FtD,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA4HxD,CAAC"}

package/dist/devportal/components/ImageUploadField.js

@@ -0,0 +1,182 @@
+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
+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));
+	let S = t(async (e) => {
+		try {
+			u((await m(e)).downloadUrl);
+		} catch {}
+	}, [m, u]);
+	return /* @__PURE__ */ l("div", {
+		className: "space-y-1.5",
+		children: [
+			/* @__PURE__ */ c("label", {
+				className: "text-sm font-medium",
+				children: o
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex gap-3 items-start",
+				children: [/* @__PURE__ */ l("div", {
+					className: e("relative shrink-0 w-20 rounded-lg border border-border-subtle bg-bg-sunken overflow-hidden flex items-center justify-center", p),
+					children: [s && !y ? /* @__PURE__ */ c("img", {
+						src: s,
+						alt: o,
+						className: "w-full h-full object-cover",
+						onError: () => b(!0)
+					}) : /* @__PURE__ */ c(a, {
+						size: 18,
+						className: "text-text-secondary opacity-40"
+					}), h && /* @__PURE__ */ l("div", {
+						className: "absolute inset-0 bg-bg-overlay flex flex-col items-center justify-center gap-1",
+						children: [/* @__PURE__ */ c(i, {
+							size: 14,
+							className: "animate-spin text-white"
+						}), /* @__PURE__ */ l("span", {
+							className: "text-white text-xs",
+							children: [g, "%"]
+						})]
+					})]
+				}), /* @__PURE__ */ l("div", {
+					className: "flex-1 space-y-1.5",
+					children: [
+						/* @__PURE__ */ c("input", {
+							type: "url",
+							value: s,
+							onChange: (e) => u(e.target.value),
+							placeholder: "https://...",
+							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"
+						}),
+						/* @__PURE__ */ c("input", {
+							ref: v,
+							type: "file",
+							accept: f,
+							className: "hidden",
+							onChange: (e) => {
+								let t = e.target.files?.[0];
+								t && S(t), e.target.value = "";
+							}
+						}),
+						/* @__PURE__ */ l("button", {
+							type: "button",
+							disabled: h,
+							onClick: () => v.current?.click(),
+							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",
+							children: [/* @__PURE__ */ c(a, { size: 11 }), h ? `Uploading… ${g}%` : "Upload image"]
+						}),
+						_ && /* @__PURE__ */ c("p", {
+							className: "text-xs text-status-error-text",
+							children: _
+						})
+					]
+				})]
+			}),
+			d && /* @__PURE__ */ c("p", {
+				className: "text-xs text-text-secondary",
+				children: d
+			})
+		]
+	});
+}, d = ({ urls: u, onChange: d, upload: f, uploading: p, progress: m, error: h }) => {
+	let g = n(null), [_, v] = r(""), y = t(async (e) => {
+		try {
+			let t = await f(e);
+			d([...u, t.downloadUrl]);
+		} catch {}
+	}, [
+		f,
+		d,
+		u
+	]), b = () => {
+		let e = _.trim();
+		e && !u.includes(e) && (d([...u, e]), v(""));
+	}, x = (e) => {
+		d(u.filter((t, n) => n !== e));
+	};
+	return /* @__PURE__ */ l("div", {
+		className: "space-y-2",
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ c("label", {
+					className: "text-sm font-medium",
+					children: "Screenshots"
+				}), /* @__PURE__ */ c("p", {
+					className: "text-xs text-text-muted",
+					children: "Shown in the horizontal preview strip below the hero — wide landscape proportions work best (16:9)"
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-wrap gap-3",
+				children: [u.map((e, t) => /* @__PURE__ */ l("div", {
+					className: "relative group w-36 aspect-video rounded-lg border border-border-subtle overflow-hidden bg-bg-sunken",
+					children: [/* @__PURE__ */ c("img", {
+						src: e,
+						alt: `Screenshot ${t + 1}`,
+						className: "w-full h-full object-cover"
+					}), /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => x(t),
+						className: "absolute top-1 right-1 rounded-full bg-bg-overlay text-white p-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
+						children: /* @__PURE__ */ c(o, { size: 12 })
+					})]
+				}, t)), /* @__PURE__ */ c("button", {
+					type: "button",
+					disabled: p,
+					onClick: () => g.current?.click(),
+					className: e("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"),
+					children: p ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(i, {
+						size: 18,
+						className: "animate-spin text-primary"
+					}), /* @__PURE__ */ l("span", {
+						className: "text-xs",
+						children: [m, "%"]
+					})] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(a, { size: 18 }), /* @__PURE__ */ c("span", {
+						className: "text-xs",
+						children: "Add screenshot"
+					})] })
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ c("input", {
+					type: "url",
+					value: _,
+					onChange: (e) => v(e.target.value),
+					onKeyDown: (e) => {
+						e.key === "Enter" && (e.preventDefault(), b());
+					},
+					placeholder: "https://... paste a screenshot URL",
+					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"
+				}), /* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: b,
+					disabled: !_.trim(),
+					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",
+					children: "Add"
+				})]
+			}),
+			/* @__PURE__ */ c("input", {
+				ref: g,
+				type: "file",
+				accept: "image/png,image/jpeg,image/webp,image/gif",
+				className: "hidden",
+				onChange: (e) => {
+					let t = e.target.files?.[0];
+					t && y(t), e.target.value = "";
+				}
+			}),
+			h && /* @__PURE__ */ c("p", {
+				className: "text-xs text-status-error-text",
+				children: h
+			})
+		]
+	});
+};
+//#endregion
+export { u as ImageUploadField, d as ScreenshotGallery };
+
+//# sourceMappingURL=ImageUploadField.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+export interface ManifestViewerProps {
+    manifest: Record<string, unknown>;
+    tr: (key: string, fallback: string) => string;
+}
+/**
+ * Read-only modal for viewing a version's manifest.json, so developers and
+ * 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManifestViewer.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/ManifestViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAwElD,CAAC"}

package/dist/devportal/components/ManifestViewer.js

@@ -0,0 +1,58 @@
+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
+var c = ({ manifest: c, tr: l }) => {
+	let [u, d] = n(!1), f = t(null);
+	return e(() => {
+		if (!u) return;
+		let e = document.body.style.overflow;
+		document.body.style.overflow = "hidden", window.requestAnimationFrame(() => f.current?.focus());
+		let t = (e) => {
+			e.key === "Escape" && (e.preventDefault(), d(!1));
+		};
+		return document.addEventListener("keydown", t), () => {
+			document.body.style.overflow = e, document.removeEventListener("keydown", t);
+		};
+	}, [u]), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("button", {
+		type: "button",
+		onClick: () => d(!0),
+		className: "inline-flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary",
+		children: [/* @__PURE__ */ o(r, { size: 13 }), l("devportal.viewManifest", "View manifest.json")]
+	}), u && /* @__PURE__ */ s("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+		children: [/* @__PURE__ */ o("button", {
+			type: "button",
+			"aria-label": "Close dialog backdrop",
+			className: "absolute inset-0 bg-bg-overlay",
+			onClick: () => d(!1)
+		}), /* @__PURE__ */ s("div", {
+			ref: f,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": l("devportal.manifestJson", "manifest.json"),
+			tabIndex: -1,
+			className: "relative z-10 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-lg bg-bg-surface p-6 shadow-xl focus:outline-none",
+			children: [/* @__PURE__ */ s("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ o("h3", {
+					className: "text-lg font-semibold",
+					children: l("devportal.manifestJson", "manifest.json")
+				}), /* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: () => d(!1),
+					"aria-label": l("devportal.close", "Close"),
+					className: "rounded-md p-1 text-text-secondary hover:bg-bg-sunken hover:text-text-primary",
+					children: /* @__PURE__ */ o(i, { size: 18 })
+				})]
+			}), /* @__PURE__ */ o("pre", {
+				className: "mt-4 flex-1 overflow-auto rounded-md bg-bg-sunken p-3 text-xs font-mono whitespace-pre-wrap break-all",
+				children: JSON.stringify(c, null, 2)
+			})]
+		})]
+	})] });
+};
+//#endregion
+export { c as ManifestViewer };
+
+//# sourceMappingURL=ManifestViewer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ManifestViewer.js","names":[],"sources":["../../../src/devportal/components/ManifestViewer.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { FileJson, X } from \"lucide-react\";\n\nexport interface ManifestViewerProps {\n  manifest: Record<string, unknown>;\n  tr: (key: string, fallback: string) => string;\n}\n\n/**\n * Read-only modal for viewing a version's manifest.json, so developers and\n * reviewers can validate what was uploaded without leaving the page.\n */\nexport const ManifestViewer: FC<ManifestViewerProps> = ({ manifest, tr }) => {\n  const [open, setOpen] = useState(false);\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    window.requestAnimationFrame(() => dialogRef.current?.focus());\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      document.body.style.overflow = originalOverflow;\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"inline-flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary\"\n      >\n        <FileJson size={13} />\n        {tr(\"devportal.viewManifest\", \"View manifest.json\")}\n      </button>\n      {open && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n          <button\n            type=\"button\"\n            aria-label=\"Close dialog backdrop\"\n            className=\"absolute inset-0 bg-bg-overlay\"\n            onClick={() => setOpen(false)}\n          />\n          <div\n            ref={dialogRef}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={tr(\"devportal.manifestJson\", \"manifest.json\")}\n            tabIndex={-1}\n            className=\"relative z-10 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-lg bg-bg-surface p-6 shadow-xl focus:outline-none\"\n          >\n            <div className=\"flex items-center justify-between gap-4\">\n              <h3 className=\"text-lg font-semibold\">\n                {tr(\"devportal.manifestJson\", \"manifest.json\")}\n              </h3>\n              <button\n                type=\"button\"\n                onClick={() => setOpen(false)}\n                aria-label={tr(\"devportal.close\", \"Close\")}\n                className=\"rounded-md p-1 text-text-secondary hover:bg-bg-sunken hover:text-text-primary\"\n              >\n                <X size={18} />\n              </button>\n            </div>\n            <pre className=\"mt-4 flex-1 overflow-auto rounded-md bg-bg-sunken p-3 text-xs font-mono whitespace-pre-wrap break-all\">\n              {JSON.stringify(manifest, null, 2)}\n            </pre>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;AAaA,IAAa,KAA2C,EAAE,aAAU,YAAS;CAC3E,IAAM,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,IAAY,EAA8B,KAAK;AAuBrD,QArBA,QAAgB;AACd,MAAI,CAAC,EAAM;EAEX,IAAM,IAAmB,SAAS,KAAK,MAAM;AAE7C,EADA,SAAS,KAAK,MAAM,WAAW,UAC/B,OAAO,4BAA4B,EAAU,SAAS,OAAO,CAAC;EAE9D,IAAM,KAAa,MAAyB;AAC1C,GAAI,EAAM,QAAQ,aAChB,EAAM,gBAAgB,EACtB,EAAQ,GAAM;;AAKlB,SAFA,SAAS,iBAAiB,WAAW,EAAU,QAElC;AAEX,GADA,SAAS,KAAK,MAAM,WAAW,GAC/B,SAAS,oBAAoB,WAAW,EAAU;;IAEnD,CAAC,EAAK,CAAC,EAGR,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,UAAD;EACE,MAAK;EACL,eAAe,EAAQ,GAAK;EAC5B,WAAU;YAHZ,CAKE,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA,EACrB,EAAG,0BAA0B,qBAAqB,CAC5C;KACR,KACC,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,cAAW;GACX,WAAU;GACV,eAAe,EAAQ,GAAM;GAC7B,CAAA,EACF,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,cAAY,EAAG,0BAA0B,gBAAgB;GACzD,UAAU;GACV,WAAU;aANZ,CAQE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,0BAA0B,gBAAgB;KAC3C,CAAA,EACL,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAQ,GAAM;KAC7B,cAAY,EAAG,mBAAmB,QAAQ;KAC1C,WAAU;eAEV,kBAAC,GAAD,EAAG,MAAM,IAAM,CAAA;KACR,CAAA,CACL;OACN,kBAAC,OAAD;IAAK,WAAU;cACZ,KAAK,UAAU,GAAU,MAAM,EAAE;IAC9B,CAAA,CACF;KACF;IAEP,EAAA,CAAA"}

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

@@ -21,4 +21,5 @@ export * from './FeatureFlaggedRoute';
 export * from './TelemetryErrorBoundary';
 export * from './SectionNav';
 export * from './MarkdownEditor';
+export * from './ManifestViewer';
 //# sourceMappingURL=index.d.ts.map

package/dist/devportal/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/devportal/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/devportal/components/index.js

@@ -16,3 +16,4 @@ import "./ReportOrderIssueModal.js";
 import "./RegisterPickupLocationModal.js";
 import "./PermissionGuard.js";
 import "./MarkdownEditor.js";
+import "./ManifestViewer.js";

package/dist/devportal/pages/AdminReviewPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminReviewPage.d.ts","sourceRoot":"","sources":["../../../src/devportal/pages/AdminReviewPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAkrBhC,eAAO,MAAM,eAAe,EAAE,EA2Y7B,CAAC"}
+{"version":3,"file":"AdminReviewPage.d.ts","sourceRoot":"","sources":["../../../src/devportal/pages/AdminReviewPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAipBhC,eAAO,MAAM,eAAe,EAAE,EA2Y7B,CAAC"}