@openrails/contentkit-ui 0.0.0-stage → 0.68.0

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ContentKitClient } from '../../client/client.js';
+import { Poll as PollData } from '../../client/generated/wire.js';
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitErrorHandler } from '../../react/context.js';
+export interface PollProps {
+    /** A poll id, or the poll the host already has; none shows the newest live poll (in language). */
+    poll?: string | PollData;
+    language?: string;
+    /** When results show: once the visitor voted (default), or always. A closed poll always shows them. */
+    results?: "voted" | "always";
+    /** Asks a signed-out visitor to sign in where the server takes no anonymous votes (default the provider's). */
+    onSignIn?: () => void;
+    /** Shown when there is no live poll; default nothing. */
+    empty?: ReactNode;
+    /** Longest free-text answer. Default 280. */
+    maxLength?: number;
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * A poll: vote (at once, final) and results scaled to the leading option, or a
+ * free-text answer and its groups. Question and option images, the closing
+ * date and the closed state come from the poll. Signed out, visitors vote
+ * where the server allows it (`Config.anonymous.votes`) and are asked to sign
+ * in elsewhere; free-text answers always need a signed-in visitor.
+ */
+export declare function Poll(p: PollProps): import('react').JSX.Element | null;

package/dist/components/social/poll.js

@@ -0,0 +1,252 @@
+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 { Skeleton as s } from "../../ui/skeleton.js";
+import { Textarea as c } from "../../ui/textarea.js";
+import { ErrorLine as l, formatDate as u } from "./parts.js";
+import { usePoll as d } from "../../react/polls.js";
+import { useContext as f, useId as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { cn as v } from "cn";
+import { Tick02Icon as y } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as b } from "@hugeicons/react";
+//#region src/components/social/poll.tsx
+function x(c) {
+	let p = t(), { t: y } = p, b = f(r), x = typeof c.poll == "string" ? c.poll : c.poll?.id, w = d(x ?? null, {
+		initial: typeof c.poll == "object" ? c.poll : void 0,
+		language: c.language,
+		client: c.client
+	}), T = i(c.onError), [E, D] = m(null), { config: O } = o({ client: c.client }), k = c.onSignIn ?? b?.onSignIn, A = b?.viewer === null && O?.anonymous.votes === !1, j = (e) => /* @__PURE__ */ g(n, {
+		appearance: c.appearance,
+		className: v("grid gap-3 rounded-xl border border-border bg-card p-4 text-sm text-card-foreground", c.className),
+		"data-ckui": "poll",
+		children: e
+	});
+	if (w.loading && !w.poll) return j(/* @__PURE__ */ _("div", {
+		className: "grid gap-2",
+		"aria-busy": !0,
+		children: [
+			/* @__PURE__ */ g(s, { className: "h-5 w-2/3" }),
+			/* @__PURE__ */ g(s, { className: "h-9 w-full" }),
+			/* @__PURE__ */ g(s, { className: "h-9 w-full" })
+		]
+	}));
+	if (w.error && !w.poll) return j(/* @__PURE__ */ _("div", {
+		className: "grid justify-items-start gap-2",
+		children: [/* @__PURE__ */ g(l, { children: y("poll.loadFailed") }), /* @__PURE__ */ g(a, {
+			size: "sm",
+			variant: "outline",
+			onClick: w.reload,
+			children: y("common.retry")
+		})]
+	}));
+	let M = w.poll;
+	if (!M) return c.empty ? /* @__PURE__ */ g(h, { children: c.empty }) : null;
+	let N = (t, n) => {
+		let r = e(t);
+		if (r.code === "unauthorized" && k) return k();
+		D(r), T(r, n);
+	}, P = (e) => {
+		if (A) return k?.();
+		D(null), w.vote(e).catch((e) => N(e, "poll.vote"));
+	}, F = /* @__PURE__ */ _(h, { children: [
+		M.image_url && /* @__PURE__ */ g("img", {
+			src: M.image_url,
+			alt: "",
+			className: "aspect-video w-full rounded-lg object-cover",
+			loading: "lazy"
+		}),
+		/* @__PURE__ */ g("h3", {
+			className: "text-base font-semibold",
+			id: `poll-${M.id}`,
+			children: M.question
+		}),
+		M.closed ? /* @__PURE__ */ g("p", {
+			className: "text-muted-foreground",
+			children: y("poll.closed")
+		}) : M.closes_at && /* @__PURE__ */ g("p", {
+			className: "text-muted-foreground",
+			children: y("poll.closes", { date: u(p, M.closes_at) })
+		})
+	] });
+	return j(/* @__PURE__ */ _(h, { children: [
+		F,
+		M.kind === "free_text" ? /* @__PURE__ */ g(C, {
+			poll: M,
+			pending: w.pending,
+			maxLength: c.maxLength ?? 280,
+			results: c.results,
+			onAnswer: (e) => w.answer(e).then(() => !0, (e) => (N(e, "poll.answer"), !1))
+		}) : /* @__PURE__ */ g(S, {
+			poll: M,
+			results: c.results === "always" || M.voted || M.closed,
+			canVote: !M.voted && !M.closed && !w.pending && (!A || !!k),
+			onVote: P
+		}),
+		/* @__PURE__ */ g(l, { error: E }),
+		!M.voted && !M.closed && A && M.kind !== "free_text" && /* @__PURE__ */ g("p", {
+			className: "text-xs text-muted-foreground",
+			children: y("poll.signIn")
+		})
+	] }));
+}
+function S({ poll: e, results: n, canVote: r, onVote: i }) {
+	let o = t(), { t: s } = o, c = [...e.options].sort((e, t) => e.position - t.position), l = c.some((e) => e.image_url), u = e.total_votes || c.reduce((e, t) => e + t.vote_count, 0), d = Math.max(1, ...c.map((e) => e.vote_count));
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("ul", {
+		className: v("grid gap-2", l && "grid-cols-2"),
+		"aria-labelledby": `poll-${e.id}`,
+		children: c.map((t) => {
+			let c = e.my_option === t.id, l = u ? Math.round(t.vote_count / u * 100) : 0, f = /* @__PURE__ */ _(h, { children: [
+				t.image_url && /* @__PURE__ */ g("img", {
+					src: t.image_url,
+					alt: "",
+					className: "aspect-[4/3] w-full rounded-md bg-muted object-contain",
+					loading: "lazy"
+				}),
+				/* @__PURE__ */ _("span", {
+					className: "relative flex w-full items-center gap-2",
+					children: [n && /* @__PURE__ */ g("span", {
+						"aria-hidden": !0,
+						className: v("absolute inset-y-0 start-0 rounded-md transition-[width] duration-500 motion-reduce:transition-none", c ? "bg-primary/25" : "bg-muted"),
+						style: { width: `${t.vote_count / d * 100}%` }
+					}), /* @__PURE__ */ _("span", {
+						className: "relative flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5",
+						children: [
+							c && /* @__PURE__ */ g(b, {
+								icon: y,
+								strokeWidth: 2.5,
+								className: "size-4 shrink-0 text-primary",
+								"aria-label": s("poll.yourVote")
+							}),
+							/* @__PURE__ */ g("span", {
+								className: "min-w-0 flex-1 break-words text-start",
+								children: t.label
+							}),
+							n && /* @__PURE__ */ _("span", {
+								className: "shrink-0 tabular-nums font-medium",
+								children: [l, "%"]
+							})
+						]
+					})]
+				}),
+				n && /* @__PURE__ */ g("span", {
+					className: "sr-only",
+					children: o.plural("poll.votes", t.vote_count)
+				})
+			] });
+			return /* @__PURE__ */ g("li", {
+				"data-option": t.id,
+				"data-mine": c || void 0,
+				children: r ? /* @__PURE__ */ g(a, {
+					variant: "outline",
+					className: "h-auto w-full flex-col items-stretch gap-1.5 p-1 whitespace-normal",
+					onClick: () => i(t.id),
+					children: f
+				}) : /* @__PURE__ */ g("div", {
+					className: "grid gap-1.5 rounded-md border border-border p-1",
+					role: "meter",
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": l,
+					"aria-label": t.label,
+					children: f
+				})
+			}, t.id);
+		})
+	}), n && /* @__PURE__ */ g("p", {
+		className: "text-xs text-muted-foreground",
+		children: o.plural("poll.votes", u)
+	})] });
+}
+function C({ poll: e, pending: n, maxLength: r, results: i, onAnswer: o }) {
+	let s = t(), { t: l } = s, u = p(), d = e.my_answer, [f, v] = m(!1), [y, b] = m(d?.text ?? ""), x = !e.closed, S = [...e.groups ?? []].sort((e, t) => t.count - e.count), C = Math.max(1, ...S.map((e) => e.count)), w = S.length > 0 && (!!d || e.closed || i === "always");
+	return /* @__PURE__ */ _(h, { children: [x && (!d || f) ? /* @__PURE__ */ _("form", {
+		className: "grid gap-2",
+		onSubmit: (e) => {
+			e.preventDefault(), y.trim() && o(y.trim()).then((e) => e && v(!1));
+		},
+		children: [
+			/* @__PURE__ */ g("label", {
+				htmlFor: `${u}-answer`,
+				className: "sr-only",
+				children: l("poll.answerPlaceholder")
+			}),
+			/* @__PURE__ */ g(c, {
+				id: `${u}-answer`,
+				rows: 2,
+				maxLength: r,
+				placeholder: l("poll.answerPlaceholder"),
+				value: y,
+				disabled: n,
+				onChange: (e) => b(e.target.value)
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex justify-end gap-2",
+				children: [f && /* @__PURE__ */ g(a, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					onClick: () => v(!1),
+					children: l("common.cancel")
+				}), /* @__PURE__ */ g(a, {
+					type: "submit",
+					size: "sm",
+					disabled: n || !y.trim(),
+					children: l(d ? "poll.updateAnswer" : "poll.answer")
+				})]
+			})
+		]
+	}) : d && /* @__PURE__ */ _("div", {
+		className: "grid gap-1 rounded-md bg-muted p-3",
+		children: [
+			/* @__PURE__ */ g("p", {
+				className: "text-xs text-muted-foreground",
+				children: l("poll.yourAnswer")
+			}),
+			/* @__PURE__ */ g("p", {
+				className: "break-words whitespace-pre-wrap",
+				children: d.text
+			}),
+			x && /* @__PURE__ */ g(a, {
+				variant: "link",
+				size: "xs",
+				className: "justify-self-start px-0",
+				onClick: () => {
+					b(d.text), v(!0);
+				},
+				children: l("poll.editAnswer")
+			})
+		]
+	}), w && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("ul", {
+		className: "grid gap-2",
+		"aria-labelledby": `poll-${e.id}`,
+		children: S.map((e) => /* @__PURE__ */ _("li", {
+			className: "relative flex items-center gap-2 rounded-md px-2 py-1.5",
+			children: [
+				/* @__PURE__ */ g("span", {
+					"aria-hidden": !0,
+					className: "absolute inset-y-0 start-0 rounded-md bg-muted",
+					style: { width: `${e.count / C * 100}%` }
+				}),
+				/* @__PURE__ */ g("span", {
+					className: "relative min-w-0 flex-1 break-words",
+					children: e.label
+				}),
+				/* @__PURE__ */ g("span", {
+					className: "relative tabular-nums text-muted-foreground",
+					children: s.plural("poll.answers", e.count)
+				})
+			]
+		}, e.id))
+	}), e.answer_count !== void 0 && /* @__PURE__ */ g("p", {
+		className: "text-xs text-muted-foreground",
+		children: s.plural("poll.answers", e.answer_count)
+	})] })] });
+}
+//#endregion
+export { x as Poll };
+
+//# sourceMappingURL=poll.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"poll.js","names":[],"sources":["../../../src/components/social/poll.tsx"],"sourcesContent":["import { Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useContext, useId, useState, type ReactNode } from \"react\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { toContentKitError, type ContentKitError } from \"../../client/errors.js\";\nimport type { Poll as PollData } 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 { usePoll } from \"../../react/polls.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { Textarea } from \"#ckui/ui/textarea\";\nimport { ErrorLine, formatDate } from \"./parts.js\";\n\nexport interface PollProps {\n  /** A poll id, or the poll the host already has; none shows the newest live poll (in language). */\n  poll?: string | PollData;\n  language?: string;\n  /** When results show: once the visitor voted (default), or always. A closed poll always shows them. */\n  results?: \"voted\" | \"always\";\n  /** Asks a signed-out visitor to sign in where the server takes no anonymous votes (default the provider's). */\n  onSignIn?: () => void;\n  /** Shown when there is no live poll; default nothing. */\n  empty?: ReactNode;\n  /** Longest free-text answer. Default 280. */\n  maxLength?: number;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/**\n * A poll: vote (at once, final) and results scaled to the leading option, or a\n * free-text answer and its groups. Question and option images, the closing\n * date and the closed state come from the poll. Signed out, visitors vote\n * where the server allows it (`Config.anonymous.votes`) and are asked to sign\n * in elsewhere; free-text answers always need a signed-in visitor.\n */\nexport function Poll(p: PollProps) {\n  const m = useMessages();\n  const { t } = m;\n  const ctx = useContext(ContentKitContext);\n  const id = typeof p.poll === \"string\" ? p.poll : p.poll?.id;\n  const r = usePoll(id ?? null, { initial: typeof p.poll === \"object\" ? p.poll : undefined, language: p.language, client: p.client });\n  const report = useErrorReporter(p.onError);\n  const [error, setError] = useState<ContentKitError | null>(null);\n  const { config } = useContentConfig({ client: p.client });\n  const signIn = p.onSignIn ?? ctx?.onSignIn;\n  const signedOut = ctx?.viewer === null;\n  // Signed out where the server takes no anonymous votes.\n  const mustSignIn = signedOut && config?.anonymous.votes === false;\n  const root = (children: ReactNode) => (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 rounded-xl border border-border bg-card p-4 text-sm text-card-foreground\", p.className)} data-ckui=\"poll\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (r.loading && !r.poll) {\n    return root(\n      <div className=\"grid gap-2\" aria-busy>\n        <Skeleton className=\"h-5 w-2/3\" />\n        <Skeleton className=\"h-9 w-full\" />\n        <Skeleton className=\"h-9 w-full\" />\n      </div>,\n    );\n  }\n  if (r.error && !r.poll) {\n    return root(\n      <div className=\"grid justify-items-start gap-2\">\n        <ErrorLine>{t(\"poll.loadFailed\")}</ErrorLine>\n        <Button size=\"sm\" variant=\"outline\" onClick={r.reload}>\n          {t(\"common.retry\")}\n        </Button>\n      </div>,\n    );\n  }\n  const poll = r.poll;\n  if (!poll) return p.empty ? <>{p.empty}</> : null;\n\n  const fail = (e: unknown, op: \"poll.vote\" | \"poll.answer\") => {\n    const err = toContentKitError(e);\n    if (err.code === \"unauthorized\" && signIn) return signIn();\n    setError(err);\n    report(err, op);\n  };\n  const vote = (option: string) => {\n    if (mustSignIn) return signIn?.();\n    setError(null);\n    r.vote(option).catch((e) => fail(e, \"poll.vote\"));\n  };\n  const header = (\n    <>\n      {poll.image_url && <img src={poll.image_url} alt=\"\" className=\"aspect-video w-full rounded-lg object-cover\" loading=\"lazy\" />}\n      <h3 className=\"text-base font-semibold\" id={`poll-${poll.id}`}>\n        {poll.question}\n      </h3>\n      {poll.closed ? (\n        <p className=\"text-muted-foreground\">{t(\"poll.closed\")}</p>\n      ) : (\n        poll.closes_at && <p className=\"text-muted-foreground\">{t(\"poll.closes\", { date: formatDate(m, poll.closes_at) })}</p>\n      )}\n    </>\n  );\n  return root(\n    <>\n      {header}\n      {poll.kind === \"free_text\" ? (\n        <FreeText poll={poll} pending={r.pending} maxLength={p.maxLength ?? 280} results={p.results} onAnswer={(text) =>\n            r.answer(text).then(\n              () => true,\n              (e) => (fail(e, \"poll.answer\"), false),\n            )\n          }\n        />\n      ) : (\n        <Choices poll={poll} results={p.results === \"always\" || poll.voted || poll.closed} canVote={!poll.voted && !poll.closed && !r.pending && (!mustSignIn || !!signIn)} onVote={vote} />\n      )}\n      <ErrorLine error={error} />\n      {!poll.voted && !poll.closed && mustSignIn && poll.kind !== \"free_text\" && <p className=\"text-xs text-muted-foreground\">{t(\"poll.signIn\")}</p>}\n    </>,\n  );\n}\n\nfunction Choices({ poll, results, canVote, onVote }: { poll: PollData; results: boolean; canVote: boolean; onVote: (option: string) => void }) {\n  const m = useMessages();\n  const { t } = m;\n  const options = [...poll.options].sort((a, b) => a.position - b.position);\n  const images = options.some((o) => o.image_url);\n  const total = poll.total_votes || options.reduce((n, o) => n + o.vote_count, 0);\n  const lead = Math.max(1, ...options.map((o) => o.vote_count));\n  return (\n    <>\n      <ul className={cn(\"grid gap-2\", images && \"grid-cols-2\")} aria-labelledby={`poll-${poll.id}`}>\n        {options.map((o) => {\n          const mine = poll.my_option === o.id;\n          const percent = total ? Math.round((o.vote_count / total) * 100) : 0;\n          const body = (\n            <>\n              {o.image_url && <img src={o.image_url} alt=\"\" className=\"aspect-[4/3] w-full rounded-md bg-muted object-contain\" loading=\"lazy\" />}\n              <span className=\"relative flex w-full items-center gap-2\">\n                {results && (\n                  <span\n                    aria-hidden\n                    className={cn(\"absolute inset-y-0 start-0 rounded-md transition-[width] duration-500 motion-reduce:transition-none\", mine ? \"bg-primary/25\" : \"bg-muted\")}\n                    style={{ width: `${(o.vote_count / lead) * 100}%` }}\n                  />\n                )}\n                <span className=\"relative flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5\">\n                  {mine && <HugeiconsIcon icon={Tick02Icon} strokeWidth={2.5} className=\"size-4 shrink-0 text-primary\" aria-label={t(\"poll.yourVote\")} />}\n                  <span className=\"min-w-0 flex-1 break-words text-start\">{o.label}</span>\n                  {results && <span className=\"shrink-0 tabular-nums font-medium\">{percent}%</span>}\n                </span>\n              </span>\n              {results && <span className=\"sr-only\">{m.plural(\"poll.votes\", o.vote_count)}</span>}\n            </>\n          );\n          return (\n            <li key={o.id} data-option={o.id} data-mine={mine || undefined}>\n              {canVote ? (\n                <Button variant=\"outline\" className=\"h-auto w-full flex-col items-stretch gap-1.5 p-1 whitespace-normal\" onClick={() => onVote(o.id)}>\n                  {body}\n                </Button>\n              ) : (\n                <div\n                  className=\"grid gap-1.5 rounded-md border border-border p-1\"\n                  role=\"meter\"\n                  aria-valuemin={0}\n                  aria-valuemax={100}\n                  aria-valuenow={percent}\n                  aria-label={o.label}\n                >\n                  {body}\n                </div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n      {results && <p className=\"text-xs text-muted-foreground\">{m.plural(\"poll.votes\", total)}</p>}\n    </>\n  );\n}\n\nfunction FreeText({ poll, pending, maxLength, results, onAnswer }: { poll: PollData; pending: boolean; maxLength: number; results?: \"voted\" | \"always\"; onAnswer: (text: string) => Promise<boolean> }) {\n  const m = useMessages();\n  const { t } = m;\n  const ids = useId();\n  const mine = poll.my_answer;\n  const [editing, setEditing] = useState(false);\n  const [text, setText] = useState(mine?.text ?? \"\");\n  const open = !poll.closed;\n  const groups = [...(poll.groups ?? [])].sort((a, b) => b.count - a.count);\n  const lead = Math.max(1, ...groups.map((g) => g.count));\n  const showGroups = groups.length > 0 && (!!mine || poll.closed || results === \"always\");\n  return (\n    <>\n      {open && (!mine || editing) ? (\n        <form\n          className=\"grid gap-2\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            if (!text.trim()) return;\n            void onAnswer(text.trim()).then((ok) => ok && setEditing(false));\n          }}\n        >\n          <label htmlFor={`${ids}-answer`} className=\"sr-only\">\n            {t(\"poll.answerPlaceholder\")}\n          </label>\n          <Textarea id={`${ids}-answer`} rows={2} maxLength={maxLength} placeholder={t(\"poll.answerPlaceholder\")} value={text} disabled={pending} onChange={(e) => setText(e.target.value)} />\n          <div className=\"flex justify-end gap-2\">\n            {editing && (\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => setEditing(false)}>\n                {t(\"common.cancel\")}\n              </Button>\n            )}\n            <Button type=\"submit\" size=\"sm\" disabled={pending || !text.trim()}>\n              {t(mine ? \"poll.updateAnswer\" : \"poll.answer\")}\n            </Button>\n          </div>\n        </form>\n      ) : (\n        mine && (\n          <div className=\"grid gap-1 rounded-md bg-muted p-3\">\n            <p className=\"text-xs text-muted-foreground\">{t(\"poll.yourAnswer\")}</p>\n            <p className=\"break-words whitespace-pre-wrap\">{mine.text}</p>\n            {open && (\n              <Button\n                variant=\"link\"\n                size=\"xs\"\n                className=\"justify-self-start px-0\"\n                onClick={() => {\n                  setText(mine.text);\n                  setEditing(true);\n                }}\n              >\n                {t(\"poll.editAnswer\")}\n              </Button>\n            )}\n          </div>\n        )\n      )}\n      {showGroups && (\n        <>\n          <ul className=\"grid gap-2\" aria-labelledby={`poll-${poll.id}`}>\n            {groups.map((g) => (\n              <li key={g.id} className=\"relative flex items-center gap-2 rounded-md px-2 py-1.5\">\n                <span aria-hidden className=\"absolute inset-y-0 start-0 rounded-md bg-muted\" style={{ width: `${(g.count / lead) * 100}%` }} />\n                <span className=\"relative min-w-0 flex-1 break-words\">{g.label}</span>\n                <span className=\"relative tabular-nums text-muted-foreground\">{m.plural(\"poll.answers\", g.count)}</span>\n              </li>\n            ))}\n          </ul>\n          {poll.answer_count !== undefined && <p className=\"text-xs text-muted-foreground\">{m.plural(\"poll.answers\", poll.answer_count)}</p>}\n        </>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/sortable-list.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ContentKitUiAppearance } from '../appearance.js';
+export interface SortableListProps<T> {
+    items: readonly T[];
+    /** A stable key per item. */
+    id: (item: T) => string;
+    /** The item's spoken name in announcements and the handle's label. */
+    name: (item: T) => string;
+    /** Called once per drop with the old and new index. */
+    onMove: (from: number, to: number) => void;
+    /** Rows (default) or a wrapping grid of tiles. */
+    layout?: "list" | "grid";
+    disabled?: boolean;
+    /** Attributes of an item's `<li>`. */
+    row?: (item: T) => HTMLAttributes<HTMLLIElement> & Record<`data-${string}`, unknown>;
+    /** An item's content; place `handle` (its drag handle) where it belongs. */
+    children: (item: T, handle: ReactNode, index: number) => ReactNode;
+    className?: string;
+    /** Accessible name of the list. */
+    label?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * A reorderable list or grid (dnd-kit): drag an item by its handle with a
+ * mouse, a finger or the keyboard (Space or Enter lifts, arrows move, Space
+ * or Enter drops, Escape cancels), with localized screen reader
+ * announcements. onMove gets the old and new index once, on drop.
+ */
+export declare function SortableList<T>({ items, id, name, onMove, layout, disabled, row, children, className, label, appearance }: SortableListProps<T>): import('react').JSX.Element;

package/dist/components/sortable-list.js

@@ -0,0 +1,121 @@
+import { useMessages as e } from "../i18n/context.js";
+import { ContentKitUiRoot as t } from "../scope.js";
+import { useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { cn as o } from "cn";
+import { DragDropVerticalIcon as s } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as c } from "@hugeicons/react";
+import { DndContext as l, DragOverlay as u, KeyboardSensor as d, PointerSensor as f, closestCenter as p, useSensor as m, useSensors as h } from "@dnd-kit/core";
+import { SortableContext as g, sortableKeyboardCoordinates as _, useSortable as v } from "@dnd-kit/sortable";
+//#region src/components/sortable-list.tsx
+var y = () => null, b = "inline-flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing disabled:cursor-default disabled:opacity-50";
+function x({ items: v, id: x, name: C, onMove: w, layout: T = "list", disabled: E, row: D, children: O, className: k, label: A, appearance: j }) {
+	let { t: M } = e(), N = h(m(f, { activationConstraint: { distance: 4 } }), m(d, { coordinateGetter: _ })), P = n(() => v.map(x), [v, x]), [F, I] = r(null), [L, R] = r(null), z = (e) => P.indexOf(String(e)), B = (e) => {
+		let t = z(e);
+		return t < 0 ? "" : C(v[t]);
+	}, V = P.length, H = {
+		onDragStart: ({ active: e }) => M("sortable.pickedUp", {
+			name: B(e.id),
+			position: z(e.id) + 1,
+			total: V
+		}),
+		onDragOver: ({ active: e, over: t }) => t ? M("sortable.over", {
+			name: B(e.id),
+			position: z(t.id) + 1,
+			total: V
+		}) : void 0,
+		onDragEnd: ({ active: e, over: t }) => t ? M("sortable.dropped", {
+			name: B(e.id),
+			position: z(t.id) + 1,
+			total: V
+		}) : M("sortable.droppedAway", { name: B(e.id) }),
+		onDragCancel: ({ active: e }) => M("sortable.canceled", { name: B(e.id) })
+	}, U = { draggable: M("sortable.instructions") }, W = F ? z(F) : -1, G = L ? z(L) : -1, K = W >= 0 ? v[W] : void 0, q = T === "grid", J = (e, t) => /* @__PURE__ */ i("ol", {
+		className: o(q ? "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2" : "grid gap-1", k),
+		"aria-label": t ? void 0 : A,
+		"data-ckui": "sortable-list",
+		"data-layout": T,
+		"data-overlay": t ? "" : void 0,
+		children: e
+	});
+	return /* @__PURE__ */ i(t, {
+		appearance: j,
+		className: "contents",
+		children: /* @__PURE__ */ a(l, {
+			sensors: N,
+			collisionDetection: p,
+			accessibility: {
+				announcements: H,
+				screenReaderInstructions: U
+			},
+			onDragStart: (e) => I(String(e.active.id)),
+			onDragOver: (e) => R(e.over ? String(e.over.id) : null),
+			onDragCancel: () => {
+				I(null), R(null);
+			},
+			onDragEnd: (e) => {
+				I(null), R(null);
+				let t = z(e.active.id), n = e.over ? z(e.over.id) : -1;
+				t >= 0 && n >= 0 && t !== n && w(t, n);
+			},
+			children: [/* @__PURE__ */ i(g, {
+				items: P,
+				strategy: y,
+				disabled: E,
+				children: J(v.map((e, t) => /* @__PURE__ */ i(S, {
+					id: P[t],
+					label: M("sortable.handle", { name: C(e) }),
+					attrs: D?.(e),
+					disabled: E,
+					grid: q,
+					dragging: t === W,
+					drop: W >= 0 && t === G && G !== W ? G > W ? "after" : "before" : void 0,
+					render: (n) => O(e, n, t)
+				}, P[t])))
+			}), /* @__PURE__ */ i(u, {
+				dropAnimation: null,
+				children: K === void 0 ? null : J(/* @__PURE__ */ i("li", {
+					...D?.(K),
+					className: o(D?.(K).className, "cursor-grabbing rounded-md bg-background shadow-lg ring-1 ring-border"),
+					children: O(K, /* @__PURE__ */ i("span", {
+						className: b,
+						children: /* @__PURE__ */ i(c, {
+							icon: s,
+							strokeWidth: 2,
+							className: "size-4.5"
+						})
+					}), W)
+				}), !0)
+			})]
+		})
+	});
+}
+function S({ id: e, label: t, attrs: n, disabled: r, grid: a, dragging: l, drop: u, render: d }) {
+	let { attributes: f, listeners: p, setNodeRef: m, setActivatorNodeRef: h } = v({ id: e }), g = /* @__PURE__ */ i("button", {
+		type: "button",
+		ref: h,
+		className: b,
+		"aria-label": t,
+		disabled: r,
+		"data-ckui": "sort-handle",
+		...f,
+		...p,
+		children: /* @__PURE__ */ i(c, {
+			icon: s,
+			strokeWidth: 2,
+			className: "size-4.5"
+		})
+	});
+	return /* @__PURE__ */ i("li", {
+		...n,
+		ref: m,
+		className: o(n?.className, "relative data-dragging:opacity-40 before:pointer-events-none before:absolute before:rounded-full before:bg-primary before:opacity-0", a ? "before:inset-y-0 before:w-0.5 data-[drop=before]:before:-left-[5px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-right-[5px] data-[drop=after]:before:opacity-100" : "before:inset-x-0 before:h-0.5 data-[drop=before]:before:-top-[3px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-bottom-[3px] data-[drop=after]:before:opacity-100"),
+		"data-drop": u,
+		"data-dragging": l || void 0,
+		children: d(g)
+	});
+}
+//#endregion
+export { x as SortableList };
+
+//# sourceMappingURL=sortable-list.js.map

package/dist/components/sortable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.js","names":[],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["import {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type ScreenReaderInstructions,\n} from \"@dnd-kit/core\";\nimport { SortableContext, sortableKeyboardCoordinates, useSortable } from \"@dnd-kit/sortable\";\nimport { DragDropVerticalIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\n\nexport interface SortableListProps<T> {\n  items: readonly T[];\n  /** A stable key per item. */\n  id: (item: T) => string;\n  /** The item's spoken name in announcements and the handle's label. */\n  name: (item: T) => string;\n  /** Called once per drop with the old and new index. */\n  onMove: (from: number, to: number) => void;\n  /** Rows (default) or a wrapping grid of tiles. */\n  layout?: \"list\" | \"grid\";\n  disabled?: boolean;\n  /** Attributes of an item's `<li>`. */\n  row?: (item: T) => HTMLAttributes<HTMLLIElement> & Record<`data-${string}`, unknown>;\n  /** An item's content; place `handle` (its drag handle) where it belongs. */\n  children: (item: T, handle: ReactNode, index: number) => ReactNode;\n  className?: string;\n  /** Accessible name of the list. */\n  label?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n// Items stay put while dragging; a bar marks where the item will land.\nconst noShift = () => null;\nconst handleClass =\n  \"inline-flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing disabled:cursor-default disabled:opacity-50\";\n\n/**\n * A reorderable list or grid (dnd-kit): drag an item by its handle with a\n * mouse, a finger or the keyboard (Space or Enter lifts, arrows move, Space\n * or Enter drops, Escape cancels), with localized screen reader\n * announcements. onMove gets the old and new index once, on drop.\n */\nexport function SortableList<T>({ items, id, name, onMove, layout = \"list\", disabled, row, children, className, label, appearance }: SortableListProps<T>) {\n  const { t } = useMessages();\n  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));\n  const ids = useMemo(() => items.map(id), [items, id]);\n  const [active, setActive] = useState<string | null>(null);\n  const [over, setOver] = useState<string | null>(null);\n  const at = (key: unknown) => ids.indexOf(String(key));\n  const spoken = (key: unknown) => {\n    const i = at(key);\n    return i < 0 ? \"\" : name(items[i]!);\n  };\n  const total = ids.length;\n  const announcements: Announcements = {\n    onDragStart: ({ active }) => t(\"sortable.pickedUp\", { name: spoken(active.id), position: at(active.id) + 1, total }),\n    onDragOver: ({ active, over }) => (over ? t(\"sortable.over\", { name: spoken(active.id), position: at(over.id) + 1, total }) : undefined),\n    onDragEnd: ({ active, over }) =>\n      over ? t(\"sortable.dropped\", { name: spoken(active.id), position: at(over.id) + 1, total }) : t(\"sortable.droppedAway\", { name: spoken(active.id) }),\n    onDragCancel: ({ active }) => t(\"sortable.canceled\", { name: spoken(active.id) }),\n  };\n  const instructions: ScreenReaderInstructions = { draggable: t(\"sortable.instructions\") };\n  const from = active ? at(active) : -1;\n  const to = over ? at(over) : -1;\n  const dragged = from >= 0 ? items[from] : undefined;\n  const grid = layout === \"grid\";\n  const list = (inner: ReactNode, overlay?: boolean) => (\n    <ol\n      className={cn(grid ? \"grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2\" : \"grid gap-1\", className)}\n      aria-label={overlay ? undefined : label}\n      data-ckui=\"sortable-list\"\n      data-layout={layout}\n      data-overlay={overlay ? \"\" : undefined}\n    >\n      {inner}\n    </ol>\n  );\n  return (\n    <ContentKitUiRoot appearance={appearance} className=\"contents\">\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        accessibility={{ announcements, screenReaderInstructions: instructions }}\n        onDragStart={(e) => setActive(String(e.active.id))}\n        onDragOver={(e) => setOver(e.over ? String(e.over.id) : null)}\n        onDragCancel={() => {\n          setActive(null);\n          setOver(null);\n        }}\n        onDragEnd={(e) => {\n          setActive(null);\n          setOver(null);\n          const a = at(e.active.id);\n          const b = e.over ? at(e.over.id) : -1;\n          if (a >= 0 && b >= 0 && a !== b) onMove(a, b);\n        }}\n      >\n        <SortableContext items={ids} strategy={noShift} disabled={disabled}>\n          {list(\n            items.map((item, i) => (\n              <Item\n                key={ids[i]}\n                id={ids[i]!}\n                label={t(\"sortable.handle\", { name: name(item) })}\n                attrs={row?.(item)}\n                disabled={disabled}\n                grid={grid}\n                dragging={i === from}\n                drop={from >= 0 && i === to && to !== from ? (to > from ? \"after\" : \"before\") : undefined}\n                render={(handle) => children(item, handle, i)}\n              />\n            )),\n          )}\n        </SortableContext>\n        <DragOverlay dropAnimation={null}>\n          {dragged !== undefined\n            ? list(\n                <li {...row?.(dragged)} className={cn(row?.(dragged).className, \"cursor-grabbing rounded-md bg-background shadow-lg ring-1 ring-border\")}>\n                  {children(\n                    dragged,\n                    <span className={handleClass}>\n                      <HugeiconsIcon icon={DragDropVerticalIcon} strokeWidth={2} className=\"size-4.5\" />\n                    </span>,\n                    from,\n                  )}\n                </li>,\n                true,\n              )\n            : null}\n        </DragOverlay>\n      </DndContext>\n    </ContentKitUiRoot>\n  );\n}\n\nfunction Item({\n  id,\n  label,\n  attrs,\n  disabled,\n  grid,\n  dragging,\n  drop,\n  render,\n}: {\n  id: string;\n  label: string;\n  attrs?: HTMLAttributes<HTMLLIElement>;\n  disabled?: boolean;\n  grid: boolean;\n  dragging: boolean;\n  drop?: \"before\" | \"after\";\n  render: (handle: ReactNode) => ReactNode;\n}) {\n  const { attributes, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });\n  const handle = (\n    <button type=\"button\" ref={setActivatorNodeRef} className={handleClass} aria-label={label} disabled={disabled} data-ckui=\"sort-handle\" {...attributes} {...listeners}>\n      <HugeiconsIcon icon={DragDropVerticalIcon} strokeWidth={2} className=\"size-4.5\" />\n    </button>\n  );\n  return (\n    <li\n      {...attrs}\n      ref={setNodeRef}\n      className={cn(\n        attrs?.className,\n        \"relative data-dragging:opacity-40 before:pointer-events-none before:absolute before:rounded-full before:bg-primary before:opacity-0\",\n        grid\n          ? \"before:inset-y-0 before:w-0.5 data-[drop=before]:before:-left-[5px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-right-[5px] data-[drop=after]:before:opacity-100\"\n          : \"before:inset-x-0 before:h-0.5 data-[drop=before]:before:-top-[3px] data-[drop=before]:before:opacity-100 data-[drop=after]:before:-bottom-[3px] data-[drop=after]:before:opacity-100\",\n      )}\n      data-drop={drop}\n      data-dragging={dragging || undefined}\n    >\n      {render(handle)}\n    </li>\n  );\n}\n"],"mappings":"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"}

