@openrails/contentkit-ui 0.72.0 → 0.74.0

package/dist/components/admin/upload-queue.js

@@ -0,0 +1,365 @@
+import { toContentKitError as e } from "../../client/errors.js";
+import { samePath as t } from "../../client/media/client.js";
+import { megabytes as n } from "../../i18n/messages.js";
+import { useMessages as r } from "../../i18n/context.js";
+import { useErrorReporter as i, useGuarded as a } from "../../react/context.js";
+import { Button as o } from "../../ui/button.js";
+import { Badge as s } from "../../ui/badge.js";
+import { ErrorLine as c } from "../social/parts.js";
+import { AdminRoot as l } from "./shell.js";
+import { useFlowClient as u } from "../../react/admin.js";
+import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { cn as v } from "cn";
+//#region src/components/admin/upload-queue.tsx
+var y = [
+	"creating",
+	"uploading",
+	"committing"
+], b = (e) => `${e.name}\u0000${e.size}\u0000${e.lastModified}`, x = 0;
+function S(e) {
+	try {
+		return JSON.parse(localStorage.getItem(e) ?? "{}");
+	} catch {
+		return {};
+	}
+}
+function C(e, t) {
+	try {
+		let n = S(e);
+		t(n), Object.keys(n).length ? localStorage.setItem(e, JSON.stringify(n)) : localStorage.removeItem(e);
+	} catch {}
+}
+function w({ client: e, baseUrl: t, auth: n, guard: r, appearance: i, className: a, language: o, messages: s, ...c }) {
+	let d = u({
+		client: e,
+		baseUrl: t,
+		auth: n
+	});
+	return /* @__PURE__ */ g(l, {
+		flow: "upload-queue",
+		appearance: i,
+		className: a,
+		language: o,
+		messages: s,
+		guard: r,
+		children: /* @__PURE__ */ g(T, {
+			...c,
+			client: d
+		})
+	});
+}
+function T({ client: l, createItem: u, path: w = "source", accept: T, concurrency: E = 2, onUploaded: D, storageKey: O = "ckui.uploads", onError: k }) {
+	let A = r(), { t: j } = A, M = i(k), N = a(), [P, F] = m([]), [I, L] = m(() => Object.values(S(O))), [R, z] = m(!1), B = p(null), V = p(/* @__PURE__ */ new Map()), H = p({
+		createItem: u,
+		onUploaded: D
+	});
+	f(() => {
+		H.current = {
+			createItem: u,
+			onUploaded: D
+		};
+	});
+	let U = d((e, t) => F((n) => n.map((n) => n.id === e ? {
+		...n,
+		...t
+	} : n)), []), W = d(async (n) => {
+		let r = new AbortController();
+		V.current.set(n.id, r);
+		let i = S(O)[n.key];
+		try {
+			let a = n.ref ?? i?.ref;
+			if (!a) {
+				U(n.id, {
+					status: "creating",
+					error: void 0
+				}), a = await H.current.createItem(n.file);
+				let e = a;
+				C(O, (t) => void (t[n.key] = {
+					ref: e,
+					name: n.file.name,
+					size: n.file.size
+				}));
+			}
+			let o = a;
+			U(n.id, {
+				status: "uploading",
+				ref: a,
+				error: void 0
+			});
+			let s = {
+				ref: a,
+				path: w,
+				signal: r.signal,
+				onProgress: (e) => U(n.id, { progress: e }),
+				onState: (e) => C(O, (t) => void (t[n.key] = {
+					ref: o,
+					name: n.file.name,
+					size: n.file.size,
+					state: e ?? void 0
+				}))
+			}, c = await N(async () => {
+				try {
+					return await l.media.upload(n.file, {
+						...s,
+						resume: i?.state
+					});
+				} catch (t) {
+					if (i?.state && e(t).code === "resume_mismatch") return l.media.upload(n.file, s);
+					throw t;
+				}
+			});
+			U(n.id, { status: "committing" });
+			let u = await N(() => l.media.commit(o, [{
+				op: "put",
+				path: c.path,
+				blob: c.blob
+			}], { signal: r.signal }));
+			C(O, (e) => void delete e[n.key]), U(n.id, {
+				status: "done",
+				progress: void 0
+			});
+			let d = u.find((e) => t(e.path, c.path));
+			d && H.current.onUploaded?.(o, d);
+		} catch (t) {
+			let r = e(t);
+			r.code === "aborted" ? U(n.id, { status: "paused" }) : (U(n.id, {
+				status: "failed",
+				error: r
+			}), M(r, "upload", n.file.name));
+		} finally {
+			V.current.delete(n.id);
+		}
+	}, [
+		l,
+		w,
+		O,
+		N,
+		U,
+		M
+	]);
+	f(() => {
+		let e = P.filter((e) => y.includes(e.status)).length, t = P.filter((e) => e.status === "queued").slice(0, Math.max(0, E - e));
+		if (t.length) {
+			F((e) => e.map((e) => t.some((t) => t.id === e.id) ? {
+				...e,
+				status: "creating"
+			} : e));
+			for (let e of t) W(e);
+		}
+	}, [
+		P,
+		E,
+		W
+	]);
+	let G = P.some((e) => y.includes(e.status) || e.status === "queued");
+	f(() => {
+		if (!G) return;
+		let e = (e) => {
+			e.preventDefault(), e.returnValue = "";
+		};
+		return addEventListener("beforeunload", e), () => removeEventListener("beforeunload", e);
+	}, [G]), f(() => {
+		let e = V.current;
+		return () => {
+			for (let t of e.values()) t.abort();
+		};
+	}, []);
+	let K = (e) => {
+		let t = S(O), n = [];
+		for (let r of e) {
+			let e = b(r);
+			P.some((t) => t.key === e && t.status !== "done") || n.some((t) => t.key === e) || n.push({
+				id: `u${++x}`,
+				file: r,
+				key: e,
+				status: "queued",
+				ref: t[e]?.ref,
+				resumed: !!t[e]
+			});
+		}
+		n.length && (L((e) => e.filter((e) => !n.some((t) => t.file.name === e.name && t.file.size === e.size))), F((e) => [...e, ...n]));
+	}, q = (e) => {
+		for (let [t, n] of V.current) (!e || t === e) && n.abort();
+		F((t) => t.map((t) => t.status === "queued" && (!e || t.id === e) ? {
+			...t,
+			status: "paused"
+		} : t));
+	}, J = (e) => F((t) => t.map((t) => (t.status === "paused" || t.status === "failed") && (!e || t.id === e) ? {
+		...t,
+		status: "queued",
+		error: void 0
+	} : t)), Y = (e) => {
+		V.current.get(e.id)?.abort(), e.status !== "done" && C(O, (t) => void delete t[e.key]), F((t) => t.filter((t) => t.id !== e.id));
+	}, X = (e) => {
+		C(O, (t) => {
+			for (let [n, r] of Object.entries(t)) r.name === e.name && r.size === e.size && delete t[n];
+		}), L((t) => t.filter((t) => t !== e));
+	}, Z = P.filter((e) => e.status === "done").length, Q = P.some((e) => y.includes(e.status) || e.status === "queued"), ee = P.some((e) => e.status === "paused" || e.status === "failed"), $ = (e) => e.progress?.total ? Math.round(e.progress.loaded / e.progress.total * 100) : 0;
+	return /* @__PURE__ */ _(h, { children: [
+		/* @__PURE__ */ _("div", {
+			className: v("grid justify-items-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors", R && "border-primary bg-accent"),
+			"data-ckui": "upload-drop",
+			onDragOver: (e) => {
+				e.preventDefault(), z(!0);
+			},
+			onDragLeave: () => z(!1),
+			onDrop: (e) => {
+				e.preventDefault(), z(!1), K(e.dataTransfer.files);
+			},
+			children: [
+				/* @__PURE__ */ g("p", {
+					className: "text-muted-foreground",
+					children: j("uploadQueue.drop")
+				}),
+				/* @__PURE__ */ g(o, {
+					size: "sm",
+					onClick: () => B.current?.click(),
+					children: j("uploadQueue.add")
+				}),
+				/* @__PURE__ */ g("input", {
+					ref: B,
+					type: "file",
+					multiple: !0,
+					hidden: !0,
+					accept: T,
+					"aria-label": j("uploadQueue.add"),
+					onChange: (e) => {
+						K(e.target.files ?? []), e.target.value = "";
+					}
+				})
+			]
+		}),
+		I.length > 0 && /* @__PURE__ */ _("div", {
+			className: "grid gap-2 rounded-lg border border-border p-3",
+			"data-ckui": "upload-waiting",
+			role: "status",
+			children: [
+				/* @__PURE__ */ g("p", {
+					className: "font-medium",
+					children: j("uploadQueue.unfinished")
+				}),
+				/* @__PURE__ */ g("ul", {
+					className: "grid gap-1",
+					children: I.map((e) => /* @__PURE__ */ _("li", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ g("span", {
+								className: "min-w-0 flex-1 break-all",
+								children: e.name
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "text-xs text-muted-foreground",
+								children: n(e.size)
+							}),
+							/* @__PURE__ */ g(o, {
+								size: "xs",
+								variant: "ghost",
+								onClick: () => X(e),
+								children: j("uploadQueue.forget")
+							})
+						]
+					}, `${e.name}:${e.size}`))
+				}),
+				/* @__PURE__ */ g("p", {
+					className: "text-xs text-muted-foreground",
+					children: j("uploadQueue.unfinishedHint")
+				})
+			]
+		}),
+		P.length > 0 && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ g("p", {
+				className: "text-muted-foreground",
+				"aria-live": "polite",
+				children: j("uploadQueue.summary", {
+					done: Z,
+					total: P.length
+				})
+			}), /* @__PURE__ */ _("div", {
+				className: "ms-auto flex gap-2",
+				children: [Q && /* @__PURE__ */ g(o, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => q(),
+					children: j("uploadQueue.pauseAll")
+				}), ee && /* @__PURE__ */ g(o, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => J(),
+					children: j("uploadQueue.resumeAll")
+				})]
+			})]
+		}), /* @__PURE__ */ g("ul", {
+			className: "grid divide-y divide-border rounded-lg border border-border",
+			children: P.map((e) => /* @__PURE__ */ _("li", {
+				className: "grid gap-1.5 p-3",
+				"data-ckui": "upload-entry",
+				"data-status": e.status,
+				children: [
+					/* @__PURE__ */ _("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ g("span", {
+								className: "min-w-0 flex-1 font-medium break-all",
+								children: e.file.name
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "text-xs text-muted-foreground",
+								children: n(e.file.size)
+							}),
+							e.resumed && e.status !== "done" && /* @__PURE__ */ g(s, {
+								variant: "secondary",
+								children: j("uploadQueue.resumed")
+							}),
+							/* @__PURE__ */ g(s, {
+								variant: e.status === "failed" ? "destructive" : e.status === "done" ? "outline" : "secondary",
+								children: j(`uploadQueue.${e.status}`)
+							})
+						]
+					}),
+					e.status === "uploading" && /* @__PURE__ */ g("div", {
+						className: "h-1.5 overflow-hidden rounded-full bg-muted",
+						role: "progressbar",
+						"aria-label": e.file.name,
+						"aria-valuenow": $(e),
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						children: /* @__PURE__ */ g("div", {
+							className: "h-full bg-primary transition-[width]",
+							style: { width: `${$(e)}%` }
+						})
+					}),
+					e.error && /* @__PURE__ */ g(c, { children: A.error(e.error) }),
+					/* @__PURE__ */ _("div", {
+						className: "flex flex-wrap gap-2",
+						children: [
+							(y.includes(e.status) || e.status === "queued") && /* @__PURE__ */ g(o, {
+								size: "xs",
+								variant: "ghost",
+								onClick: () => q(e.id),
+								children: j("uploadQueue.pause")
+							}),
+							(e.status === "paused" || e.status === "failed") && /* @__PURE__ */ g(o, {
+								size: "xs",
+								variant: "outline",
+								onClick: () => J(e.id),
+								children: j(e.status === "failed" ? "common.retry" : "uploadQueue.resume")
+							}),
+							e.status !== "done" && /* @__PURE__ */ g(o, {
+								size: "xs",
+								variant: "ghost",
+								onClick: () => Y(e),
+								children: j("common.remove")
+							})
+						]
+					})
+				]
+			}, e.id))
+		})] })
+	] });
+}
+//#endregion
+export { w as UploadQueue };
+
+//# sourceMappingURL=upload-queue.js.map

