@openrails/contentkit-ui 0.79.0 → 0.81.0

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

@@ -0,0 +1,8 @@
+export { ContentCard, OwnerChip, PostCard, lockLabel, type ContentCardProps, type PostCardProps } from './card.js';
+export { CardGrid, ContentGrid, ContentHistory, ContentRail, SearchResults, type CardListProps, type ContentRailProps } from './grid.js';
+export { SearchBox, type SearchBoxProps } from './search.js';
+export { ContentFilterSettings, ReleaseDateIndex, type ContentFilterSettingsProps, type ReleaseDateIndexProps } from './filters.js';
+export { ContentListing, sortLabel, type ContentListingProps } from './listing.js';
+export { Paywall, VersionPicker, priceLabel, useVersionMenuItems, type PaywallProps, type VersionPickerProps } from './paywall.js';
+export { AccessEditor, ContentDetailsEditor, ContentSections, SegmentsEditor, VersionsEditor, versionLabel } from './editors.js';
+export { OfferFields } from './offer-fields.js';

package/dist/components/content/listing.d.ts

@@ -0,0 +1,20 @@
+import { ContentQuery, ListSort } from '../../client/discovery.js';
+import { Translator } from '../../i18n/messages.js';
+import { CardListProps } from './grid.js';
+/** A sort's name: "Newest", "Popular, this week". */
+export declare function sortLabel(m: Translator, sort: ListSort): string;
+export interface ContentListingProps extends CardListProps {
+    /** The listed kind: its version traits and filterable attributes become filters, its sort the default. */
+    kind?: string;
+    /** The sort and filters; with onQueryChange the host keeps them (e.g. in the URL). Other fields (groups, a tag page's) pass through. */
+    query?: ContentQuery;
+    onQueryChange?: (query: ContentQuery) => void;
+    /** The sorts offered; default newest, popular (week, month, all time), top rated, most favorited, title, oldest. */
+    sorts?: readonly ListSort[];
+    /** Offer a language filter; default when the site has several languages. */
+    languages?: boolean;
+    /** The traits and attributes offered; default every trait and filterable attribute of the kind. */
+    filters?: readonly string[];
+}
+/** A listing page: sort, language, trait and attribute filters over a paged grid of a kind's contents. */
+export declare function ContentListing({ kind, query: controlled, onQueryChange, sorts, languages, filters, ...p }: ContentListingProps): import('react').JSX.Element;

package/dist/components/content/listing.js

