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

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

@@ -1 +1 @@
-{"version":3,"file":"paywall.js","names":[],"sources":["../../../src/components/content/paywall.tsx"],"sourcesContent":["import { LockIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useContext, useMemo, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { Decision, Sale, Terms, Version } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport type { Translator } from \"../../i18n/messages.js\";\nimport { ContentKitContext, useContentKitClient, type ContentKitErrorHandler } from \"../../react/context.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 { contentError, ErrorLine, formatDate, useAction } from \"../social/parts.js\";\nimport { labelOf, useLanguageName, type Labels } from \"../groups/parts.js\";\nimport type { PlayerMenuItem } from \"../video-player.js\";\n\n/** An offer's price and period in words: \"$2.99\", \"$4.99 / 30 days\", \"$1.99 for 48 hours\". */\nexport function priceLabel(m: Translator, terms: Terms): string {\n  let price: string;\n  try {\n    price = new Intl.NumberFormat(m.language, { style: \"currency\", currency: terms.currency }).format(Number(terms.amount));\n  } catch {\n    price = `${terms.amount} ${terms.currency}`;\n  }\n  const period = (hours: number) => (hours % 24 === 0 ? m.plural(\"paywall.days\", hours / 24) : m.plural(\"paywall.hours\", hours));\n  if (terms.renew_hours) return m.t(\"paywall.renews\", { price, period: period(terms.renew_hours) });\n  if (terms.access_hours) return m.t(\"paywall.rents\", { price, period: period(terms.access_hours) });\n  return price;\n}\n\nexport interface PaywallProps {\n  /** The locked version's (or card's) decision. */\n  decision: Decision;\n  /**\n   * Starts a purchase: the host creates the order through billing-ui\n   * (createOrder with offer.price_id) and shows OrderCheckout; for a tier\n   * (no offer), its subscription page. A free group offer joins here instead.\n   */\n  onCheckout: (o: { key: string; offer?: Sale }) => void;\n  /** Tiers' names and prices from the host's catalog, by tier key. */\n  tiers?: Readonly<Record<string, { label?: string; price?: string }>>;\n  /** Asks a signed-out reader to sign in (they may hold it already); default the provider's. */\n  onSignIn?: () => void;\n  labels?: Labels;\n  /** Below the offers: the host's own. */\n  children?: ReactNode;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** Why content is locked and how to open it: its offers, the tiers that include it, previews and when it turns free. */\nexport function Paywall({ decision, onCheckout, tiers, onSignIn, labels, children, client: own, onError, className, appearance }: PaywallProps) {\n  const m = useMessages();\n  const { t } = m;\n  const ctx = useContext(ContentKitContext);\n  const client = useContentKitClient(own);\n  const { kinds } = useKinds({ client: own });\n  const join = useAction(\"membership.join\", onError);\n  if (decision.allowed) return null;\n  const signIn = onSignIn ?? ctx?.onSignIn;\n  const offers = decision.offers ?? [];\n  const sold = new Set(offers.map((o) => o.key));\n  const siteTiers = kinds?.tiers ?? Object.keys(tiers ?? {});\n  const tierKeys = (decision.sell ?? []).filter((k) => !sold.has(k) && (siteTiers.includes(k) || !!tiers?.[k]));\n  const required = decision.requires;\n  // A required key nothing here offers gets its own button; the others wait for it.\n  const requires = required && !offers.some((o) => o.key === required) ? required : undefined;\n  const waits = (key: string) => !!required && key !== required;\n  const preview = decision.preview;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-3 rounded-lg border border-border p-4 text-sm\", className)} data-ckui=\"paywall\">\n      <p className=\"flex items-center gap-2 font-medium\">\n        <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-4\" aria-hidden />\n        {decision.unknown ? t(\"paywall.unknown\") : required ? t(\"paywall.requiresFirst\") : t(\"paywall.locked\")}\n      </p>\n      {preview?.pages ? <p className=\"text-muted-foreground\">{m.plural(\"paywall.previewPages\", preview.pages)}</p> : null}\n      {preview?.segments ? <p className=\"text-muted-foreground\">{m.plural(\"paywall.previewSegments\", preview.segments)}</p> : null}\n      {decision.free_after && <p className=\"text-muted-foreground\">{t(\"paywall.freeFrom\", { date: formatDate(m, decision.free_after, false) })}</p>}\n      {!decision.unknown && (\n        <div className=\"flex flex-wrap gap-2\" data-ckui=\"paywall-offers\">\n          {requires && (\n            <Button size=\"sm\" variant=\"outline\" onClick={() => onCheckout({ key: requires })}>\n              {t(\"paywall.joinFirst\")}\n            </Button>\n          )}\n          {offers.map((o) =>\n            o.target.kind === \"group\" && Number(o.terms.amount) === 0 ? (\n              <Button\n                key={o.key}\n                size=\"sm\"\n                disabled={waits(o.key) || join.pending}\n                onClick={() => (ctx?.viewer === null && signIn ? signIn() : void join.run(() => client.offers.join(o.target.id)))}\n                data-ckui=\"paywall-offer\"\n                data-target=\"group\"\n                data-free=\"\"\n              >\n                {t(\"paywall.joinFirst\")}\n              </Button>\n            ) : (\n              <Button key={o.key} size=\"sm\" disabled={waits(o.key)} onClick={() => onCheckout({ key: o.key, offer: o })} data-ckui=\"paywall-offer\" data-target={o.target.kind}>\n                {t(o.target.kind === \"group\" ? \"paywall.joinFor\" : o.target.kind === \"version\" ? \"paywall.unlockVersionFor\" : \"paywall.unlockFor\", { price: priceLabel(m, o.terms) })}\n              </Button>\n            ),\n          )}\n          {tierKeys.map((k) => (\n            <Button key={k} size=\"sm\" variant={offers.length ? \"outline\" : \"default\"} onClick={() => onCheckout({ key: k })} data-ckui=\"paywall-tier\" data-tier={k}>\n              {t(\"paywall.subscribe\", { tier: tiers?.[k]?.label ?? labelOf(labels, k) })}\n              {tiers?.[k]?.price && <span className=\"ms-1 opacity-80\">{tiers[k]!.price}</span>}\n            </Button>\n          ))}\n        </div>\n      )}\n      {join.error && <ErrorLine>{contentError(m, join.error)}</ErrorLine>}\n      {ctx?.viewer === null && signIn && (\n        <p className=\"text-muted-foreground\">\n          {t(\"paywall.haveIt\")}{\" \"}\n          <button type=\"button\" className=\"font-medium text-foreground underline-offset-4 hover:underline\" onClick={signIn}>\n            {t(\"paywall.signIn\")}\n          </button>\n        </p>\n      )}\n      {children}\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface VersionPickerProps {\n  /** The content's live versions (useContentDetail().versions). */\n  versions: readonly Version[];\n  /** The version shown. */\n  value: string | null | undefined;\n  onChange: (version: string) => void;\n  labels?: Labels;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A version's name: its label, else its traits, else its languages. */\nfunction versionName(v: Version, languageName: (l: string) => string, labels?: Labels): string {\n  return v.label || (v.traits.length ? v.traits.map((x) => labelOf(labels, x)).join(\" · \") : v.languages.map(languageName).join(\", \"));\n}\n\nconst primary = (v: Version) => v.languages[0] ?? \"\";\n\n/** The shown version, the versions' languages and the shown language's variants. */\nfunction choices(versions: readonly Version[], value: string | null | undefined) {\n  const current = versions.find((v) => v.id === value) ?? versions[0]!;\n  const language = primary(current);\n  return { current, language, languages: [...new Set(versions.map(primary))], variants: versions.filter((v) => primary(v) === language) };\n}\n\n/** Chooses among a content's versions: a language first when they differ in language, then its variants (traits, labels). */\nexport function VersionPicker({ versions, value, onChange, labels, className, appearance }: VersionPickerProps) {\n  const { t } = useMessages();\n  const languageName = useLanguageName();\n  if (versions.length < 2) return null;\n  const { current, language, languages, variants } = choices(versions, value);\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"flex flex-wrap items-center gap-2 text-sm\", className)} data-ckui=\"version-picker\">\n      {languages.length > 1 && (\n        <Select\n          value={language}\n          onValueChange={(l) => {\n            const v = versions.find((x) => primary(x) === l);\n            if (v) onChange(v.id);\n          }}\n        >\n          <SelectTrigger size=\"sm\" aria-label={t(\"versions.language\")}>\n            <SelectValue>{(l: string) => languageName(l)}</SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {languages.map((l) => (\n              <SelectItem key={l} value={l}>\n                {languageName(l)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      )}\n      {variants.length > 1 && (\n        <div role=\"radiogroup\" aria-label={t(\"versions.version\")} className=\"flex flex-wrap gap-1\">\n          {variants.map((v) => (\n            <Button\n              key={v.id}\n              size=\"sm\"\n              role=\"radio\"\n              aria-checked={v.id === current.id}\n              variant={v.id === current.id ? \"default\" : \"outline\"}\n              onClick={() => onChange(v.id)}\n              data-ckui=\"version-option\"\n              data-locked={v.decision.allowed ? undefined : \"\"}\n            >\n              {!v.decision.allowed && <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-3.5\" aria-label={t(\"versions.locked\")} />}\n              {versionName(v, languageName, labels)}\n            </Button>\n          ))}\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\n/** VersionPicker as VideoPlayer settings entries (menuItems), for a watch page. */\nexport function useVersionMenuItems(\n  versions: readonly Version[],\n  value: string | null | undefined,\n  onChange: (version: string) => void,\n  labels?: Labels,\n): PlayerMenuItem[] {\n  const { t } = useMessages();\n  const languageName = useLanguageName();\n  return useMemo(() => {\n    if (versions.length < 2) return [];\n    const { current, language, languages, variants } = choices(versions, value);\n    const out: PlayerMenuItem[] = [];\n    if (languages.length > 1)\n      out.push({\n        label: t(\"versions.language\"),\n        value: language,\n        options: languages.map((l) => ({ value: l, label: languageName(l) })),\n        onChange: (l) => {\n          const v = versions.find((x) => primary(x) === l);\n          if (v) onChange(v.id);\n        },\n      });\n    if (variants.length > 1)\n      out.push({\n        label: t(\"versions.version\"),\n        value: current.id,\n        options: variants.map((v) => {\n          const name = versionName(v, languageName, labels);\n          return { value: v.id, label: v.decision.allowed ? name : t(\"versions.lockedOption\", { name }) };\n        }),\n        onChange,\n      });\n    return out;\n  }, [versions, value, onChange, labels, t, languageName]);\n}\n"],"mappings":"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"}
+{"version":3,"file":"paywall.js","names":[],"sources":["../../../src/components/content/paywall.tsx"],"sourcesContent":["import { LockIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useCallback, useContext, useMemo, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { Decision, Sale, Terms, Version } from \"../../client/generated/wire.js\";\nimport { useLanguageName, useMessages } from \"../../i18n/context.js\";\nimport type { Translator } from \"../../i18n/messages.js\";\nimport { ContentKitContext, useContentKitClient, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { findVersion } from \"../../react/detail.js\";\nimport { useVersionParam } from \"../../react/location.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 { contentError, ErrorLine, formatDate, useAction } from \"../social/parts.js\";\nimport { labelOf, type Labels } from \"../groups/parts.js\";\nimport type { PlayerMenuItem } from \"../video-player.js\";\n\n/** An offer's price and period in words: \"$2.99\", \"$4.99 / 30 days\", \"$1.99 for 48 hours\". */\nexport function priceLabel(m: Translator, terms: Terms): string {\n  let price: string;\n  try {\n    price = new Intl.NumberFormat(m.language, { style: \"currency\", currency: terms.currency }).format(Number(terms.amount));\n  } catch {\n    price = `${terms.amount} ${terms.currency}`;\n  }\n  const period = (hours: number) => (hours % 24 === 0 ? m.plural(\"paywall.days\", hours / 24) : m.plural(\"paywall.hours\", hours));\n  if (terms.renew_hours) return m.t(\"paywall.renews\", { price, period: period(terms.renew_hours) });\n  if (terms.access_hours) return m.t(\"paywall.rents\", { price, period: period(terms.access_hours) });\n  return price;\n}\n\nexport interface PaywallProps {\n  /** The locked version's (or card's) decision. */\n  decision: Decision;\n  /**\n   * Starts a purchase: the host creates the order through billing-ui\n   * (createOrder with offer.price_id) and shows OrderCheckout; for a tier\n   * (no offer), its subscription page. A free group offer joins here instead.\n   */\n  onCheckout: (o: { key: string; offer?: Sale }) => void;\n  /** Tiers' names and prices from the host's catalog, by tier key. */\n  tiers?: Readonly<Record<string, { label?: string; price?: string }>>;\n  /** Asks a signed-out reader to sign in (they may hold it already); default the provider's. */\n  onSignIn?: () => void;\n  labels?: Labels;\n  /** Below the offers: the host's own. */\n  children?: ReactNode;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** Why content is locked and how to open it: its offers, the tiers that include it, previews and when it turns free. */\nexport function Paywall({ decision, onCheckout, tiers, onSignIn, labels, children, client: own, onError, className, appearance }: PaywallProps) {\n  const m = useMessages();\n  const { t } = m;\n  const ctx = useContext(ContentKitContext);\n  const client = useContentKitClient(own);\n  const { kinds } = useKinds({ client: own });\n  const join = useAction(\"membership.join\", onError);\n  if (decision.allowed) return null;\n  const signIn = onSignIn ?? ctx?.onSignIn;\n  const offers = decision.offers ?? [];\n  const sold = new Set(offers.map((o) => o.key));\n  const siteTiers = kinds?.tiers ?? Object.keys(tiers ?? {});\n  const tierKeys = (decision.sell ?? []).filter((k) => !sold.has(k) && (siteTiers.includes(k) || !!tiers?.[k]));\n  const required = decision.requires;\n  // A required key nothing here offers gets its own button; the others wait for it.\n  const requires = required && !offers.some((o) => o.key === required) ? required : undefined;\n  const waits = (key: string) => !!required && key !== required;\n  const preview = decision.preview;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-3 rounded-lg border border-border p-4 text-sm\", className)} data-ckui=\"paywall\">\n      <p className=\"flex items-center gap-2 font-medium\">\n        <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-4\" aria-hidden />\n        {decision.unknown ? t(\"paywall.unknown\") : required ? t(\"paywall.requiresFirst\") : t(\"paywall.locked\")}\n      </p>\n      {preview?.pages ? <p className=\"text-muted-foreground\">{m.plural(\"paywall.previewPages\", preview.pages)}</p> : null}\n      {preview?.segments ? <p className=\"text-muted-foreground\">{m.plural(\"paywall.previewSegments\", preview.segments)}</p> : null}\n      {decision.free_after && <p className=\"text-muted-foreground\">{t(\"paywall.freeFrom\", { date: formatDate(m, decision.free_after, false) })}</p>}\n      {!decision.unknown && (\n        <div className=\"flex flex-wrap gap-2\" data-ckui=\"paywall-offers\">\n          {requires && (\n            <Button size=\"sm\" variant=\"outline\" onClick={() => onCheckout({ key: requires })}>\n              {t(\"paywall.joinFirst\")}\n            </Button>\n          )}\n          {offers.map((o) =>\n            o.target.kind === \"group\" && Number(o.terms.amount) === 0 ? (\n              <Button\n                key={o.key}\n                size=\"sm\"\n                disabled={waits(o.key) || join.pending}\n                onClick={() => (ctx?.viewer === null && signIn ? signIn() : void join.run(() => client.offers.join(o.target.id)))}\n                data-ckui=\"paywall-offer\"\n                data-target=\"group\"\n                data-free=\"\"\n              >\n                {t(\"paywall.joinFirst\")}\n              </Button>\n            ) : (\n              <Button key={o.key} size=\"sm\" disabled={waits(o.key)} onClick={() => onCheckout({ key: o.key, offer: o })} data-ckui=\"paywall-offer\" data-target={o.target.kind}>\n                {t(o.target.kind === \"group\" ? \"paywall.joinFor\" : o.target.kind === \"version\" ? \"paywall.unlockVersionFor\" : \"paywall.unlockFor\", { price: priceLabel(m, o.terms) })}\n              </Button>\n            ),\n          )}\n          {tierKeys.map((k) => (\n            <Button key={k} size=\"sm\" variant={offers.length ? \"outline\" : \"default\"} onClick={() => onCheckout({ key: k })} data-ckui=\"paywall-tier\" data-tier={k}>\n              {t(\"paywall.subscribe\", { tier: tiers?.[k]?.label ?? labelOf(labels, k) })}\n              {tiers?.[k]?.price && <span className=\"ms-1 opacity-80\">{tiers[k]!.price}</span>}\n            </Button>\n          ))}\n        </div>\n      )}\n      {join.error && <ErrorLine>{contentError(m, join.error)}</ErrorLine>}\n      {ctx?.viewer === null && signIn && (\n        <p className=\"text-muted-foreground\">\n          {t(\"paywall.haveIt\")}{\" \"}\n          <button type=\"button\" className=\"font-medium text-foreground underline-offset-4 hover:underline\" onClick={signIn}>\n            {t(\"paywall.signIn\")}\n          </button>\n        </p>\n      )}\n      {children}\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface VersionPickerProps {\n  /** The content's live versions (useContentDetail().versions). */\n  versions: readonly Version[];\n  /** The version shown, by code or id; default the page's ?v=, else the reader's language's default. */\n  value?: string | null;\n  /** Receives the chosen version; default writes its code to the page's ?v=. */\n  onChange?: (version: Version) => void;\n  labels?: Labels;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A version's name: its label, else its traits, else its languages. */\nfunction versionName(v: Version, languageName: (l: string) => string, labels?: Labels): string {\n  return v.label || (v.traits.length ? v.traits.map((x) => labelOf(labels, x)).join(\" · \") : v.languages.map(languageName).join(\", \"));\n}\n\nconst primary = (v: Version) => v.languages[0] ?? \"\";\n\n/**\n * The shown version (value, else the page's ?v=, else the reader's\n * language's default), the versions' languages, the shown language's\n * variants, and the change handler (default: write ?v=).\n */\nfunction useChoices(versions: readonly Version[], value: string | null | undefined, onChange: ((v: Version) => void) | undefined) {\n  const [param, setParam] = useVersionParam();\n  const reader = useContext(ContentKitContext)?.language;\n  const selected = value === undefined ? param : value;\n  const change = useCallback((v: Version) => (onChange ? onChange(v) : setParam(v.code)), [onChange, setParam]);\n  return useMemo(() => {\n    const current = findVersion(versions, selected) ?? (reader ? versions.find((v) => v.languages.includes(reader)) : undefined) ?? versions[0];\n    const language = current ? primary(current) : \"\";\n    return { current, language, languages: [...new Set(versions.map(primary))], variants: versions.filter((v) => primary(v) === language), change };\n  }, [versions, selected, reader, change]);\n}\n\n/**\n * Chooses among a content's versions: a language first when they differ in\n * language, then its variants (traits, labels). The choice is the page's ?v=\n * unless value and onChange say otherwise.\n */\nexport function VersionPicker({ versions, value, onChange, labels, className, appearance }: VersionPickerProps) {\n  const { t } = useMessages();\n  const languageName = useLanguageName();\n  const { current, language, languages, variants, change } = useChoices(versions, value, onChange);\n  if (versions.length < 2 || !current) return null;\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"flex flex-wrap items-center gap-2 text-sm\", className)} data-ckui=\"version-picker\">\n      {languages.length > 1 && (\n        <Select\n          value={language}\n          onValueChange={(l) => {\n            const v = versions.find((x) => primary(x) === l);\n            if (v) change(v);\n          }}\n        >\n          <SelectTrigger size=\"sm\" aria-label={t(\"versions.language\")}>\n            <SelectValue>{(l: string) => languageName(l)}</SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {languages.map((l) => (\n              <SelectItem key={l} value={l}>\n                {languageName(l)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      )}\n      {variants.length > 1 && (\n        <div role=\"radiogroup\" aria-label={t(\"versions.version\")} className=\"flex flex-wrap gap-1\">\n          {variants.map((v) => (\n            <Button\n              key={v.id}\n              size=\"sm\"\n              role=\"radio\"\n              aria-checked={v.id === current.id}\n              variant={v.id === current.id ? \"default\" : \"outline\"}\n              onClick={() => change(v)}\n              data-ckui=\"version-option\"\n              data-locked={v.decision.allowed ? undefined : \"\"}\n            >\n              {!v.decision.allowed && <HugeiconsIcon icon={LockIcon} strokeWidth={2} className=\"size-3.5\" aria-label={t(\"versions.locked\")} />}\n              {versionName(v, languageName, labels)}\n            </Button>\n          ))}\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\nexport interface VersionMenuOptions {\n  /** The version shown, by code or id; default the page's ?v=, else the reader's language's default. */\n  value?: string | null;\n  /** Receives the chosen version; default writes its code to the page's ?v=. */\n  onChange?: (version: Version) => void;\n  labels?: Labels;\n}\n\n/** VersionPicker as VideoPlayer settings entries (menuItems), for a watch page. */\nexport function useVersionMenuItems(versions: readonly Version[], o: VersionMenuOptions = {}): PlayerMenuItem[] {\n  const { t } = useMessages();\n  const languageName = useLanguageName();\n  const { current, language, languages, variants, change } = useChoices(versions, o.value, o.onChange);\n  const { labels } = o;\n  return useMemo(() => {\n    if (versions.length < 2 || !current) return [];\n    const out: PlayerMenuItem[] = [];\n    if (languages.length > 1)\n      out.push({\n        label: t(\"versions.language\"),\n        value: language,\n        options: languages.map((l) => ({ value: l, label: languageName(l) })),\n        onChange: (l) => {\n          const v = versions.find((x) => primary(x) === l);\n          if (v) change(v);\n        },\n      });\n    if (variants.length > 1)\n      out.push({\n        label: t(\"versions.version\"),\n        value: current.id,\n        options: variants.map((v) => {\n          const name = versionName(v, languageName, labels);\n          return { value: v.id, label: v.decision.allowed ? name : t(\"versions.lockedOption\", { name }) };\n        }),\n        onChange: (id) => {\n          const v = versions.find((x) => x.id === id);\n          if (v) change(v);\n        },\n      });\n    return out;\n  }, [versions, current, language, languages, variants, change, labels, t, languageName]);\n}\n"],"mappings":"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"}