package/dist/components/admin/upload-queue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-queue.js","names":[],"sources":["../../../src/components/admin/upload-queue.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { toContentKitError, type ContentKitError } from \"../../client/errors.js\";\nimport type { FileInfo, RefBody } from \"../../client/generated/wire.js\";\nimport { samePath, type Progress, type UploadState } from \"../../client/media/client.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { megabytes } from \"../../i18n/messages.js\";\nimport { useFlowClient } from \"../../react/admin.js\";\nimport { useErrorReporter, useGuarded } from \"../../react/context.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { Button } from \"#ckui/ui/button\";\nimport { ErrorLine } from \"../social/parts.js\";\nimport { AdminRoot, type AdminFlowProps } from \"./shell.js\";\n\nexport interface UploadQueueProps extends AdminFlowProps {\n  /** Makes the host's item for a file (e.g. a video record) and resolves with its ref; once per file, a reload included. */\n  createItem: (file: File) => Promise<RefBody>;\n  /** The upload path in each item. Default \"source\". */\n  path?: string;\n  /** The file picker's accept, e.g. \"video/*\". */\n  accept?: string;\n  /** Files uploading at once. Default 2. */\n  concurrency?: number;\n  /** Each committed file: its item and the upload as an editor reads it. */\n  onUploaded?: (ref: RefBody, file: FileInfo) => void;\n  /** The localStorage key unfinished uploads are kept under, to resume after a reload. Default \"ckui.uploads\". */\n  storageKey?: string;\n}\n\ntype Status = \"queued\" | \"creating\" | \"uploading\" | \"committing\" | \"done\" | \"failed\" | \"paused\";\n\ninterface Entry {\n  id: string;\n  file: File;\n  key: string;\n  status: Status;\n  progress?: Progress;\n  ref?: RefBody;\n  error?: ContentKitError;\n  /** Resumed from an upload saved before a reload. */\n  resumed?: boolean;\n}\n\ninterface Saved {\n  ref: RefBody;\n  name: string;\n  size: number;\n  state?: UploadState;\n}\n\nconst ACTIVE: readonly Status[] = [\"creating\", \"uploading\", \"committing\"];\nconst fingerprint = (f: File) => `${f.name}\\u0000${f.size}\\u0000${f.lastModified}`;\nlet seq = 0;\n\nfunction readSaved(key: string): Record<string, Saved> {\n  try {\n    return JSON.parse(localStorage.getItem(key) ?? \"{}\") as Record<string, Saved>;\n  } catch {\n    return {};\n  }\n}\n\nfunction writeSaved(key: string, fn: (all: Record<string, Saved>) => void) {\n  try {\n    const all = readSaved(key);\n    fn(all);\n    if (Object.keys(all).length) localStorage.setItem(key, JSON.stringify(all));\n    else localStorage.removeItem(key);\n  } catch {\n    // Without storage, a reload starts over.\n  }\n}\n\n/**\n * Many files, each into its own new item (createItem): uploads in the\n * background with progress, pause, retry and resume. An unfinished upload is\n * kept in localStorage; adding the same file after a reload continues it in\n * the same item. Leaving the page while files upload asks first.\n */\nexport function UploadQueue({ client: own, baseUrl, auth, guard, appearance, className, language, messages, ...p }: UploadQueueProps) {\n  const client = useFlowClient({ client: own, baseUrl, auth });\n  return (\n    <AdminRoot flow=\"upload-queue\" appearance={appearance} className={className} language={language} messages={messages} guard={guard}>\n      <Queue {...p} client={client} />\n    </AdminRoot>\n  );\n}\n\ntype Inner = Omit<UploadQueueProps, \"client\" | \"baseUrl\" | \"auth\" | \"guard\" | \"appearance\" | \"className\" | \"language\" | \"messages\"> & { client: ContentKitClient };\n\nfunction Queue({ client, createItem, path = \"source\", accept, concurrency = 2, onUploaded, storageKey = \"ckui.uploads\", onError }: Inner) {\n  const m = useMessages();\n  const { t } = m;\n  const report = useErrorReporter(onError);\n  const guarded = useGuarded();\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [waiting, setWaiting] = useState<Saved[]>(() => Object.values(readSaved(storageKey)));\n  const [over, setOver] = useState(false);\n  const input = useRef<HTMLInputElement>(null);\n  const controllers = useRef(new Map<string, AbortController>());\n  const latest = useRef({ createItem, onUploaded });\n  useEffect(() => {\n    latest.current = { createItem, onUploaded };\n  });\n\n  const patch = useCallback((id: string, next: Partial<Entry>) => setEntries((es) => es.map((e) => (e.id === id ? { ...e, ...next } : e))), []);\n\n  const run = useCallback(\n    async (entry: Entry) => {\n      const ctl = new AbortController();\n      controllers.current.set(entry.id, ctl);\n      const saved = readSaved(storageKey)[entry.key];\n      try {\n        let ref = entry.ref ?? saved?.ref;\n        if (!ref) {\n          patch(entry.id, { status: \"creating\", error: undefined });\n          ref = await latest.current.createItem(entry.file);\n          const made = ref;\n          writeSaved(storageKey, (all) => void (all[entry.key] = { ref: made, name: entry.file.name, size: entry.file.size }));\n        }\n        const target = ref;\n        patch(entry.id, { status: \"uploading\", ref, error: undefined });\n        const remember = (state: UploadState | null) =>\n          writeSaved(storageKey, (all) => void (all[entry.key] = { ref: target, name: entry.file.name, size: entry.file.size, state: state ?? undefined }));\n        const options = { ref, path, signal: ctl.signal, onProgress: (progress: Progress) => patch(entry.id, { progress }), onState: remember };\n        const up = await guarded(async () => {\n          try {\n            return await client.media.upload(entry.file, { ...options, resume: saved?.state });\n          } catch (e) {\n            if (saved?.state && toContentKitError(e).code === \"resume_mismatch\") return client.media.upload(entry.file, options);\n            throw e;\n          }\n        });\n        patch(entry.id, { status: \"committing\" });\n        const files = await guarded(() => client.media.commit(target, [{ op: \"put\", path: up.path, blob: up.blob }], { signal: ctl.signal }));\n        writeSaved(storageKey, (all) => void delete all[entry.key]);\n        patch(entry.id, { status: \"done\", progress: undefined });\n        const file = files.find((f) => samePath(f.path, up.path));\n        if (file) latest.current.onUploaded?.(target, file);\n      } catch (e) {\n        const error = toContentKitError(e);\n        if (error.code === \"aborted\") patch(entry.id, { status: \"paused\" });\n        else {\n          patch(entry.id, { status: \"failed\", error });\n          report(error, \"upload\", entry.file.name);\n        }\n      } finally {\n        controllers.current.delete(entry.id);\n      }\n    },\n    [client, path, storageKey, guarded, patch, report],\n  );\n\n  // Starts queued files while fewer than concurrency run.\n  useEffect(() => {\n    const active = entries.filter((e) => ACTIVE.includes(e.status)).length;\n    const next = entries.filter((e) => e.status === \"queued\").slice(0, Math.max(0, concurrency - active));\n    if (!next.length) return;\n    setEntries((es) => es.map((e) => (next.some((n) => n.id === e.id) ? { ...e, status: \"creating\" } : e)));\n    for (const e of next) void run(e);\n  }, [entries, concurrency, run]);\n\n  const busy = entries.some((e) => ACTIVE.includes(e.status) || e.status === \"queued\");\n  useEffect(() => {\n    if (!busy) return;\n    const ask = (e: BeforeUnloadEvent) => {\n      e.preventDefault();\n      e.returnValue = \"\";\n    };\n    addEventListener(\"beforeunload\", ask);\n    return () => removeEventListener(\"beforeunload\", ask);\n  }, [busy]);\n  useEffect(() => {\n    const running = controllers.current;\n    return () => {\n      for (const c of running.values()) c.abort();\n    };\n  }, []);\n\n  const add = (files: Iterable<File>) => {\n    const saved = readSaved(storageKey);\n    const added: Entry[] = [];\n    for (const file of files) {\n      const key = fingerprint(file);\n      if (entries.some((e) => e.key === key && e.status !== \"done\") || added.some((e) => e.key === key)) continue;\n      added.push({ id: `u${++seq}`, file, key, status: \"queued\", ref: saved[key]?.ref, resumed: !!saved[key] });\n    }\n    if (!added.length) return;\n    setWaiting((w) => w.filter((s) => !added.some((a) => a.file.name === s.name && a.file.size === s.size)));\n    setEntries((es) => [...es, ...added]);\n  };\n  const pause = (id?: string) => {\n    for (const [k, c] of controllers.current) if (!id || k === id) c.abort();\n    setEntries((es) => es.map((e) => (e.status === \"queued\" && (!id || e.id === id) ? { ...e, status: \"paused\" } : e)));\n  };\n  const resume = (id?: string) => setEntries((es) => es.map((e) => ((e.status === \"paused\" || e.status === \"failed\") && (!id || e.id === id) ? { ...e, status: \"queued\", error: undefined } : e)));\n  const remove = (entry: Entry) => {\n    controllers.current.get(entry.id)?.abort();\n    if (entry.status !== \"done\") writeSaved(storageKey, (all) => void delete all[entry.key]);\n    setEntries((es) => es.filter((e) => e.id !== entry.id));\n  };\n  const forget = (s: Saved) => {\n    writeSaved(storageKey, (all) => {\n      for (const [k, v] of Object.entries(all)) if (v.name === s.name && v.size === s.size) delete all[k];\n    });\n    setWaiting((w) => w.filter((x) => x !== s));\n  };\n\n  const done = entries.filter((e) => e.status === \"done\").length;\n  const pausable = entries.some((e) => ACTIVE.includes(e.status) || e.status === \"queued\");\n  const resumable = entries.some((e) => e.status === \"paused\" || e.status === \"failed\");\n  const percent = (e: Entry) => (e.progress?.total ? Math.round((e.progress.loaded / e.progress.total) * 100) : 0);\n  return (\n    <>\n      <div\n        className={cn(\"grid justify-items-center gap-2 rounded-lg border-2 border-dashed border-border p-6 text-center transition-colors\", over && \"border-primary bg-accent\")}\n        data-ckui=\"upload-drop\"\n        onDragOver={(e) => {\n          e.preventDefault();\n          setOver(true);\n        }}\n        onDragLeave={() => setOver(false)}\n        onDrop={(e) => {\n          e.preventDefault();\n          setOver(false);\n          add(e.dataTransfer.files);\n        }}\n      >\n        <p className=\"text-muted-foreground\">{t(\"uploadQueue.drop\")}</p>\n        <Button size=\"sm\" onClick={() => input.current?.click()}>\n          {t(\"uploadQueue.add\")}\n        </Button>\n        <input\n          ref={input}\n          type=\"file\"\n          multiple\n          hidden\n          accept={accept}\n          aria-label={t(\"uploadQueue.add\")}\n          onChange={(e) => {\n            add(e.target.files ?? []);\n            e.target.value = \"\";\n          }}\n        />\n      </div>\n      {waiting.length > 0 && (\n        <div className=\"grid gap-2 rounded-lg border border-border p-3\" data-ckui=\"upload-waiting\" role=\"status\">\n          <p className=\"font-medium\">{t(\"uploadQueue.unfinished\")}</p>\n          <ul className=\"grid gap-1\">\n            {waiting.map((s) => (\n              <li key={`${s.name}:${s.size}`} className=\"flex flex-wrap items-center gap-2\">\n                <span className=\"min-w-0 flex-1 break-all\">{s.name}</span>\n                <span className=\"text-xs text-muted-foreground\">{megabytes(s.size)}</span>\n                <Button size=\"xs\" variant=\"ghost\" onClick={() => forget(s)}>\n                  {t(\"uploadQueue.forget\")}\n                </Button>\n              </li>\n            ))}\n          </ul>\n          <p className=\"text-xs text-muted-foreground\">{t(\"uploadQueue.unfinishedHint\")}</p>\n        </div>\n      )}\n      {entries.length > 0 && (\n        <>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <p className=\"text-muted-foreground\" aria-live=\"polite\">\n              {t(\"uploadQueue.summary\", { done, total: entries.length })}\n            </p>\n            <div className=\"ms-auto flex gap-2\">\n              {pausable && (\n                <Button size=\"sm\" variant=\"outline\" onClick={() => pause()}>\n                  {t(\"uploadQueue.pauseAll\")}\n                </Button>\n              )}\n              {resumable && (\n                <Button size=\"sm\" variant=\"outline\" onClick={() => resume()}>\n                  {t(\"uploadQueue.resumeAll\")}\n                </Button>\n              )}\n            </div>\n          </div>\n          <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n            {entries.map((e) => (\n              <li key={e.id} className=\"grid gap-1.5 p-3\" data-ckui=\"upload-entry\" data-status={e.status}>\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"min-w-0 flex-1 font-medium break-all\">{e.file.name}</span>\n                  <span className=\"text-xs text-muted-foreground\">{megabytes(e.file.size)}</span>\n                  {e.resumed && e.status !== \"done\" && <Badge variant=\"secondary\">{t(\"uploadQueue.resumed\")}</Badge>}\n                  <Badge variant={e.status === \"failed\" ? \"destructive\" : e.status === \"done\" ? \"outline\" : \"secondary\"}>{t(`uploadQueue.${e.status}`)}</Badge>\n                </div>\n                {e.status === \"uploading\" && (\n                  <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\" role=\"progressbar\" aria-label={e.file.name} aria-valuenow={percent(e)} aria-valuemin={0} aria-valuemax={100}>\n                    <div className=\"h-full bg-primary transition-[width]\" style={{ width: `${percent(e)}%` }} />\n                  </div>\n                )}\n                {e.error && <ErrorLine>{m.error(e.error)}</ErrorLine>}\n                <div className=\"flex flex-wrap gap-2\">\n                  {(ACTIVE.includes(e.status) || e.status === \"queued\") && (\n                    <Button size=\"xs\" variant=\"ghost\" onClick={() => pause(e.id)}>\n                      {t(\"uploadQueue.pause\")}\n                    </Button>\n                  )}\n                  {(e.status === \"paused\" || e.status === \"failed\") && (\n                    <Button size=\"xs\" variant=\"outline\" onClick={() => resume(e.id)}>\n                      {t(e.status === \"failed\" ? \"common.retry\" : \"uploadQueue.resume\")}\n                    </Button>\n                  )}\n                  {e.status !== \"done\" && (\n                    <Button size=\"xs\" variant=\"ghost\" onClick={() => remove(e)}>\n                      {t(\"common.remove\")}\n                    </Button>\n                  )}\n                </div>\n              </li>\n            ))}\n          </ul>\n        </>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/notifications.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ContentKitUiAppearance } from '../appearance.js';
+import { ContentKitClient } from '../client/client.js';
+import { Item } from '../client/generated/wire.js';
+import { ContentKitErrorHandler } from '../react/context.js';
+import { UseNotificationsOptions } from '../react/notifications.js';
+export interface NotificationInboxProps {
+    /** Host-owned rendering for every kind, including unknown future kinds. */
+    renderItem: (item: Item) => ReactNode;
+    /** Domain actions/links; the inbox itself never executes a source's workflow. */
+    renderActions?: (item: Item) => ReactNode;
+    client?: ContentKitClient;
+    pageSize?: number;
+    initialFilter?: "all" | "unread" | "archived";
+    refreshInterval?: UseNotificationsOptions["refreshInterval"];
+    onSignIn?: () => void;
+    onError?: ContentKitErrorHandler;
+    appearance?: ContentKitUiAppearance;
+    className?: string;
+}
+/** A user inbox with cursor pagination and independent local read state. */
+export declare function NotificationInbox({ renderItem, renderActions, client, pageSize, initialFilter, refreshInterval, onSignIn, onError, appearance, className }: NotificationInboxProps): import('react').JSX.Element;
+export interface NotificationBellProps extends NotificationInboxProps {
+    /** Unread indicator refresh. Default 30 seconds while the page is visible. */
+    unreadRefreshInterval?: UseNotificationsOptions["refreshInterval"];
+}
+/** A keyboard-accessible inbox popover. Its dot means unread items exist, not a guessed count. */
+export declare function NotificationBell({ appearance, className, unreadRefreshInterval, ...inbox }: NotificationBellProps): import('react').JSX.Element;

