@burdenoff/microfe-devportal 2026.1112.2 → 2026.1113.1

package/dist/devportal/components/AppCard.js

@@ -3,144 +3,147 @@ import { FeaturedBadge as t, StatusBadge as n, VerifiedBadge as r } from "./Stat
 import { APP_TYPE_LABELS as i } from "../utils/constants.js";
 import { useDevportal as a } from "../providers/DevportalProvider.js";
 import { SelectionCheckbox as o } from "./SelectionCheckbox.js";
-import { AppWindow as s, Download as c, ExternalLink as l, Star as u } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { GlassCard as m } from "@burdenoff/fe-libs/ui";
+import { StoreImage as s } from "./StoreImage.js";
+import { AppWindow as c, Download as l, ExternalLink as u, Star as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { GlassCard as h } from "@burdenoff/fe-libs/ui";
 // src/devportal/components/AppCard.tsx
-var h = ({ app: h, onClick: g, className: _, showActions: v = !0, selected: y = !1, onToggleSelect: b }) => {
-	let { navigate: x, basePath: S } = a(), { t: C } = p(), w = (e, t) => {
-		let n = C(e);
+var g = ({ app: g, onClick: _, className: v, showActions: y = !0, selected: b = !1, onToggleSelect: x }) => {
+	let { navigate: S, basePath: C } = a(), { t: w } = m(), T = (e, t) => {
+		let n = w(e);
 		return n === e ? t : n;
-	}, T = () => {
-		g ? g() : x && x(`${S}/apps/${h.id}`);
+	}, E = () => {
+		_ ? _() : S && S(`${C}/apps/${g.id}`);
 	};
-	return /* @__PURE__ */ f(m, {
+	return /* @__PURE__ */ p(h, {
 		treatment: "insight",
 		role: "button",
 		tabIndex: 0,
-		className: e("group cursor-pointer border-border-seam p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", y && "border-primary bg-action-primary-bg/5", _),
-		onClick: T,
+		className: e("group cursor-pointer border-border-seam p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", b && "border-primary bg-action-primary-bg/5", v),
+		onClick: E,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), T());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), E());
 		},
 		children: [
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex items-start gap-3",
 				children: [
-					b && /* @__PURE__ */ d("div", {
+					x && /* @__PURE__ */ f("div", {
 						onClick: (e) => e.stopPropagation(),
-						children: /* @__PURE__ */ d(o, {
-							checked: y,
-							onChange: b,
-							ariaLabel: `Select application ${h.name}`,
+						children: /* @__PURE__ */ f(o, {
+							checked: b,
+							onChange: x,
+							ariaLabel: `Select application ${g.name}`,
 							className: "mt-1"
 						})
 					}),
-					h.iconUrl ? /* @__PURE__ */ d("img", {
-						src: h.iconUrl,
-						alt: h.name,
-						className: "h-12 w-12 rounded-lg object-cover"
-					}) : /* @__PURE__ */ d("div", {
-						className: "flex h-12 w-12 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
-						children: /* @__PURE__ */ d(s, { size: 24 })
+					/* @__PURE__ */ f(s, {
+						src: g.iconUrl,
+						alt: g.name,
+						className: "h-12 w-12 rounded-lg object-cover",
+						fallback: /* @__PURE__ */ f("div", {
+							className: "flex h-12 w-12 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
+							children: /* @__PURE__ */ f(c, { size: 24 })
+						})
 					}),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ p("div", {
 						className: "flex-1 min-w-0",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ d("h3", {
+							children: [/* @__PURE__ */ f("h3", {
 								className: "font-semibold truncate",
-								children: h.name
-							}), h.isVerified && /* @__PURE__ */ d(r, { verified: !0 })]
-						}), /* @__PURE__ */ d("p", {
+								children: g.name
+							}), g.isVerified && /* @__PURE__ */ f(r, { verified: !0 })]
+						}), /* @__PURE__ */ f("p", {
 							className: "text-sm text-text-secondary",
-							children: i[h.appType] || h.appType
+							children: i[g.appType] || g.appType
 						})]
 					})
 				]
 			}),
-			h.shortDescription && /* @__PURE__ */ d("p", {
+			g.shortDescription && /* @__PURE__ */ f("p", {
 				className: "mt-3 text-sm text-text-secondary line-clamp-2",
-				children: h.shortDescription
+				children: g.shortDescription
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "mt-3 flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ d(n, { status: h.status }), h.isFeatured && /* @__PURE__ */ d(t, {})]
+				children: [/* @__PURE__ */ f(n, { status: g.status }), g.isFeatured && /* @__PURE__ */ f(t, {})]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "mt-4 flex items-center gap-4 text-sm text-text-secondary",
-				children: [h.averageRating !== void 0 && h.averageRating > 0 && /* @__PURE__ */ f("span", {
+				children: [g.averageRating !== void 0 && g.averageRating > 0 && /* @__PURE__ */ p("span", {
 					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ d(u, {
+					children: [/* @__PURE__ */ f(d, {
 						size: 14,
 						className: "text-status-warning-text fill-status-warning-text"
-					}), h.averageRating.toFixed(1)]
-				}), /* @__PURE__ */ f("span", {
+					}), g.averageRating.toFixed(1)]
+				}), /* @__PURE__ */ p("span", {
 					className: "flex items-center gap-1",
 					children: [
-						/* @__PURE__ */ d(c, { size: 14 }),
-						h.installCount.toLocaleString(),
+						/* @__PURE__ */ f(l, { size: 14 }),
+						g.installCount.toLocaleString(),
 						" ",
-						w("devportal.installs", "installs")
+						T("devportal.installs", "installs")
 					]
 				})]
 			}),
-			v && /* @__PURE__ */ d("div", {
+			y && /* @__PURE__ */ f("div", {
 				className: "mt-4 flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity",
-				children: /* @__PURE__ */ f("button", {
+				children: /* @__PURE__ */ p("button", {
 					className: "text-sm text-primary hover:underline flex items-center gap-1",
 					onClick: (e) => {
-						e.stopPropagation(), T();
+						e.stopPropagation(), E();
 					},
-					children: [w("devportal.viewDetails", "View Details"), /* @__PURE__ */ d(l, { size: 14 })]
+					children: [T("devportal.viewDetails", "View Details"), /* @__PURE__ */ f(u, { size: 14 })]
 				})
 			})
 		]
 	});
-}, g = ({ app: t, onClick: r, className: c, selected: l = !1, onToggleSelect: u }) => {
-	let { navigate: p, basePath: m } = a(), h = () => {
-		r ? r() : p && p(`${m}/apps/${t.id}`);
+}, _ = ({ app: t, onClick: r, className: l, selected: u = !1, onToggleSelect: d }) => {
+	let { navigate: m, basePath: h } = a(), g = () => {
+		r ? r() : m && m(`${h}/apps/${t.id}`);
 	};
-	return /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ p("div", {
 		role: "button",
 		tabIndex: 0,
-		className: e("flex items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-3 cursor-pointer transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", l && "border-primary bg-action-primary-bg/5", c),
-		onClick: h,
+		className: e("flex items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-3 cursor-pointer transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", u && "border-primary bg-action-primary-bg/5", l),
+		onClick: g,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), g());
 		},
 		children: [
-			u && /* @__PURE__ */ d("div", {
+			d && /* @__PURE__ */ f("div", {
 				onClick: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ d(o, {
-					checked: l,
-					onChange: u,
+				children: /* @__PURE__ */ f(o, {
+					checked: u,
+					onChange: d,
 					ariaLabel: `Select application ${t.name}`
 				})
 			}),
-			t.iconUrl ? /* @__PURE__ */ d("img", {
+			/* @__PURE__ */ f(s, {
 				src: t.iconUrl,
 				alt: t.name,
-				className: "h-10 w-10 rounded-lg object-cover"
-			}) : /* @__PURE__ */ d("div", {
-				className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
-				children: /* @__PURE__ */ d(s, { size: 20 })
+				className: "h-10 w-10 rounded-lg object-cover",
+				fallback: /* @__PURE__ */ f("div", {
+					className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
+					children: /* @__PURE__ */ f(c, { size: 20 })
+				})
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex-1 min-w-0",
-				children: [/* @__PURE__ */ d("p", {
+				children: [/* @__PURE__ */ f("p", {
 					className: "font-medium truncate",
 					children: t.name
-				}), /* @__PURE__ */ d("p", {
+				}), /* @__PURE__ */ f("p", {
 					className: "text-sm text-text-secondary truncate",
 					children: t.shortDescription || i[t.appType]
 				})]
 			}),
-			/* @__PURE__ */ d(n, { status: t.status })
+			/* @__PURE__ */ f(n, { status: t.status })
 		]
 	});
 };
-export { h as AppCard, g as AppListItem };
+export { g as AppCard, _ as AppListItem };
 
 //# sourceMappingURL=AppCard.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppCard.js","names":["AppCard","useDevportal","useI18n","tr","value","t","key","fallback","handleClick","onClick","navigate","basePath","app","GlassCard","cn","selected","className","event","onToggleSelect","SelectionCheckbox","AppWindow","VerifiedBadge","APP_TYPE_LABELS","StatusBadge","FeaturedBadge","Star","Download","showActions","ExternalLink","AppListItem"],"sources":["../../../src/devportal/components/AppCard.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { AppWindow, Star, Download, ExternalLink } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/cn\";\nimport { StatusBadge, VerifiedBadge, FeaturedBadge } from \"./StatusBadge\";\nimport type { Application } from \"../types\";\nimport { APP_TYPE_LABELS } from \"../utils/constants\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { SelectionCheckbox } from \"./SelectionCheckbox\";\n\ninterface AppCardProps {\n  app: Application;\n  onClick?: () => void;\n  className?: string;\n  showActions?: boolean;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n}\n\n/**\n * Application card for displaying app information\n */\nexport const AppCard: FC<AppCardProps> = ({\n  app,\n  onClick,\n  className,\n  showActions = true,\n  selected = false,\n  onToggleSelect,\n}) => {\n  const { navigate, basePath } = useDevportal();\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  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    } else if (navigate) {\n      navigate(`${basePath}/apps/${app.id}`);\n    }\n  };\n\n  return (\n    <GlassCard\n      treatment=\"insight\"\n      role=\"button\"\n      tabIndex={0}\n      className={cn(\n        \"group cursor-pointer border-border-seam p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        selected && \"border-primary bg-action-primary-bg/5\",\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Header */}\n      <div className=\"flex items-start gap-3\">\n        {onToggleSelect && (\n          <div onClick={(event) => event.stopPropagation()}>\n            <SelectionCheckbox\n              checked={selected}\n              onChange={onToggleSelect}\n              ariaLabel={`Select application ${app.name}`}\n              className=\"mt-1\"\n            />\n          </div>\n        )}\n        {app.iconUrl ? (\n          <img\n            src={app.iconUrl}\n            alt={app.name}\n            className=\"h-12 w-12 rounded-lg object-cover\"\n          />\n        ) : (\n          <div className=\"flex h-12 w-12 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary\">\n            <AppWindow size={24} />\n          </div>\n        )}\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-center gap-2\">\n            <h3 className=\"font-semibold truncate\">{app.name}</h3>\n            {app.isVerified && <VerifiedBadge verified />}\n          </div>\n          <p className=\"text-sm text-text-secondary\">\n            {APP_TYPE_LABELS[app.appType] || app.appType}\n          </p>\n        </div>\n      </div>\n\n      {/* Description */}\n      {app.shortDescription && (\n        <p className=\"mt-3 text-sm text-text-secondary line-clamp-2\">\n          {app.shortDescription}\n        </p>\n      )}\n\n      {/* Badges */}\n      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n        <StatusBadge status={app.status} />\n        {app.isFeatured && <FeaturedBadge />}\n      </div>\n\n      {/* Stats */}\n      <div className=\"mt-4 flex items-center gap-4 text-sm text-text-secondary\">\n        {app.averageRating !== undefined && app.averageRating > 0 && (\n          <span className=\"flex items-center gap-1\">\n            <Star\n              size={14}\n              className=\"text-status-warning-text fill-status-warning-text\"\n            />\n            {app.averageRating.toFixed(1)}\n          </span>\n        )}\n        <span className=\"flex items-center gap-1\">\n          <Download size={14} />\n          {app.installCount.toLocaleString()}{\" \"}\n          {tr(\"devportal.installs\", \"installs\")}\n        </span>\n      </div>\n\n      {/* Actions */}\n      {showActions && (\n        <div className=\"mt-4 flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity\">\n          <button\n            className=\"text-sm text-primary hover:underline flex items-center gap-1\"\n            onClick={(e) => {\n              e.stopPropagation();\n              handleClick();\n            }}\n          >\n            {tr(\"devportal.viewDetails\", \"View Details\")}\n            <ExternalLink size={14} />\n          </button>\n        </div>\n      )}\n    </GlassCard>\n  );\n};\n\n/**\n * Grid of app cards\n */\nexport const AppCardGrid: FC<{\n  apps: Application[];\n  onAppClick?: (app: Application) => void;\n  className?: string;\n}> = ({ apps, onAppClick, className }) => (\n  <div\n    className={cn(\n      \"grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n      className,\n    )}\n  >\n    {apps.map((app) => (\n      <AppCard\n        key={app.id}\n        app={app}\n        onClick={onAppClick ? () => onAppClick(app) : undefined}\n      />\n    ))}\n  </div>\n);\n\n/**\n * Compact app list item\n */\nexport const AppListItem: FC<{\n  app: Application;\n  onClick?: () => void;\n  className?: string;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n}> = ({ app, onClick, className, selected = false, onToggleSelect }) => {\n  const { navigate, basePath } = useDevportal();\n\n  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    } else if (navigate) {\n      navigate(`${basePath}/apps/${app.id}`);\n    }\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className={cn(\n        \"flex items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-3 cursor-pointer transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        selected && \"border-primary bg-action-primary-bg/5\",\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {onToggleSelect && (\n        <div onClick={(event) => event.stopPropagation()}>\n          <SelectionCheckbox\n            checked={selected}\n            onChange={onToggleSelect}\n            ariaLabel={`Select application ${app.name}`}\n          />\n        </div>\n      )}\n      {app.iconUrl ? (\n        <img\n          src={app.iconUrl}\n          alt={app.name}\n          className=\"h-10 w-10 rounded-lg object-cover\"\n        />\n      ) : (\n        <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary\">\n          <AppWindow size={20} />\n        </div>\n      )}\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"font-medium truncate\">{app.name}</p>\n        <p className=\"text-sm text-text-secondary truncate\">\n          {app.shortDescription || APP_TYPE_LABELS[app.appType]}\n        </p>\n      </div>\n      <StatusBadge status={app.status} />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AppCard.js","names":["AppCard","useDevportal","useI18n","tr","value","t","key","fallback","handleClick","onClick","navigate","basePath","app","GlassCard","cn","selected","className","event","onToggleSelect","SelectionCheckbox","StoreImage","AppWindow","VerifiedBadge","APP_TYPE_LABELS","StatusBadge","FeaturedBadge","Star","Download","showActions","ExternalLink","AppListItem"],"sources":["../../../src/devportal/components/AppCard.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { AppWindow, Star, Download, ExternalLink } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/cn\";\nimport { StatusBadge, VerifiedBadge, FeaturedBadge } from \"./StatusBadge\";\nimport type { Application } from \"../types\";\nimport { APP_TYPE_LABELS } from \"../utils/constants\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { SelectionCheckbox } from \"./SelectionCheckbox\";\nimport { StoreImage } from \"./StoreImage\";\n\ninterface AppCardProps {\n  app: Application;\n  onClick?: () => void;\n  className?: string;\n  showActions?: boolean;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n}\n\n/**\n * Application card for displaying app information\n */\nexport const AppCard: FC<AppCardProps> = ({\n  app,\n  onClick,\n  className,\n  showActions = true,\n  selected = false,\n  onToggleSelect,\n}) => {\n  const { navigate, basePath } = useDevportal();\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  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    } else if (navigate) {\n      navigate(`${basePath}/apps/${app.id}`);\n    }\n  };\n\n  return (\n    <GlassCard\n      treatment=\"insight\"\n      role=\"button\"\n      tabIndex={0}\n      className={cn(\n        \"group cursor-pointer border-border-seam p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        selected && \"border-primary bg-action-primary-bg/5\",\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Header */}\n      <div className=\"flex items-start gap-3\">\n        {onToggleSelect && (\n          <div onClick={(event) => event.stopPropagation()}>\n            <SelectionCheckbox\n              checked={selected}\n              onChange={onToggleSelect}\n              ariaLabel={`Select application ${app.name}`}\n              className=\"mt-1\"\n            />\n          </div>\n        )}\n        <StoreImage\n          src={app.iconUrl}\n          alt={app.name}\n          className=\"h-12 w-12 rounded-lg object-cover\"\n          fallback={\n            <div className=\"flex h-12 w-12 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary\">\n              <AppWindow size={24} />\n            </div>\n          }\n        />\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-center gap-2\">\n            <h3 className=\"font-semibold truncate\">{app.name}</h3>\n            {app.isVerified && <VerifiedBadge verified />}\n          </div>\n          <p className=\"text-sm text-text-secondary\">\n            {APP_TYPE_LABELS[app.appType] || app.appType}\n          </p>\n        </div>\n      </div>\n\n      {/* Description */}\n      {app.shortDescription && (\n        <p className=\"mt-3 text-sm text-text-secondary line-clamp-2\">\n          {app.shortDescription}\n        </p>\n      )}\n\n      {/* Badges */}\n      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n        <StatusBadge status={app.status} />\n        {app.isFeatured && <FeaturedBadge />}\n      </div>\n\n      {/* Stats */}\n      <div className=\"mt-4 flex items-center gap-4 text-sm text-text-secondary\">\n        {app.averageRating !== undefined && app.averageRating > 0 && (\n          <span className=\"flex items-center gap-1\">\n            <Star\n              size={14}\n              className=\"text-status-warning-text fill-status-warning-text\"\n            />\n            {app.averageRating.toFixed(1)}\n          </span>\n        )}\n        <span className=\"flex items-center gap-1\">\n          <Download size={14} />\n          {app.installCount.toLocaleString()}{\" \"}\n          {tr(\"devportal.installs\", \"installs\")}\n        </span>\n      </div>\n\n      {/* Actions */}\n      {showActions && (\n        <div className=\"mt-4 flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity\">\n          <button\n            className=\"text-sm text-primary hover:underline flex items-center gap-1\"\n            onClick={(e) => {\n              e.stopPropagation();\n              handleClick();\n            }}\n          >\n            {tr(\"devportal.viewDetails\", \"View Details\")}\n            <ExternalLink size={14} />\n          </button>\n        </div>\n      )}\n    </GlassCard>\n  );\n};\n\n/**\n * Grid of app cards\n */\nexport const AppCardGrid: FC<{\n  apps: Application[];\n  onAppClick?: (app: Application) => void;\n  className?: string;\n}> = ({ apps, onAppClick, className }) => (\n  <div\n    className={cn(\n      \"grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n      className,\n    )}\n  >\n    {apps.map((app) => (\n      <AppCard\n        key={app.id}\n        app={app}\n        onClick={onAppClick ? () => onAppClick(app) : undefined}\n      />\n    ))}\n  </div>\n);\n\n/**\n * Compact app list item\n */\nexport const AppListItem: FC<{\n  app: Application;\n  onClick?: () => void;\n  className?: string;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n}> = ({ app, onClick, className, selected = false, onToggleSelect }) => {\n  const { navigate, basePath } = useDevportal();\n\n  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    } else if (navigate) {\n      navigate(`${basePath}/apps/${app.id}`);\n    }\n  };\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className={cn(\n        \"flex items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-3 cursor-pointer transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        selected && \"border-primary bg-action-primary-bg/5\",\n        className,\n      )}\n      onClick={handleClick}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {onToggleSelect && (\n        <div onClick={(event) => event.stopPropagation()}>\n          <SelectionCheckbox\n            checked={selected}\n            onChange={onToggleSelect}\n            ariaLabel={`Select application ${app.name}`}\n          />\n        </div>\n      )}\n      <StoreImage\n        src={app.iconUrl}\n        alt={app.name}\n        className=\"h-10 w-10 rounded-lg object-cover\"\n        fallback={\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary\">\n            <AppWindow size={20} />\n          </div>\n        }\n      />\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"font-medium truncate\">{app.name}</p>\n        <p className=\"text-sm text-text-secondary truncate\">\n          {app.shortDescription || APP_TYPE_LABELS[app.appType]}\n        </p>\n      </div>\n      <StatusBadge status={app.status} />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/devportal/components/ImageUploadField.js

@@ -1,56 +1,57 @@
-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";
+import { StoreImage as e, StoreImagePlaceholder as t } from "./StoreImage.js";
+import { cn as n } from "../utils/cn.js";
+import { useCallback as r, useRef as i, useState as a } from "react";
+import { Loader2 as o, Upload as s, X as c } from "lucide-react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 // 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) => {
+var f = ({ label: e, value: t, onChange: c, hint: l, 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 = i(null), [y, b] = a(!1), x = i(t);
+	x.current !== t && (x.current = t, y && b(!1));
+	let S = r(async (e) => {
 		try {
-			u((await m(e)).downloadUrl);
+			c((await m(e)).downloadUrl);
 		} catch {}
-	}, [m, u]);
-	return /* @__PURE__ */ l("div", {
+	}, [m, c]);
+	return /* @__PURE__ */ d("div", {
 		className: "space-y-1.5",
 		children: [
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ u("label", {
 				className: "text-sm font-medium",
-				children: o
+				children: e
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ d("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,
+				children: [/* @__PURE__ */ d("div", {
+					className: n("relative shrink-0 w-20 rounded-lg border border-border-subtle bg-bg-sunken overflow-hidden flex items-center justify-center", p),
+					children: [t && !y ? /* @__PURE__ */ u("img", {
+						src: t,
+						alt: e,
 						className: "w-full h-full object-cover",
 						onError: () => b(!0)
-					}) : /* @__PURE__ */ c(a, {
+					}) : /* @__PURE__ */ u(s, {
 						size: 18,
 						className: "text-text-secondary opacity-40"
-					}), h && /* @__PURE__ */ l("div", {
+					}), h && /* @__PURE__ */ d("div", {
 						className: "absolute inset-0 bg-bg-overlay flex flex-col items-center justify-center gap-1",
-						children: [/* @__PURE__ */ c(i, {
+						children: [/* @__PURE__ */ u(o, {
 							size: 14,
 							className: "animate-spin text-white"
-						}), /* @__PURE__ */ l("span", {
+						}), /* @__PURE__ */ d("span", {
 							className: "text-white text-xs",
 							children: [g, "%"]
 						})]
 					})]
-				}), /* @__PURE__ */ l("div", {
+				}), /* @__PURE__ */ d("div", {
 					className: "flex-1 space-y-1.5",
 					children: [
-						/* @__PURE__ */ c("input", {
+						/* @__PURE__ */ u("input", {
 							type: "url",
-							value: s,
-							onChange: (e) => u(e.target.value),
+							value: t,
+							onChange: (e) => c(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", {
+						/* @__PURE__ */ u("input", {
 							ref: v,
 							type: "file",
 							accept: f,
@@ -60,122 +61,123 @@ var u = ({ label: o, value: s, onChange: u, hint: d, accept: f = "image/png,imag
 								t && S(t), e.target.value = "";
 							}
 						}),
-						/* @__PURE__ */ l("button", {
+						/* @__PURE__ */ d("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"]
+							children: [/* @__PURE__ */ u(s, { size: 11 }), h ? `Uploading… ${g}%` : "Upload image"]
 						}),
-						_ && /* @__PURE__ */ c("p", {
+						_ && /* @__PURE__ */ u("p", {
 							className: "text-xs text-status-error-text",
 							children: _
 						})
 					]
 				})]
 			}),
-			d && /* @__PURE__ */ c("p", {
+			l && /* @__PURE__ */ u("p", {
 				className: "text-xs text-text-secondary",
-				children: d
+				children: l
 			})
 		]
 	});
-}, d = ({ urls: u, onChange: d, upload: f, uploading: p, progress: m, error: h }) => {
-	let g = n(null), [_, v] = r(""), y = t(async (e) => {
+}, p = ({ urls: f, onChange: p, upload: m, uploading: h, progress: g, error: _ }) => {
+	let v = i(null), [y, b] = a(""), x = r(async (e) => {
 		try {
-			let t = await f(e);
-			d([...u, t.downloadUrl]);
+			let t = await m(e);
+			p([...f, 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));
+		m,
+		p,
+		f
+	]), S = () => {
+		let e = y.trim();
+		e && !f.includes(e) && (p([...f, e]), b(""));
+	}, C = (e) => {
+		p(f.filter((t, n) => n !== e));
 	};
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ d("div", {
 		className: "space-y-2",
 		children: [
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex flex-col gap-0.5",
-				children: [/* @__PURE__ */ c("label", {
+				children: [/* @__PURE__ */ u("label", {
 					className: "text-sm font-medium",
 					children: "Screenshots"
-				}), /* @__PURE__ */ c("p", {
+				}), /* @__PURE__ */ u("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", {
+			/* @__PURE__ */ d("div", {
 				className: "flex flex-wrap gap-3",
-				children: [u.map((e, t) => /* @__PURE__ */ l("div", {
+				children: [f.map((n, r) => /* @__PURE__ */ d("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", {
+					children: [/* @__PURE__ */ u(e, {
+						src: n,
+						alt: `Screenshot ${r + 1}`,
+						className: "w-full h-full object-cover",
+						fallback: /* @__PURE__ */ u(t, { className: "h-full w-full rounded-none border-0" })
+					}), /* @__PURE__ */ u("button", {
 						type: "button",
-						onClick: () => x(t),
+						onClick: () => C(r),
 						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 })
+						children: /* @__PURE__ */ u(c, { size: 12 })
 					})]
-				}, t)), /* @__PURE__ */ c("button", {
+				}, r)), /* @__PURE__ */ u("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, {
+					disabled: h,
+					onClick: () => v.current?.click(),
+					className: 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"),
+					children: h ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(o, {
 						size: 18,
 						className: "animate-spin text-primary"
-					}), /* @__PURE__ */ l("span", {
+					}), /* @__PURE__ */ d("span", {
 						className: "text-xs",
-						children: [m, "%"]
-					})] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(a, { size: 18 }), /* @__PURE__ */ c("span", {
+						children: [g, "%"]
+					})] }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, { size: 18 }), /* @__PURE__ */ u("span", {
 						className: "text-xs",
 						children: "Add screenshot"
 					})] })
 				})]
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ c("input", {
+				children: [/* @__PURE__ */ u("input", {
 					type: "url",
-					value: _,
-					onChange: (e) => v(e.target.value),
+					value: y,
+					onChange: (e) => b(e.target.value),
 					onKeyDown: (e) => {
-						e.key === "Enter" && (e.preventDefault(), b());
+						e.key === "Enter" && (e.preventDefault(), S());
 					},
 					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", {
+				}), /* @__PURE__ */ u("button", {
 					type: "button",
-					onClick: b,
-					disabled: !_.trim(),
+					onClick: S,
+					disabled: !y.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,
+			/* @__PURE__ */ u("input", {
+				ref: v,
 				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 = "";
+					t && x(t), e.target.value = "";
 				}
 			}),
-			h && /* @__PURE__ */ c("p", {
+			_ && /* @__PURE__ */ u("p", {
 				className: "text-xs text-status-error-text",
-				children: h
+				children: _
 			})
 		]
 	});
 };
-export { u as ImageUploadField, d as ScreenshotGallery };
+export { f as ImageUploadField, p as ScreenshotGallery };
 
 //# sourceMappingURL=ImageUploadField.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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","StoreImage","url","StoreImagePlaceholder","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 { StoreImage, StoreImagePlaceholder } from \"./StoreImage\";\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            <StoreImage\n              src={url}\n              alt={`Screenshot ${idx + 1}`}\n              className=\"w-full h-full object-cover\"\n              fallback={\n                <StoreImagePlaceholder className=\"h-full w-full rounded-none border-0\" />\n              }\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":";;;;;;AA4BA,IAAaC,KAA+C,EAC1D,UACA,UACA,aACA,SACA,YAAS,2DACT,iBAAc,iBACd,WACA,cACA,aACA,eACI;CACJ,IAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAWC,KAAgBC,EAAS,EAAK,GAC1CC,IAAYJ,EAAOK,CAAK;CAC9B,AAAID,EAAU,YAAYC,MACxB,EAAU,UAAUA,GAChBJ,KAAWC,EAAa,EAAK;CAGnC,IAAMI,IAAaC,EACjB,OAAO,MAAe;EACpB,IAAI;GAEF,GAAS,MADYC,EAAOC,CAAI,EAAA,CAChB,WAAW;EAC7B,QAAQ,CAER;CACF,GACA,CAACD,GAAQE,CAAQ,CACnB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,SAAD;IAAO,WAAU;IAAuB,UAAAC;GAAa,CAAA;GACrD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CAEE,kBAAC,OAAD;KACE,WAAWC,EACT,+HACAC,CACF;KAJF,UAAA,CAMGR,KAAS,CAACJ,IACT,kBAAC,OAAD;MACE,KAAKI;MACL,KAAKM;MACL,WAAU;MACV,eAAeT,EAAa,EAAI;KACjC,CAAA,IAED,kBAACY,GAAD;MAAQ,MAAM;MAAI,WAAU;KAAkC,CAAA,GAE/DC,KACC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAACC,GAAD;OAAS,MAAM;OAAI,WAAU;MAA2B,CAAA,GACxD,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CAAsCC,GAAS,GAAO;MACnD,CAAA,CAAA;KAEJ,CAAA,CAAA;IAEL,CAAA,GAAA,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,kBAAC,SAAD;OACE,MAAK;OACE;OACP,WAAW,MAAMP,EAAS,EAAE,OAAO,KAAK;OACxC,aAAY;OACZ,WAAU;MACX,CAAA;MACD,kBAAC,SAAD;OACE,KAAKX;OACL,MAAK;OACG;OACR,WAAU;OACV,WAAW,MAAM;QACf,IAAMmB,IAAI,EAAE,OAAO,QAAQ;QAE3B,AADIA,KAAGZ,EAAgBY,CAAC,GACxB,EAAE,OAAO,QAAQ;OACnB;MACD,CAAA;MACD,kBAAC,UAAD;OACE,MAAK;OACL,UAAUH;OACV,eAAehB,EAAS,SAAS,MAAM;OACvC,WAAU;OAJZ,UAAA,CAME,kBAACe,GAAD,EAAQ,MAAM,GAAK,CAAA,GAClBC,IAAY,cAAcE,EAAS,KAAK,cACnC;;MACPE,KAAS,kBAAC,KAAD;OAAG,WAAU;OAAkC,UAAAA;MAAS,CAAA;KAC/D;IACF,CAAA,CAAA;;GACJC,KAAQ,kBAAC,KAAD;IAAG,WAAU;IAA+B,UAAAA;GAAQ,CAAA;EAC1D;;AAET,GAWaC,KAAiD,EAC5D,SACA,aACA,WACA,cACA,aACA,eACI;CACJ,IAAMtB,IAAWC,EAAyB,IAAI,GACxC,CAACsB,GAAUC,KAAepB,EAAS,EAAE,GAErCG,IAAaC,EACjB,OAAO,MAAe;EACpB,IAAI;GACF,IAAMiB,IAAS,MAAMhB,EAAOC,CAAI;GAChC,EAAS,CAAC,GAAGgB,GAAMD,EAAO,WAAW,CAAC;EACxC,QAAQ,CAER;CACF,GACA;EAAChB;EAAQE;EAAUe;CAAI,CACzB,GAEMC,UAAe;EACnB,IAAMC,IAAUL,EAAS,KAAK;EAC9B,AAAIK,KAAW,CAACF,EAAK,SAASE,CAAO,MACnCjB,EAAS,CAAC,GAAGe,GAAME,CAAO,CAAC,GAC3BJ,EAAY,EAAE;CAElB,GAEMK,KAAU,MAAgB;EAC9B,EAASH,EAAK,QAAQ,GAAG,MAAMI,MAAMC,CAAG,CAAC;CAC3C;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,SAAD;KAAO,WAAU;KAAsB,UAAA;IAAkB,CAAA,GACzD,kBAAC,KAAD;KAAG,WAAU;KAA0B,UAAA;IAGpC,CAAA,CACA;;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACGL,EAAK,KAAK,GAAK,MACd,kBAAC,OAAD;KAEE,WAAU;KAFZ,UAAA,CAIE,kBAACM,GAAD;MACE,KAAKC;MACL,KAAK,cAAcF,IAAM;MACzB,WAAU;MACV,UACE,kBAACG,GAAD,EAAuB,WAAU,sCAAuC,CAAA;KAE3E,CAAA,GACD,kBAAC,UAAD;MACE,MAAK;MACL,eAAeL,EAAOE,CAAG;MACzB,WAAU;MAEV,UAAA,kBAACI,GAAD,EAAG,MAAM,GAAK,CAAA;KACR,CAAA,CACL;IAlBE,GAAAJ,CAkBF,CACN,GAED,kBAAC,UAAD;KACE,MAAK;KACL,UAAUf;KACV,eAAehB,EAAS,SAAS,MAAM;KACvC,WAAWa,EACT,oOACF;KAEC,UAAAG,IACC,kBAAAlB,GAAA,EAAA,UAAA,CACE,kBAACmB,GAAD;MAAS,MAAM;MAAI,WAAU;KAA6B,CAAA,GAC1D,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAA2BC,GAAS,GAAO;KAC3C,CAAA,CAAA,EAAA,CAAA,IAEF,kBAAApB,GAAA,EAAA,UAAA,CACE,kBAACiB,GAAD,EAAQ,MAAM,GAAK,CAAA,GACnB,kBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAoB,CAAA,CAC9C,EAAA,CAAA;IAEE,CAAA,CACL;;GAEL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,SAAD;KACE,MAAK;KACL,OAAOQ;KACP,WAAW,MAAMC,EAAY,EAAE,OAAO,KAAK;KAC3C,YAAY,MAAM;MAChB,AAAI,EAAE,QAAQ,YACZ,EAAE,eAAe,GACjBG,EAAO;KAEX;KACA,aAAY;KACZ,WAAU;IACX,CAAA,GACD,kBAAC,UAAD;KACE,MAAK;KACL,SAASA;KACT,UAAU,CAACJ,EAAS,KAAK;KACzB,WAAU;KACX,UAAA;IAEO,CAAA,CACL;;GACL,kBAAC,SAAD;IACE,KAAKvB;IACL,MAAK;IACL,QAAO;IACP,WAAU;IACV,WAAW,MAAM;KACf,IAAMmB,IAAI,EAAE,OAAO,QAAQ;KAE3B,AADIA,KAAGZ,EAAgBY,CAAC,GACxB,EAAE,OAAO,QAAQ;IACnB;GACD,CAAA;GACAC,KAAS,kBAAC,KAAD;IAAG,WAAU;IAAkC,UAAAA;GAAS,CAAA;EAC/D;;AAET"}

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

@@ -0,0 +1,15 @@
+import { FC, ImgHTMLAttributes, ReactNode } from 'react';
+/** True when `src` is a value the browser can load as an image. */
+export declare function isRenderableImageSrc(src: string | null | undefined): src is string;
+export interface StoreImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "onError"> {
+    src: string | null | undefined;
+    alt: string;
+    /** Shown instead of the image when it is missing or fails to load. */
+    fallback?: ReactNode;
+}
+export declare const StoreImage: FC<StoreImageProps>;
+/** Neutral tile for a store image that can't be shown. Size it via className. */
+export declare const StoreImagePlaceholder: FC<{
+    className?: string;
+    iconSize?: number;
+}>;