@openrails/contentkit-ui 0.85.1 → 0.86.0

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":"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"}
+{"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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"}

package/dist/components/social/bans.js

@@ -1,10 +1,10 @@
 import { useMessages as e } from "../../i18n/context.js";
 import { ContentKitUiRoot as t } from "../../scope.js";
 import { useContentKitClient as n } from "../../react/context.js";
-import { Alert as r, AlertDescription as i } from "../../ui/alert.js";
-import { Button as a } from "../../ui/button.js";
-import { Dialog as o, DialogContent as s, DialogDescription as c, DialogFooter as l, DialogHeader as u, DialogTitle as d } from "../../ui/dialog.js";
-import { keyOf as f, useContentScope as p, usePaged as m } from "../../react/use-resource.js";
+import { keyOf as r, useContentScope as i, usePaged as a } from "../../react/use-resource.js";
+import { Alert as o, AlertDescription as s } from "../../ui/alert.js";
+import { Button as c } from "../../ui/button.js";
+import { Dialog as l, DialogContent as u, DialogDescription as d, DialogFooter as f, DialogHeader as p, DialogTitle as m } from "../../ui/dialog.js";
 import { Badge as h } from "../../ui/badge.js";
 import { Input as g } from "../../ui/input.js";
 import { Label as _ } from "../../ui/label.js";