@@ -0,0 +1,150 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { Button as n } from "../../ui/button.js";
+import { Select as r, SelectContent as i, SelectItem as a, SelectTrigger as o, SelectValue as s } from "../../ui/select.js";
+import { useKinds as c } from "../../react/groups.js";
+import { labelOf as l, useLanguageName as u } from "../groups/parts.js";
+import { ContentGrid as d } from "./grid.js";
+import { useCallback 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/content/listing.tsx
+var v = [
+	"newest",
+	"popular:7d",
+	"popular:30d",
+	"popular",
+	"top_rated",
+	"most_favorited",
+	"title",
+	"oldest"
+], y = "*";
+function b(e, t) {
+	let [n, r] = t.split(":"), i = e.t(`listing.sort_${n}`);
+	return r ? e.t("listing.sortPeriod", {
+		sort: i,
+		period: e.t(`listing.period_${r}`)
+	}) : i;
+}
+function x({ kind: x, query: S, onQueryChange: C, sorts: w = v, languages: T, filters: E, ...D }) {
+	let O = e(), { t: k } = O, A = u(), { kinds: j } = c({ client: D.client }), [M, N] = m({}), P = S ?? M, F = f((e) => {
+		S === void 0 && N(e), C?.(e);
+	}, [S, C]), I = x ? j?.kinds[x] : void 0, L = P.sort ?? I?.sort ?? w[0], R = (e) => !E || E.includes(e), z = (I?.versions.traits ?? []).filter(R), B = Object.entries(I?.attributes ?? {}).filter(([e, t]) => t.filterable && (t.values?.length || t.type === "bool") && R(e)), V = (T ?? (j?.languages.length ?? 0) > 1) && !!j?.languages.length, H = (e) => P.attribute?.find((t) => t.startsWith(`${e}:`))?.slice(e.length + 1), U = (e, t) => F({
+		...P,
+		attribute: [...(P.attribute ?? []).filter((t) => !t.startsWith(`${e}:`)), ...t === void 0 ? [] : [`${e}:${t}`]]
+	}), W = (e) => {
+		let t = P.traits?.includes(e);
+		F({
+			...P,
+			traits: t ? P.traits.filter((t) => t !== e) : [...P.traits ?? [], e]
+		});
+	}, G = !!(P.language || P.traits?.length || P.attribute?.length), K = p(() => ({
+		...P,
+		kind: x ?? P.kind,
+		sort: L
+	}), [
+		P,
+		x,
+		L
+	]);
+	return /* @__PURE__ */ g(t, {
+		appearance: D.appearance,
+		className: _("grid gap-4 text-sm", D.className),
+		"data-ckui": "content-listing",
+		children: [/* @__PURE__ */ g("div", {
+			role: "toolbar",
+			"aria-label": k("listing.filters"),
+			className: "flex flex-wrap items-center gap-2",
+			children: [
+				/* @__PURE__ */ g(r, {
+					value: L,
+					onValueChange: (e) => F({
+						...P,
+						sort: e
+					}),
+					children: [/* @__PURE__ */ h(o, {
+						size: "sm",
+						"aria-label": k("listing.sort"),
+						"data-ckui": "listing-sort",
+						children: /* @__PURE__ */ h(s, { children: (e) => b(O, e) })
+					}), /* @__PURE__ */ h(i, { children: w.map((e) => /* @__PURE__ */ h(a, {
+						value: e,
+						children: b(O, e)
+					}, e)) })]
+				}),
+				V && /* @__PURE__ */ g(r, {
+					value: P.language ?? y,
+					onValueChange: (e) => F({
+						...P,
+						language: e === y ? void 0 : e
+					}),
+					children: [/* @__PURE__ */ h(o, {
+						size: "sm",
+						"aria-label": k("listing.language"),
+						"data-ckui": "listing-language",
+						children: /* @__PURE__ */ h(s, { children: (e) => e === y ? k("listing.anyLanguage") : A(e) })
+					}), /* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(a, {
+						value: y,
+						children: k("listing.anyLanguage")
+					}), j.languages.map((e) => /* @__PURE__ */ h(a, {
+						value: e,
+						children: A(e)
+					}, e))] })]
+				}),
+				B.map(([e, t]) => {
+					let c = H(e);
+					return t.type === "bool" ? /* @__PURE__ */ h(n, {
+						size: "sm",
+						variant: c === "true" ? "default" : "outline",
+						"aria-pressed": c === "true",
+						onClick: () => U(e, c === "true" ? void 0 : "true"),
+						children: l(D.labels, e)
+					}, e) : /* @__PURE__ */ g(r, {
+						value: c ?? y,
+						onValueChange: (t) => U(e, t === y ? void 0 : t),
+						children: [/* @__PURE__ */ h(o, {
+							size: "sm",
+							"aria-label": l(D.labels, e),
+							"data-ckui": "listing-attribute",
+							"data-name": e,
+							children: /* @__PURE__ */ h(s, { children: (t) => t === y ? l(D.labels, e) : l(D.labels, t) })
+						}), /* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(a, {
+							value: y,
+							children: k("listing.any")
+						}), t.values.map((e) => /* @__PURE__ */ h(a, {
+							value: e,
+							children: l(D.labels, e)
+						}, e))] })]
+					}, e);
+				}),
+				z.map((e) => {
+					let t = !!P.traits?.includes(e);
+					return /* @__PURE__ */ h(n, {
+						size: "sm",
+						variant: t ? "default" : "outline",
+						"aria-pressed": t,
+						onClick: () => W(e),
+						"data-ckui": "listing-trait",
+						children: l(D.labels, e)
+					}, e);
+				}),
+				G && /* @__PURE__ */ h(n, {
+					size: "sm",
+					variant: "ghost",
+					onClick: () => {
+						let { language: e, traits: t, attribute: n, ...r } = P;
+						F(r);
+					},
+					children: k("listing.clear")
+				})
+			]
+		}), /* @__PURE__ */ h(d, {
+			...D,
+			query: K
+		})]
+	});
+}
+//#endregion
+export { x as ContentListing, b as sortLabel };
+
+//# sourceMappingURL=listing.js.map