package/dist/components/video-mini-player.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties } from 'react';
+import { ContentKitUiAppearance } from '../appearance.js';
+import { HlsPlayerOptions } from '../react/gallery.js';
+import { PlaybackProgress } from '../react/player.js';
+import { PlayerHandoff } from './video-player.js';
+export interface VideoMiniPlayerProps extends Omit<HlsPlayerOptions, "src" | "startAt" | "autoPlay" | "audioLanguage" | "subtitleLanguage" | "active"> {
+    /** What VideoPlayer's onMiniPlayer handed over. */
+    handoff: PlayerHandoff;
+    /** Back to the full player, where this one is. */
+    onExpand: (state: {
+        time: number;
+        playing: boolean;
+    }) => void;
+    onClose: (state: {
+        time: number;
+    }) => void;
+    onProgress?: (progress: PlaybackProgress) => void;
+    /** Milliseconds. Default 10000. */
+    progressInterval?: number;
+    /** K, J, L and M page-wide (default), every shortcut while focus is in it, or none. */
+    keyboard?: "global" | "focus" | false;
+    /** The video's title. */
+    label?: string;
+    position?: "bottom-right" | "bottom-left";
+    crossOrigin?: "anonymous" | "use-credentials";
+    className?: string;
+    style?: CSSProperties;
+    appearance?: ContentKitUiAppearance;
+}
+/**
+ * The video docked in a corner while the viewer browses: play, ±10 s, mute,
+ * a seek line, expand back to the full player and close. It starts where
+ * the handoff stopped, playing if it was.
+ */
+export declare function VideoMiniPlayer({ handoff, onExpand, onClose, onProgress, progressInterval, keyboard, label, position, crossOrigin, className, style, appearance, ...options }: VideoMiniPlayerProps): import('react').JSX.Element;