@@ -16,20 +16,20 @@ import { jsx as A, jsxs as j } from "react/jsx-runtime";
 import { cn as M } from "cn";
 //#region src/components/social/bans.tsx
 function N({ ban: t, className: n }) {
-	let a = e(), { t: o } = a;
-	return /* @__PURE__ */ A(r, {
+	let r = e(), { t: i } = r;
+	return /* @__PURE__ */ A(o, {
 		variant: "destructive",
 		className: n,
 		"data-ckui": "ban-notice",
-		children: /* @__PURE__ */ j(i, {
+		children: /* @__PURE__ */ j(s, {
 			className: "grid gap-1",
 			children: [
 				/* @__PURE__ */ A("p", {
 					className: "font-medium",
-					children: o(t.scope === "global" ? "bans.globalNotice" : "bans.ownerNotice")
+					children: i(t.scope === "global" ? "bans.globalNotice" : "bans.ownerNotice")
 				}),
-				t.reason && /* @__PURE__ */ A("p", { children: o("bans.reason", { reason: t.reason }) }),
-				/* @__PURE__ */ A("p", { children: t.until ? o("bans.until", { date: C(a, t.until) }) : o("bans.untilLifted") })
+				t.reason && /* @__PURE__ */ A("p", { children: i("bans.reason", { reason: t.reason }) }),
+				/* @__PURE__ */ A("p", { children: t.until ? i("bans.until", { date: C(r, t.until) }) : i("bans.untilLifted") })
 			]
 		})
 	});
@@ -45,37 +45,37 @@ function I(e) {
 	let t = (e) => String(e).padStart(2, "0");
 	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}T${t(e.getHours())}:${t(e.getMinutes())}`;
 }
-function L({ open: t, onOpenChange: r, user: i, scopes: f, ban: p, onSaved: m, client: h, onError: y }) {
-	let { t: x } = e(), S = n(h), C = O(), T = p ? p.scope === "global" ? "global" : "owner" : f[0] ?? "owner", [E, M] = k(T), [N, L] = k(p ? p.until ? "custom" : "forever" : "week"), [R, z] = k(p?.until ? I(new Date(p.until)) : I(new Date(Date.now() + 7 * P))), [B, V] = k(p?.reason ?? ""), { run: H, pending: U, error: W, setError: G } = w("ban.save", y);
+function L({ open: t, onOpenChange: r, user: i, scopes: a, ban: o, onSaved: s, client: h, onError: y }) {
+	let { t: x } = e(), S = n(h), C = O(), T = o ? o.scope === "global" ? "global" : "owner" : a[0] ?? "owner", [E, M] = k(T), [N, L] = k(o ? o.until ? "custom" : "forever" : "week"), [R, z] = k(o?.until ? I(new Date(o.until)) : I(new Date(Date.now() + 7 * P))), [B, V] = k(o?.reason ?? ""), { run: H, pending: U, error: W, setError: G } = w("ban.save", y);
 	D(() => {
-		t && (M(T), L(p ? p.until ? "custom" : "forever" : "week"), z(p?.until ? I(new Date(p.until)) : I(new Date(Date.now() + 7 * P))), V(p?.reason ?? ""), G(null));
+		t && (M(T), L(o ? o.until ? "custom" : "forever" : "week"), z(o?.until ? I(new Date(o.until)) : I(new Date(Date.now() + 7 * P))), V(o?.reason ?? ""), G(null));
 	}, [t]);
 	let K = i.name ?? i.id, q = async () => {
 		let e = N === "forever" ? void 0 : N === "custom" ? new Date(R) : new Date(Date.now() + F[N]), t = await H(() => S.bans.ban(E, i.id, {
 			reason: B.trim() || void 0,
 			until: e?.toISOString()
 		}));
-		t && (m?.(t), r(!1));
+		t && (s?.(t), r(!1));
 	};
-	return /* @__PURE__ */ A(o, {
+	return /* @__PURE__ */ A(l, {
 		open: t,
 		onOpenChange: r,
-		children: /* @__PURE__ */ j(s, {
+		children: /* @__PURE__ */ j(u, {
 			"data-ckui": "comment-ban-dialog",
-			children: [/* @__PURE__ */ j(u, { children: [/* @__PURE__ */ A(d, { children: x("bans.title", { name: K }) }), /* @__PURE__ */ A(c, { children: x(E === "global" ? "bans.globalHelp" : "bans.ownerHelp") })] }), /* @__PURE__ */ j("form", {
+			children: [/* @__PURE__ */ j(p, { children: [/* @__PURE__ */ A(m, { children: x("bans.title", { name: K }) }), /* @__PURE__ */ A(d, { children: x(E === "global" ? "bans.globalHelp" : "bans.ownerHelp") })] }), /* @__PURE__ */ j("form", {
 				className: "grid gap-4",
 				onSubmit: (e) => {
 					e.preventDefault(), q();
 				},
 				children: [
-					f.length > 1 && !p && /* @__PURE__ */ j("fieldset", {
+					a.length > 1 && !o && /* @__PURE__ */ j("fieldset", {
 						className: "grid gap-2",
 						children: [/* @__PURE__ */ A("legend", {
 							className: "mb-1 text-sm font-medium",
 							children: x("bans.scope")
 						}), /* @__PURE__ */ A("div", {
 							className: "flex flex-wrap gap-2",
-							children: f.map((e) => /* @__PURE__ */ A(a, {
+							children: a.map((e) => /* @__PURE__ */ A(c, {
 								type: "button",
 								size: "sm",
 								variant: E === e ? "default" : "outline",
@@ -100,7 +100,7 @@ function L({ open: t, onOpenChange: r, user: i, scopes: f, ban: p, onSaved: m, c
 									"month",
 									"forever",
 									"custom"
-								].map((e) => /* @__PURE__ */ A(a, {
+								].map((e) => /* @__PURE__ */ A(c, {
 									type: "button",
 									size: "sm",
 									variant: N === e ? "default" : "outline",
@@ -140,33 +140,33 @@ function L({ open: t, onOpenChange: r, user: i, scopes: f, ban: p, onSaved: m, c
 						})]
 					}),
 					/* @__PURE__ */ A(b, { error: W }),
-					/* @__PURE__ */ j(l, { children: [/* @__PURE__ */ A(a, {
+					/* @__PURE__ */ j(f, { children: [/* @__PURE__ */ A(c, {
 						type: "button",
 						variant: "outline",
 						onClick: () => r(!1),
 						children: x("common.cancel")
-					}), /* @__PURE__ */ A(a, {
+					}), /* @__PURE__ */ A(c, {
 						type: "submit",
 						variant: "destructive",
 						disabled: U,
-						children: x(U ? "common.saving" : p ? "bans.update" : "bans.save")
+						children: x(U ? "common.saving" : o ? "bans.update" : "bans.save")
 					})] })
 				]
 			})]
 		})
 	});
 }
-function R({ scope: n = "global", pageSize: r = 25, page: i, onPageChange: o, userHref: s, client: c, onError: l, className: u, appearance: d }) {
-	let v = e(), { t: D } = v, { client: N, store: P, scope: F } = p(c), [I, R] = k(1), z = i ?? I, B = (e) => o ? o(e) : R(e), V = m(P, f("bans-page", F, n, r), {
+function R({ scope: n = "global", pageSize: o = 25, page: s, onPageChange: l, userHref: u, client: d, onError: f, className: p, appearance: m }) {
+	let v = e(), { t: D } = v, { client: N, store: P, scope: F } = i(d), [I, R] = k(1), z = s ?? I, B = (e) => l ? l(e) : R(e), V = a(P, r("bans-page", F, n, o), {
 		type: "bans",
 		scope: n
-	}, z, r, async (e, t) => (await N.bans.list(n, e, t)).map((e) => ({
+	}, z, o, async (e, t) => (await N.bans.list(n, e, t)).map((e) => ({
 		...e,
 		id: e.user_id
-	}))), H = O(), [U, W] = k(null), [G, K] = k(null), [q, J] = k(""), Y = w("ban.lift", l);
+	}))), H = O(), [U, W] = k(null), [G, K] = k(null), [q, J] = k(""), Y = w("ban.lift", f);
 	return /* @__PURE__ */ j(t, {
-		appearance: d,
-		className: M("grid gap-4 text-sm", u),
+		appearance: m,
+		className: M("grid gap-4 text-sm", p),
 		"data-ckui": "comment-bans",
 		children: [
 			/* @__PURE__ */ j("form", {
@@ -185,7 +185,7 @@ function R({ scope: n = "global", pageSize: r = 25, page: i, onPageChange: o, us
 						placeholder: D("bans.userPlaceholder"),
 						onChange: (e) => J(e.target.value)
 					})]
-				}), /* @__PURE__ */ A(a, {
+				}), /* @__PURE__ */ A(c, {
 					type: "submit",
 					variant: "outline",
 					disabled: !q.trim(),
@@ -221,7 +221,7 @@ function R({ scope: n = "global", pageSize: r = 25, page: i, onPageChange: o, us
 										children: [/* @__PURE__ */ A(S, {
 											user: e.user,
 											name: t,
-											href: s
+											href: u
 										}), /* @__PURE__ */ A(h, {
 											variant: e.expired ? "outline" : "destructive",
 											children: D(e.expired ? "bans.expired" : "bans.active")
@@ -243,7 +243,7 @@ function R({ scope: n = "global", pageSize: r = 25, page: i, onPageChange: o, us
 							}),
 							/* @__PURE__ */ j("div", {
 								className: "flex gap-2",
-								children: [/* @__PURE__ */ A(a, {
+								children: [/* @__PURE__ */ A(c, {
 									size: "sm",
 									variant: "outline",
 									onClick: () => W({
@@ -254,7 +254,7 @@ function R({ scope: n = "global", pageSize: r = 25, page: i, onPageChange: o, us
 										ban: e
 									}),
 									children: D("bans.update")
-								}), /* @__PURE__ */ A(a, {
+								}), /* @__PURE__ */ A(c, {
 									size: "sm",
 									variant: "destructive",
 									onClick: () => K(e),
@@ -278,7 +278,7 @@ function R({ scope: n = "global", pageSize: r = 25, page: i, onPageChange: o, us
 				scopes: [n],
 				ban: U.ban,
 				client: N,
-				onError: l,
+				onError: f,
 				onSaved: () => J("")
 			}),
 			/* @__PURE__ */ A(y, {