@openrails/contentkit-ui 0.0.0-stage → 0.68.0

package/dist/components/social/engagement.d.ts

@@ -0,0 +1,45 @@
+import { ContentKitClient } from '../../client/client.js';
+import { ReactionCounts, RefBody } from '../../client/generated/wire.js';
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitErrorHandler } from '../../react/context.js';
+export interface ReactionButtonsProps {
+    item: RefBody;
+    /** Counts the host already has, used instead of reading them. */
+    counts?: ReactionCounts;
+    /** Offer dislike too. Default true. */
+    dislike?: boolean;
+    /** Asks a signed-out visitor to sign in where the server takes no anonymous reactions (default the provider's). */
+    onSignIn?: () => void;
+    size?: "sm" | "default";
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * Like and dislike toggles with counts: they change at once and roll back if
+ * the server refuses. Signed out, they react anonymously where the server
+ * allows it (`Config.anonymous.reactions`) and ask to sign in elsewhere.
+ */
+export declare function ReactionButtons({ item, counts: initial, dislike, onSignIn, size, client, onError, className, appearance }: ReactionButtonsProps): import('react').JSX.Element;
+export interface FavoriteButtonProps {
+    item: RefBody;
+    /** Whether it is favorited and the item's count, as the host already has them: both given, nothing is read. */
+    favorited?: boolean;
+    count?: number;
+    /** Show the item's favorite count. Default true. */
+    showCount?: boolean;
+    /** Show the label beside the icon. Default true. */
+    label?: boolean;
+    /** Asks a signed-out visitor to sign in (default the provider's). */
+    onSignIn?: () => void;
+    /** After each saved change. */
+    onChange?: (favorited: boolean) => void;
+    size?: "sm" | "default";
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/** Adds the item to the signed-in visitor's favorites, or removes it, with the server's count; changes at once and rolls back if refused. */
+export declare function FavoriteButton({ item, favorited, count, showCount, label, onSignIn, onChange, size, client, onError, className, appearance }: FavoriteButtonProps): import('react').JSX.Element;

package/dist/components/social/engagement.js

@@ -0,0 +1,129 @@
+import { toContentKitError as e } from "../../client/errors.js";
+import { useMessages as t } from "../../i18n/context.js";
+import { ContentKitUiRoot as n } from "../../scope.js";
+import { ContentKitContext as r, useErrorReporter as i } from "../../react/context.js";
+import { Button as a } from "../../ui/button.js";
+import { useContentConfig as o } from "../../react/config.js";
+import { contentError as s } from "./parts.js";
+import { useFavorite as c, useReaction as l } from "../../react/engagement.js";
+import { useContext as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { cn as m } from "cn";
+import { FavouriteIcon as h, ThumbsDownIcon as g, ThumbsUpIcon as _ } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as v } from "@hugeicons/react";
+//#region src/components/social/engagement.tsx
+var y = (e, t) => new Intl.NumberFormat(t, {
+	notation: "compact",
+	maximumFractionDigits: 1
+}).format(e);
+function b({ item: c, counts: h, dislike: b = !0, onSignIn: x, size: S = "default", client: C, onError: w, className: T, appearance: E }) {
+	let D = t(), { t: O } = D, k = l(c, {
+		initial: h,
+		client: C
+	}), A = u(r), { config: j } = o({ client: C }), M = x ?? A?.onSignIn, N = A?.viewer === null && j?.anonymous.reactions === !1, P = i(w), [F, I] = d(null), L = (t) => {
+		if (N) return M?.();
+		I(null), k.toggle(t).catch((t) => {
+			let n = e(t);
+			if (n.code === "unauthorized" && M) return M();
+			I(n), P(n, "reaction.save");
+		});
+	}, R = S === "sm" ? "sm" : "default", z = N ? O("reactions.signIn") : void 0, B = N && !M;
+	return /* @__PURE__ */ p(n, {
+		appearance: E,
+		className: m("inline-flex flex-wrap items-center gap-1 text-sm", T),
+		"data-ckui": "reaction-buttons",
+		children: [/* @__PURE__ */ p("div", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ p(a, {
+				variant: k.counts.mine === 1 ? "secondary" : "ghost",
+				size: R,
+				"aria-pressed": k.counts.mine === 1,
+				"aria-label": O("reactions.like"),
+				title: z,
+				disabled: B,
+				onClick: () => L(1),
+				children: [/* @__PURE__ */ f(v, {
+					icon: _,
+					strokeWidth: 2
+				}), /* @__PURE__ */ f("span", { children: y(k.counts.likes, D.language) })]
+			}), b && /* @__PURE__ */ p(a, {
+				variant: k.counts.mine === -1 ? "secondary" : "ghost",
+				size: R,
+				"aria-pressed": k.counts.mine === -1,
+				"aria-label": O("reactions.dislike"),
+				title: z,
+				disabled: B,
+				onClick: () => L(-1),
+				children: [/* @__PURE__ */ f(v, {
+					icon: g,
+					strokeWidth: 2
+				}), /* @__PURE__ */ f("span", { children: y(k.counts.dislikes, D.language) })]
+			})]
+		}), F && /* @__PURE__ */ f("span", {
+			role: "alert",
+			className: "text-xs text-destructive",
+			children: F.code === "rate_limited" || F.code === "forbidden" ? s(D, F) : O("reactions.failed")
+		})]
+	});
+}
+function x({ item: o, favorited: l, count: g, showCount: _ = !0, label: b = !0, onSignIn: x, onChange: S, size: C = "default", client: w, onError: T, className: E, appearance: D }) {
+	let O = t(), { t: k } = O, A = u(r), j = c(o, {
+		initial: l !== void 0 && g !== void 0 ? {
+			favorited: l,
+			count: g
+		} : void 0,
+		client: w
+	}), M = x ?? A?.onSignIn, N = i(T), [P, F] = d(null), [I, L] = d(""), R = _ ? j.count : void 0, z = () => {
+		if (A?.viewer === null) return M?.();
+		F(null);
+		let t = !j.favorited;
+		j.set(t).then(() => {
+			L(k(t ? "favorites.added" : "favorites.removed")), S?.(t);
+		}, (t) => {
+			let n = e(t);
+			if (n.code === "unauthorized" && M) return M();
+			F(n), N(n, "favorite.save");
+		});
+	}, B = k(A?.viewer === null && M ? "favorites.signIn" : j.favorited ? "favorites.remove" : "favorites.add");
+	return /* @__PURE__ */ p(n, {
+		appearance: D,
+		className: m("inline-flex flex-wrap items-center gap-2 text-sm", E),
+		"data-ckui": "favorite-button",
+		children: [
+			/* @__PURE__ */ p(a, {
+				variant: j.favorited ? "secondary" : "outline",
+				size: b ? C === "sm" ? "sm" : "default" : C === "sm" ? "icon-sm" : "icon",
+				"aria-pressed": j.favorited,
+				"aria-label": b ? void 0 : B,
+				disabled: j.pending,
+				onClick: z,
+				children: [
+					/* @__PURE__ */ f(v, {
+						icon: h,
+						strokeWidth: 2,
+						className: m(j.favorited && "fill-current text-destructive")
+					}),
+					b && /* @__PURE__ */ f("span", { children: B }),
+					R !== void 0 && /* @__PURE__ */ f("span", {
+						className: "tabular-nums text-muted-foreground",
+						children: y(Math.max(0, R), O.language)
+					})
+				]
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "sr-only",
+				role: "status",
+				children: I
+			}),
+			P && /* @__PURE__ */ f("span", {
+				role: "alert",
+				className: "text-xs text-destructive",
+				children: s(O, P)
+			})
+		]
+	});
+}
+//#endregion
+export { x as FavoriteButton, b as ReactionButtons };
+
+//# sourceMappingURL=engagement.js.map