package/dist/components/content/reader-stats.d.ts

@@ -0,0 +1,12 @@
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitClient } from '../../client/client.js';
+import { Labels } from '../groups/parts.js';
+export interface ReaderStatsProps {
+    /** Display names of content kinds by identifier. */
+    labels?: Labels;
+    client?: ContentKitClient;
+    appearance?: ContentKitUiAppearance;
+    className?: string;
+}
+/** The signed-in reader's activity: contents finished per kind, their comments and the reactions those received. Nothing signed out. */
+export declare function ReaderStats({ labels, client, appearance, className }: ReaderStatsProps): import('react').JSX.Element | null;

package/dist/components/content/reader-stats.js

@@ -0,0 +1,47 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { ContentKitUiRoot as t } from "../../scope.js";
+import { Skeleton as n } from "../../ui/skeleton.js";
+import { contentError as r } from "../social/parts.js";
+import { labelOf as i } from "../groups/parts.js";
+import { useMyStats as a } from "../../react/stats.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cn as c } from "cn";
+//#region src/components/content/reader-stats.tsx
+function l({ labels: l, client: u, appearance: d, className: f }) {
+	let p = e(), { t: m } = p, h = a({ client: u }), g = (e) => /* @__PURE__ */ o(t, {
+		appearance: d,
+		className: c("grid gap-3 text-sm", f),
+		"data-ckui": "reader-stats",
+		children: e
+	});
+	if (h.error) return g(/* @__PURE__ */ o("p", {
+		role: "alert",
+		className: "text-destructive",
+		children: r(p, h.error)
+	}));
+	if (!h.data) return h.loading ? g(/* @__PURE__ */ o(n, { className: "h-16 w-full" })) : null;
+	let _ = [
+		...Object.entries(h.data.completed).map(([e, t]) => [m("myStats.completed", { kind: i(l, e) }), t]),
+		[m("myStats.comments"), h.data.comments],
+		[m("myStats.likes"), h.data.comment_likes],
+		[m("myStats.dislikes"), h.data.comment_dislikes]
+	];
+	return g(/* @__PURE__ */ o("dl", {
+		className: "grid grid-cols-2 gap-3 sm:grid-cols-4",
+		children: _.map(([e, t]) => /* @__PURE__ */ s("div", {
+			className: "grid gap-0.5 rounded-lg border border-border p-3",
+			"data-ckui": "reader-stat",
+			children: [/* @__PURE__ */ o("dt", {
+				className: "text-xs text-muted-foreground",
+				children: e
+			}), /* @__PURE__ */ o("dd", {
+				className: "text-lg font-semibold tabular-nums",
+				children: t
+			})]
+		}, e))
+	}));
+}
+//#endregion
+export { l as ReaderStats };
+
+//# sourceMappingURL=reader-stats.js.map

