@openrails/contentkit-ui 0.85.1 → 0.87.0-rc.1

package/dist/components/notifications.js

@@ -1,8 +1,8 @@
 import { useMessages as e } from "../i18n/context.js";
 import { ContentKitUiRoot as t, useScopeProps as n } from "../scope.js";
 import { useErrorReporter as r } from "../react/context.js";
-import { Button as i } from "../ui/button.js";
-import { useContentScope as a } from "../react/use-resource.js";
+import { useContentScope as i } from "../react/use-resource.js";
+import { Button as a } from "../ui/button.js";
 import { Badge as o } from "../ui/badge.js";
 import { Skeleton as s } from "../ui/skeleton.js";
 import { ErrorLine as c, RelativeTime as l, useAction as u } from "./social/parts.js";
@@ -21,7 +21,7 @@ function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFil
 		unread: j === "unread",
 		dismissed: j === "archived",
 		refreshInterval: x
-	}), { onSignIn: P } = a(l), F = w ?? P, I = h(null), L = r(T);
+	}), { onSignIn: P } = i(l), F = w ?? P, I = h(null), L = r(T);
 	return p(() => {
 		N.error && L(N.error, "notifications.load");
 	}, [N.error, L]), /* @__PURE__ */ y(t, {
@@ -36,7 +36,7 @@ function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFil
 				id: A,
 				className: "text-base font-semibold",
 				children: k("notifications.title")
-			}), !N.signedOut && /* @__PURE__ */ v(i, {
+			}), !N.signedOut && /* @__PURE__ */ v(a, {
 				size: "icon-sm",
 				variant: "ghost",
 				"aria-label": k("notifications.refresh"),
@@ -49,7 +49,7 @@ function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFil
 			})]
 		}), N.signedOut ? /* @__PURE__ */ y("div", {
 			className: "grid justify-items-start gap-3 py-4 text-muted-foreground",
-			children: [/* @__PURE__ */ v("p", { children: k("notifications.signInHint") }), F && /* @__PURE__ */ v(i, {
+			children: [/* @__PURE__ */ v("p", { children: k("notifications.signInHint") }), F && /* @__PURE__ */ v(a, {
 				variant: "outline",
 				onClick: F,
 				children: k("notifications.signIn")
@@ -63,7 +63,7 @@ function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFil
 					"all",
 					"unread",
 					"archived"
-				].map((e) => /* @__PURE__ */ v(i, {
+				].map((e) => /* @__PURE__ */ v(a, {
 					ref: j === e ? I : void 0,
 					size: "sm",
 					variant: j === e ? "secondary" : "ghost",
@@ -74,7 +74,7 @@ function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFil
 			}),
 			N.error && /* @__PURE__ */ y("div", {
 				className: "grid justify-items-start gap-2",
-				children: [/* @__PURE__ */ v(c, { children: k("notifications.loadFailed") }), /* @__PURE__ */ v(i, {
+				children: [/* @__PURE__ */ v(c, { children: k("notifications.loadFailed") }), /* @__PURE__ */ v(a, {
 					size: "sm",
 					variant: "outline",
 					onClick: N.reload,
@@ -108,7 +108,7 @@ function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFil
 					onError: T
 				}, e.id))
 			}),
-			N.hasMore && /* @__PURE__ */ v(i, {
+			N.hasMore && /* @__PURE__ */ v(a, {
 				variant: "outline",
 				disabled: N.loadingMore || N.loading,
 				onClick: () => void N.loadMore(),
@@ -117,7 +117,7 @@ function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFil
 		] })]
 	});
 }
-function E({ item: t, renderItem: n, renderActions: r, onRead: a, onDismiss: s, onError: d }) {
+function E({ item: t, renderItem: n, renderActions: r, onRead: i, onDismiss: s, onError: d }) {
 	let { t: f } = e(), p = u("notifications.read", d), h = u("notifications.dismiss", d), g = m(), _ = t.status === "open" ? f("notifications.open") : t.status === "resolved" ? f("notifications.resolved") : t.status === "dismissed" ? f("notifications.dismissed") : void 0;
 	return /* @__PURE__ */ y("li", {
 		className: b("grid gap-3 p-4", !t.read_at && "bg-primary/5"),
@@ -147,15 +147,15 @@ function E({ item: t, renderItem: n, renderActions: r, onRead: a, onDismiss: s,
 				className: "flex flex-wrap items-center gap-2",
 				children: [
 					r?.(t),
-					/* @__PURE__ */ v(i, {
+					/* @__PURE__ */ v(a, {
 						size: "sm",
 						variant: "ghost",
 						"aria-describedby": g,
 						disabled: p.pending || h.pending,
-						onClick: () => void p.run(() => a(t.id, !t.read_at)),
+						onClick: () => void p.run(() => i(t.id, !t.read_at)),
 						children: f(t.read_at ? "notifications.markUnread" : "notifications.markRead")
 					}),
-					/* @__PURE__ */ v(i, {
+					/* @__PURE__ */ v(a, {
 						size: "sm",
 						variant: "ghost",
 						"aria-describedby": g,
@@ -169,11 +169,11 @@ function E({ item: t, renderItem: n, renderActions: r, onRead: a, onDismiss: s,
 		]
 	});
 }
-function D({ appearance: a, className: o, unreadRefreshInterval: s, ...c }) {
+function D({ appearance: i, className: o, unreadRefreshInterval: s, ...c }) {
 	let { t: l } = e(), u = d({
 		client: c.client,
 		refreshInterval: s
-	}), f = n(a), m = r(c.onError);
+	}), f = n(i), m = r(c.onError);
 	return p(() => {
 		u.error && m(u.error, "notifications.load");
 	}, [u.error, m]), /* @__PURE__ */ y(w.Root, {
@@ -181,11 +181,11 @@ function D({ appearance: a, className: o, unreadRefreshInterval: s, ...c }) {
 			e && u.reload();
 		},
 		children: [/* @__PURE__ */ v(t, {
-			appearance: a,
+			appearance: i,
 			className: b("inline-flex", o),
 			"data-ckui": "notification-bell",
 			children: /* @__PURE__ */ y(w.Trigger, {
-				render: /* @__PURE__ */ v(i, {
+				render: /* @__PURE__ */ v(a, {
 					variant: "ghost",
 					size: "icon"
 				}),
@@ -210,7 +210,7 @@ function D({ appearance: a, className: o, unreadRefreshInterval: s, ...c }) {
 				"aria-label": l("notifications.title"),
 				children: /* @__PURE__ */ v(T, {
 					...c,
-					appearance: a
+					appearance: i
 				})
 			})
 		}) })]

package/dist/components/slot-upload.d.ts

@@ -5,8 +5,8 @@ import { CropSource } from '../client/image.js';
 import { PublicPreset } from '../client/public.js';
 import { FileInfo, ReadResult, RefBody } from '../client/generated/wire.js';
 export interface SlotUploadProps {
-    /** The item that owns the upload. */
-    item: RefBody;
+    /** The item that owns the upload; an AvatarUpload's default is the viewer's avatar (the content model's `avatars`), on whichever site holds it. */
+    item?: RefBody;
     /** The upload path; default "avatar" or "cover". */
     path?: string;
     /** The public preset showing it. */

package/dist/components/slot-upload.js

@@ -2,41 +2,46 @@ import { ratio as e } from "../client/aspect.js";
 import { presetFor as t } from "../client/media/rules.js";
 import { useMessages as n } from "../i18n/context.js";
 import { ContentKitUiRoot as r } from "../scope.js";
-import { usePresets as i } from "../react/public.js";
-import { Button as a } from "../ui/button.js";
-import { SlotImage as o } from "./slot-image.js";
-import { SlotEditError as s, SlotEditor as c, useSlotEditor as l } from "./slot-editor.js";
-import { useState as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { cn as m } from "cn";
-import { Camera01Icon as h, CropIcon as g, Delete02Icon as _, ImageUpload01Icon as v, Loading03Icon as y } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as b } from "@hugeicons/react";
+import { useContentScope as i } from "../react/use-resource.js";
+import { useKinds as a } from "../react/groups.js";
+import { usePresets as o } from "../react/public.js";
+import { Button as s } from "../ui/button.js";
+import { SlotImage as c } from "./slot-image.js";
+import { SlotEditError as l, SlotEditor as u, useSlotEditor as d } from "./slot-editor.js";
+import { useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { cn as g } from "cn";
+import { Camera01Icon as _, CropIcon as v, Delete02Icon as y, ImageUpload01Icon as b, Loading03Icon as x } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as S } from "@hugeicons/react";
 //#region src/components/slot-upload.tsx
-function x(e) {
-	return /* @__PURE__ */ f(C, {
+function C(e) {
+	return /* @__PURE__ */ m(T, {
 		...e,
 		variant: "avatar"
 	});
 }
-function S(e) {
-	return /* @__PURE__ */ f(C, {
+function w(e) {
+	return /* @__PURE__ */ m(T, {
 		...e,
 		variant: "cover"
 	});
 }
-function C({ variant: e, ...n }) {
-	let a = n.path ?? e, { presets: o } = i({ client: n.client }), s = t(o, n.item.kind, a, n.image?.preset);
-	return /* @__PURE__ */ f(r, {
-		className: m("text-sm", n.className),
+function T({ variant: e, ...n }) {
+	let s = n.path ?? e, { presets: c } = o({ client: n.client }), { kinds: l } = a({ client: n.client }), { viewer: d } = i(n.client), f = e === "avatar" ? l?.avatars : void 0, p = n.item ?? (f && d ? {
+		kind: f.kind,
+		id: d
+	} : void 0), h = p && (t(c, p.kind, s, n.image?.preset) ?? (f?.kind === p.kind ? f : void 0));
+	return p ? /* @__PURE__ */ m(r, {
+		className: g("text-sm", n.className),
 		"data-ckui": e === "avatar" ? "avatar-upload" : "cover-upload",
-		children: /* @__PURE__ */ f(c, {
-			item: n.item,
-			path: a,
+		children: /* @__PURE__ */ m(u, {
+			item: p,
+			path: s,
 			image: n.image,
 			client: n.client,
 			read: n.read,
 			onChange: n.onChange,
-			aspect: n.aspect || n.image?.aspect || s?.aspect || (e === "avatar" ? "1:1" : "3:1"),
+			aspect: n.aspect || n.image?.aspect || h?.aspect || (e === "avatar" ? "1:1" : "3:1"),
 			minWidth: n.minWidth,
 			animation: n.animation,
 			targetWidth: n.targetWidth ?? (e === "avatar" ? 512 : 3e3),
@@ -45,171 +50,171 @@ function C({ variant: e, ...n }) {
 			disabled: n.disabled,
 			removable: n.removable ?? e === "avatar",
 			decode: n.decode,
-			children: /* @__PURE__ */ f(w, {
+			children: /* @__PURE__ */ m(E, {
 				...n,
 				variant: e
 			})
 		})
-	});
+	}) : null;
 }
-function w({ variant: t, ...r }) {
-	let { t: i } = n(), c = l(), { crop: x, has: S, busy: C, disabled: w } = c, E = {
+function E({ variant: t, ...r }) {
+	let { t: i } = n(), a = d(), { crop: o, has: u, busy: C, disabled: w } = a, T = {
 		preset: r.image?.preset ?? t,
-		aspect: c.image.aspect,
-		renditions: c.image.renditions
-	}, [D, O] = u(!1), k = x.aspect, A = r.targetWidth ?? (t === "avatar" ? 512 : 3e3), j = (e) => {
+		aspect: a.image.aspect,
+		renditions: a.image.renditions
+	}, [E, O] = f(!1), k = o.aspect, A = r.targetWidth ?? (t === "avatar" ? 512 : 3e3), j = (e) => {
 		e.preventDefault(), O(!1);
 		let t = [...e.dataTransfer.files].find((e) => e.type.startsWith("image/")) ?? e.dataTransfer.files[0];
-		t && c.pick(t);
+		t && a.pick(t);
 	}, M = r.hint ?? (t === "avatar" ? i("avatar.hint", { size: A }) : i("cover.hint", {
 		width: A,
 		height: Math.round(A / (e(k) ?? 3))
-	})), N = r.label ?? i(t === "avatar" ? "avatar.label" : "cover.label"), P = (e) => /* @__PURE__ */ p(d, { children: [
-		/* @__PURE__ */ p(a, {
-			variant: e && S ? "secondary" : "outline",
+	})), N = r.label ?? i(t === "avatar" ? "avatar.label" : "cover.label"), P = (e) => /* @__PURE__ */ h(p, { children: [
+		/* @__PURE__ */ h(s, {
+			variant: e && u ? "secondary" : "outline",
 			size: "sm",
 			disabled: w,
-			onClick: c.choose,
+			onClick: a.choose,
 			"data-ckui": "change",
-			children: [/* @__PURE__ */ f(b, {
-				icon: C ? y : h,
+			children: [/* @__PURE__ */ m(S, {
+				icon: C ? x : _,
 				strokeWidth: 2,
 				"data-icon": "inline-start",
 				className: C ? "animate-spin" : void 0
-			}), i(S ? "common.change" : "common.upload")]
+			}), i(u ? "common.change" : "common.upload")]
 		}),
-		S && x.canRecrop && /* @__PURE__ */ p(a, {
+		u && o.canRecrop && /* @__PURE__ */ h(s, {
 			variant: e ? "secondary" : "ghost",
 			size: "sm",
 			disabled: w,
-			onClick: c.recrop,
+			onClick: a.recrop,
 			"data-ckui": "edit-crop",
-			children: [/* @__PURE__ */ f(b, {
-				icon: g,
+			children: [/* @__PURE__ */ m(S, {
+				icon: v,
 				strokeWidth: 2,
 				"data-icon": "inline-start"
 			}), i("common.editCrop")]
 		}),
-		S && c.removable && /* @__PURE__ */ p(a, {
+		u && a.removable && /* @__PURE__ */ h(s, {
 			variant: e ? "secondary" : "ghost",
 			size: "sm",
 			disabled: w,
-			onClick: c.remove,
+			onClick: a.remove,
 			"data-ckui": "remove",
-			children: [/* @__PURE__ */ f(b, {
-				icon: _,
+			children: [/* @__PURE__ */ m(S, {
+				icon: y,
 				strokeWidth: 2,
 				"data-icon": "inline-start"
 			}), i("common.remove")]
 		})
 	] });
-	return t === "avatar" ? /* @__PURE__ */ p("div", {
+	return t === "avatar" ? /* @__PURE__ */ h("div", {
 		className: "flex items-center gap-4",
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ h("div", {
 			className: "relative size-20 shrink-0",
-			children: [/* @__PURE__ */ f(o, {
-				image: S ? E : null,
+			children: [/* @__PURE__ */ m(c, {
+				image: u ? T : null,
 				round: !0,
 				emptyLabel: i("avatar.empty"),
 				className: "size-full ring-1 ring-foreground/10"
-			}), C && /* @__PURE__ */ f(T, {
+			}), C && /* @__PURE__ */ m(D, {
 				round: !0,
-				label: i(x.status === "decoding" ? "progress.decoding" : "common.saving")
+				label: i(o.status === "decoding" ? "progress.decoding" : "common.saving")
 			})]
-		}), /* @__PURE__ */ p("div", {
+		}), /* @__PURE__ */ h("div", {
 			className: "grid min-w-0 gap-1",
 			children: [
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ m("div", {
 					className: "font-medium",
 					children: N
 				}),
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ m("div", {
 					className: "text-xs text-muted-foreground",
 					children: M
 				}),
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ m("div", {
 					className: "mt-1.5 flex flex-wrap gap-2",
 					children: P(!1)
 				}),
-				/* @__PURE__ */ f(s, {})
+				/* @__PURE__ */ m(l, {})
 			]
 		})]
-	}) : /* @__PURE__ */ p("div", {
+	}) : /* @__PURE__ */ h("div", {
 		className: "grid gap-2",
 		children: [
-			/* @__PURE__ */ p("div", {
-				className: m("group/cover relative overflow-hidden rounded-xl ring-1 ring-foreground/10 transition-shadow", D && "ring-2 ring-ring"),
+			/* @__PURE__ */ h("div", {
+				className: g("group/cover relative overflow-hidden rounded-xl ring-1 ring-foreground/10 transition-shadow", E && "ring-2 ring-ring"),
 				onDragOver: (e) => {
 					e.preventDefault(), w || O(!0);
 				},
 				onDragLeave: () => O(!1),
 				onDrop: j,
 				children: [
-					/* @__PURE__ */ f(o, {
-						image: S ? E : null,
+					/* @__PURE__ */ m(c, {
+						image: u ? T : null,
 						aspect: k,
 						className: "w-full rounded-none",
-						fallback: /* @__PURE__ */ p("div", {
+						fallback: /* @__PURE__ */ h("div", {
 							"aria-label": i("cover.empty"),
 							role: "group",
 							className: "absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-[repeating-linear-gradient(135deg,transparent_0_10px,color-mix(in_oklch,var(--ckui-foreground)_3%,transparent)_10px_20px)] p-4 text-center",
 							children: [
-								/* @__PURE__ */ f(b, {
-									icon: v,
+								/* @__PURE__ */ m(S, {
+									icon: b,
 									strokeWidth: 1.5,
 									className: "size-7 text-muted-foreground"
 								}),
-								/* @__PURE__ */ f("span", {
+								/* @__PURE__ */ m("span", {
 									className: "hidden text-xs text-muted-foreground sm:block",
 									children: i("cover.drop")
 								}),
-								/* @__PURE__ */ f("div", {
+								/* @__PURE__ */ m("div", {
 									className: "mt-1 flex gap-2",
 									children: P(!1)
 								})
 							]
 						})
 					}),
-					C && /* @__PURE__ */ f(T, { label: i(x.status === "decoding" ? "progress.decoding" : "common.saving") }),
-					S && /* @__PURE__ */ f("div", {
+					C && /* @__PURE__ */ m(D, { label: i(o.status === "decoding" ? "progress.decoding" : "common.saving") }),
+					u && /* @__PURE__ */ m("div", {
 						className: "absolute right-2 bottom-2 flex gap-2 max-sm:hidden [&_button]:bg-background/80 [&_button]:backdrop-blur-sm",
 						children: P(!0)
 					})
 				]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5",
-				children: [/* @__PURE__ */ p("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: "grid min-w-0 gap-0.5 sm:flex sm:flex-1 sm:items-baseline sm:justify-between sm:gap-3",
-					children: [/* @__PURE__ */ f("div", {
+					children: [/* @__PURE__ */ m("div", {
 						className: "font-medium",
 						children: N
-					}), /* @__PURE__ */ f("div", {
+					}), /* @__PURE__ */ m("div", {
 						className: "text-xs text-muted-foreground sm:truncate",
 						children: M
 					})]
-				}), S && /* @__PURE__ */ f("div", {
+				}), u && /* @__PURE__ */ m("div", {
 					className: "flex gap-2 sm:hidden",
 					children: P(!1)
 				})]
 			}),
-			/* @__PURE__ */ f(s, {})
+			/* @__PURE__ */ m(l, {})
 		]
 	});
 }
-function T({ round: e, label: t }) {
-	return /* @__PURE__ */ f("div", {
+function D({ round: e, label: t }) {
+	return /* @__PURE__ */ m("div", {
 		role: "status",
 		"aria-label": t,
-		className: m("absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-[1px]", e && "rounded-full"),
-		children: /* @__PURE__ */ f(b, {
-			icon: y,
+		className: g("absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-[1px]", e && "rounded-full"),
+		children: /* @__PURE__ */ m(S, {
+			icon: x,
 			strokeWidth: 2,
 			className: "size-5 animate-spin text-foreground"
 		})
 	});
 }
 //#endregion
-export { x as AvatarUpload, S as CoverUpload };
+export { C as AvatarUpload, w as CoverUpload };
 
 //# sourceMappingURL=slot-upload.js.map

package/dist/components/slot-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot-upload.js","names":[],"sources":["../../src/components/slot-upload.tsx"],"sourcesContent":["import { ratio, type AspectRatio } from \"../client/aspect.js\";\nimport { Camera01Icon, CropIcon, Delete02Icon, ImageUpload01Icon, Loading03Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useState, type DragEvent, type ReactNode } from \"react\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport type { CropSource } from \"../client/image.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\nimport type { PublicPreset } from \"../client/public.js\";\nimport type { FileInfo, ReadResult, RefBody } from \"../client/generated/wire.js\";\nimport { presetFor } from \"../client/media/rules.js\";\nimport { usePresets } from \"../react/public.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { SlotEditError, SlotEditor, useSlotEditor } from \"./slot-editor.js\";\nimport { SlotImage } from \"./slot-image.js\";\n\nexport interface SlotUploadProps {\n  /** The item that owns the upload. */\n  item: RefBody;\n  /** The upload path; default \"avatar\" or \"cover\". */\n  path?: string;\n  /** The public preset showing it. */\n  image?: PublicPreset | null;\n  client?: ContentKitClient;\n  /** An editor read of the item from the host; otherwise fetched. */\n  read?: ReadResult | null;\n  /** Called with the processed upload after every save, null after a removal. */\n  onChange?: (file: FileInfo | null) => void;\n  /** The output's \"W:H\"; default the preset's aspect, else \"1:1\" (avatar) or \"3:1\" (cover). */\n  aspect?: AspectRatio;\n  /** The narrowest edit the server accepts (the preset's Image.MinWidth). */\n  minWidth?: number;\n  /** \"reject\" refuses animated images before uploading. */\n  animation?: \"reject\";\n  /** Crops narrower than this many source pixels get a sharpness warning; default 512 (avatar) or 3000 (cover). */\n  targetWidth?: number;\n  /** `accept` of the file input. Default \"image/*\". */\n  accept?: string;\n  disabled?: boolean;\n  /** Offers Remove once set; default true for avatars, false for covers. */\n  removable?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  className?: string;\n  /** Replaces decodeImage (tests). */\n  decode?: (file: File) => Promise<CropSource>;\n}\n\ntype Variant = \"avatar\" | \"cover\";\n\n/** Round 1:1 avatar field: image, label, hint, Change / Edit crop, crop dialog, progress, errors. For custom layouts use SlotEditor. */\nexport function AvatarUpload(p: SlotUploadProps) {\n  return <SlotUpload {...p} variant=\"avatar\" />;\n}\n\n/** Wide cover field at the preset's aspect (e.g. 3:1), with drop-to-upload. For custom layouts use SlotEditor. */\nexport function CoverUpload(p: SlotUploadProps) {\n  return <SlotUpload {...p} variant=\"cover\" />;\n}\n\nfunction SlotUpload({ variant, ...p }: SlotUploadProps & { variant: Variant }) {\n  const path = p.path ?? variant;\n  const { presets } = usePresets({ client: p.client });\n  const rule = presetFor(presets, p.item.kind, path, p.image?.preset);\n  return (\n    <ContentKitUiRoot className={cn(\"text-sm\", p.className)} data-ckui={variant === \"avatar\" ? \"avatar-upload\" : \"cover-upload\"}>\n      <SlotEditor\n        item={p.item}\n        path={path}\n        image={p.image}\n        client={p.client}\n        read={p.read}\n        onChange={p.onChange}\n        aspect={p.aspect || p.image?.aspect || rule?.aspect || (variant === \"avatar\" ? \"1:1\" : \"3:1\")}\n        minWidth={p.minWidth}\n        animation={p.animation}\n        targetWidth={p.targetWidth ?? (variant === \"avatar\" ? 512 : 3000)}\n        round={variant === \"avatar\"}\n        accept={p.accept}\n        disabled={p.disabled}\n        removable={p.removable ?? variant === \"avatar\"}\n        decode={p.decode}\n      >\n        <SlotUploadLayout {...p} variant={variant} />\n      </SlotEditor>\n    </ContentKitUiRoot>\n  );\n}\n\nfunction SlotUploadLayout({ variant, ...p }: SlotUploadProps & { variant: Variant }) {\n  const { t } = useMessages();\n  const s = useSlotEditor();\n  const { crop, has, busy, disabled } = s;\n  const image = { preset: p.image?.preset ?? variant, aspect: s.image.aspect, renditions: s.image.renditions };\n  const [dragging, setDragging] = useState(false);\n  const aspect = crop.aspect;\n  const target = p.targetWidth ?? (variant === \"avatar\" ? 512 : 3000);\n  const onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    setDragging(false);\n    const f = [...e.dataTransfer.files].find((f) => f.type.startsWith(\"image/\")) ?? e.dataTransfer.files[0];\n    if (f) s.pick(f);\n  };\n\n  const hint =\n    p.hint ?? (variant === \"avatar\" ? t(\"avatar.hint\", { size: target }) : t(\"cover.hint\", { width: target, height: Math.round(target / (ratio(aspect) ?? 3)) }));\n  const label = p.label ?? t(variant === \"avatar\" ? \"avatar.label\" : \"cover.label\");\n\n  // overlay: buttons on top of the cover image; otherwise a plain row.\n  const actions = (overlay: boolean) => (\n    <>\n      <Button variant={overlay && has ? \"secondary\" : \"outline\"} size=\"sm\" disabled={disabled} onClick={s.choose} data-ckui=\"change\">\n        <HugeiconsIcon icon={busy ? Loading03Icon : Camera01Icon} strokeWidth={2} data-icon=\"inline-start\" className={busy ? \"animate-spin\" : undefined} />\n        {has ? t(\"common.change\") : t(\"common.upload\")}\n      </Button>\n      {has && crop.canRecrop && (\n        <Button variant={overlay ? \"secondary\" : \"ghost\"} size=\"sm\" disabled={disabled} onClick={s.recrop} data-ckui=\"edit-crop\">\n          <HugeiconsIcon icon={CropIcon} strokeWidth={2} data-icon=\"inline-start\" />\n          {t(\"common.editCrop\")}\n        </Button>\n      )}\n      {has && s.removable && (\n        <Button variant={overlay ? \"secondary\" : \"ghost\"} size=\"sm\" disabled={disabled} onClick={s.remove} data-ckui=\"remove\">\n          <HugeiconsIcon icon={Delete02Icon} strokeWidth={2} data-icon=\"inline-start\" />\n          {t(\"common.remove\")}\n        </Button>\n      )}\n    </>\n  );\n\n  return variant === \"avatar\" ? (\n    <div className=\"flex items-center gap-4\">\n      <div className=\"relative size-20 shrink-0\">\n        <SlotImage image={has ? image : null} round emptyLabel={t(\"avatar.empty\")} className=\"size-full ring-1 ring-foreground/10\" />\n        {busy && <BusyOverlay round label={t(crop.status === \"decoding\" ? \"progress.decoding\" : \"common.saving\")} />}\n      </div>\n      <div className=\"grid min-w-0 gap-1\">\n        <div className=\"font-medium\">{label}</div>\n        <div className=\"text-xs text-muted-foreground\">{hint}</div>\n        <div className=\"mt-1.5 flex flex-wrap gap-2\">{actions(false)}</div>\n        <SlotEditError />\n      </div>\n    </div>\n  ) : (\n    <div className=\"grid gap-2\">\n      <div\n        className={cn(\n          \"group/cover relative overflow-hidden rounded-xl ring-1 ring-foreground/10 transition-shadow\",\n          dragging && \"ring-2 ring-ring\",\n        )}\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => setDragging(false)}\n        onDrop={onDrop}\n      >\n        <SlotImage\n          image={has ? image : null}\n          aspect={aspect}\n          className=\"w-full rounded-none\"\n          fallback={\n            <div aria-label={t(\"cover.empty\")} role=\"group\" className=\"absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-[repeating-linear-gradient(135deg,transparent_0_10px,color-mix(in_oklch,var(--ckui-foreground)_3%,transparent)_10px_20px)] p-4 text-center\">\n              <HugeiconsIcon icon={ImageUpload01Icon} strokeWidth={1.5} className=\"size-7 text-muted-foreground\" />\n              <span className=\"hidden text-xs text-muted-foreground sm:block\">{t(\"cover.drop\")}</span>\n              <div className=\"mt-1 flex gap-2\">{actions(false)}</div>\n            </div>\n          }\n        />\n        {busy && <BusyOverlay label={t(crop.status === \"decoding\" ? \"progress.decoding\" : \"common.saving\")} />}\n        {has && (\n          <div className=\"absolute right-2 bottom-2 flex gap-2 max-sm:hidden [&_button]:bg-background/80 [&_button]:backdrop-blur-sm\">\n            {actions(true)}\n          </div>\n        )}\n      </div>\n      <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n        <div className=\"grid min-w-0 gap-0.5 sm:flex sm:flex-1 sm:items-baseline sm:justify-between sm:gap-3\">\n          <div className=\"font-medium\">{label}</div>\n          <div className=\"text-xs text-muted-foreground sm:truncate\">{hint}</div>\n        </div>\n        {has && <div className=\"flex gap-2 sm:hidden\">{actions(false)}</div>}\n      </div>\n      <SlotEditError />\n    </div>\n  );\n}\n\nfunction BusyOverlay({ round, label }: { round?: boolean; label: string }) {\n  return (\n    <div role=\"status\" aria-label={label} className={cn(\"absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-[1px]\", round && \"rounded-full\")}>\n      <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className=\"size-5 animate-spin text-foreground\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAoDA,SAAgB,EAAa,GAAoB;CAC/C,OAAO,kBAAC,GAAD;EAAY,GAAI;EAAG,SAAQ;CAAU,CAAA;AAC9C;AAGA,SAAgB,EAAY,GAAoB;CAC9C,OAAO,kBAAC,GAAD;EAAY,GAAI;EAAG,SAAQ;CAAS,CAAA;AAC7C;AAEA,SAAS,EAAW,EAAE,YAAS,GAAG,KAA6C;CAC7E,IAAM,IAAO,EAAE,QAAQ,GACjB,EAAE,eAAY,EAAW,EAAE,QAAQ,EAAE,OAAO,CAAC,GAC7C,IAAO,EAAU,GAAS,EAAE,KAAK,MAAM,GAAM,EAAE,OAAO,MAAM;CAClE,OACE,kBAAC,GAAD;EAAkB,WAAW,EAAG,WAAW,EAAE,SAAS;EAAG,aAAW,MAAY,WAAW,kBAAkB;EAC3G,UAAA,kBAAC,GAAD;GACE,MAAM,EAAE;GACF;GACN,OAAO,EAAE;GACT,QAAQ,EAAE;GACV,MAAM,EAAE;GACR,UAAU,EAAE;GACZ,QAAQ,EAAE,UAAU,EAAE,OAAO,UAAU,GAAM,WAAW,MAAY,WAAW,QAAQ;GACvF,UAAU,EAAE;GACZ,WAAW,EAAE;GACb,aAAa,EAAE,gBAAgB,MAAY,WAAW,MAAM;GAC5D,OAAO,MAAY;GACnB,QAAQ,EAAE;GACV,UAAU,EAAE;GACZ,WAAW,EAAE,aAAa,MAAY;GACtC,QAAQ,EAAE;GAEV,UAAA,kBAAC,GAAD;IAAkB,GAAI;IAAY;GAAU,CAAA;EAClC,CAAA;CACI,CAAA;AAEtB;AAEA,SAAS,EAAiB,EAAE,YAAS,GAAG,KAA6C;CACnF,IAAM,EAAE,SAAM,EAAY,GACpB,IAAI,EAAc,GAClB,EAAE,SAAM,QAAK,SAAM,gBAAa,GAChC,IAAQ;EAAE,QAAQ,EAAE,OAAO,UAAU;EAAS,QAAQ,EAAE,MAAM;EAAQ,YAAY,EAAE,MAAM;CAAW,GACrG,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,IAAS,EAAK,QACd,IAAS,EAAE,gBAAgB,MAAY,WAAW,MAAM,MACxD,KAAU,MAAiB;EAE/B,AADA,EAAE,eAAe,GACjB,EAAY,EAAK;EACjB,IAAM,IAAI,CAAC,GAAG,EAAE,aAAa,KAAK,CAAC,CAAC,MAAM,MAAM,EAAE,KAAK,WAAW,QAAQ,CAAC,KAAK,EAAE,aAAa,MAAM;EACrG,AAAI,KAAG,EAAE,KAAK,CAAC;CACjB,GAEM,IACJ,EAAE,SAAS,MAAY,WAAW,EAAE,eAAe,EAAE,MAAM,EAAO,CAAC,IAAI,EAAE,cAAc;EAAE,OAAO;EAAQ,QAAQ,KAAK,MAAM,KAAU,EAAM,CAAM,KAAK,EAAE;CAAE,CAAC,IACvJ,IAAQ,EAAE,SAAS,EAAE,MAAY,WAAW,iBAAiB,aAAa,GAG1E,KAAW,MACf,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAQ,SAAS,KAAW,IAAM,cAAc;GAAW,MAAK;GAAe;GAAU,SAAS,EAAE;GAAQ,aAAU;GAAtH,UAAA,CACE,kBAAC,GAAD;IAAe,MAAM,IAAO,IAAgB;IAAc,aAAa;IAAG,aAAU;IAAe,WAAW,IAAO,iBAAiB,KAAA;GAAY,CAAA,GAC3I,EAAN,IAAQ,kBAAqB,eAAe,CACvC;;EACP,KAAO,EAAK,aACX,kBAAC,GAAD;GAAQ,SAAS,IAAU,cAAc;GAAS,MAAK;GAAe;GAAU,SAAS,EAAE;GAAQ,aAAU;GAA7G,UAAA,CACE,kBAAC,GAAD;IAAe,MAAM;IAAU,aAAa;IAAG,aAAU;GAAgB,CAAA,GACxE,EAAE,iBAAiB,CACd;;EAET,KAAO,EAAE,aACR,kBAAC,GAAD;GAAQ,SAAS,IAAU,cAAc;GAAS,MAAK;GAAe;GAAU,SAAS,EAAE;GAAQ,aAAU;GAA7G,UAAA,CACE,kBAAC,GAAD;IAAe,MAAM;IAAc,aAAa;IAAG,aAAU;GAAgB,CAAA,GAC5E,EAAE,eAAe,CACZ;;CAEV,EAAA,CAAA;CAGJ,OAAO,MAAY,WACjB,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAW,OAAO,IAAM,IAAQ;IAAM,OAAA;IAAM,YAAY,EAAE,cAAc;IAAG,WAAU;GAAuC,CAAA,GAC3H,KAAQ,kBAAC,GAAD;IAAa,OAAA;IAAM,OAAO,EAAE,EAAK,WAAW,aAAa,sBAAsB,eAAe;GAAI,CAAA,CACxG;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAe,UAAA;IAAW,CAAA;IACzC,kBAAC,OAAD;KAAK,WAAU;KAAiC,UAAA;IAAU,CAAA;IAC1D,kBAAC,OAAD;KAAK,WAAU;KAA+B,UAAA,EAAQ,EAAK;IAAO,CAAA;IAClE,kBAAC,GAAD,CAAgB,CAAA;GACb;EACF,CAAA,CAAA;CAEL,CAAA,IAAA,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,OAAD;IACE,WAAW,EACT,+FACA,KAAY,kBACd;IACA,aAAa,MAAM;KAEjB,AADA,EAAE,eAAe,GACZ,KAAU,EAAY,EAAI;IACjC;IACA,mBAAmB,EAAY,EAAK;IAC5B;IAVV,UAAA;KAYE,kBAAC,GAAD;MACE,OAAO,IAAM,IAAQ;MACb;MACR,WAAU;MACV,UACE,kBAAC,OAAD;OAAK,cAAY,EAAE,aAAa;OAAG,MAAK;OAAQ,WAAU;OAA1D,UAAA;QACE,kBAAC,GAAD;SAAe,MAAM;SAAmB,aAAa;SAAK,WAAU;QAAgC,CAAA;QACpG,kBAAC,QAAD;SAAM,WAAU;SAAiD,UAAA,EAAE,YAAY;QAAQ,CAAA;QACvF,kBAAC,OAAD;SAAK,WAAU;SAAmB,UAAA,EAAQ,EAAK;QAAO,CAAA;OACnD;;KAER,CAAA;KACA,KAAQ,kBAAC,GAAD,EAAa,OAAO,EAAE,EAAK,WAAW,aAAa,sBAAsB,eAAe,EAAI,CAAA;KACpG,KACC,kBAAC,OAAD;MAAK,WAAU;MACZ,UAAA,EAAQ,EAAI;KACV,CAAA;IAEJ;;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAe,UAAA;KAAW,CAAA,GACzC,kBAAC,OAAD;MAAK,WAAU;MAA6C,UAAA;KAAU,CAAA,CACnE;IACJ,CAAA,GAAA,KAAO,kBAAC,OAAD;KAAK,WAAU;KAAwB,UAAA,EAAQ,EAAK;IAAO,CAAA,CAChE;;GACL,kBAAC,GAAD,CAAgB,CAAA;EACb;;AAET;AAEA,SAAS,EAAY,EAAE,UAAO,YAA6C;CACzE,OACE,kBAAC,OAAD;EAAK,MAAK;EAAS,cAAY;EAAO,WAAW,EAAG,0FAA0F,KAAS,cAAc;EACnK,UAAA,kBAAC,GAAD;GAAe,MAAM;GAAe,aAAa;GAAG,WAAU;EAAuC,CAAA;CAClG,CAAA;AAET"}
+{"version":3,"file":"slot-upload.js","names":[],"sources":["../../src/components/slot-upload.tsx"],"sourcesContent":["import { ratio, type AspectRatio } from \"../client/aspect.js\";\nimport { Camera01Icon, CropIcon, Delete02Icon, ImageUpload01Icon, Loading03Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useState, type DragEvent, type ReactNode } from \"react\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport type { CropSource } from \"../client/image.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\nimport type { PublicPreset } from \"../client/public.js\";\nimport type { FileInfo, ReadResult, RefBody } from \"../client/generated/wire.js\";\nimport { presetFor } from \"../client/media/rules.js\";\nimport { useKinds } from \"../react/groups.js\";\nimport { usePresets } from \"../react/public.js\";\nimport { useContentScope } from \"../react/use-resource.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { SlotEditError, SlotEditor, useSlotEditor } from \"./slot-editor.js\";\nimport { SlotImage } from \"./slot-image.js\";\n\nexport interface SlotUploadProps {\n  /** The item that owns the upload; an AvatarUpload's default is the viewer's avatar (the content model's `avatars`), on whichever site holds it. */\n  item?: RefBody;\n  /** The upload path; default \"avatar\" or \"cover\". */\n  path?: string;\n  /** The public preset showing it. */\n  image?: PublicPreset | null;\n  client?: ContentKitClient;\n  /** An editor read of the item from the host; otherwise fetched. */\n  read?: ReadResult | null;\n  /** Called with the processed upload after every save, null after a removal. */\n  onChange?: (file: FileInfo | null) => void;\n  /** The output's \"W:H\"; default the preset's aspect, else \"1:1\" (avatar) or \"3:1\" (cover). */\n  aspect?: AspectRatio;\n  /** The narrowest edit the server accepts (the preset's Image.MinWidth). */\n  minWidth?: number;\n  /** \"reject\" refuses animated images before uploading. */\n  animation?: \"reject\";\n  /** Crops narrower than this many source pixels get a sharpness warning; default 512 (avatar) or 3000 (cover). */\n  targetWidth?: number;\n  /** `accept` of the file input. Default \"image/*\". */\n  accept?: string;\n  disabled?: boolean;\n  /** Offers Remove once set; default true for avatars, false for covers. */\n  removable?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  className?: string;\n  /** Replaces decodeImage (tests). */\n  decode?: (file: File) => Promise<CropSource>;\n}\n\ntype Variant = \"avatar\" | \"cover\";\n\n/** Round 1:1 avatar field: image, label, hint, Change / Edit crop, crop dialog, progress, errors. For custom layouts use SlotEditor. */\nexport function AvatarUpload(p: SlotUploadProps) {\n  return <SlotUpload {...p} variant=\"avatar\" />;\n}\n\n/** Wide cover field at the preset's aspect (e.g. 3:1), with drop-to-upload. For custom layouts use SlotEditor. */\nexport function CoverUpload(p: SlotUploadProps) {\n  return <SlotUpload {...p} variant=\"cover\" />;\n}\n\nfunction SlotUpload({ variant, ...p }: SlotUploadProps & { variant: Variant }) {\n  const path = p.path ?? variant;\n  const { presets } = usePresets({ client: p.client });\n  const { kinds } = useKinds({ client: p.client });\n  const { viewer } = useContentScope(p.client);\n  // Another site's avatars: the site forwards their writes, and its presets lack the kind.\n  const avatars = variant === \"avatar\" ? kinds?.avatars : undefined;\n  const item = p.item ?? (avatars && viewer ? { kind: avatars.kind, id: viewer } : undefined);\n  const rule = item && (presetFor(presets, item.kind, path, p.image?.preset) ?? (avatars?.kind === item.kind ? avatars : undefined));\n  if (!item) return null;\n  return (\n    <ContentKitUiRoot className={cn(\"text-sm\", p.className)} data-ckui={variant === \"avatar\" ? \"avatar-upload\" : \"cover-upload\"}>\n      <SlotEditor\n        item={item}\n        path={path}\n        image={p.image}\n        client={p.client}\n        read={p.read}\n        onChange={p.onChange}\n        aspect={p.aspect || p.image?.aspect || rule?.aspect || (variant === \"avatar\" ? \"1:1\" : \"3:1\")}\n        minWidth={p.minWidth}\n        animation={p.animation}\n        targetWidth={p.targetWidth ?? (variant === \"avatar\" ? 512 : 3000)}\n        round={variant === \"avatar\"}\n        accept={p.accept}\n        disabled={p.disabled}\n        removable={p.removable ?? variant === \"avatar\"}\n        decode={p.decode}\n      >\n        <SlotUploadLayout {...p} variant={variant} />\n      </SlotEditor>\n    </ContentKitUiRoot>\n  );\n}\n\nfunction SlotUploadLayout({ variant, ...p }: SlotUploadProps & { variant: Variant }) {\n  const { t } = useMessages();\n  const s = useSlotEditor();\n  const { crop, has, busy, disabled } = s;\n  const image = { preset: p.image?.preset ?? variant, aspect: s.image.aspect, renditions: s.image.renditions };\n  const [dragging, setDragging] = useState(false);\n  const aspect = crop.aspect;\n  const target = p.targetWidth ?? (variant === \"avatar\" ? 512 : 3000);\n  const onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    setDragging(false);\n    const f = [...e.dataTransfer.files].find((f) => f.type.startsWith(\"image/\")) ?? e.dataTransfer.files[0];\n    if (f) s.pick(f);\n  };\n\n  const hint =\n    p.hint ?? (variant === \"avatar\" ? t(\"avatar.hint\", { size: target }) : t(\"cover.hint\", { width: target, height: Math.round(target / (ratio(aspect) ?? 3)) }));\n  const label = p.label ?? t(variant === \"avatar\" ? \"avatar.label\" : \"cover.label\");\n\n  // overlay: buttons on top of the cover image; otherwise a plain row.\n  const actions = (overlay: boolean) => (\n    <>\n      <Button variant={overlay && has ? \"secondary\" : \"outline\"} size=\"sm\" disabled={disabled} onClick={s.choose} data-ckui=\"change\">\n        <HugeiconsIcon icon={busy ? Loading03Icon : Camera01Icon} strokeWidth={2} data-icon=\"inline-start\" className={busy ? \"animate-spin\" : undefined} />\n        {has ? t(\"common.change\") : t(\"common.upload\")}\n      </Button>\n      {has && crop.canRecrop && (\n        <Button variant={overlay ? \"secondary\" : \"ghost\"} size=\"sm\" disabled={disabled} onClick={s.recrop} data-ckui=\"edit-crop\">\n          <HugeiconsIcon icon={CropIcon} strokeWidth={2} data-icon=\"inline-start\" />\n          {t(\"common.editCrop\")}\n        </Button>\n      )}\n      {has && s.removable && (\n        <Button variant={overlay ? \"secondary\" : \"ghost\"} size=\"sm\" disabled={disabled} onClick={s.remove} data-ckui=\"remove\">\n          <HugeiconsIcon icon={Delete02Icon} strokeWidth={2} data-icon=\"inline-start\" />\n          {t(\"common.remove\")}\n        </Button>\n      )}\n    </>\n  );\n\n  return variant === \"avatar\" ? (\n    <div className=\"flex items-center gap-4\">\n      <div className=\"relative size-20 shrink-0\">\n        <SlotImage image={has ? image : null} round emptyLabel={t(\"avatar.empty\")} className=\"size-full ring-1 ring-foreground/10\" />\n        {busy && <BusyOverlay round label={t(crop.status === \"decoding\" ? \"progress.decoding\" : \"common.saving\")} />}\n      </div>\n      <div className=\"grid min-w-0 gap-1\">\n        <div className=\"font-medium\">{label}</div>\n        <div className=\"text-xs text-muted-foreground\">{hint}</div>\n        <div className=\"mt-1.5 flex flex-wrap gap-2\">{actions(false)}</div>\n        <SlotEditError />\n      </div>\n    </div>\n  ) : (\n    <div className=\"grid gap-2\">\n      <div\n        className={cn(\n          \"group/cover relative overflow-hidden rounded-xl ring-1 ring-foreground/10 transition-shadow\",\n          dragging && \"ring-2 ring-ring\",\n        )}\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => setDragging(false)}\n        onDrop={onDrop}\n      >\n        <SlotImage\n          image={has ? image : null}\n          aspect={aspect}\n          className=\"w-full rounded-none\"\n          fallback={\n            <div aria-label={t(\"cover.empty\")} role=\"group\" className=\"absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-[repeating-linear-gradient(135deg,transparent_0_10px,color-mix(in_oklch,var(--ckui-foreground)_3%,transparent)_10px_20px)] p-4 text-center\">\n              <HugeiconsIcon icon={ImageUpload01Icon} strokeWidth={1.5} className=\"size-7 text-muted-foreground\" />\n              <span className=\"hidden text-xs text-muted-foreground sm:block\">{t(\"cover.drop\")}</span>\n              <div className=\"mt-1 flex gap-2\">{actions(false)}</div>\n            </div>\n          }\n        />\n        {busy && <BusyOverlay label={t(crop.status === \"decoding\" ? \"progress.decoding\" : \"common.saving\")} />}\n        {has && (\n          <div className=\"absolute right-2 bottom-2 flex gap-2 max-sm:hidden [&_button]:bg-background/80 [&_button]:backdrop-blur-sm\">\n            {actions(true)}\n          </div>\n        )}\n      </div>\n      <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n        <div className=\"grid min-w-0 gap-0.5 sm:flex sm:flex-1 sm:items-baseline sm:justify-between sm:gap-3\">\n          <div className=\"font-medium\">{label}</div>\n          <div className=\"text-xs text-muted-foreground sm:truncate\">{hint}</div>\n        </div>\n        {has && <div className=\"flex gap-2 sm:hidden\">{actions(false)}</div>}\n      </div>\n      <SlotEditError />\n    </div>\n  );\n}\n\nfunction BusyOverlay({ round, label }: { round?: boolean; label: string }) {\n  return (\n    <div role=\"status\" aria-label={label} className={cn(\"absolute inset-0 flex items-center justify-center bg-background/60 backdrop-blur-[1px]\", round && \"rounded-full\")}>\n      <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} className=\"size-5 animate-spin text-foreground\" />\n    </div>\n  );\n}\n"],"mappings":"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"}