package/dist/components/social/engagement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"engagement.js","names":[],"sources":["../../../src/components/social/engagement.tsx"],"sourcesContent":["import { FavouriteIcon, ThumbsDownIcon, ThumbsUpIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useContext, useState } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentKitError } from \"../../client/errors.js\";\nimport { toContentKitError } from \"../../client/errors.js\";\nimport type { ReactionCounts, RefBody } from \"../../client/generated/wire.js\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, useErrorReporter, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useContentConfig } from \"../../react/config.js\";\nimport { useFavorite, useReaction } from \"../../react/engagement.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { contentError } from \"./parts.js\";\n\n\nconst compact = (n: number, language?: string) => new Intl.NumberFormat(language, { notation: \"compact\", maximumFractionDigits: 1 }).format(n);\n\nexport interface ReactionButtonsProps {\n  item: RefBody;\n  /** Counts the host already has, used instead of reading them. */\n  counts?: ReactionCounts;\n  /** Offer dislike too. Default true. */\n  dislike?: boolean;\n  /** Asks a signed-out visitor to sign in where the server takes no anonymous reactions (default the provider's). */\n  onSignIn?: () => void;\n  size?: \"sm\" | \"default\";\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/**\n * Like and dislike toggles with counts: they change at once and roll back if\n * the server refuses. Signed out, they react anonymously where the server\n * allows it (`Config.anonymous.reactions`) and ask to sign in elsewhere.\n */\nexport function ReactionButtons({ item, counts: initial, dislike = true, onSignIn, size = \"default\", client, onError, className, appearance }: ReactionButtonsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const r = useReaction(item, { initial, client });\n  const ctx = useContext(ContentKitContext);\n  const { config } = useContentConfig({ client });\n  const signIn = onSignIn ?? ctx?.onSignIn;\n  // Signed out where the server takes no anonymous reactions.\n  const mustSignIn = ctx?.viewer === null && config?.anonymous.reactions === false;\n  const report = useErrorReporter(onError);\n  const [error, setError] = useState<ContentKitError | null>(null);\n  const toggle = (v: 1 | -1) => {\n    if (mustSignIn) return signIn?.();\n    setError(null);\n    r.toggle(v).catch((e) => {\n      const err = toContentKitError(e);\n      if (err.code === \"unauthorized\" && signIn) return signIn();\n      setError(err);\n      report(err, \"reaction.save\");\n    });\n  };\n  const btn = size === \"sm\" ? \"sm\" : \"default\";\n  const hint = mustSignIn ? t(\"reactions.signIn\") : undefined;\n  const disabled = mustSignIn && !signIn;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"inline-flex flex-wrap items-center gap-1 text-sm\", className)} data-ckui=\"reaction-buttons\">\n      <div className=\"inline-flex items-center gap-1\">\n        <Button variant={r.counts.mine === 1 ? \"secondary\" : \"ghost\"} size={btn} aria-pressed={r.counts.mine === 1} aria-label={t(\"reactions.like\")} title={hint} disabled={disabled} onClick={() => toggle(1)}>\n          <HugeiconsIcon icon={ThumbsUpIcon} strokeWidth={2} />\n          <span>{compact(r.counts.likes, m.language)}</span>\n        </Button>\n        {dislike && (\n          <Button variant={r.counts.mine === -1 ? \"secondary\" : \"ghost\"} size={btn} aria-pressed={r.counts.mine === -1} aria-label={t(\"reactions.dislike\")} title={hint} disabled={disabled} onClick={() => toggle(-1)}>\n            <HugeiconsIcon icon={ThumbsDownIcon} strokeWidth={2} />\n            <span>{compact(r.counts.dislikes, m.language)}</span>\n          </Button>\n        )}\n      </div>\n      {error && (\n        <span role=\"alert\" className=\"text-xs text-destructive\">\n          {error.code === \"rate_limited\" || error.code === \"forbidden\" ? contentError(m, error) : t(\"reactions.failed\")}\n        </span>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface FavoriteButtonProps {\n  item: RefBody;\n  /** Whether it is favorited and the item's count, as the host already has them: both given, nothing is read. */\n  favorited?: boolean;\n  count?: number;\n  /** Show the item's favorite count. Default true. */\n  showCount?: boolean;\n  /** Show the label beside the icon. Default true. */\n  label?: boolean;\n  /** Asks a signed-out visitor to sign in (default the provider's). */\n  onSignIn?: () => void;\n  /** After each saved change. */\n  onChange?: (favorited: boolean) => void;\n  size?: \"sm\" | \"default\";\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** Adds the item to the signed-in visitor's favorites, or removes it, with the server's count; changes at once and rolls back if refused. */\nexport function FavoriteButton({ item, favorited, count, showCount = true, label = true, onSignIn, onChange, size = \"default\", client, onError, className, appearance }: FavoriteButtonProps) {\n  const m = useMessages();\n  const { t } = m;\n  const ctx = useContext(ContentKitContext);\n  const f = useFavorite(item, { initial: favorited !== undefined && count !== undefined ? { favorited, count } : undefined, client });\n  const signIn = onSignIn ?? ctx?.onSignIn;\n  const report = useErrorReporter(onError);\n  const [error, setError] = useState<ContentKitError | null>(null);\n  const [status, setStatus] = useState(\"\");\n  const shown = showCount ? f.count : undefined;\n  const click = () => {\n    if (ctx?.viewer === null) return signIn?.();\n    setError(null);\n    const next = !f.favorited;\n    f.set(next).then(\n      () => {\n        setStatus(t(next ? \"favorites.added\" : \"favorites.removed\"));\n        onChange?.(next);\n      },\n      (e) => {\n        const err = toContentKitError(e);\n        if (err.code === \"unauthorized\" && signIn) return signIn();\n        setError(err);\n        report(err, \"favorite.save\");\n      },\n    );\n  };\n  const text = t(ctx?.viewer === null && signIn ? \"favorites.signIn\" : f.favorited ? \"favorites.remove\" : \"favorites.add\");\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"inline-flex flex-wrap items-center gap-2 text-sm\", className)} data-ckui=\"favorite-button\">\n      <Button\n        variant={f.favorited ? \"secondary\" : \"outline\"}\n        size={label ? (size === \"sm\" ? \"sm\" : \"default\") : size === \"sm\" ? \"icon-sm\" : \"icon\"}\n        aria-pressed={f.favorited}\n        aria-label={label ? undefined : text}\n        disabled={f.pending}\n        onClick={click}\n      >\n        <HugeiconsIcon icon={FavouriteIcon} strokeWidth={2} className={cn(f.favorited && \"fill-current text-destructive\")} />\n        {label && <span>{text}</span>}\n        {shown !== undefined && <span className=\"tabular-nums text-muted-foreground\">{compact(Math.max(0, shown), m.language)}</span>}\n      </Button>\n      <span className=\"sr-only\" role=\"status\">\n        {status}\n      </span>\n      {error && (\n        <span role=\"alert\" className=\"text-xs text-destructive\">\n          {contentError(m, error)}\n        </span>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+export { Comments, type CommentsProps } from './comments.js';
+export { BanNotice, CommentBanDialog, CommentBans, type CommentBanDialogProps, type CommentBansProps } from './bans.js';
+export { FavoriteButton, ReactionButtons, type FavoriteButtonProps, type ReactionButtonsProps } from './engagement.js';
+export { Poll, type PollProps } from './poll.js';
+export { PollEditor, type PollEditorProps } from './poll-editor.js';
+export { CommentModeration, type CommentModerationProps, type ModerationSection } from './moderation.js';

package/dist/components/social/moderation.d.ts

@@ -0,0 +1,32 @@
+import { ContentKitClient } from '../../client/client.js';
+import { PublicUser } from '../../client/generated/wire.js';
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitErrorHandler } from '../../react/context.js';
+export type ModerationSection = "comments" | "queue" | "bans";
+export interface CommentModerationProps {
+    /** Content kinds offered as a filter of the comment list: codes, or codes with labels. */
+    contentKinds?: readonly (string | {
+        value: string;
+        label: string;
+    })[];
+    /** A link to a commented item. */
+    itemHref?: (item: {
+        kind: string;
+        id: string;
+    }) => string | undefined;
+    userHref?: (user: PublicUser) => string | undefined;
+    /** The sections, in order. Default all: every comment, the review queue, the site's bans. */
+    sections?: readonly ModerationSection[];
+    pageSize?: number;
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * Staff: every comment (deleted, held and rejected ones with their text) to
+ * delete, restore or ban its author; the review queue of held comments and
+ * posts to approve or reject; and the site's comment bans. Each section
+ * shows what the caller's permissions allow and says so when they don't.
+ */
+export declare function CommentModeration({ sections, className, appearance, ...p }: CommentModerationProps): import('react').JSX.Element;

package/dist/components/social/moderation.js

@@ -0,0 +1,383 @@
+import { toContentKitError as e } from "../../client/errors.js";
+import { useMessages as t } from "../../i18n/context.js";
+import { ContentKitUiRoot as n } from "../../scope.js";
+import { useErrorReporter as r } from "../../react/context.js";
+import { Button as i } from "../../ui/button.js";
+import { useAdminComments as a, useModerationQueue as o } from "../../react/comments.js";
+import { Badge as s } from "../../ui/badge.js";
+import { Input as c } from "../../ui/input.js";
+import { Select as l, SelectContent as u, SelectItem as d, SelectTrigger as f, SelectValue as p } from "../../ui/select.js";
+import { Skeleton as m } from "../../ui/skeleton.js";
+import { ErrorLine as h, RelativeTime as g, UserAvatar as _, UserName as v, contentError as y } from "./parts.js";
+import { CommentBanDialog as b, CommentBans as x } from "./bans.js";
+import { Tabs as S, TabsContent as C, TabsList as w, TabsTrigger as T } from "../../ui/tabs.js";
+import { useMemo as E, useState as D } from "react";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { cn as A } from "cn";
+//#region src/components/social/moderation.tsx
+function j({ sections: e = [
+	"comments",
+	"queue",
+	"bans"
+], className: r, appearance: i, ...a }) {
+	let { t: o } = t(), [s, c] = D(e[0] ?? "comments"), l = {
+		comments: o("moderation.all"),
+		queue: o("moderation.queue"),
+		bans: o("moderation.bans")
+	};
+	return /* @__PURE__ */ k(n, {
+		appearance: i,
+		className: A("grid gap-4 text-sm", r),
+		"data-ckui": "comment-moderation",
+		children: [/* @__PURE__ */ O("h2", {
+			className: "text-base font-semibold",
+			children: o("moderation.title")
+		}), /* @__PURE__ */ k(S, {
+			value: s,
+			onValueChange: (e) => c(e),
+			children: [
+				e.length > 1 && /* @__PURE__ */ O(w, { children: e.map((e) => /* @__PURE__ */ O(T, {
+					value: e,
+					children: l[e]
+				}, e)) }),
+				e.includes("comments") && /* @__PURE__ */ O(C, {
+					value: "comments",
+					className: "pt-3",
+					children: /* @__PURE__ */ O(N, { ...a })
+				}),
+				e.includes("queue") && /* @__PURE__ */ O(C, {
+					value: "queue",
+					className: "pt-3",
+					children: /* @__PURE__ */ O(P, { ...a })
+				}),
+				e.includes("bans") && /* @__PURE__ */ O(C, {
+					value: "bans",
+					className: "pt-3",
+					children: /* @__PURE__ */ O(x, {
+						scope: "global",
+						pageSize: a.pageSize,
+						userHref: a.userHref,
+						client: a.client,
+						onError: a.onError
+					})
+				})
+			]
+		})]
+	});
+}
+function M(e) {
+	return e.deleted ? "deleted" : e.moderation === "held" ? "held" : e.moderation === "rejected" ? "rejected" : "published";
+}
+function N(n) {
+	let { t: o } = t(), c = E(() => (n.contentKinds ?? []).map((e) => typeof e == "string" ? {
+		value: e,
+		label: e
+	} : e), [n.contentKinds]), [m, y] = D(""), x = a({
+		contentKind: m,
+		pageSize: n.pageSize,
+		client: n.client
+	}), S = r(n.onError), [C, w] = D(null), [T, j] = D(null), N = (t, n) => {
+		w(null), n().catch((n) => {
+			let r = e(n);
+			w(r), S(r, t);
+		});
+	};
+	return /* @__PURE__ */ k("div", {
+		className: "grid gap-3",
+		children: [
+			c.length > 0 && /* @__PURE__ */ k(l, {
+				value: m,
+				onValueChange: (e) => y(String(e ?? "")),
+				children: [/* @__PURE__ */ O(f, {
+					size: "sm",
+					"aria-label": o("moderation.kind"),
+					children: /* @__PURE__ */ O(p, { children: (e) => e ? c.find((t) => t.value === e)?.label ?? e : o("moderation.allKinds") })
+				}), /* @__PURE__ */ k(u, { children: [/* @__PURE__ */ O(d, {
+					value: "",
+					children: o("moderation.allKinds")
+				}), c.map((e) => /* @__PURE__ */ O(d, {
+					value: e.value,
+					children: e.label
+				}, e.value))] })]
+			}),
+			/* @__PURE__ */ O(h, { error: C }),
+			/* @__PURE__ */ O(I, {
+				loading: x.loading,
+				error: x.error,
+				empty: o("moderation.empty"),
+				count: x.items.length,
+				reload: x.reload,
+				children: x.items.map((e) => {
+					let t = e.author?.username ?? e.anon_name ?? e.user_id ?? o("comments.anonymous"), r = M(e), a = n.itemHref?.({
+						kind: e.content_kind,
+						id: e.content_id
+					});
+					return /* @__PURE__ */ k("li", {
+						className: "grid gap-2 p-3",
+						"data-ckui": "admin-comment",
+						"data-status": r,
+						children: [
+							/* @__PURE__ */ k("div", {
+								className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+								children: [
+									/* @__PURE__ */ O(_, {
+										user: e.author,
+										name: t,
+										size: "sm"
+									}),
+									/* @__PURE__ */ O(v, {
+										user: e.author,
+										name: t,
+										href: n.userHref
+									}),
+									/* @__PURE__ */ O(g, {
+										at: e.created_at,
+										className: "text-xs text-muted-foreground"
+									}),
+									/* @__PURE__ */ O(s, {
+										variant: r === "published" ? "outline" : r === "held" ? "secondary" : "destructive",
+										children: o(`moderation.${r}`)
+									}),
+									e.reply_to_id && /* @__PURE__ */ O(s, {
+										variant: "outline",
+										children: o("moderation.reply")
+									}),
+									/* @__PURE__ */ k("span", {
+										className: "text-xs text-muted-foreground",
+										children: [
+											o("moderation.on"),
+											" ",
+											a ? /* @__PURE__ */ k("a", {
+												className: "hover:underline",
+												href: a,
+												children: [
+													e.content_kind,
+													"/",
+													e.content_id
+												]
+											}) : `${e.content_kind}/${e.content_id}`
+										]
+									})
+								]
+							}),
+							/* @__PURE__ */ O("p", {
+								className: A("line-clamp-4 break-words whitespace-pre-wrap", e.deleted && "text-muted-foreground line-through"),
+								children: e.body
+							}),
+							e.moderation_reason && /* @__PURE__ */ O("p", {
+								className: "text-xs text-muted-foreground",
+								children: o("moderation.heldBecause", { reason: e.moderation_reason })
+							}),
+							/* @__PURE__ */ k("div", {
+								className: "flex flex-wrap gap-2",
+								children: [e.deleted ? /* @__PURE__ */ O(i, {
+									size: "sm",
+									variant: "outline",
+									onClick: () => N("comment.restore", () => x.restore(e.id)),
+									children: o("moderation.restore")
+								}) : /* @__PURE__ */ O(i, {
+									size: "sm",
+									variant: "destructive",
+									onClick: () => N("comment.delete", () => x.remove(e.id)),
+									children: o("moderation.delete")
+								}), e.user_id && /* @__PURE__ */ O(i, {
+									size: "sm",
+									variant: "ghost",
+									onClick: () => j({
+										id: e.user_id,
+										name: t
+									}),
+									children: o("comments.ban")
+								})]
+							})
+						]
+					}, e.id);
+				})
+			}),
+			x.hasMore && /* @__PURE__ */ O(i, {
+				variant: "outline",
+				className: "justify-self-center",
+				disabled: x.loadingMore,
+				onClick: () => void x.loadMore(),
+				children: o("moderation.loadMore")
+			}),
+			T && /* @__PURE__ */ O(b, {
+				open: !0,
+				onOpenChange: (e) => !e && j(null),
+				user: T,
+				scopes: ["global"],
+				client: n.client,
+				onError: n.onError
+			})
+		]
+	});
+}
+function P(e) {
+	let { t: n } = t(), [r, a] = D("comment"), s = o({
+		kind: r,
+		pageSize: e.pageSize,
+		client: e.client
+	});
+	return /* @__PURE__ */ k("div", {
+		className: "grid gap-3",
+		children: [
+			/* @__PURE__ */ O("div", {
+				className: "flex gap-2",
+				role: "group",
+				"aria-label": n("moderation.queue"),
+				children: ["comment", "post"].map((e) => /* @__PURE__ */ O(i, {
+					size: "sm",
+					variant: r === e ? "default" : "outline",
+					"aria-pressed": r === e,
+					onClick: () => a(e),
+					children: n(e === "post" ? "moderation.queuePosts" : "moderation.queueComments")
+				}, e))
+			}),
+			/* @__PURE__ */ O(I, {
+				loading: s.loading,
+				error: s.error,
+				empty: n("moderation.queueEmpty"),
+				count: s.items.length,
+				reload: s.reload,
+				children: s.items.map((t) => /* @__PURE__ */ O(F, {
+					item: t,
+					itemHref: e.itemHref,
+					userHref: e.userHref,
+					onResolve: s.resolve,
+					reload: s.reload,
+					onError: e.onError
+				}, t.id))
+			}),
+			s.hasMore && /* @__PURE__ */ O(i, {
+				variant: "outline",
+				className: "justify-self-center",
+				disabled: s.loadingMore,
+				onClick: () => void s.loadMore(),
+				children: n("moderation.loadMore")
+			})
+		]
+	});
+}
+function F(n) {
+	let a = t(), { t: o } = a, s = r(n.onError), { item: l } = n, [u, d] = D(!1), [f, p] = D(""), [m, b] = D(!1), [x, S] = D(null), C = l.author?.username ?? l.anon_name ?? l.author_id ?? o("comments.anonymous"), w = n.itemHref?.({
+		kind: l.ref.content_kind,
+		id: l.ref.content_id
+	}), T = async (t) => {
+		b(!0), S(null);
+		try {
+			await n.onResolve(l, t, t === "reject" && f.trim() || void 0);
+		} catch (t) {
+			let r = e(t);
+			s(r, "moderation.resolve"), r.code === "not_found" || r.code === "conflict" ? (S(o("moderation.stale")), n.reload()) : S(y(a, r));
+		} finally {
+			b(!1);
+		}
+	};
+	return /* @__PURE__ */ k("li", {
+		className: "grid gap-2 p-3",
+		"data-ckui": "held-item",
+		children: [
+			/* @__PURE__ */ k("div", {
+				className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+				children: [
+					/* @__PURE__ */ O(_, {
+						user: l.author,
+						name: C,
+						size: "sm"
+					}),
+					/* @__PURE__ */ O(v, {
+						user: l.author,
+						name: C,
+						href: n.userHref
+					}),
+					/* @__PURE__ */ O(g, {
+						at: l.held_at,
+						className: "text-xs text-muted-foreground"
+					}),
+					w && /* @__PURE__ */ k("a", {
+						className: "text-xs text-muted-foreground hover:underline",
+						href: w,
+						children: [
+							o("moderation.on"),
+							" ",
+							l.ref.content_kind,
+							"/",
+							l.ref.content_id
+						]
+					})
+				]
+			}),
+			l.title && /* @__PURE__ */ O("p", {
+				className: "font-medium",
+				children: l.title
+			}),
+			/* @__PURE__ */ O("p", {
+				className: "line-clamp-6 break-words whitespace-pre-wrap",
+				children: l.body
+			}),
+			(l.reason || l.error) && /* @__PURE__ */ O("p", {
+				className: "text-xs text-muted-foreground",
+				children: o("moderation.heldBecause", { reason: l.reason || l.error || "" })
+			}),
+			u && /* @__PURE__ */ O(c, {
+				value: f,
+				maxLength: 500,
+				placeholder: o("moderation.rejectReason"),
+				"aria-label": o("moderation.rejectReason"),
+				onChange: (e) => p(e.target.value),
+				autoFocus: !0
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					/* @__PURE__ */ O(i, {
+						size: "sm",
+						disabled: m,
+						onClick: () => void T("approve"),
+						children: o("moderation.approve")
+					}),
+					/* @__PURE__ */ O(i, {
+						size: "sm",
+						variant: "destructive",
+						disabled: m,
+						onClick: () => u ? void T("reject") : d(!0),
+						children: o("moderation.reject")
+					}),
+					u && /* @__PURE__ */ O(i, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => d(!1),
+						children: o("common.cancel")
+					})
+				]
+			}),
+			x && /* @__PURE__ */ O(h, { children: x })
+		]
+	});
+}
+function I(e) {
+	let n = t(), { t: r } = n;
+	return e.loading && !e.count ? /* @__PURE__ */ k("div", {
+		className: "grid gap-3",
+		"aria-busy": !0,
+		children: [/* @__PURE__ */ O(m, { className: "h-16 w-full" }), /* @__PURE__ */ O(m, { className: "h-16 w-full" })]
+	}) : e.error && !e.count ? /* @__PURE__ */ k("div", {
+		className: "grid justify-items-start gap-2",
+		children: [/* @__PURE__ */ O(h, { children: e.error.code === "forbidden" || e.error.code === "unauthorized" ? y(n, e.error) : r("moderation.loadFailed") }), /* @__PURE__ */ O(i, {
+			size: "sm",
+			variant: "outline",
+			onClick: e.reload,
+			children: r("common.retry")
+		})]
+	}) : e.count ? /* @__PURE__ */ O("ul", {
+		className: "grid divide-y divide-border rounded-lg border border-border",
+		children: e.children
+	}) : /* @__PURE__ */ O("p", {
+		className: "text-muted-foreground",
+		children: e.empty
+	});
+}
+//#endregion
+export { j as CommentModeration };
+
+//# sourceMappingURL=moderation.js.map