package/dist/components/content/listing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listing.js","names":[],"sources":["../../../src/components/content/listing.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { ContentQuery, ListSort } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport type { MessageKey, Translator } from \"../../i18n/messages.js\";\nimport { useKinds } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { labelOf, useLanguageName } from \"../groups/parts.js\";\nimport { ContentGrid, type CardListProps } from \"./grid.js\";\n\nconst SORTS: readonly ListSort[] = [\"newest\", \"popular:7d\", \"popular:30d\", \"popular\", \"top_rated\", \"most_favorited\", \"title\", \"oldest\"];\nconst ANY = \"*\";\n\n/** A sort's name: \"Newest\", \"Popular, this week\". */\nexport function sortLabel(m: Translator, sort: ListSort): string {\n  const [base, period] = sort.split(\":\");\n  const name = m.t(`listing.sort_${base}` as MessageKey);\n  return period ? m.t(\"listing.sortPeriod\", { sort: name, period: m.t(`listing.period_${period}` as MessageKey) }) : name;\n}\n\nexport interface ContentListingProps extends CardListProps {\n  /** The listed kind: its version traits and filterable attributes become filters, its sort the default. */\n  kind?: string;\n  /** The sort and filters; with onQueryChange the host keeps them (e.g. in the URL). Other fields (groups, a tag page's) pass through. */\n  query?: ContentQuery;\n  onQueryChange?: (query: ContentQuery) => void;\n  /** The sorts offered; default newest, popular (week, month, all time), top rated, most favorited, title, oldest. */\n  sorts?: readonly ListSort[];\n  /** Offer a language filter; default when the site has several languages. */\n  languages?: boolean;\n  /** The traits and attributes offered; default every trait and filterable attribute of the kind. */\n  filters?: readonly string[];\n}\n\n/** A listing page: sort, language, trait and attribute filters over a paged grid of a kind's contents. */\nexport function ContentListing({ kind, query: controlled, onQueryChange, sorts = SORTS, languages, filters, ...p }: ContentListingProps) {\n  const m = useMessages();\n  const { t } = m;\n  const languageName = useLanguageName();\n  const { kinds: model } = useKinds({ client: p.client });\n  const [own, setOwn] = useState<ContentQuery>({});\n  const query = controlled ?? own;\n  const set = useCallback(\n    (next: ContentQuery) => {\n      if (controlled === undefined) setOwn(next);\n      onQueryChange?.(next);\n    },\n    [controlled, onQueryChange],\n  );\n  const spec = kind ? model?.kinds[kind] : undefined;\n  const sort = query.sort ?? (spec?.sort as ListSort | undefined) ?? sorts[0];\n  const offered = (name: string) => !filters || filters.includes(name);\n  const traits = (spec?.versions.traits ?? []).filter(offered);\n  const attributes = Object.entries(spec?.attributes ?? {}).filter(([n, a]) => a.filterable && (a.values?.length || a.type === \"bool\") && offered(n));\n  const languageFilter = (languages ?? (model?.languages.length ?? 0) > 1) && !!model?.languages.length;\n  const attributeValue = (name: string) => query.attribute?.find((a) => a.startsWith(`${name}:`))?.slice(name.length + 1);\n  const setAttribute = (name: string, value: string | undefined) =>\n    set({ ...query, attribute: [...(query.attribute ?? []).filter((a) => !a.startsWith(`${name}:`)), ...(value === undefined ? [] : [`${name}:${value}`])] });\n  const toggleTrait = (x: string) => {\n    const on = query.traits?.includes(x);\n    set({ ...query, traits: on ? query.traits!.filter((y) => y !== x) : [...(query.traits ?? []), x] });\n  };\n  const filtered = !!(query.language || query.traits?.length || query.attribute?.length);\n  const list = useMemo(() => ({ ...query, kind: kind ?? query.kind, sort }), [query, kind, sort]);\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"content-listing\">\n      <div role=\"toolbar\" aria-label={t(\"listing.filters\")} className=\"flex flex-wrap items-center gap-2\">\n        <Select value={sort} onValueChange={(v) => set({ ...query, sort: v as ListSort })}>\n          <SelectTrigger size=\"sm\" aria-label={t(\"listing.sort\")} data-ckui=\"listing-sort\">\n            <SelectValue>{(v: string) => sortLabel(m, v as ListSort)}</SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {sorts.map((s) => (\n              <SelectItem key={s} value={s}>\n                {sortLabel(m, s)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        {languageFilter && (\n          <Select value={query.language ?? ANY} onValueChange={(v) => set({ ...query, language: v === ANY ? undefined : (v as string) })}>\n            <SelectTrigger size=\"sm\" aria-label={t(\"listing.language\")} data-ckui=\"listing-language\">\n              <SelectValue>{(v: string) => (v === ANY ? t(\"listing.anyLanguage\") : languageName(v))}</SelectValue>\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value={ANY}>{t(\"listing.anyLanguage\")}</SelectItem>\n              {model!.languages.map((l) => (\n                <SelectItem key={l} value={l}>\n                  {languageName(l)}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n        {attributes.map(([name, a]) => {\n          const value = attributeValue(name);\n          if (a.type === \"bool\")\n            return (\n              <Button key={name} size=\"sm\" variant={value === \"true\" ? \"default\" : \"outline\"} aria-pressed={value === \"true\"} onClick={() => setAttribute(name, value === \"true\" ? undefined : \"true\")}>\n                {labelOf(p.labels, name)}\n              </Button>\n            );\n          return (\n            <Select key={name} value={value ?? ANY} onValueChange={(v) => setAttribute(name, v === ANY ? undefined : (v as string))}>\n              <SelectTrigger size=\"sm\" aria-label={labelOf(p.labels, name)} data-ckui=\"listing-attribute\" data-name={name}>\n                <SelectValue>{(v: string) => (v === ANY ? labelOf(p.labels, name) : labelOf(p.labels, v))}</SelectValue>\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value={ANY}>{t(\"listing.any\")}</SelectItem>\n                {a.values!.map((v) => (\n                  <SelectItem key={v} value={v}>\n                    {labelOf(p.labels, v)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          );\n        })}\n        {traits.map((x) => {\n          const on = !!query.traits?.includes(x);\n          return (\n            <Button key={x} size=\"sm\" variant={on ? \"default\" : \"outline\"} aria-pressed={on} onClick={() => toggleTrait(x)} data-ckui=\"listing-trait\">\n              {labelOf(p.labels, x)}\n            </Button>\n          );\n        })}\n        {filtered && (\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            onClick={() => {\n              const { language: _l, traits: _t, attribute: _a, ...rest } = query;\n              set(rest);\n            }}\n          >\n            {t(\"listing.clear\")}\n          </Button>\n        )}\n      </div>\n      <ContentGrid {...p} query={list} />\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

