@openrails/contentkit-ui 0.104.0-rc.1 → 0.104.0-rc.3

package/dist/components/groups/directory.js

@@ -1,123 +1,186 @@
 import { useMessages as e } from "../../i18n/context.js";
 import { ContentKitUiRoot as t } from "../../scope.js";
-import { useGroups as n } from "../../react/groups.js";
-import { Button as r } from "../../ui/button.js";
-import { Skeleton as i } from "../../ui/skeleton.js";
-import { contentError as a } from "../social/parts.js";
-import { LETTERS as o } from "../../client/group-fields.js";
-import { GroupCover as s, GroupLink as c } from "./parts.js";
-import { useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { cn as f } from "cn";
+import { useGroups as n, useGroupsPage as r } from "../../react/groups.js";
+import { Button as i } from "../../ui/button.js";
+import { Skeleton as a } from "../../ui/skeleton.js";
+import { contentError as o } from "../social/parts.js";
+import { LETTERS as s } from "../../client/group-fields.js";
+import { GroupCover as c, GroupLink as l } from "./parts.js";
+import { Pagination as u } from "../content/pagination.js";
+import { SortMenu as d } from "../content/listing.js";
+import { useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { cn as _ } from "cn";
 //#region src/components/groups/directory.tsx
-function p(p) {
-	let m = e(), { t: h } = m, [g, _] = l(null), v = p.letter === void 0 ? g : p.letter, y = (e) => p.onLetterChange ? p.onLetterChange(e) : _(e), b = n({
-		kind: p.kind,
-		language: p.language,
-		contentKind: p.contentKind,
-		parent: p.parent,
-		scope: p.scope,
-		sort: p.sort,
-		letter: v ?? void 0,
-		pageSize: p.pageSize
-	}, { client: p.client }), x = p.layout === "grid", S = (e) => new Intl.NumberFormat(m.language).format(e);
-	return /* @__PURE__ */ d(t, {
-		appearance: p.appearance,
-		className: f("grid gap-4 text-sm", p.className),
+function v(n) {
+	let { t: r } = e(), [a, o] = p(null), [c, l] = p("name"), u = n.letter === void 0 ? a : n.letter, f = n.sort ?? c, m = (e) => n.onLetterChange ? n.onLetterChange(e) : o(e), v = (e) => n.onSortChange ? n.onSortChange(e) : l(e), x = {
+		kind: n.kind,
+		language: n.language,
+		contentKind: n.contentKind,
+		parent: n.parent,
+		scope: n.scope,
+		sort: f,
+		letter: u ?? void 0,
+		pageSize: n.pageSize
+	};
+	return /* @__PURE__ */ g(t, {
+		appearance: n.appearance,
+		className: _("grid gap-4 text-sm", n.className),
 		"data-ckui": "group-directory",
-		"data-kind": p.kind,
-		children: [
-			p.letters !== !1 && /* @__PURE__ */ u("nav", {
-				"aria-label": h("groups.byLetter"),
+		"data-kind": n.kind,
+		children: [(n.letters !== !1 || !!n.sorts?.length) && /* @__PURE__ */ g("div", {
+			className: "flex flex-wrap items-start justify-between gap-2",
+			children: [n.letters !== !1 && /* @__PURE__ */ h("nav", {
+				"aria-label": r("groups.byLetter"),
 				className: "flex flex-wrap gap-1",
 				"data-ckui": "letters",
-				children: [null, ...o].map((e) => /* @__PURE__ */ u(r, {
+				children: [null, ...s].map((e) => /* @__PURE__ */ h(i, {
 					size: "xs",
-					variant: v === e ? "default" : "ghost",
-					"aria-pressed": v === e,
-					"aria-label": e === null ? void 0 : e === "#" ? h("groups.otherLetters") : e.toUpperCase(),
+					variant: u === e ? "default" : "ghost",
+					"aria-pressed": u === e,
+					"aria-label": e === null ? void 0 : e === "#" ? r("groups.otherLetters") : e.toUpperCase(),
 					className: "min-w-7",
-					onClick: () => y(e),
-					children: e === null ? h("groups.all") : e.toUpperCase()
+					onClick: () => m(e),
+					children: e === null ? r("groups.all") : e.toUpperCase()
 				}, e ?? "all"))
-			}),
-			b.loading && !b.items.length ? /* @__PURE__ */ u("div", {
-				className: x ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "grid gap-2",
-				"aria-busy": !0,
-				children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ u(i, { className: x ? "aspect-[3/4] w-full" : "h-6 w-48" }, t))
-			}) : b.error && !b.items.length ? /* @__PURE__ */ d("div", {
-				role: "alert",
-				className: "grid justify-items-start gap-2",
-				children: [/* @__PURE__ */ u("p", {
-					className: "text-destructive",
-					children: a(m, b.error)
-				}), /* @__PURE__ */ u(r, {
-					size: "sm",
-					variant: "outline",
-					onClick: b.reload,
-					children: h("common.retry")
-				})]
-			}) : b.items.length ? /* @__PURE__ */ u("ul", {
-				className: x ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "flex flex-wrap gap-2",
-				"data-ckui": "groups",
-				children: b.items.map((e) => /* @__PURE__ */ u("li", {
-					"data-ckui": "group",
-					"data-slug": e.slug,
-					children: p.renderGroup ? p.renderGroup(e) : x ? /* @__PURE__ */ d(c, {
-						group: e,
-						href: p.href,
-						className: "group grid gap-1.5",
-						children: [
-							/* @__PURE__ */ u(s, {
-								group: e,
-								className: "aspect-[3/4] w-full"
-							}),
-							/* @__PURE__ */ u("span", {
-								className: "font-medium break-words group-hover:underline",
-								children: e.name || e.slug
-							}),
-							/* @__PURE__ */ u("span", {
-								className: "text-xs text-muted-foreground tabular-nums",
-								children: m.plural("groups.items", e.count)
-							})
-						]
-					}) : /* @__PURE__ */ d(c, {
+			}), !!n.sorts?.length && /* @__PURE__ */ h(d, {
+				value: f,
+				sorts: n.sorts,
+				onChange: v,
+				label: (e) => r(`groups.directorySort_${e}`),
+				className: "ms-auto"
+			})]
+		}), n.pagination === "pages" ? /* @__PURE__ */ h(b, {
+			...n,
+			filter: x
+		}) : /* @__PURE__ */ h(y, {
+			...n,
+			filter: x
+		})]
+	});
+}
+function y({ filter: t, client: r, ...a }) {
+	let s = e(), { t: c } = s, l = n(t, { client: r });
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(x, {
+		...a,
+		items: l.items,
+		loading: l.loading,
+		error: l.error,
+		reload: l.reload
+	}), l.hasMore && /* @__PURE__ */ g("div", {
+		className: "grid justify-items-center gap-2",
+		children: [l.error && /* @__PURE__ */ h("p", {
+			role: "alert",
+			className: "text-destructive",
+			children: o(s, l.error)
+		}), /* @__PURE__ */ h(i, {
+			variant: "outline",
+			size: "sm",
+			disabled: l.loadingMore,
+			onClick: () => void l.loadMore(),
+			children: l.loadingMore ? c("groups.loading") : l.error ? c("common.retry") : c("groups.loadMore")
+		})]
+	})] });
+}
+function b({ filter: e, client: t, ...n }) {
+	let i = JSON.stringify(e), [a, o] = p({
+		key: i,
+		page: 1
+	}), s = Math.max(1, Math.floor(n.page ?? (a.key === i ? a.page : 1))), c = f(null), l = r(e, s, { client: t }), d = e.pageSize ?? 50, _ = (e, t) => {
+		n.page === void 0 && o({
+			key: i,
+			page: e
+		}), n.onPageChange?.(e), t && c.current?.scrollIntoView({
+			block: "start",
+			behavior: "smooth"
+		});
+	}, v = (e) => l.total === void 0 ? null : /* @__PURE__ */ h(u, {
+		page: s,
+		total: l.total,
+		pageSize: d,
+		range: !e,
+		pageHref: n.pageHref,
+		onPageChange: (t) => _(t, e)
+	});
+	return /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ h("div", {
+			ref: c,
+			className: "scroll-mt-20",
+			children: v(!1)
+		}),
+		/* @__PURE__ */ h(x, {
+			...n,
+			items: l.items,
+			loading: l.loading,
+			error: l.error,
+			reload: l.reload
+		}),
+		l.items.length > 0 && v(!0)
+	] });
+}
+function x({ items: t, loading: n, error: r, reload: s, ...u }) {
+	let d = e(), { t: f } = d, p = u.layout === "grid", m = (e) => new Intl.NumberFormat(d.language).format(e);
+	return n && !t.length ? /* @__PURE__ */ h("div", {
+		className: p ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "grid gap-2",
+		"aria-busy": !0,
+		children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ h(a, { className: p ? "aspect-[3/4] w-full" : "h-6 w-48" }, t))
+	}) : r && !t.length ? /* @__PURE__ */ g("div", {
+		role: "alert",
+		className: "grid justify-items-start gap-2",
+		children: [/* @__PURE__ */ h("p", {
+			className: "text-destructive",
+			children: o(d, r)
+		}), /* @__PURE__ */ h(i, {
+			size: "sm",
+			variant: "outline",
+			onClick: s,
+			children: f("common.retry")
+		})]
+	}) : t.length ? /* @__PURE__ */ h("ul", {
+		className: p ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "flex flex-wrap gap-2",
+		"data-ckui": "groups",
+		children: t.map((e) => /* @__PURE__ */ h("li", {
+			"data-ckui": "group",
+			"data-slug": e.slug,
+			children: u.renderGroup ? u.renderGroup(e) : p ? /* @__PURE__ */ g(l, {
+				group: e,
+				href: u.href,
+				className: "group grid gap-1.5",
+				children: [
+					/* @__PURE__ */ h(c, {
 						group: e,
-						href: p.href,
-						className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 hover:bg-muted",
-						children: [/* @__PURE__ */ u("span", {
-							className: "break-words",
-							children: e.name || e.slug
-						}), /* @__PURE__ */ u("span", {
-							className: "text-xs text-muted-foreground tabular-nums",
-							"aria-label": m.plural("groups.items", e.count),
-							children: S(e.count)
-						})]
+						className: "aspect-[3/4] w-full"
+					}),
+					/* @__PURE__ */ h("span", {
+						className: "font-medium break-words group-hover:underline",
+						children: e.name || e.slug
+					}),
+					/* @__PURE__ */ h("span", {
+						className: "text-xs text-muted-foreground tabular-nums",
+						children: d.plural("groups.items", e.count)
 					})
-				}, e.id))
-			}) : /* @__PURE__ */ u("p", {
-				className: "text-muted-foreground",
-				role: "status",
-				children: h("groups.empty")
-			}),
-			b.hasMore && /* @__PURE__ */ d("div", {
-				className: "grid justify-items-center gap-2",
-				children: [b.error && /* @__PURE__ */ u("p", {
-					role: "alert",
-					className: "text-destructive",
-					children: a(m, b.error)
-				}), /* @__PURE__ */ u(r, {
-					variant: "outline",
-					size: "sm",
-					disabled: b.loadingMore,
-					onClick: () => void b.loadMore(),
-					children: b.loadingMore ? h("groups.loading") : b.error ? h("common.retry") : h("groups.loadMore")
+				]
+			}) : /* @__PURE__ */ g(l, {
+				group: e,
+				href: u.href,
+				className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 hover:bg-muted",
+				children: [/* @__PURE__ */ h("span", {
+					className: "break-words",
+					children: e.name || e.slug
+				}), /* @__PURE__ */ h("span", {
+					className: "text-xs text-muted-foreground tabular-nums",
+					"aria-label": d.plural("groups.items", e.count),
+					children: m(e.count)
 				})]
 			})
-		]
+		}, e.id))
+	}) : /* @__PURE__ */ h("p", {
+		className: "text-muted-foreground",
+		role: "status",
+		children: f("groups.empty")
 	});
 }
 //#endregion
-export { p as GroupDirectory };
+export { v as GroupDirectory };
 
 //# sourceMappingURL=directory.js.map

package/dist/components/groups/directory.js.map

@@ -1 +1 @@
-{"version":3,"file":"directory.js","names":[],"sources":["../../../src/components/groups/directory.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { LETTERS } from \"../../client/group-fields.js\";\nimport type { GroupCard } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useGroups, type GroupSort } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError } from \"../social/parts.js\";\nimport { GroupCover, GroupLink, type GroupLike } from \"./parts.js\";\n\nexport interface GroupDirectoryProps {\n  /** The group kind listed: tag, artist, series. */\n  kind: string;\n  /** Names, counts and paths in this language; default the provider's. */\n  language?: string;\n  /** Count contents of this kind only; default every kind. */\n  contentKind?: string;\n  /** Children of this group. */\n  parent?: string;\n  /** Groups scoped by this group (characters of a series). */\n  scope?: string;\n  /** Default \"name\". */\n  sort?: GroupSort;\n  /** The letter bucket shown, a-z or \"#\", null for every group. With onLetterChange the host keeps it (in its URL). */\n  letter?: string | null;\n  onLetterChange?: (letter: string | null) => void;\n  /** Hide the A-Z bar. */\n  letters?: boolean;\n  /** \"list\" (names with counts, default) or \"grid\" (covers). */\n  layout?: \"list\" | \"grid\";\n  /** A group's link; default its canonical path. */\n  href?: (group: GroupLike) => string | undefined;\n  /** A group's entry instead of the default one. */\n  renderGroup?: (group: GroupCard) => ReactNode;\n  pageSize?: number;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A directory of one kind's groups: A-Z buckets, names with content counts or covers, paged. */\nexport function GroupDirectory(p: GroupDirectoryProps) {\n  const m = useMessages();\n  const { t } = m;\n  const [own, setOwn] = useState<string | null>(null);\n  const letter = p.letter !== undefined ? p.letter : own;\n  const choose = (l: string | null) => (p.onLetterChange ? p.onLetterChange(l) : setOwn(l));\n  const list = useGroups(\n    { kind: p.kind, language: p.language, contentKind: p.contentKind, parent: p.parent, scope: p.scope, sort: p.sort, letter: letter ?? undefined, pageSize: p.pageSize },\n    { client: p.client },\n  );\n  const grid = p.layout === \"grid\";\n  const count = (n: number) => new Intl.NumberFormat(m.language).format(n);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"group-directory\" data-kind={p.kind}>\n      {p.letters !== false && (\n        <nav aria-label={t(\"groups.byLetter\")} className=\"flex flex-wrap gap-1\" data-ckui=\"letters\">\n          {[null, ...LETTERS].map((l) => (\n            <Button\n              key={l ?? \"all\"}\n              size=\"xs\"\n              variant={letter === l ? \"default\" : \"ghost\"}\n              aria-pressed={letter === l}\n              aria-label={l === null ? undefined : l === \"#\" ? t(\"groups.otherLetters\") : l.toUpperCase()}\n              className=\"min-w-7\"\n              onClick={() => choose(l)}\n            >\n              {l === null ? t(\"groups.all\") : l.toUpperCase()}\n            </Button>\n          ))}\n        </nav>\n      )}\n      {list.loading && !list.items.length ? (\n        <div className={grid ? \"grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3\" : \"grid gap-2\"} aria-busy>\n          {Array.from({ length: 6 }, (_, i) => (\n            <Skeleton key={i} className={grid ? \"aspect-[3/4] w-full\" : \"h-6 w-48\"} />\n          ))}\n        </div>\n      ) : list.error && !list.items.length ? (\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, list.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={list.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\n      ) : !list.items.length ? (\n        <p className=\"text-muted-foreground\" role=\"status\">\n          {t(\"groups.empty\")}\n        </p>\n      ) : (\n        <ul className={grid ? \"grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3\" : \"flex flex-wrap gap-2\"} data-ckui=\"groups\">\n          {list.items.map((g) => (\n            <li key={g.id} data-ckui=\"group\" data-slug={g.slug}>\n              {p.renderGroup ? (\n                p.renderGroup(g)\n              ) : grid ? (\n                <GroupLink group={g} href={p.href} className=\"group grid gap-1.5\">\n                  <GroupCover group={g} className=\"aspect-[3/4] w-full\" />\n                  <span className=\"font-medium break-words group-hover:underline\">{g.name || g.slug}</span>\n                  <span className=\"text-xs text-muted-foreground tabular-nums\">{m.plural(\"groups.items\", g.count)}</span>\n                </GroupLink>\n              ) : (\n                <GroupLink group={g} href={p.href} className=\"inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 hover:bg-muted\">\n                  <span className=\"break-words\">{g.name || g.slug}</span>\n                  <span className=\"text-xs text-muted-foreground tabular-nums\" aria-label={m.plural(\"groups.items\", g.count)}>\n                    {count(g.count)}\n                  </span>\n                </GroupLink>\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n      {list.hasMore && (\n        <div className=\"grid justify-items-center gap-2\">\n          {list.error && <p role=\"alert\" className=\"text-destructive\">{contentError(m, list.error)}</p>}\n          <Button variant=\"outline\" size=\"sm\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n            {list.loadingMore ? t(\"groups.loading\") : list.error ? t(\"common.retry\") : t(\"groups.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA6CA,SAAgB,EAAe,GAAwB;CACrD,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,CAAC,GAAK,KAAU,EAAwB,IAAI,GAC5C,IAAS,EAAE,WAAW,KAAA,IAAuB,IAAX,EAAE,QACpC,KAAU,MAAsB,EAAE,iBAAiB,EAAE,eAAe,CAAC,IAAI,EAAO,CAAC,GACjF,IAAO,EACX;EAAE,MAAM,EAAE;EAAM,UAAU,EAAE;EAAU,aAAa,EAAE;EAAa,QAAQ,EAAE;EAAQ,OAAO,EAAE;EAAO,MAAM,EAAE;EAAM,QAAQ,KAAU,KAAA;EAAW,UAAU,EAAE;CAAS,GACpK,EAAE,QAAQ,EAAE,OAAO,CACrB,GACM,IAAO,EAAE,WAAW,QACpB,KAAS,MAAc,IAAI,KAAK,aAAa,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC;CACvE,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAkB,aAAW,EAAE;EAAvI,UAAA;GACG,EAAE,YAAY,MACb,kBAAC,OAAD;IAAK,cAAY,EAAE,iBAAiB;IAAG,WAAU;IAAuB,aAAU;IAC/E,UAAA,CAAC,MAAM,GAAG,CAAO,CAAC,CAAC,KAAK,MACvB,kBAAC,GAAD;KAEE,MAAK;KACL,SAAS,MAAW,IAAI,YAAY;KACpC,gBAAc,MAAW;KACzB,cAAY,MAAM,OAAO,KAAA,IAAY,MAAM,MAAM,EAAE,qBAAqB,IAAI,EAAE,YAAY;KAC1F,WAAU;KACV,eAAe,EAAO,CAAC;KAEtB,UAAA,MAAM,OAAO,EAAE,YAAY,IAAI,EAAE,YAAY;IACxC,GATD,KAAK,KASJ,CACT;GACE,CAAA;GAEN,EAAK,WAAW,CAAC,EAAK,MAAM,SAC3B,kBAAC,OAAD;IAAK,WAAW,IAAO,8DAA8D;IAAc,aAAA;IAChG,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MAC7B,kBAAC,GAAD,EAAkB,WAAW,IAAO,wBAAwB,WAAa,GAA1D,CAA0D,CAC1E;GACE,CAAA,IACH,EAAK,SAAS,CAAC,EAAK,MAAM,SAC5B,kBAAC,OAAD;IAAK,MAAK;IAAQ,WAAU;IAA5B,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAoB,UAAA,EAAa,GAAG,EAAK,KAAK;IAAK,CAAA,GAChE,kBAAC,GAAD;KAAQ,MAAK;KAAK,SAAQ;KAAU,SAAS,EAAK;KAC/C,UAAA,EAAE,cAAc;IACX,CAAA,CACL;GACH,CAAA,IAAC,EAAK,MAAM,SAKd,kBAAC,MAAD;IAAI,WAAW,IAAO,8DAA8D;IAAwB,aAAU;IACnH,UAAA,EAAK,MAAM,KAAK,MACf,kBAAC,MAAD;KAAe,aAAU;KAAQ,aAAW,EAAE;KAC3C,UAAA,EAAE,cACD,EAAE,YAAY,CAAC,IACb,IACF,kBAAC,GAAD;MAAW,OAAO;MAAG,MAAM,EAAE;MAAM,WAAU;MAA7C,UAAA;OACE,kBAAC,GAAD;QAAY,OAAO;QAAG,WAAU;OAAuB,CAAA;OACvD,kBAAC,QAAD;QAAM,WAAU;QAAiD,UAAA,EAAE,QAAQ,EAAE;OAAW,CAAA;OACxF,kBAAC,QAAD;QAAM,WAAU;QAA8C,UAAA,EAAE,OAAO,gBAAgB,EAAE,KAAK;OAAQ,CAAA;MAC7F;KAEX,CAAA,IAAA,kBAAC,GAAD;MAAW,OAAO;MAAG,MAAM,EAAE;MAAM,WAAU;MAA7C,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAAe,UAAA,EAAE,QAAQ,EAAE;MAAW,CAAA,GACtD,kBAAC,QAAD;OAAM,WAAU;OAA6C,cAAY,EAAE,OAAO,gBAAgB,EAAE,KAAK;OACtG,UAAA,EAAM,EAAE,KAAK;MACV,CAAA,CACG;;IAEX,GAjBK,EAAE,EAiBP,CACL;GACC,CAAA,IAzBJ,kBAAC,KAAD;IAAG,WAAU;IAAwB,MAAK;IACvC,UAAA,EAAE,cAAc;GAChB,CAAA;GAyBJ,EAAK,WACJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,EAAK,SAAS,kBAAC,KAAD;KAAG,MAAK;KAAQ,WAAU;KAAoB,UAAA,EAAa,GAAG,EAAK,KAAK;IAAK,CAAA,GAC5F,kBAAC,GAAD;KAAQ,SAAQ;KAAU,MAAK;KAAK,UAAU,EAAK;KAAa,eAAe,KAAK,EAAK,SAAS;KAC/F,UAAA,EAAK,cAAc,EAAE,gBAAgB,IAAI,EAAK,QAAQ,EAAE,cAAc,IAAI,EAAE,iBAAiB;IACxF,CAAA,CACL;;EAES;;AAEtB"}
+{"version":3,"file":"directory.js","names":[],"sources":["../../../src/components/groups/directory.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useRef, useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { LETTERS } from \"../../client/group-fields.js\";\nimport type { GroupCard } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useGroups, useGroupsPage, type GroupFilter, type GroupSort } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError } from \"../social/parts.js\";\nimport { SortMenu } from \"../content/listing.js\";\nimport { Pagination } from \"../content/pagination.js\";\nimport { GroupCover, GroupLink, type GroupLike } from \"./parts.js\";\n\nexport interface GroupDirectoryProps {\n  /** The group kind listed: tag, artist, series. */\n  kind: string;\n  /** Names, counts and paths in this language; default the provider's. */\n  language?: string;\n  /** Count contents of this kind only; default every kind. */\n  contentKind?: string;\n  /** Children of this group. */\n  parent?: string;\n  /** Groups scoped by this group (characters of a series). */\n  scope?: string;\n  /** Default \"name\". With sorts, the menu's choice; with onSortChange the host keeps it. */\n  sort?: GroupSort;\n  /** The sorts offered as a menu; none by default. */\n  sorts?: readonly GroupSort[];\n  onSortChange?: (sort: GroupSort) => void;\n  /** The letter bucket shown, a-z or \"#\", null for every group. With onLetterChange the host keeps it (in its URL). */\n  letter?: string | null;\n  onLetterChange?: (letter: string | null) => void;\n  /** Hide the A-Z bar. */\n  letters?: boolean;\n  /** \"list\" (names with counts, default) or \"grid\" (covers). */\n  layout?: \"list\" | \"grid\";\n  /** A group's link; default its canonical path. */\n  href?: (group: GroupLike) => string | undefined;\n  /** A group's entry instead of the default one. */\n  renderGroup?: (group: GroupCard) => ReactNode;\n  pageSize?: number;\n  /** Numbered pages with a shown range instead of load more. */\n  pagination?: \"pages\";\n  /** The numbered page, from 1; with onPageChange the host keeps it. A changed letter or sort starts again at page 1: a host keeping the page drops it with them. */\n  page?: number;\n  onPageChange?: (page: number) => void;\n  /** Each numbered page's link, for crawlers and opening in a new tab. */\n  pageHref?: (page: number) => string;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A directory of one kind's groups: A-Z buckets, an optional sort, names with content counts or covers, paged. */\nexport function GroupDirectory(p: GroupDirectoryProps) {\n  const m = useMessages();\n  const { t } = m;\n  const [own, setOwn] = useState<string | null>(null);\n  const [ownSort, setOwnSort] = useState<GroupSort>(\"name\");\n  const letter = p.letter !== undefined ? p.letter : own;\n  const sort = p.sort ?? ownSort;\n  const choose = (l: string | null) => (p.onLetterChange ? p.onLetterChange(l) : setOwn(l));\n  const chooseSort = (s: GroupSort) => (p.onSortChange ? p.onSortChange(s) : setOwnSort(s));\n  const filter: GroupFilter = { kind: p.kind, language: p.language, contentKind: p.contentKind, parent: p.parent, scope: p.scope, sort, letter: letter ?? undefined, pageSize: p.pageSize };\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"group-directory\" data-kind={p.kind}>\n      {(p.letters !== false || !!p.sorts?.length) && (\n        <div className=\"flex flex-wrap items-start justify-between gap-2\">\n          {p.letters !== false && (\n            <nav aria-label={t(\"groups.byLetter\")} className=\"flex flex-wrap gap-1\" data-ckui=\"letters\">\n              {[null, ...LETTERS].map((l) => (\n                <Button\n                  key={l ?? \"all\"}\n                  size=\"xs\"\n                  variant={letter === l ? \"default\" : \"ghost\"}\n                  aria-pressed={letter === l}\n                  aria-label={l === null ? undefined : l === \"#\" ? t(\"groups.otherLetters\") : l.toUpperCase()}\n                  className=\"min-w-7\"\n                  onClick={() => choose(l)}\n                >\n                  {l === null ? t(\"groups.all\") : l.toUpperCase()}\n                </Button>\n              ))}\n            </nav>\n          )}\n          {!!p.sorts?.length && <SortMenu value={sort} sorts={p.sorts} onChange={chooseSort} label={(s) => t(`groups.directorySort_${s}`)} className=\"ms-auto\" />}\n        </div>\n      )}\n      {p.pagination === \"pages\" ? <NumberedGroups {...p} filter={filter} /> : <CursorGroups {...p} filter={filter} />}\n    </ContentKitUiRoot>\n  );\n}\n\ntype Shown = Pick<GroupDirectoryProps, \"layout\" | \"href\" | \"renderGroup\">;\n\nfunction CursorGroups({ filter, client, ...p }: GroupDirectoryProps & { filter: GroupFilter }) {\n  const m = useMessages();\n  const { t } = m;\n  const list = useGroups(filter, { client });\n  return (\n    <>\n      <Groups {...p} items={list.items} loading={list.loading} error={list.error} reload={list.reload} />\n      {list.hasMore && (\n        <div className=\"grid justify-items-center gap-2\">\n          {list.error && <p role=\"alert\" className=\"text-destructive\">{contentError(m, list.error)}</p>}\n          <Button variant=\"outline\" size=\"sm\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n            {list.loadingMore ? t(\"groups.loading\") : list.error ? t(\"common.retry\") : t(\"groups.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction NumberedGroups({ filter, client, ...p }: GroupDirectoryProps & { filter: GroupFilter }) {\n  const key = JSON.stringify(filter);\n  const [own, setOwn] = useState({ key, page: 1 });\n  const page = Math.max(1, Math.floor(p.page ?? (own.key === key ? own.page : 1)));\n  const top = useRef<HTMLDivElement>(null);\n  const r = useGroupsPage(filter, page, { client });\n  const size = filter.pageSize ?? 50;\n  const go = (next: number, scroll: boolean) => {\n    if (p.page === undefined) setOwn({ key, page: next });\n    p.onPageChange?.(next);\n    if (scroll) top.current?.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\n  };\n  const controls = (bottom: boolean) =>\n    r.total !== undefined ? <Pagination page={page} total={r.total} pageSize={size} range={!bottom} pageHref={p.pageHref} onPageChange={(n) => go(n, bottom)} /> : null;\n  return (\n    <>\n      <div ref={top} className=\"scroll-mt-20\">\n        {controls(false)}\n      </div>\n      <Groups {...p} items={r.items} loading={r.loading} error={r.error} reload={r.reload} />\n      {r.items.length > 0 && controls(true)}\n    </>\n  );\n}\n\nfunction Groups({ items, loading, error, reload, ...p }: Shown & { items: GroupCard[]; loading: boolean; error?: Parameters<typeof contentError>[1]; reload: () => void }) {\n  const m = useMessages();\n  const { t } = m;\n  const grid = p.layout === \"grid\";\n  const count = (n: number) => new Intl.NumberFormat(m.language).format(n);\n  if (loading && !items.length)\n    return (\n      <div className={grid ? \"grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3\" : \"grid gap-2\"} aria-busy>\n        {Array.from({ length: 6 }, (_, i) => (\n          <Skeleton key={i} className={grid ? \"aspect-[3/4] w-full\" : \"h-6 w-48\"} />\n        ))}\n      </div>\n    );\n  if (error && !items.length)\n    return (\n      <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n        <p className=\"text-destructive\">{contentError(m, error)}</p>\n        <Button size=\"sm\" variant=\"outline\" onClick={reload}>\n          {t(\"common.retry\")}\n        </Button>\n      </div>\n    );\n  if (!items.length)\n    return (\n      <p className=\"text-muted-foreground\" role=\"status\">\n        {t(\"groups.empty\")}\n      </p>\n    );\n  return (\n    <ul className={grid ? \"grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3\" : \"flex flex-wrap gap-2\"} data-ckui=\"groups\">\n      {items.map((g) => (\n        <li key={g.id} data-ckui=\"group\" data-slug={g.slug}>\n          {p.renderGroup ? (\n            p.renderGroup(g)\n          ) : grid ? (\n            <GroupLink group={g} href={p.href} className=\"group grid gap-1.5\">\n              <GroupCover group={g} className=\"aspect-[3/4] w-full\" />\n              <span className=\"font-medium break-words group-hover:underline\">{g.name || g.slug}</span>\n              <span className=\"text-xs text-muted-foreground tabular-nums\">{m.plural(\"groups.items\", g.count)}</span>\n            </GroupLink>\n          ) : (\n            <GroupLink group={g} href={p.href} className=\"inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 hover:bg-muted\">\n              <span className=\"break-words\">{g.name || g.slug}</span>\n              <span className=\"text-xs text-muted-foreground tabular-nums\" aria-label={m.plural(\"groups.items\", g.count)}>\n                {count(g.count)}\n              </span>\n            </GroupLink>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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"}

package/dist/components/groups/editor.js

@@ -623,14 +623,14 @@ function ne({ group: e, g: r, languages: i, onError: a }) {
 			}),
 			/* @__PURE__ */ W("form", {
 				className: "flex flex-wrap items-end gap-2",
-				onSubmit: (e) => {
-					e.preventDefault();
-					let t = S.trim();
-					t && T.run(() => r.names("add", [{
+				onSubmit: (t) => {
+					t.preventDefault();
+					let n = new Set(e.names.filter((e) => e.language === u).map((e) => e.name.toLowerCase())), i = f === "alias" ? [...new Set(S.split(/[,\n]/).map((e) => e.trim()).filter((e) => e && !n.has(e.toLowerCase())))] : [S.trim()].filter(Boolean);
+					i.length && T.run(() => r.names("add", i.map((e) => ({
 						language: u,
 						kind: f,
-						name: t
-					}])).then((e) => e && C(""));
+						name: e
+					})))).then((e) => e && C(""));
 				},
 				children: [
 					O.length > 1 && /* @__PURE__ */ W(_, {
@@ -670,7 +670,7 @@ function ne({ group: e, g: r, languages: i, onError: a }) {
 						className: "h-8 min-w-40 flex-1",
 						lang: u,
 						value: S,
-						placeholder: o("groupEditor.newName"),
+						placeholder: o(f === "alias" ? "groupEditor.newAliases" : "groupEditor.newName"),
 						onChange: (e) => C(e.target.value)
 					}),
 					/* @__PURE__ */ U(s, {
@@ -768,9 +768,9 @@ function re({ group: e, g: r, languages: i, onError: a }) {
 	});
 }
 function ie({ group: e, spec: t, onError: r, client: i, management: a }) {
-	let { t: o } = n(), s = e.cover, c = s?.image ? "image" : s?.content_id && !s.auto ? "content" : "auto";
+	let { t: o } = n(), s = e.cover, c = s?.image ? "image" : s?.content_id && !s.auto ? "content" : "auto", l = t.owner === "user" || !!t.avatar;
 	return /* @__PURE__ */ W(J, {
-		title: o(t.owner === "user" ? "groupEditor.images" : "groupEditor.cover"),
+		title: o(l ? "groupEditor.images" : "groupEditor.cover"),
 		ckui: "group-cover-editor",
 		children: [
 			/* @__PURE__ */ U("p", {
@@ -785,7 +785,7 @@ function ie({ group: e, spec: t, onError: r, client: i, management: a }) {
 				client: i,
 				onError: r
 			}),
-			t.owner === "user" && /* @__PURE__ */ U(I, {
+			l && /* @__PURE__ */ U(I, {
 				management: a,
 				group: e,
 				slot: "avatar",