package/dist/components/content/reader-stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reader-stats.js","names":[],"sources":["../../../src/components/content/reader-stats.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport type { ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useMyStats } from \"../../react/stats.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { labelOf, type Labels } from \"../groups/parts.js\";\nimport { contentError } from \"../social/parts.js\";\n\nexport interface ReaderStatsProps {\n  /** Display names of content kinds by identifier. */\n  labels?: Labels;\n  client?: ContentKitClient;\n  appearance?: ContentKitUiAppearance;\n  className?: string;\n}\n\n/** The signed-in reader's activity: contents finished per kind, their comments and the reactions those received. Nothing signed out. */\nexport function ReaderStats({ labels, client, appearance, className }: ReaderStatsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const s = useMyStats({ client });\n  const root = (children: ReactNode) => (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-3 text-sm\", className)} data-ckui=\"reader-stats\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (s.error) return root(<p role=\"alert\" className=\"text-destructive\">{contentError(m, s.error)}</p>);\n  if (!s.data) return s.loading ? root(<Skeleton className=\"h-16 w-full\" />) : null;\n  const stats: [string, number][] = [\n    ...Object.entries(s.data.completed).map(([kind, n]): [string, number] => [t(\"myStats.completed\", { kind: labelOf(labels, kind) }), n]),\n    [t(\"myStats.comments\"), s.data.comments],\n    [t(\"myStats.likes\"), s.data.comment_likes],\n    [t(\"myStats.dislikes\"), s.data.comment_dislikes],\n  ];\n  return root(\n    <dl className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n      {stats.map(([label, n]) => (\n        <div key={label} className=\"grid gap-0.5 rounded-lg border border-border p-3\" data-ckui=\"reader-stat\">\n          <dt className=\"text-xs text-muted-foreground\">{label}</dt>\n          <dd className=\"text-lg font-semibold tabular-nums\">{n}</dd>\n        </div>\n      ))}\n    </dl>,\n  );\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,EAAY,EAAE,WAAQ,WAAQ,eAAY,gBAA+B;CACvF,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAI,EAAW,EAAE,UAAO,CAAC,GACzB,KAAQ,MACZ,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,sBAAsB,CAAS;EAAG,aAAU;EACjG;CACe,CAAA;CAEpB,IAAI,EAAE,OAAO,OAAO,EAAK,kBAAC,KAAD;EAAG,MAAK;EAAQ,WAAU;EAAoB,UAAA,EAAa,GAAG,EAAE,KAAK;CAAK,CAAA,CAAC;CACpG,IAAI,CAAC,EAAE,MAAM,OAAO,EAAE,UAAU,EAAK,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA,CAAC,IAAI;CAC7E,IAAM,IAA4B;EAChC,GAAG,OAAO,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,KAAK,CAAC,GAAM,OAAyB,CAAC,EAAE,qBAAqB,EAAE,MAAM,EAAQ,GAAQ,CAAI,EAAE,CAAC,GAAG,CAAC,CAAC;EACrI,CAAC,EAAE,kBAAkB,GAAG,EAAE,KAAK,QAAQ;EACvC,CAAC,EAAE,eAAe,GAAG,EAAE,KAAK,aAAa;EACzC,CAAC,EAAE,kBAAkB,GAAG,EAAE,KAAK,gBAAgB;CACjD;CACA,OAAO,EACL,kBAAC,MAAD;EAAI,WAAU;EACX,UAAA,EAAM,KAAK,CAAC,GAAO,OAClB,kBAAC,OAAD;GAAiB,WAAU;GAAmD,aAAU;GAAxF,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;IAAiC,UAAA;GAAU,CAAA,GACzD,kBAAC,MAAD;IAAI,WAAU;IAAsC,UAAA;GAAM,CAAA,CACvD;EAHK,GAAA,CAGL,CACN;CACC,CAAA,CACN;AACF"}