package/dist/components/content/offer-fields.d.ts

@@ -0,0 +1,8 @@
+import { Offer, Terms } from '../../client/generated/wire.js';
+/** An offer's form: price, currency and whether it rents or renews; the current offer with its withdrawal. */
+export declare function OfferFields({ offer, onSell, onWithdraw, pending }: {
+    offer?: Pick<Offer, "terms"> & Partial<Pick<Offer, "state" | "synced">>;
+    onSell: (t: Terms) => void;
+    onWithdraw: () => void;
+    pending: boolean;
+}): import('react').JSX.Element;

package/dist/components/content/offer-fields.js

@@ -0,0 +1,127 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { Button as t } from "../../ui/button.js";
+import { Badge as n } from "../../ui/badge.js";
+import { Input as r } from "../../ui/input.js";
+import { Label as i } from "../../ui/label.js";
+import { Select as a, SelectContent as o, SelectItem as s, SelectTrigger as c, SelectValue as l } from "../../ui/select.js";
+import { priceLabel as u } from "./paywall.js";
+import { useId as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/content/offer-fields.tsx
+function h({ offer: h, onSell: g, onWithdraw: _, pending: v }) {
+	let y = e(), { t: b } = y, x = d(), S = h && (h.state ?? "active") === "active" ? h : void 0, [C, w] = f(S?.terms.amount ?? ""), [T, E] = f(S?.terms.currency ?? "USD"), [D, O] = f(S?.terms.renew_hours ? "renew" : S?.terms.access_hours ? "rent" : "once"), [k, A] = f(String((S?.terms.renew_hours ?? S?.terms.access_hours ?? 720) / 24 | 0));
+	return /* @__PURE__ */ m("div", {
+		className: "grid gap-2",
+		"data-ckui": "offer-fields",
+		children: [S ? /* @__PURE__ */ m("p", {
+			className: "flex flex-wrap items-center gap-2",
+			"data-ckui": "current-offer",
+			children: [
+				/* @__PURE__ */ p(n, {
+					variant: "secondary",
+					children: b("contentEditor.onSale")
+				}),
+				/* @__PURE__ */ p("span", { children: u(y, S.terms) }),
+				S.synced === !1 && /* @__PURE__ */ p("span", {
+					className: "text-xs text-muted-foreground",
+					children: b("contentEditor.syncing")
+				}),
+				/* @__PURE__ */ p(t, {
+					type: "button",
+					size: "xs",
+					variant: "ghost",
+					disabled: v,
+					onClick: _,
+					children: b("contentEditor.withdraw")
+				})
+			]
+		}) : /* @__PURE__ */ p("p", {
+			className: "text-muted-foreground",
+			children: b("contentEditor.notForSale")
+		}), /* @__PURE__ */ m("div", {
+			className: "flex flex-wrap items-end gap-2",
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "grid gap-1",
+					children: [/* @__PURE__ */ p(i, {
+						htmlFor: `${x}-amount`,
+						className: "text-xs text-muted-foreground",
+						children: b("contentEditor.price")
+					}), /* @__PURE__ */ p(r, {
+						id: `${x}-amount`,
+						className: "h-8 w-28",
+						inputMode: "decimal",
+						value: C,
+						placeholder: "4.99",
+						onChange: (e) => w(e.target.value)
+					})]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "grid gap-1",
+					children: [/* @__PURE__ */ p(i, {
+						htmlFor: `${x}-currency`,
+						className: "text-xs text-muted-foreground",
+						children: b("contentEditor.currency")
+					}), /* @__PURE__ */ p(r, {
+						id: `${x}-currency`,
+						className: "h-8 w-20 uppercase",
+						maxLength: 3,
+						value: T,
+						onChange: (e) => E(e.target.value.toUpperCase())
+					})]
+				}),
+				/* @__PURE__ */ m(a, {
+					value: D,
+					onValueChange: (e) => O(e),
+					children: [/* @__PURE__ */ p(c, {
+						size: "sm",
+						"aria-label": b("contentEditor.priceMode"),
+						children: /* @__PURE__ */ p(l, { children: (e) => b(`contentEditor.mode_${e}`) })
+					}), /* @__PURE__ */ p(o, { children: [
+						"once",
+						"rent",
+						"renew"
+					].map((e) => /* @__PURE__ */ p(s, {
+						value: e,
+						children: b(`contentEditor.mode_${e}`)
+					}, e)) })]
+				}),
+				D !== "once" && /* @__PURE__ */ m("div", {
+					className: "grid gap-1",
+					children: [/* @__PURE__ */ p(i, {
+						htmlFor: `${x}-days`,
+						className: "text-xs text-muted-foreground",
+						children: b("contentEditor.days")
+					}), /* @__PURE__ */ p(r, {
+						id: `${x}-days`,
+						className: "h-8 w-20",
+						type: "number",
+						min: 1,
+						value: k,
+						onChange: (e) => A(e.target.value)
+					})]
+				}),
+				/* @__PURE__ */ p(t, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					disabled: v || !/^\d+(\.\d{1,2})?$/.test(C.trim()) || T.length !== 3,
+					onClick: () => {
+						let e = Math.max(1, Math.trunc(Number(k) || 0)) * 24;
+						g({
+							amount: C.trim(),
+							currency: T,
+							access_hours: D === "rent" ? e : void 0,
+							renew_hours: D === "renew" ? e : void 0
+						});
+					},
+					children: b(S ? "contentEditor.reprice" : "contentEditor.sell")
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { h as OfferFields };
+
+//# sourceMappingURL=offer-fields.js.map

package/dist/components/content/offer-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"offer-fields.js","names":[],"sources":["../../../src/components/content/offer-fields.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { Offer, Terms } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Input } from \"#ckui/ui/input\";\nimport { Label } from \"#ckui/ui/label\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { priceLabel } from \"./paywall.js\";\n\ntype Mode = \"once\" | \"rent\" | \"renew\";\n\n/** An offer's form: price, currency and whether it rents or renews; the current offer with its withdrawal. */\nexport function OfferFields({ offer, onSell, onWithdraw, pending }: { offer?: Pick<Offer, \"terms\"> & Partial<Pick<Offer, \"state\" | \"synced\">>; onSell: (t: Terms) => void; onWithdraw: () => void; pending: boolean }) {\n  const m = useMessages();\n  const { t } = m;\n  const id = useId();\n  const active = offer && (offer.state ?? \"active\") === \"active\" ? offer : undefined;\n  const [amount, setAmount] = useState(active?.terms.amount ?? \"\");\n  const [currency, setCurrency] = useState(active?.terms.currency ?? \"USD\");\n  const [mode, setMode] = useState<Mode>(active?.terms.renew_hours ? \"renew\" : active?.terms.access_hours ? \"rent\" : \"once\");\n  const [days, setDays] = useState(String(((active?.terms.renew_hours ?? active?.terms.access_hours ?? 720) / 24) | 0));\n  return (\n    <div className=\"grid gap-2\" data-ckui=\"offer-fields\">\n      {active ? (\n        <p className=\"flex flex-wrap items-center gap-2\" data-ckui=\"current-offer\">\n          <Badge variant=\"secondary\">{t(\"contentEditor.onSale\")}</Badge>\n          <span>{priceLabel(m, active.terms)}</span>\n          {active.synced === false && <span className=\"text-xs text-muted-foreground\">{t(\"contentEditor.syncing\")}</span>}\n          <Button type=\"button\" size=\"xs\" variant=\"ghost\" disabled={pending} onClick={onWithdraw}>\n            {t(\"contentEditor.withdraw\")}\n          </Button>\n        </p>\n      ) : (\n        <p className=\"text-muted-foreground\">{t(\"contentEditor.notForSale\")}</p>\n      )}\n      <div className=\"flex flex-wrap items-end gap-2\">\n        <div className=\"grid gap-1\">\n          <Label htmlFor={`${id}-amount`} className=\"text-xs text-muted-foreground\">\n            {t(\"contentEditor.price\")}\n          </Label>\n          <Input id={`${id}-amount`} className=\"h-8 w-28\" inputMode=\"decimal\" value={amount} placeholder=\"4.99\" onChange={(e) => setAmount(e.target.value)} />\n        </div>\n        <div className=\"grid gap-1\">\n          <Label htmlFor={`${id}-currency`} className=\"text-xs text-muted-foreground\">\n            {t(\"contentEditor.currency\")}\n          </Label>\n          <Input id={`${id}-currency`} className=\"h-8 w-20 uppercase\" maxLength={3} value={currency} onChange={(e) => setCurrency(e.target.value.toUpperCase())} />\n        </div>\n        <Select value={mode} onValueChange={(v) => setMode(v as Mode)}>\n          <SelectTrigger size=\"sm\" aria-label={t(\"contentEditor.priceMode\")}>\n            <SelectValue>{(v: string) => t(`contentEditor.mode_${v as Mode}`)}</SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {([\"once\", \"rent\", \"renew\"] as const).map((x) => (\n              <SelectItem key={x} value={x}>\n                {t(`contentEditor.mode_${x}`)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        {mode !== \"once\" && (\n          <div className=\"grid gap-1\">\n            <Label htmlFor={`${id}-days`} className=\"text-xs text-muted-foreground\">\n              {t(\"contentEditor.days\")}\n            </Label>\n            <Input id={`${id}-days`} className=\"h-8 w-20\" type=\"number\" min={1} value={days} onChange={(e) => setDays(e.target.value)} />\n          </div>\n        )}\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"outline\"\n          disabled={pending || !/^\\d+(\\.\\d{1,2})?$/.test(amount.trim()) || currency.length !== 3}\n          onClick={() => {\n            const hours = Math.max(1, Math.trunc(Number(days) || 0)) * 24;\n            onSell({ amount: amount.trim(), currency, access_hours: mode === \"rent\" ? hours : undefined, renew_hours: mode === \"renew\" ? hours : undefined });\n          }}\n        >\n          {t(active ? \"contentEditor.reprice\" : \"contentEditor.sell\")}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n"],"mappings":"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"}

package/dist/components/content/paywall.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitClient } from '../../client/client.js';
+import { Decision, Sale, Terms, Version } from '../../client/generated/wire.js';
+import { Translator } from '../../i18n/messages.js';
+import { ContentKitErrorHandler } from '../../react/context.js';
+import { Labels } from '../groups/parts.js';
+import { PlayerMenuItem } from '../video-player.js';
+/** An offer's price and period in words: "$2.99", "$4.99 / 30 days", "$1.99 for 48 hours". */
+export declare function priceLabel(m: Translator, terms: Terms): string;
+export interface PaywallProps {
+    /** The locked version's (or card's) decision. */
+    decision: Decision;
+    /**
+     * Starts a purchase: the host creates the order through billing-ui
+     * (createOrder with offer.price_id) and shows OrderCheckout; for a tier
+     * (no offer), its subscription page. A free group offer joins here instead.
+     */
+    onCheckout: (o: {
+        key: string;
+        offer?: Sale;
+    }) => void;
+    /** Tiers' names and prices from the host's catalog, by tier key. */
+    tiers?: Readonly<Record<string, {
+        label?: string;
+        price?: string;
+    }>>;
+    /** Asks a signed-out reader to sign in (they may hold it already); default the provider's. */
+    onSignIn?: () => void;
+    labels?: Labels;
+    /** Below the offers: the host's own. */
+    children?: ReactNode;
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/** Why content is locked and how to open it: its offers, the tiers that include it, previews and when it turns free. */
+export declare function Paywall({ decision, onCheckout, tiers, onSignIn, labels, children, client: own, onError, className, appearance }: PaywallProps): import('react').JSX.Element | null;
+export interface VersionPickerProps {
+    /** The content's live versions (useContentDetail().versions). */
+    versions: readonly Version[];
+    /** The version shown. */
+    value: string | null | undefined;
+    onChange: (version: string) => void;
+    labels?: Labels;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/** Chooses among a content's versions: a language first when they differ in language, then its variants (traits, labels). */
+export declare function VersionPicker({ versions, value, onChange, labels, className, appearance }: VersionPickerProps): import('react').JSX.Element | null;
+/** VersionPicker as VideoPlayer settings entries (menuItems), for a watch page. */
+export declare function useVersionMenuItems(versions: readonly Version[], value: string | null | undefined, onChange: (version: string) => void, labels?: Labels): PlayerMenuItem[];

package/dist/components/content/paywall.js

@@ -0,0 +1,221 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { ContentKitContext as n, useContentKitClient as r } from "../../react/context.js";
+import { Button as i } from "../../ui/button.js";
+import { Select as a, SelectContent as o, SelectItem as s, SelectTrigger as c, SelectValue as l } from "../../ui/select.js";
+import { ErrorLine as u, contentError as d, formatDate as f, useAction as p } from "../social/parts.js";
+import { useKinds as m } from "../../react/groups.js";
+import { labelOf as h, useLanguageName as g } from "../groups/parts.js";
+import { useContext as _, useMemo as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { cn as x } from "cn";
+import { LockIcon as S } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as C } from "@hugeicons/react";
+//#region src/components/content/paywall.tsx
+function w(e, t) {
+	let n;
+	try {
+		n = new Intl.NumberFormat(e.language, {
+			style: "currency",
+			currency: t.currency
+		}).format(Number(t.amount));
+	} catch {
+		n = `${t.amount} ${t.currency}`;
+	}
+	let r = (t) => t % 24 == 0 ? e.plural("paywall.days", t / 24) : e.plural("paywall.hours", t);
+	return t.renew_hours ? e.t("paywall.renews", {
+		price: n,
+		period: r(t.renew_hours)
+	}) : t.access_hours ? e.t("paywall.rents", {
+		price: n,
+		period: r(t.access_hours)
+	}) : n;
+}
+function T({ decision: a, onCheckout: o, tiers: s, onSignIn: c, labels: l, children: g, client: v, onError: T, className: E, appearance: D }) {
+	let O = e(), { t: k } = O, A = _(n), j = r(v), { kinds: M } = m({ client: v }), N = p("membership.join", T);
+	if (a.allowed) return null;
+	let P = c ?? A?.onSignIn, F = a.offers ?? [], I = new Set(F.map((e) => e.key)), L = M?.tiers ?? Object.keys(s ?? {}), R = (a.sell ?? []).filter((e) => !I.has(e) && (L.includes(e) || !!s?.[e])), z = a.requires, B = z && !F.some((e) => e.key === z) ? z : void 0, V = (e) => !!z && e !== z, H = a.preview;
+	return /* @__PURE__ */ b(t, {
+		appearance: D,
+		className: x("grid gap-3 rounded-lg border border-border p-4 text-sm", E),
+		"data-ckui": "paywall",
+		children: [
+			/* @__PURE__ */ b("p", {
+				className: "flex items-center gap-2 font-medium",
+				children: [/* @__PURE__ */ y(C, {
+					icon: S,
+					strokeWidth: 2,
+					className: "size-4",
+					"aria-hidden": !0
+				}), a.unknown ? k("paywall.unknown") : k(z ? "paywall.requiresFirst" : "paywall.locked")]
+			}),
+			H?.pages ? /* @__PURE__ */ y("p", {
+				className: "text-muted-foreground",
+				children: O.plural("paywall.previewPages", H.pages)
+			}) : null,
+			H?.segments ? /* @__PURE__ */ y("p", {
+				className: "text-muted-foreground",
+				children: O.plural("paywall.previewSegments", H.segments)
+			}) : null,
+			a.free_after && /* @__PURE__ */ y("p", {
+				className: "text-muted-foreground",
+				children: k("paywall.freeFrom", { date: f(O, a.free_after, !1) })
+			}),
+			!a.unknown && /* @__PURE__ */ b("div", {
+				className: "flex flex-wrap gap-2",
+				"data-ckui": "paywall-offers",
+				children: [
+					B && /* @__PURE__ */ y(i, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => o({ key: B }),
+						children: k("paywall.joinFirst")
+					}),
+					F.map((e) => e.target.kind === "group" && Number(e.terms.amount) === 0 ? /* @__PURE__ */ y(i, {
+						size: "sm",
+						disabled: V(e.key) || N.pending,
+						onClick: () => A?.viewer === null && P ? P() : void N.run(() => j.offers.join(e.target.id)),
+						"data-ckui": "paywall-offer",
+						"data-target": "group",
+						"data-free": "",
+						children: k("paywall.joinFirst")
+					}, e.key) : /* @__PURE__ */ y(i, {
+						size: "sm",
+						disabled: V(e.key),
+						onClick: () => o({
+							key: e.key,
+							offer: e
+						}),
+						"data-ckui": "paywall-offer",
+						"data-target": e.target.kind,
+						children: k(e.target.kind === "group" ? "paywall.joinFor" : e.target.kind === "version" ? "paywall.unlockVersionFor" : "paywall.unlockFor", { price: w(O, e.terms) })
+					}, e.key)),
+					R.map((e) => /* @__PURE__ */ b(i, {
+						size: "sm",
+						variant: F.length ? "outline" : "default",
+						onClick: () => o({ key: e }),
+						"data-ckui": "paywall-tier",
+						"data-tier": e,
+						children: [k("paywall.subscribe", { tier: s?.[e]?.label ?? h(l, e) }), s?.[e]?.price && /* @__PURE__ */ y("span", {
+							className: "ms-1 opacity-80",
+							children: s[e].price
+						})]
+					}, e))
+				]
+			}),
+			N.error && /* @__PURE__ */ y(u, { children: d(O, N.error) }),
+			A?.viewer === null && P && /* @__PURE__ */ b("p", {
+				className: "text-muted-foreground",
+				children: [
+					k("paywall.haveIt"),
+					" ",
+					/* @__PURE__ */ y("button", {
+						type: "button",
+						className: "font-medium text-foreground underline-offset-4 hover:underline",
+						onClick: P,
+						children: k("paywall.signIn")
+					})
+				]
+			}),
+			g
+		]
+	});
+}
+function E(e, t, n) {
+	return e.label || (e.traits.length ? e.traits.map((e) => h(n, e)).join(" · ") : e.languages.map(t).join(", "));
+}
+var D = (e) => e.languages[0] ?? "";
+function O(e, t) {
+	let n = e.find((e) => e.id === t) ?? e[0], r = D(n);
+	return {
+		current: n,
+		language: r,
+		languages: [...new Set(e.map(D))],
+		variants: e.filter((e) => D(e) === r)
+	};
+}
+function k({ versions: n, value: r, onChange: u, labels: d, className: f, appearance: p }) {
+	let { t: m } = e(), h = g();
+	if (n.length < 2) return null;
+	let { current: _, language: v, languages: w, variants: T } = O(n, r);
+	return /* @__PURE__ */ b(t, {
+		appearance: p,
+		className: x("flex flex-wrap items-center gap-2 text-sm", f),
+		"data-ckui": "version-picker",
+		children: [w.length > 1 && /* @__PURE__ */ b(a, {
+			value: v,
+			onValueChange: (e) => {
+				let t = n.find((t) => D(t) === e);
+				t && u(t.id);
+			},
+			children: [/* @__PURE__ */ y(c, {
+				size: "sm",
+				"aria-label": m("versions.language"),
+				children: /* @__PURE__ */ y(l, { children: (e) => h(e) })
+			}), /* @__PURE__ */ y(o, { children: w.map((e) => /* @__PURE__ */ y(s, {
+				value: e,
+				children: h(e)
+			}, e)) })]
+		}), T.length > 1 && /* @__PURE__ */ y("div", {
+			role: "radiogroup",
+			"aria-label": m("versions.version"),
+			className: "flex flex-wrap gap-1",
+			children: T.map((e) => /* @__PURE__ */ b(i, {
+				size: "sm",
+				role: "radio",
+				"aria-checked": e.id === _.id,
+				variant: e.id === _.id ? "default" : "outline",
+				onClick: () => u(e.id),
+				"data-ckui": "version-option",
+				"data-locked": e.decision.allowed ? void 0 : "",
+				children: [!e.decision.allowed && /* @__PURE__ */ y(C, {
+					icon: S,
+					strokeWidth: 2,
+					className: "size-3.5",
+					"aria-label": m("versions.locked")
+				}), E(e, h, d)]
+			}, e.id))
+		})]
+	});
+}
+function A(t, n, r, i) {
+	let { t: a } = e(), o = g();
+	return v(() => {
+		if (t.length < 2) return [];
+		let { current: e, language: s, languages: c, variants: l } = O(t, n), u = [];
+		return c.length > 1 && u.push({
+			label: a("versions.language"),
+			value: s,
+			options: c.map((e) => ({
+				value: e,
+				label: o(e)
+			})),
+			onChange: (e) => {
+				let n = t.find((t) => D(t) === e);
+				n && r(n.id);
+			}
+		}), l.length > 1 && u.push({
+			label: a("versions.version"),
+			value: e.id,
+			options: l.map((e) => {
+				let t = E(e, o, i);
+				return {
+					value: e.id,
+					label: e.decision.allowed ? t : a("versions.lockedOption", { name: t })
+				};
+			}),
+			onChange: r
+		}), u;
+	}, [
+		t,
+		n,
+		r,
+		i,
+		a,
+		o
+	]);
+}
+//#endregion
+export { T as Paywall, k as VersionPicker, w as priceLabel, A as useVersionMenuItems };
+
+//# sourceMappingURL=paywall.js.map