@openrails/contentkit-ui 0.83.0 → 0.86.0

package/dist/components/groups/parts.d.ts

@@ -9,8 +9,6 @@ export type GroupLike = Pick<GroupCard, "id" | "kind" | "name" | "slug" | "path"
 /** Display names of kinds, attributes, roles and values by identifier; a missing one shows the identifier humanized. */
 export type Labels = Readonly<Record<string, string>>;
 export declare const labelOf: (labels: Labels | undefined, id: string) => string;
-/** A language's name in the UI's language ("ja" → "Japanese"). */
-export declare function useLanguageName(): (code: string) => string;
 export interface GroupCoverProps {
     group: GroupLike;
     /** Shown instead, e.g. a cover just uploaded. */
@@ -18,9 +16,9 @@ export interface GroupCoverProps {
     className?: string;
 }
 /** A group's cover: its renditions, else its initial on a muted tile. */
-export declare function GroupCover({ group, src, className }: GroupCoverProps): import('react').JSX.Element;
+export declare function GroupCover(p: GroupCoverProps): import('react').JSX.Element;
 /** A group's avatar: its renditions, else its initial in a circle. */
-export declare function GroupAvatar({ group, src, className }: GroupCoverProps): import('react').JSX.Element;
+export declare function GroupAvatar(p: GroupCoverProps): import('react').JSX.Element;
 /** A link to a group's page: `href`, else its canonical path; in-app through the provider's navigate. */
 export declare function GroupLink({ group, href, className, children }: {
     group: GroupLike;

package/dist/components/groups/parts.js

@@ -1,111 +1,92 @@
 import { RenditionImg as e } from "../rendition-img.js";
 import { useMessages as t } from "../../i18n/context.js";
-import { ContentKitContext as n, useContentKitClient as r } from "../../react/context.js";
-import { Input as i } from "../../ui/input.js";
-import { ErrorLine as a } from "../social/parts.js";
-import { humanize as o } from "../../client/group-fields.js";
-import { useTypeahead as s } from "../../react/discovery.js";
-import { useCallback as c, useContext as l, useEffect as u, useId as d, useMemo as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { cn as g } from "cn";
+import { useScopeProps as n } from "../../scope.js";
+import { ContentKitContext as r, useContentKitClient as i } from "../../react/context.js";
+import { Input as a } from "../../ui/input.js";
+import { ErrorLine as o } from "../social/parts.js";
+import { humanize as s } from "../../client/group-fields.js";
+import { useTypeahead as c } from "../../react/discovery.js";
+import { useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { cn as _ } from "cn";
 //#region src/components/groups/parts.tsx
-var _ = (e, t) => e?.[t] ?? o(t);
-function v() {
-	let { language: e } = t();
-	return f(() => {
-		let t;
-		try {
-			t = new Intl.DisplayNames(e ? [e] : void 0, { type: "language" });
-		} catch {
-			t = void 0;
-		}
-		return (e) => {
-			try {
-				return t?.of(e) ?? e;
-			} catch {
-				return e;
-			}
-		};
-	}, [e]);
-}
-function y({ group: t, src: n, className: r }) {
-	let i = g("overflow-hidden rounded-md bg-muted", r), a = /* @__PURE__ */ m("span", {
-		className: g(i, "grid place-items-center text-lg font-semibold text-muted-foreground"),
+var v = (e, t) => e?.[t] ?? s(t);
+function y({ group: t, src: r, className: i, shape: a, slot: o }) {
+	let s = n(), c = _(s.className, "overflow-hidden bg-muted", a, i), l = {
+		"data-ckui-theme": s["data-ckui-theme"],
+		style: s.style,
+		"data-ckui": o
+	}, u = /* @__PURE__ */ h("span", {
+		...l,
+		className: _(c, "grid place-items-center font-semibold text-muted-foreground", o === "group-cover" && "text-lg"),
 		children: (t.name || t.slug).trim().charAt(0).toUpperCase() || "?"
 	});
-	if (n) return /* @__PURE__ */ m("img", {
-		src: n,
+	if (r) return /* @__PURE__ */ h("img", {
+		...l,
+		src: r,
 		alt: "",
-		className: g(i, "object-cover"),
-		"data-ckui": "group-cover"
+		className: _(c, "object-cover")
 	});
-	let o = t.cover?.renditions;
-	return o?.length ? /* @__PURE__ */ m(e, {
-		outputs: o,
+	let d = (o === "group-cover" ? t.cover : t.avatar)?.renditions;
+	return d?.length ? /* @__PURE__ */ h(e, {
+		...l,
+		outputs: d,
 		fit: "cover",
 		skeleton: !0,
-		className: i,
-		fallback: a,
-		"data-ckui": "group-cover"
-	}) : a;
+		className: c,
+		fallback: u
+	}) : u;
 }
-function b({ group: t, src: n, className: r }) {
-	let i = g("aspect-square overflow-hidden rounded-full bg-muted", r), a = /* @__PURE__ */ m("span", {
-		className: g(i, "grid place-items-center font-semibold text-muted-foreground"),
-		children: (t.name || t.slug).trim().charAt(0).toUpperCase() || "?"
+function b(e) {
+	return /* @__PURE__ */ h(y, {
+		...e,
+		shape: "rounded-md",
+		slot: "group-cover"
 	});
-	if (n) return /* @__PURE__ */ m("img", {
-		src: n,
-		alt: "",
-		className: g(i, "object-cover"),
-		"data-ckui": "group-avatar"
+}
+function x(e) {
+	return /* @__PURE__ */ h(y, {
+		...e,
+		shape: "aspect-square rounded-full",
+		slot: "group-avatar"
 	});
-	let o = t.avatar?.renditions;
-	return o?.length ? /* @__PURE__ */ m(e, {
-		outputs: o,
-		fit: "cover",
-		skeleton: !0,
-		className: i,
-		fallback: a,
-		"data-ckui": "group-avatar"
-	}) : a;
 }
-function x({ group: e, href: t, className: r, children: i }) {
-	let a = l(n)?.navigate, o = t ? t(e) : e.path, s = c((e) => {
+function S({ group: e, href: t, className: n, children: i }) {
+	let a = u(r)?.navigate, o = t ? t(e) : e.path, s = l((e) => {
 		!a || !o || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || (e.preventDefault(), a(o));
 	}, [a, o]);
-	return o ? /* @__PURE__ */ m("a", {
+	return o ? /* @__PURE__ */ h("a", {
 		href: o,
-		className: r,
+		className: n,
 		onClick: s,
 		children: i
-	}) : /* @__PURE__ */ m("span", {
-		className: r,
+	}) : /* @__PURE__ */ h("span", {
+		className: n,
 		children: i
 	});
 }
-function S({ kind: e, language: n, exclude: r, label: o, onPick: c, client: l, autoFocus: _, className: v }) {
-	let { t: y } = t(), b = d(), [x, S] = p(""), [C, w] = p(0), T = s(x, {
+function C({ kind: e, language: n, exclude: r, label: i, onPick: s, client: l, autoFocus: u, className: v }) {
+	let { t: y } = t(), b = f(), [x, S] = m(""), [C, w] = m(0), T = c(x, {
 		group_kinds: [e],
 		display_language: n,
 		limit: 10,
 		client: l
-	}), E = f(() => T.groups.filter((t) => t.kind === e && !r?.includes(t.id)).slice(0, 8), [
+	}), E = p(() => T.groups.filter((t) => t.kind === e && !r?.includes(t.id)).slice(0, 8), [
 		T.groups,
 		e,
 		r
 	]), D = x.trim();
-	u(() => w(0), [D]);
+	d(() => w(0), [D]);
 	let O = (e) => {
-		S(""), c(e);
+		S(""), s(e);
 	}, k = E.length > 0;
-	return /* @__PURE__ */ h("div", {
-		className: g("relative grid min-w-48 flex-1 gap-1", v),
+	return /* @__PURE__ */ g("div", {
+		className: _("relative grid min-w-48 flex-1 gap-1", v),
 		"data-ckui": "group-picker",
 		children: [
-			/* @__PURE__ */ m(i, {
+			/* @__PURE__ */ h(a, {
 				role: "combobox",
-				"aria-label": o,
+				"aria-label": i,
 				"aria-expanded": k,
 				"aria-controls": `${b}-list`,
 				"aria-activedescendant": k ? `${b}-${C}` : void 0,
@@ -114,47 +95,47 @@ function S({ kind: e, language: n, exclude: r, label: o, onPick: c, client: l, a
 				className: "h-8",
 				value: x,
 				placeholder: y("groups.searchPlaceholder"),
-				autoFocus: _,
+				autoFocus: u,
 				onChange: (e) => S(e.target.value),
 				onKeyDown: (e) => {
 					k && (e.key === "ArrowDown" ? (e.preventDefault(), w((e) => Math.min(E.length - 1, e + 1))) : e.key === "ArrowUp" ? (e.preventDefault(), w((e) => Math.max(0, e - 1))) : e.key === "Enter" ? (e.preventDefault(), O(E[C])) : e.key === "Escape" && S(""));
 				}
 			}),
-			k && /* @__PURE__ */ m("ul", {
+			k && /* @__PURE__ */ h("ul", {
 				id: `${b}-list`,
 				role: "listbox",
-				"aria-label": o,
+				"aria-label": i,
 				className: "absolute top-full z-10 mt-1 grid w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
-				children: E.map((e, t) => /* @__PURE__ */ h("li", {
+				children: E.map((e, t) => /* @__PURE__ */ g("li", {
 					id: `${b}-${t}`,
 					role: "option",
 					"aria-selected": t === C,
-					className: g("flex cursor-pointer items-baseline justify-between gap-2 px-3 py-1.5", t === C && "bg-accent text-accent-foreground"),
+					className: _("flex cursor-pointer items-baseline justify-between gap-2 px-3 py-1.5", t === C && "bg-accent text-accent-foreground"),
 					onMouseEnter: () => w(t),
 					onMouseDown: (t) => {
 						t.preventDefault(), O(e);
 					},
-					children: [/* @__PURE__ */ m("span", {
+					children: [/* @__PURE__ */ h("span", {
 						className: "min-w-0 truncate",
 						children: e.name || e.slug
-					}), /* @__PURE__ */ m("span", {
+					}), /* @__PURE__ */ h("span", {
 						className: "text-xs text-muted-foreground",
 						children: e.slug
 					})]
 				}, e.id))
 			}),
-			D && !k && T.query === D && !T.loading && !T.error && /* @__PURE__ */ m("p", {
+			D && !k && T.query === D && !T.loading && !T.error && /* @__PURE__ */ h("p", {
 				className: "text-xs text-muted-foreground",
 				role: "status",
 				children: y("groups.noMatch")
 			}),
-			/* @__PURE__ */ m(a, { error: T.error })
+			/* @__PURE__ */ h(o, { error: T.error })
 		]
 	});
 }
-function C(e, t = {}) {
-	let n = r(t.client), [i, a] = p(/* @__PURE__ */ new Map()), o = [...new Set(e)].sort().join(",");
-	return u(() => {
+function w(e, t = {}) {
+	let n = i(t.client), [r, a] = m(/* @__PURE__ */ new Map()), o = [...new Set(e)].sort().join(",");
+	return d(() => {
 		if (!o) return;
 		let e = new AbortController(), r = o.split(",");
 		return Promise.all(r.map((r) => n.groups.get(r, t.language, e.signal).catch(() => null))).then((t) => {
@@ -164,9 +145,9 @@ function C(e, t = {}) {
 		o,
 		n,
 		t.language
-	]), i;
+	]), r;
 }
 //#endregion
-export { b as GroupAvatar, y as GroupCover, x as GroupLink, S as GroupPicker, _ as labelOf, C as useGroupNames, v as useLanguageName };
+export { x as GroupAvatar, b as GroupCover, S as GroupLink, C as GroupPicker, v as labelOf, w as useGroupNames };
 
 //# sourceMappingURL=parts.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"parts.js","names":[],"sources":["../../../src/components/groups/parts.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useContext, useEffect, useId, useMemo, useState, type MouseEvent, type ReactNode } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { humanize } from \"../../client/group-fields.js\";\nimport type { Avatar, GroupCard, GroupDetail, GroupsCover } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, useContentKitClient } from \"../../react/context.js\";\nimport { useTypeahead } from \"../../react/discovery.js\";\nimport { Input } from \"#ckui/ui/input\";\nimport { RenditionImg } from \"../rendition-img.js\";\nimport { ErrorLine } from \"../social/parts.js\";\n\n/** A group as covers and links need it. */\nexport type GroupLike = Pick<GroupCard, \"id\" | \"kind\" | \"name\" | \"slug\" | \"path\"> & { cover?: GroupsCover; avatar?: Avatar };\n\n/** Display names of kinds, attributes, roles and values by identifier; a missing one shows the identifier humanized. */\nexport type Labels = Readonly<Record<string, string>>;\n\nexport const labelOf = (labels: Labels | undefined, id: string) => labels?.[id] ?? humanize(id);\n\n/** A language's name in the UI's language (\"ja\" → \"Japanese\"). */\nexport function useLanguageName(): (code: string) => string {\n  const { language } = useMessages();\n  return useMemo(() => {\n    let names: Intl.DisplayNames | undefined;\n    try {\n      names = new Intl.DisplayNames(language ? [language] : undefined, { type: \"language\" });\n    } catch {\n      names = undefined;\n    }\n    return (code: string) => {\n      try {\n        return names?.of(code) ?? code;\n      } catch {\n        return code;\n      }\n    };\n  }, [language]);\n}\n\nexport interface GroupCoverProps {\n  group: GroupLike;\n  /** Shown instead, e.g. a cover just uploaded. */\n  src?: string;\n  className?: string;\n}\n\n/** A group's cover: its renditions, else its initial on a muted tile. */\nexport function GroupCover({ group, src, className }: GroupCoverProps) {\n  const box = cn(\"overflow-hidden rounded-md bg-muted\", className);\n  const initial = <span className={cn(box, \"grid place-items-center text-lg font-semibold text-muted-foreground\")}>{(group.name || group.slug).trim().charAt(0).toUpperCase() || \"?\"}</span>;\n  if (src) return <img src={src} alt=\"\" className={cn(box, \"object-cover\")} data-ckui=\"group-cover\" />;\n  const renditions = group.cover?.renditions;\n  if (renditions?.length) return <RenditionImg outputs={renditions} fit=\"cover\" skeleton className={box} fallback={initial} data-ckui=\"group-cover\" />;\n  return initial;\n}\n\n/** A group's avatar: its renditions, else its initial in a circle. */\nexport function GroupAvatar({ group, src, className }: GroupCoverProps) {\n  const box = cn(\"aspect-square overflow-hidden rounded-full bg-muted\", className);\n  const initial = <span className={cn(box, \"grid place-items-center font-semibold text-muted-foreground\")}>{(group.name || group.slug).trim().charAt(0).toUpperCase() || \"?\"}</span>;\n  if (src) return <img src={src} alt=\"\" className={cn(box, \"object-cover\")} data-ckui=\"group-avatar\" />;\n  const renditions = group.avatar?.renditions;\n  if (renditions?.length) return <RenditionImg outputs={renditions} fit=\"cover\" skeleton className={box} fallback={initial} data-ckui=\"group-avatar\" />;\n  return initial;\n}\n\n/** A link to a group's page: `href`, else its canonical path; in-app through the provider's navigate. */\nexport function GroupLink({ group, href, className, children }: { group: GroupLike; href?: (g: GroupLike) => string | undefined; className?: string; children: ReactNode }) {\n  const navigate = useContext(ContentKitContext)?.navigate;\n  const url = href ? href(group) : group.path;\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLAnchorElement>) => {\n      if (!navigate || !url || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n      e.preventDefault();\n      navigate(url);\n    },\n    [navigate, url],\n  );\n  if (!url) return <span className={className}>{children}</span>;\n  return (\n    <a href={url} className={className} onClick={onClick}>\n      {children}\n    </a>\n  );\n}\n\nexport interface GroupPickerProps {\n  kind: string;\n  /** Names in this language. */\n  language?: string;\n  /** Groups not offered, by id. */\n  exclude?: readonly string[];\n  label: string;\n  onPick: (group: GroupCard) => void;\n  client?: ContentKitClient;\n  autoFocus?: boolean;\n  className?: string;\n}\n\n/** A typeahead over one kind's groups (GET /v1/typeahead). */\nexport function GroupPicker({ kind, language, exclude, label, onPick, client, autoFocus, className }: GroupPickerProps) {\n  const { t } = useMessages();\n  const id = useId();\n  const [text, setText] = useState(\"\");\n  const [active, setActive] = useState(0);\n  const found = useTypeahead(text, { group_kinds: [kind], display_language: language, limit: 10, client });\n  const results = useMemo(() => found.groups.filter((g) => g.kind === kind && !exclude?.includes(g.id)).slice(0, 8), [found.groups, kind, exclude]);\n  const q = text.trim();\n  useEffect(() => setActive(0), [q]);\n  const pick = (g: GroupCard) => {\n    setText(\"\");\n    onPick(g);\n  };\n  const open = results.length > 0;\n  return (\n    <div className={cn(\"relative grid min-w-48 flex-1 gap-1\", className)} data-ckui=\"group-picker\">\n      <Input\n        role=\"combobox\"\n        aria-label={label}\n        aria-expanded={open}\n        aria-controls={`${id}-list`}\n        aria-activedescendant={open ? `${id}-${active}` : undefined}\n        aria-autocomplete=\"list\"\n        autoComplete=\"off\"\n        className=\"h-8\"\n        value={text}\n        placeholder={t(\"groups.searchPlaceholder\")}\n        autoFocus={autoFocus}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          if (!open) return;\n          if (e.key === \"ArrowDown\") {\n            e.preventDefault();\n            setActive((a) => Math.min(results.length - 1, a + 1));\n          } else if (e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setActive((a) => Math.max(0, a - 1));\n          } else if (e.key === \"Enter\") {\n            e.preventDefault();\n            pick(results[active]!);\n          } else if (e.key === \"Escape\") setText(\"\");\n        }}\n      />\n      {open && (\n        <ul id={`${id}-list`} role=\"listbox\" aria-label={label} className=\"absolute top-full z-10 mt-1 grid w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md\">\n          {results.map((g, i) => (\n            <li\n              key={g.id}\n              id={`${id}-${i}`}\n              role=\"option\"\n              aria-selected={i === active}\n              className={cn(\"flex cursor-pointer items-baseline justify-between gap-2 px-3 py-1.5\", i === active && \"bg-accent text-accent-foreground\")}\n              onMouseEnter={() => setActive(i)}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                pick(g);\n              }}\n            >\n              <span className=\"min-w-0 truncate\">{g.name || g.slug}</span>\n              <span className=\"text-xs text-muted-foreground\">{g.slug}</span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {q && !open && found.query === q && !found.loading && !found.error && (\n        <p className=\"text-xs text-muted-foreground\" role=\"status\">\n          {t(\"groups.noMatch\")}\n        </p>\n      )}\n      <ErrorLine error={found.error} />\n    </div>\n  );\n}\n\n/** Groups read by id, for names where only ids are at hand (edges); a missing or deleted one is left out. */\nexport function useGroupNames(ids: readonly string[], o: { language?: string; client?: ContentKitClient } = {}): ReadonlyMap<string, GroupDetail> {\n  const client = useContentKitClient(o.client);\n  const [found, setFound] = useState<ReadonlyMap<string, GroupDetail>>(new Map());\n  const key = [...new Set(ids)].sort().join(\",\");\n  useEffect(() => {\n    if (!key) return;\n    const ctl = new AbortController();\n    const list = key.split(\",\");\n    // A merged group answers as its survivor: keep it under the id asked for.\n    Promise.all(list.map((id) => client.groups.get(id, o.language, ctl.signal).catch(() => null))).then((all) => {\n      if (!ctl.signal.aborted) setFound(new Map(all.flatMap((g, i) => (g ? [[list[i]!, g] as const] : []))));\n    });\n    return () => ctl.abort();\n  }, [key, client, o.language]);\n  return found;\n}\n"],"mappings":"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"}
+{"version":3,"file":"parts.js","names":[],"sources":["../../../src/components/groups/parts.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useContext, useEffect, useId, useMemo, useState, type MouseEvent, type ReactNode } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { humanize } from \"../../client/group-fields.js\";\nimport type { Avatar, GroupCard, GroupDetail, GroupsCover } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, useContentKitClient } from \"../../react/context.js\";\nimport { useTypeahead } from \"../../react/discovery.js\";\nimport { Input } from \"#ckui/ui/input\";\nimport { useScopeProps } from \"../../scope.js\";\nimport { RenditionImg } from \"../rendition-img.js\";\nimport { ErrorLine } from \"../social/parts.js\";\n\n/** A group as covers and links need it. */\nexport type GroupLike = Pick<GroupCard, \"id\" | \"kind\" | \"name\" | \"slug\" | \"path\"> & { cover?: GroupsCover; avatar?: Avatar };\n\n/** Display names of kinds, attributes, roles and values by identifier; a missing one shows the identifier humanized. */\nexport type Labels = Readonly<Record<string, string>>;\n\nexport const labelOf = (labels: Labels | undefined, id: string) => labels?.[id] ?? humanize(id);\n\n\nexport interface GroupCoverProps {\n  group: GroupLike;\n  /** Shown instead, e.g. a cover just uploaded. */\n  src?: string;\n  className?: string;\n}\n\n/** A group's cover or avatar image; its own styling root, so it renders anywhere in the host. */\nfunction GroupImage({ group, src, className, shape, slot }: GroupCoverProps & { shape: string; slot: \"group-cover\" | \"group-avatar\" }) {\n  const scope = useScopeProps();\n  const box = cn(scope.className, \"overflow-hidden bg-muted\", shape, className);\n  const root = { \"data-ckui-theme\": scope[\"data-ckui-theme\"], style: scope.style, \"data-ckui\": slot };\n  const initial = (\n    <span {...root} className={cn(box, \"grid place-items-center font-semibold text-muted-foreground\", slot === \"group-cover\" && \"text-lg\")}>\n      {(group.name || group.slug).trim().charAt(0).toUpperCase() || \"?\"}\n    </span>\n  );\n  if (src) return <img {...root} src={src} alt=\"\" className={cn(box, \"object-cover\")} />;\n  const renditions = (slot === \"group-cover\" ? group.cover : group.avatar)?.renditions;\n  if (renditions?.length) return <RenditionImg {...root} outputs={renditions} fit=\"cover\" skeleton className={box} fallback={initial} />;\n  return initial;\n}\n\n/** A group's cover: its renditions, else its initial on a muted tile. */\nexport function GroupCover(p: GroupCoverProps) {\n  return <GroupImage {...p} shape=\"rounded-md\" slot=\"group-cover\" />;\n}\n\n/** A group's avatar: its renditions, else its initial in a circle. */\nexport function GroupAvatar(p: GroupCoverProps) {\n  return <GroupImage {...p} shape=\"aspect-square rounded-full\" slot=\"group-avatar\" />;\n}\n\n/** A link to a group's page: `href`, else its canonical path; in-app through the provider's navigate. */\nexport function GroupLink({ group, href, className, children }: { group: GroupLike; href?: (g: GroupLike) => string | undefined; className?: string; children: ReactNode }) {\n  const navigate = useContext(ContentKitContext)?.navigate;\n  const url = href ? href(group) : group.path;\n  const onClick = useCallback(\n    (e: MouseEvent<HTMLAnchorElement>) => {\n      if (!navigate || !url || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n      e.preventDefault();\n      navigate(url);\n    },\n    [navigate, url],\n  );\n  if (!url) return <span className={className}>{children}</span>;\n  return (\n    <a href={url} className={className} onClick={onClick}>\n      {children}\n    </a>\n  );\n}\n\nexport interface GroupPickerProps {\n  kind: string;\n  /** Names in this language. */\n  language?: string;\n  /** Groups not offered, by id. */\n  exclude?: readonly string[];\n  label: string;\n  onPick: (group: GroupCard) => void;\n  client?: ContentKitClient;\n  autoFocus?: boolean;\n  className?: string;\n}\n\n/** A typeahead over one kind's groups (GET /v1/typeahead). */\nexport function GroupPicker({ kind, language, exclude, label, onPick, client, autoFocus, className }: GroupPickerProps) {\n  const { t } = useMessages();\n  const id = useId();\n  const [text, setText] = useState(\"\");\n  const [active, setActive] = useState(0);\n  const found = useTypeahead(text, { group_kinds: [kind], display_language: language, limit: 10, client });\n  const results = useMemo(() => found.groups.filter((g) => g.kind === kind && !exclude?.includes(g.id)).slice(0, 8), [found.groups, kind, exclude]);\n  const q = text.trim();\n  useEffect(() => setActive(0), [q]);\n  const pick = (g: GroupCard) => {\n    setText(\"\");\n    onPick(g);\n  };\n  const open = results.length > 0;\n  return (\n    <div className={cn(\"relative grid min-w-48 flex-1 gap-1\", className)} data-ckui=\"group-picker\">\n      <Input\n        role=\"combobox\"\n        aria-label={label}\n        aria-expanded={open}\n        aria-controls={`${id}-list`}\n        aria-activedescendant={open ? `${id}-${active}` : undefined}\n        aria-autocomplete=\"list\"\n        autoComplete=\"off\"\n        className=\"h-8\"\n        value={text}\n        placeholder={t(\"groups.searchPlaceholder\")}\n        autoFocus={autoFocus}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          if (!open) return;\n          if (e.key === \"ArrowDown\") {\n            e.preventDefault();\n            setActive((a) => Math.min(results.length - 1, a + 1));\n          } else if (e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setActive((a) => Math.max(0, a - 1));\n          } else if (e.key === \"Enter\") {\n            e.preventDefault();\n            pick(results[active]!);\n          } else if (e.key === \"Escape\") setText(\"\");\n        }}\n      />\n      {open && (\n        <ul id={`${id}-list`} role=\"listbox\" aria-label={label} className=\"absolute top-full z-10 mt-1 grid w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md\">\n          {results.map((g, i) => (\n            <li\n              key={g.id}\n              id={`${id}-${i}`}\n              role=\"option\"\n              aria-selected={i === active}\n              className={cn(\"flex cursor-pointer items-baseline justify-between gap-2 px-3 py-1.5\", i === active && \"bg-accent text-accent-foreground\")}\n              onMouseEnter={() => setActive(i)}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                pick(g);\n              }}\n            >\n              <span className=\"min-w-0 truncate\">{g.name || g.slug}</span>\n              <span className=\"text-xs text-muted-foreground\">{g.slug}</span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {q && !open && found.query === q && !found.loading && !found.error && (\n        <p className=\"text-xs text-muted-foreground\" role=\"status\">\n          {t(\"groups.noMatch\")}\n        </p>\n      )}\n      <ErrorLine error={found.error} />\n    </div>\n  );\n}\n\n/** Groups read by id, for names where only ids are at hand (edges); a missing or deleted one is left out. */\nexport function useGroupNames(ids: readonly string[], o: { language?: string; client?: ContentKitClient } = {}): ReadonlyMap<string, GroupDetail> {\n  const client = useContentKitClient(o.client);\n  const [found, setFound] = useState<ReadonlyMap<string, GroupDetail>>(new Map());\n  const key = [...new Set(ids)].sort().join(\",\");\n  useEffect(() => {\n    if (!key) return;\n    const ctl = new AbortController();\n    const list = key.split(\",\");\n    // A merged group answers as its survivor: keep it under the id asked for.\n    Promise.all(list.map((id) => client.groups.get(id, o.language, ctl.signal).catch(() => null))).then((all) => {\n      if (!ctl.signal.aborted) setFound(new Map(all.flatMap((g, i) => (g ? [[list[i]!, g] as const] : []))));\n    });\n    return () => ctl.abort();\n  }, [key, client, o.language]);\n  return found;\n}\n"],"mappings":"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"}