package/dist/components/notifications.js

@@ -0,0 +1,222 @@
+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 { 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";
+import { useNotificationUnread as d, useNotifications as f } from "../react/notifications.js";
+import { useEffect as p, useId as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { cn as b } from "cn";
+import { Notification01Icon as x, RefreshIcon as S } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as C } from "@hugeicons/react";
+import { Popover as w } from "@base-ui/react/popover";
+//#region src/components/notifications.tsx
+function T({ renderItem: n, renderActions: o, client: l, pageSize: u, initialFilter: d = "all", refreshInterval: x, onSignIn: w, onError: T, appearance: D, className: O }) {
+	let { t: k } = e(), A = m(), [j, M] = g(d), N = f({
+		client: l,
+		pageSize: u,
+		unread: j === "unread",
+		dismissed: j === "archived",
+		refreshInterval: x
+	}), { onSignIn: P } = a(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, {
+		appearance: D,
+		className: b("grid gap-4 text-sm", O),
+		"data-ckui": "notification-inbox",
+		role: "region",
+		"aria-labelledby": A,
+		children: [/* @__PURE__ */ y("header", {
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ v("h2", {
+				id: A,
+				className: "text-base font-semibold",
+				children: k("notifications.title")
+			}), !N.signedOut && /* @__PURE__ */ v(i, {
+				size: "icon-sm",
+				variant: "ghost",
+				"aria-label": k("notifications.refresh"),
+				disabled: N.loading,
+				onClick: N.reload,
+				children: /* @__PURE__ */ v(C, {
+					icon: S,
+					strokeWidth: 2
+				})
+			})]
+		}), 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, {
+				variant: "outline",
+				onClick: F,
+				children: k("notifications.signIn")
+			})]
+		}) : /* @__PURE__ */ y(_, { children: [
+			/* @__PURE__ */ v("div", {
+				className: "flex gap-1",
+				role: "group",
+				"aria-label": k("notifications.filter"),
+				children: [
+					"all",
+					"unread",
+					"archived"
+				].map((e) => /* @__PURE__ */ v(i, {
+					ref: j === e ? I : void 0,
+					size: "sm",
+					variant: j === e ? "secondary" : "ghost",
+					"aria-pressed": j === e,
+					onClick: () => M(e),
+					children: k(`notifications.${e}`)
+				}, e))
+			}),
+			N.error && /* @__PURE__ */ y("div", {
+				className: "grid justify-items-start gap-2",
+				children: [/* @__PURE__ */ v(c, { children: k("notifications.loadFailed") }), /* @__PURE__ */ v(i, {
+					size: "sm",
+					variant: "outline",
+					onClick: N.reload,
+					children: k("common.retry")
+				})]
+			}),
+			N.loading && !N.items.length ? /* @__PURE__ */ y("div", {
+				role: "status",
+				"aria-label": k("notifications.loading"),
+				className: "grid gap-3",
+				children: [/* @__PURE__ */ v(s, { className: "h-20 w-full" }), /* @__PURE__ */ v(s, { className: "h-20 w-full" })]
+			}) : !N.items.length && !N.error ? /* @__PURE__ */ v("p", {
+				role: "status",
+				className: "py-8 text-center text-muted-foreground",
+				children: k(j === "unread" ? "notifications.emptyUnread" : "notifications.empty")
+			}) : /* @__PURE__ */ v("ul", {
+				className: "grid divide-y divide-border overflow-hidden rounded-lg border border-border",
+				"aria-busy": N.loading,
+				children: N.items.map((e) => /* @__PURE__ */ v(E, {
+					item: e,
+					renderItem: n,
+					renderActions: o,
+					onRead: async (e, t) => {
+						let n = await N.setRead(e, t);
+						return j === "unread" && t && I.current?.focus(), n;
+					},
+					onDismiss: async (e, t) => {
+						let n = await N.setDismissed(e, t);
+						return I.current?.focus(), n;
+					},
+					onError: T
+				}, e.id))
+			}),
+			N.hasMore && /* @__PURE__ */ v(i, {
+				variant: "outline",
+				disabled: N.loadingMore || N.loading,
+				onClick: () => void N.loadMore(),
+				children: k(N.loadingMore ? "notifications.loading" : "notifications.loadMore")
+			})
+		] })]
+	});
+}
+function E({ item: t, renderItem: n, renderActions: r, onRead: a, 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"),
+		"data-ckui": "notification-item",
+		"data-unread": !t.read_at,
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "flex items-center gap-2 text-xs text-muted-foreground",
+				children: [
+					!t.read_at && /* @__PURE__ */ v(o, {
+						variant: "secondary",
+						children: f("notifications.unread")
+					}),
+					_ && /* @__PURE__ */ v(o, {
+						variant: t.status === "open" ? "outline" : "secondary",
+						children: _
+					}),
+					/* @__PURE__ */ v(l, { at: t.created_at })
+				]
+			}),
+			/* @__PURE__ */ v("div", {
+				id: g,
+				className: "min-w-0 break-words",
+				children: n(t)
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					r?.(t),
+					/* @__PURE__ */ v(i, {
+						size: "sm",
+						variant: "ghost",
+						"aria-describedby": g,
+						disabled: p.pending || h.pending,
+						onClick: () => void p.run(() => a(t.id, !t.read_at)),
+						children: f(t.read_at ? "notifications.markUnread" : "notifications.markRead")
+					}),
+					/* @__PURE__ */ v(i, {
+						size: "sm",
+						variant: "ghost",
+						"aria-describedby": g,
+						disabled: p.pending || h.pending,
+						onClick: () => void h.run(() => s(t.id, !t.dismissed_at)),
+						children: f(t.dismissed_at ? "notifications.restore" : "notifications.dismiss")
+					})
+				]
+			}),
+			/* @__PURE__ */ v(c, { error: p.error ?? h.error })
+		]
+	});
+}
+function D({ appearance: a, className: o, unreadRefreshInterval: s, ...c }) {
+	let { t: l } = e(), u = d({
+		client: c.client,
+		refreshInterval: s
+	}), f = n(a), m = r(c.onError);
+	return p(() => {
+		u.error && m(u.error, "notifications.load");
+	}, [u.error, m]), /* @__PURE__ */ y(w.Root, {
+		onOpenChange: (e) => {
+			e && u.reload();
+		},
+		children: [/* @__PURE__ */ v(t, {
+			appearance: a,
+			className: b("inline-flex", o),
+			"data-ckui": "notification-bell",
+			children: /* @__PURE__ */ y(w.Trigger, {
+				render: /* @__PURE__ */ v(i, {
+					variant: "ghost",
+					size: "icon"
+				}),
+				"aria-label": l(u.unread ? "notifications.unreadLabel" : "notifications.title"),
+				className: "relative",
+				children: [/* @__PURE__ */ v(C, {
+					icon: x,
+					strokeWidth: 2
+				}), u.unread && /* @__PURE__ */ v("span", {
+					className: "absolute right-1.5 top-1.5 size-2 rounded-full bg-primary ring-2 ring-background",
+					"aria-hidden": "true",
+					"data-ckui": "notification-unread"
+				})]
+			})
+		}), /* @__PURE__ */ v(w.Portal, { children: /* @__PURE__ */ v(w.Positioner, {
+			...f,
+			className: b(f.className, "z-50"),
+			sideOffset: 8,
+			align: "end",
+			children: /* @__PURE__ */ v(w.Popup, {
+				className: "max-h-[min(80vh,40rem)] w-[min(26rem,calc(100vw-2rem))] overflow-auto rounded-xl border border-border bg-background p-4 text-foreground shadow-lg outline-none",
+				"aria-label": l("notifications.title"),
+				children: /* @__PURE__ */ v(T, {
+					...c,
+					appearance: a
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
+export { D as NotificationBell, T as NotificationInbox };
+
+//# sourceMappingURL=notifications.js.map