@openrails/contentkit-ui 0.85.1 → 0.87.0-rc.1

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. */

package/dist/components/groups/parts.js

@@ -11,25 +11,7 @@ import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { cn as _ } from "cn";
 //#region src/components/groups/parts.tsx
 var v = (e, t) => e?.[t] ?? s(t);
-function y() {
-	let { language: e } = t();
-	return p(() => {
-		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 b({ group: t, src: r, className: i, shape: a, slot: o }) {
+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,
@@ -55,21 +37,21 @@ function b({ group: t, src: r, className: i, shape: a, slot: o }) {
 		fallback: u
 	}) : u;
 }
-function x(e) {
-	return /* @__PURE__ */ h(b, {
+function b(e) {
+	return /* @__PURE__ */ h(y, {
 		...e,
 		shape: "rounded-md",
 		slot: "group-cover"
 	});
 }
-function S(e) {
-	return /* @__PURE__ */ h(b, {
+function x(e) {
+	return /* @__PURE__ */ h(y, {
 		...e,
 		shape: "aspect-square rounded-full",
 		slot: "group-avatar"
 	});
 }
-function C({ group: e, href: t, className: n, children: i }) {
+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]);
@@ -83,7 +65,7 @@ function C({ group: e, href: t, className: n, children: i }) {
 		children: i
 	});
 }
-function w({ kind: e, language: n, exclude: r, label: i, onPick: s, client: l, autoFocus: u, className: v }) {
+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,
@@ -151,7 +133,7 @@ function w({ kind: e, language: n, exclude: r, label: i, onPick: s, client: l, a
 		]
 	});
 }
-function T(e, t = {}) {
+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;
@@ -166,6 +148,6 @@ function T(e, t = {}) {
 	]), r;
 }
 //#endregion
-export { S as GroupAvatar, x as GroupCover, C as GroupLink, w as GroupPicker, v as labelOf, T as useGroupNames, y 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 { 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/** 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 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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"}
+{"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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"}