package/dist/components/groups/banner.js

@@ -2,22 +2,22 @@ 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 { decodeImage as i } from "../../client/image.js";
-import { Button as a } from "../../ui/button.js";
-import { ImageCropDialog as o } from "../image-crop-dialog.js";
-import { Badge as s } from "../../ui/badge.js";
-import { Skeleton as c } from "../../ui/skeleton.js";
-import { ErrorLine as l, contentError as u, useAction as d } from "../social/parts.js";
-import { useGroup as f } from "../../react/groups.js";
+import { useGroup as a } from "../../react/groups.js";
+import { Button as o } from "../../ui/button.js";
+import { ImageCropDialog as s } from "../image-crop-dialog.js";
+import { Badge as c } from "../../ui/badge.js";
+import { Skeleton as l } from "../../ui/skeleton.js";
+import { ErrorLine as u, contentError as d, useAction as f } from "../social/parts.js";
 import { GroupAvatar as p, GroupCover as m } from "./parts.js";
 import { priceLabel as h } from "../content/paywall.js";
 import { useContext as g, useRef as _, useState as v } from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
 import { cn as x } from "cn";
 //#region src/components/groups/banner.tsx
-function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, className: m, appearance: _ }) {
-	let v = e(), { t: S } = v, C = r(f), w = g(n), T = d("membership.join", p), E = i.access;
+function S({ group: i, onCheckout: a, onSignIn: s, client: l, onError: p, className: m, appearance: _ }) {
+	let v = e(), { t: S } = v, C = r(l), w = g(n), T = f("membership.join", p), E = i.access;
 	if (!E || E.editor || !E.offer && !E.member && !E.unknown) return null;
-	let D = w?.viewer === null, O = c ?? w?.onSignIn, k = E.offer && Number(E.offer.terms.amount) > 0 ? E.offer : void 0;
+	let D = w?.viewer === null, O = s ?? w?.onSignIn, k = E.offer && Number(E.offer.terms.amount) > 0 ? E.offer : void 0;
 	return /* @__PURE__ */ b(t, {
 		appearance: _,
 		className: x("grid gap-2 rounded-lg border border-border p-3 text-sm", m),
@@ -28,7 +28,7 @@ function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, classN
 			children: S("membership.unknown")
 		}) : E.member ? /* @__PURE__ */ b("div", {
 			className: "flex flex-wrap items-center gap-2",
-			children: [/* @__PURE__ */ y(s, { children: S("membership.member") }), !k && /* @__PURE__ */ y(a, {
+			children: [/* @__PURE__ */ y(c, { children: S("membership.member") }), !k && /* @__PURE__ */ y(o, {
 				size: "sm",
 				variant: "ghost",
 				disabled: T.pending,
@@ -40,13 +40,13 @@ function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, classN
 			children: [/* @__PURE__ */ y("p", {
 				className: "text-muted-foreground",
 				children: S(k ? "membership.paidPitch" : "membership.freePitch")
-			}), /* @__PURE__ */ y(a, {
+			}), /* @__PURE__ */ y(o, {
 				size: "sm",
 				className: "justify-self-start",
-				disabled: T.pending || !!k && !o,
+				disabled: T.pending || !!k && !a,
 				onClick: () => {
 					if (D && O) return O();
-					if (k) return o?.({
+					if (k) return a?.({
 						key: E.key,
 						offer: k
 					});
@@ -54,69 +54,69 @@ function S({ group: i, onCheckout: o, onSignIn: c, client: f, onError: p, classN
 				},
 				children: k ? S("membership.joinFor", { price: h(v, k.terms) }) : S("membership.join")
 			})]
-		}), T.error && /* @__PURE__ */ y(l, { children: u(v, T.error) })]
+		}), T.error && /* @__PURE__ */ y(u, { children: d(v, T.error) })]
 	});
 }
 function C(n) {
-	let r = e(), i = f(n.group ? null : n.id, {
+	let r = e(), i = a(n.group ? null : n.id, {
 		language: n.language,
 		client: n.client
-	}), a = n.group ?? i.group;
-	if (!a) return i.error ? /* @__PURE__ */ y(l, { children: u(r, i.error) }) : /* @__PURE__ */ y(c, { className: "h-48 w-full" });
-	let o = a.text.find((e) => e.language === (n.language ?? a.name_language)) ?? a.text.find((e) => e.description), s = a.counts.filter((e) => e.language === (n.language ?? "")).reduce((e, t) => e + t.count, 0);
+	}), o = n.group ?? i.group;
+	if (!o) return i.error ? /* @__PURE__ */ y(u, { children: d(r, i.error) }) : /* @__PURE__ */ y(l, { className: "h-48 w-full" });
+	let s = o.text.find((e) => e.language === (n.language ?? o.name_language)) ?? o.text.find((e) => e.description), c = o.counts.filter((e) => e.language === (n.language ?? "")).reduce((e, t) => e + t.count, 0);
 	return /* @__PURE__ */ b(t, {
 		appearance: n.appearance,
 		className: x("grid gap-3 text-sm", n.className),
 		"data-ckui": "group-banner",
-		"data-kind": a.kind,
+		"data-kind": o.kind,
 		children: [
 			/* @__PURE__ */ y(m, {
-				group: a,
+				group: o,
 				className: "aspect-[3/1] w-full"
 			}),
 			/* @__PURE__ */ b("div", {
 				className: "flex flex-wrap items-end gap-4 px-2 sm:px-4",
 				children: [
 					/* @__PURE__ */ y(p, {
-						group: a,
+						group: o,
 						className: "-mt-12 size-20 border-4 border-background sm:-mt-16 sm:size-28"
 					}),
 					/* @__PURE__ */ b("div", {
 						className: "grid min-w-0 flex-1 gap-1",
 						children: [/* @__PURE__ */ y("h1", {
 							className: "text-xl font-semibold break-words",
-							children: a.name || a.slug
+							children: o.name || o.slug
 						}), /* @__PURE__ */ y("p", {
 							className: "text-xs text-muted-foreground tabular-nums",
-							children: r.plural("groups.items", s)
+							children: r.plural("groups.items", c)
 						})]
 					}),
 					/* @__PURE__ */ b("div", {
 						className: "flex flex-wrap items-start gap-2",
 						children: [/* @__PURE__ */ y(S, {
-							group: a,
+							group: o,
 							onCheckout: n.onCheckout,
 							client: n.client
 						}), n.children]
 					})
 				]
 			}),
-			o?.description && /* @__PURE__ */ y("p", {
+			s?.description && /* @__PURE__ */ y("p", {
 				className: "px-2 break-words whitespace-pre-line sm:px-4",
-				children: o.description
+				children: s.description
 			})
 		]
 	});
 }
-function w({ group: t, slot: n, crop: r = !0, client: s, onError: c, className: u }) {
-	let { t: h } = e(), g = f(t.id, { client: s }), S = _(null), C = d("group.save", c), [w, T] = v(null), [E, D] = v(null), O = g.group ?? t, k = n === "cover" ? !!O.cover?.image || !!O.cover?.content_id && !O.cover.auto : !!O.avatar?.image, A = (e, t) => C.run(() => g.uploadImage(n, e, {
+function w({ group: t, slot: n, crop: r = !0, client: c, onError: l, className: d }) {
+	let { t: h } = e(), g = a(t.id, { client: c }), S = _(null), C = f("group.save", l), [w, T] = v(null), [E, D] = v(null), O = g.group ?? t, k = n === "cover" ? !!O.cover?.image || !!O.cover?.content_id && !O.cover.auto : !!O.avatar?.image, A = (e, t) => C.run(() => g.uploadImage(n, e, {
 		wait: !1,
 		edit: t
 	})), j = () => {
 		w?.revoke?.(), T(null), D(null);
 	};
 	return /* @__PURE__ */ b("div", {
-		className: x("flex flex-wrap items-center gap-3", u),
+		className: x("flex flex-wrap items-center gap-3", d),
 		"data-ckui": "group-image-editor",
 		"data-slot": n,
 		children: [
@@ -134,14 +134,14 @@ function w({ group: t, slot: n, crop: r = !0, client: s, onError: c, className:
 				children: [
 					/* @__PURE__ */ b("div", {
 						className: "flex flex-wrap gap-2",
-						children: [/* @__PURE__ */ y(a, {
+						children: [/* @__PURE__ */ y(o, {
 							type: "button",
 							size: "sm",
 							variant: "outline",
 							disabled: C.pending,
 							onClick: () => S.current?.click(),
 							children: C.pending ? h("groupEditor.uploading") : h(n === "avatar" ? "groupEditor.uploadAvatar" : "groupEditor.uploadCover")
-						}), k && /* @__PURE__ */ y(a, {
+						}), k && /* @__PURE__ */ y(o, {
 							type: "button",
 							size: "sm",
 							variant: "ghost",
@@ -166,10 +166,10 @@ function w({ group: t, slot: n, crop: r = !0, client: s, onError: c, className:
 							}
 						}
 					}),
-					/* @__PURE__ */ y(l, { error: C.error })
+					/* @__PURE__ */ y(u, { error: C.error })
 				]
 			}),
-			/* @__PURE__ */ y(o, {
+			/* @__PURE__ */ y(s, {
 				open: !!w,
 				onOpenChange: (e) => !e && j(),
 				source: w,

package/dist/components/groups/directory.js

@@ -1,17 +1,17 @@
 import { useMessages as e } from "../../i18n/context.js";
 import { ContentKitUiRoot as t } from "../../scope.js";
-import { Button as n } from "../../ui/button.js";
-import { Skeleton as r } from "../../ui/skeleton.js";
-import { contentError as i } from "../social/parts.js";
-import { LETTERS as a } from "../../client/group-fields.js";
-import { useGroups as o } from "../../react/groups.js";
+import { useGroups as n } from "../../react/groups.js";
+import { Button as r } from "../../ui/button.js";
+import { Skeleton as i } from "../../ui/skeleton.js";
+import { contentError as a } from "../social/parts.js";
+import { LETTERS as o } from "../../client/group-fields.js";
 import { GroupCover as s, GroupLink as c } from "./parts.js";
 import { useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { cn as f } from "cn";
 //#region src/components/groups/directory.tsx
 function p(p) {
-	let m = e(), { t: h } = m, [g, _] = l(null), v = p.letter === void 0 ? g : p.letter, y = (e) => p.onLetterChange ? p.onLetterChange(e) : _(e), b = o({
+	let m = e(), { t: h } = m, [g, _] = l(null), v = p.letter === void 0 ? g : p.letter, y = (e) => p.onLetterChange ? p.onLetterChange(e) : _(e), b = n({
 		kind: p.kind,
 		language: p.language,
 		contentKind: p.contentKind,
@@ -31,7 +31,7 @@ function p(p) {
 				"aria-label": h("groups.byLetter"),
 				className: "flex flex-wrap gap-1",
 				"data-ckui": "letters",
-				children: [null, ...a].map((e) => /* @__PURE__ */ u(n, {
+				children: [null, ...o].map((e) => /* @__PURE__ */ u(r, {
 					size: "xs",
 					variant: v === e ? "default" : "ghost",
 					"aria-pressed": v === e,
@@ -44,14 +44,14 @@ function p(p) {
 			b.loading && !b.items.length ? /* @__PURE__ */ u("div", {
 				className: x ? "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" : "grid gap-2",
 				"aria-busy": !0,
-				children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ u(r, { className: x ? "aspect-[3/4] w-full" : "h-6 w-48" }, t))
+				children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ u(i, { className: x ? "aspect-[3/4] w-full" : "h-6 w-48" }, t))
 			}) : b.error && !b.items.length ? /* @__PURE__ */ d("div", {
 				role: "alert",
 				className: "grid justify-items-start gap-2",
 				children: [/* @__PURE__ */ u("p", {
 					className: "text-destructive",
-					children: i(m, b.error)
-				}), /* @__PURE__ */ u(n, {
+					children: a(m, b.error)
+				}), /* @__PURE__ */ u(r, {
 					size: "sm",
 					variant: "outline",
 					onClick: b.reload,
@@ -100,7 +100,7 @@ function p(p) {
 				role: "status",
 				children: h("groups.empty")
 			}),
-			b.hasMore && /* @__PURE__ */ u(n, {
+			b.hasMore && /* @__PURE__ */ u(r, {
 				variant: "outline",
 				size: "sm",
 				className: "justify-self-center",