@openrails/contentkit-ui 0.86.0 → 0.87.0

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

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/content/grid.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useEffect, useMemo, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentQuery, HistoryQuery, RailQuery, SearchQuery } from \"../../client/discovery.js\";\nimport type { Card } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext } from \"../../react/context.js\";\nimport { useContents, useExposure, useHistory, useRecommendations, useSearch, useSimilar, type UseRail } from \"../../react/discovery.js\";\nimport { useKinds } from \"../../react/groups.js\";\nimport type { UseList } from \"../../react/use-resource.js\";\nimport { useNearViewport } from \"../../react/viewport.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError, useAction } from \"../social/parts.js\";\nimport { ContentCard, type ContentCardProps } from \"./card.js\";\n\nexport interface CardListProps extends Omit<ContentCardProps, \"card\" | \"onOpen\" | \"children\" | \"className\"> {\n  /** Where the list is, for exposures and click attribution: \"home\", \"search\", \"similar\". */\n  surface?: string;\n  /** Loads the next page as the end nears, instead of a button. */\n  infinite?: boolean;\n  /** A card's entry instead of ContentCard. */\n  renderCard?: (card: Card, position: number) => ReactNode;\n  /** Shown when nothing matches. */\n  empty?: ReactNode;\n  pageSize?: number;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\nconst GRID = \"grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6\";\n\n/** A list's cards in a responsive grid, paged, with exposures and click signals. */\nexport function CardGrid({ list, render, ...p }: CardListProps & { list: UseList<Card>; render: string }) {\n  const m = useMessages();\n  const { t } = m;\n  const { kinds } = useKinds({ client: p.client });\n  const exposure = useExposure(list.items, { surface: p.surface ?? \"list\", render, client: p.client });\n  const [sentinel, near] = useNearViewport({ margin: \"600px 0px\", leaveMargin: \"1200px 0px\" });\n  const { hasMore, loadingMore, loadMore } = list;\n  useEffect(() => {\n    if (p.infinite && near && hasMore && !loadingMore) void loadMore();\n  }, [p.infinite, near, hasMore, loadingMore, loadMore]);\n  const tiers = p.tiers ?? kinds?.tiers;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"content-grid\" aria-busy={list.loading}>\n      {list.loading && !list.items.length ? (\n        <div className={GRID}>\n          {Array.from({ length: 8 }, (_, i) => (\n            <Skeleton key={i} className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n          ))}\n        </div>\n      ) : list.error && !list.items.length ? (\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, list.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={list.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\n      ) : !list.items.length ? (\n        <div className=\"text-muted-foreground\" role=\"status\">\n          {p.empty ?? t(\"contents.empty\")}\n        </div>\n      ) : (\n        <ol className={GRID}>\n          {list.items.map((card, i) => (\n            <li key={card.id} ref={exposure.track(card.id, i + 1)}>\n              {p.renderCard ? (\n                p.renderCard(card, i + 1)\n              ) : (\n                <ContentCard\n                  card={card}\n                  href={p.href}\n                  shape={p.shape}\n                  groupKinds={p.groupKinds}\n                  chips={p.chips}\n                  tiers={tiers}\n                  labels={p.labels}\n                  owner={p.owner}\n                  ownerHref={p.ownerHref}\n                  onOpen={() => exposure.click(card.id, i + 1)}\n                />\n              )}\n            </li>\n          ))}\n        </ol>\n      )}\n      {list.hasMore && (\n        <div ref={sentinel} className=\"grid justify-items-center\">\n          <Button variant=\"outline\" size=\"sm\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n            {list.loadingMore ? t(\"contents.loading\") : t(\"contents.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\n/** Contents as cards (GET /v1/contents): any sort and filter, paged. */\nexport function ContentGrid({ query, ...p }: CardListProps & { query: ContentQuery }) {\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useContents(q, { client: p.client });\n  return <CardGrid {...p} list={list} render={JSON.stringify(q)} />;\n}\n\n/** Search results as cards; nothing until the query has text. */\nexport function SearchResults({ query, ...p }: CardListProps & { query: SearchQuery }) {\n  const { t } = useMessages();\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useSearch(q, { client: p.client });\n  if (!query.q.trim()) return null;\n  return <CardGrid surface=\"search\" empty={t(\"contents.noResults\", { q: query.q.trim() })} {...p} list={list} render={JSON.stringify(q)} />;\n}\n\n/** The signed-in reader's history as cards, each removable, with a clear-all. */\nexport function ContentHistory({ query = {}, ...p }: CardListProps & { query?: HistoryQuery }) {\n  const { t } = useMessages();\n  const ctx = useContext(ContentKitContext);\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useHistory(q, { client: p.client });\n  const forget = useAction(\"history.forget\");\n  if (ctx?.viewer === null) return <p className=\"text-muted-foreground\">{t(\"contents.historySignedOut\")}</p>;\n  return (\n    <div className=\"grid gap-3\" data-ckui=\"content-history\">\n      {list.items.length > 0 && (\n        <Button size=\"sm\" variant=\"outline\" className=\"justify-self-end\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget(query.kind ? { kind: query.kind } : {}))}>\n          {t(\"contents.clearHistory\")}\n        </Button>\n      )}\n      <CardGrid\n        surface=\"history\"\n        empty={t(\"contents.historyEmpty\")}\n        {...p}\n        list={list}\n        render={JSON.stringify(q)}\n        renderCard={\n          p.renderCard ??\n          ((card) => (\n            <ContentCard\n              card={card}\n              href={p.href}\n              shape={p.shape}\n              groupKinds={p.groupKinds}\n              chips={p.chips}\n              tiers={p.tiers}\n              labels={p.labels}\n              owner={p.owner}\n              ownerHref={p.ownerHref}\n            >\n              <Button size=\"xs\" variant=\"ghost\" className=\"justify-self-start\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget({ content_id: card.id }))}>\n                {t(\"contents.removeFromHistory\")}\n              </Button>\n            </ContentCard>\n          ))\n        }\n      />\n    </div>\n  );\n}\n\nexport interface ContentRailProps extends Omit<CardListProps, \"infinite\" | \"empty\"> {\n  /** The rail's heading. */\n  title: ReactNode;\n  /** Contents like this one. */\n  similar?: string;\n  /** For the signed-in reader. */\n  recommendations?: boolean;\n  /** The reader's history: { status: \"in_progress\" } is a continue-watching rail. */\n  history?: HistoryQuery;\n  /** An ordered group's members in its order: a featured rail (its windows apply). */\n  group?: string;\n  /** Any list: a sort and filters. */\n  list?: ContentQuery;\n  /** Filters and reader options of a similar or recommended rail. */\n  query?: RailQuery;\n  /** A link beside the heading, e.g. to the whole list. */\n  more?: ReactNode;\n}\n\n/**\n * A horizontal row of contents: similar, recommended, the reader's history,\n * an ordered group's members or any list. It hides itself when it has none or\n * the site runs without what it needs.\n */\nexport function ContentRail({ title, similar, recommendations, history, group, list: listQuery, query = {}, more, ...p }: ContentRailProps) {\n  const limit = query.limit ?? p.pageSize ?? 12;\n  const q = useMemo(() => ({ ...query, limit }), [query, limit]);\n  const listing = useMemo(\n    () => (listQuery ? { ...listQuery, limit: listQuery.limit ?? limit } : group ? { groups: [group], sort: \"position\" as const, limit } : null),\n    [listQuery, group, limit],\n  );\n  const like = useSimilar(recommendations || history || listing ? null : similar, q, { client: p.client });\n  const mine = useRecommendations(recommendations ? q : null, { client: p.client });\n  const seen = useHistory(history ? { ...history, limit: history.limit ?? limit } : null, { client: p.client });\n  const listed = useContents(listing, { client: p.client });\n  const rail: UseRail = recommendations\n    ? mine\n    : history || listing\n      ? (() => {\n          const l = history ? seen : listed;\n          return { items: l.items, loading: l.loading, error: l.error, unavailable: l.error?.code === \"not_configured\", reload: l.reload };\n        })()\n      : like;\n  const { kinds } = useKinds({ client: p.client });\n  const surface = p.surface ?? (recommendations ? \"recommendations\" : history ? \"history\" : group ? \"featured\" : listing ? \"list\" : \"similar\");\n  const exposure = useExposure(rail.items, { surface, render: JSON.stringify([similar, recommendations, history, group, listing, q]), client: p.client });\n  const source = similar || recommendations || history || group || listing;\n  if (!source || rail.unavailable || (!rail.loading && !rail.items.length)) return null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-rail\" data-surface={surface}>\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <h2 className=\"text-base font-semibold\">{title}</h2>\n        {more}\n      </div>\n      <ol className=\"flex snap-x gap-4 overflow-x-auto pb-2\">\n        {(rail.loading && !rail.items.length ? Array.from({ length: 6 }, () => null) : rail.items).map((card, i) => (\n          <li key={card?.id ?? i} className=\"w-36 shrink-0 snap-start sm:w-44\" ref={card ? exposure.track(card.id, i + 1) : undefined}>\n            {!card ? (\n              <Skeleton className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n            ) : p.renderCard ? (\n              p.renderCard(card, i + 1)\n            ) : (\n              <ContentCard\n                card={card}\n                href={p.href}\n                shape={p.shape}\n                groupKinds={p.groupKinds}\n                chips={p.chips}\n                tiers={p.tiers ?? kinds?.tiers}\n                labels={p.labels}\n                owner={p.owner}\n                ownerHref={p.ownerHref}\n                onOpen={() => exposure.click(card.id, i + 1)}\n              />\n            )}\n          </li>\n        ))}\n      </ol>\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAM,IAAO;AAGb,SAAgB,EAAS,EAAE,SAAM,WAAQ,GAAG,KAA8D;CACxG,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,EAAE,aAAU,EAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,GACzC,IAAW,EAAY,EAAK,OAAO;EAAE,SAAS,EAAE,WAAW;EAAQ;EAAQ,QAAQ,EAAE;CAAO,CAAC,GAC7F,CAAC,GAAU,KAAQ,EAAgB;EAAE,QAAQ;EAAa,aAAa;CAAa,CAAC,GACrF,EAAE,YAAS,gBAAa,gBAAa;CAC3C,QAAgB;EACd,AAAI,EAAE,YAAY,KAAQ,KAAW,CAAC,KAAa,EAAc;CACnE,GAAG;EAAC,EAAE;EAAU;EAAM;EAAS;EAAa;CAAQ,CAAC;CACrD,IAAM,IAAQ,EAAE,SAAS,GAAO;CAChC,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAe,aAAW,EAAK;EAAvI,UAAA,CACG,EAAK,WAAW,CAAC,EAAK,MAAM,SAC3B,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MAC7B,kBAAC,GAAD,EAAkB,WAAW,EAAE,UAAU,cAAc,wBAAwB,sBAAwB,GAAxF,CAAwF,CACxG;EACE,CAAA,IACH,EAAK,SAAS,CAAC,EAAK,MAAM,SAC5B,kBAAC,OAAD;GAAK,MAAK;GAAQ,WAAU;GAA5B,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;IAAoB,UAAA,EAAa,GAAG,EAAK,KAAK;GAAK,CAAA,GAChE,kBAAC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAU,SAAS,EAAK;IAC/C,UAAA,EAAE,cAAc;GACX,CAAA,CACL;EACH,CAAA,IAAC,EAAK,MAAM,SAKd,kBAAC,MAAD;GAAI,WAAW;GACZ,UAAA,EAAK,MAAM,KAAK,GAAM,MACrB,kBAAC,MAAD;IAAkB,KAAK,EAAS,MAAM,EAAK,IAAI,IAAI,CAAC;IACjD,UAAA,EAAE,aACD,EAAE,WAAW,GAAM,IAAI,CAAC,IAExB,kBAAC,GAAD;KACQ;KACN,MAAM,EAAE;KACR,OAAO,EAAE;KACT,YAAY,EAAE;KACd,OAAO,EAAE;KACF;KACP,QAAQ,EAAE;KACV,OAAO,EAAE;KACT,WAAW,EAAE;KACb,cAAc,EAAS,MAAM,EAAK,IAAI,IAAI,CAAC;IAC5C,CAAA;GAED,GAjBK,EAAK,EAiBV,CACL;EACC,CAAA,IAzBJ,kBAAC,OAAD;GAAK,WAAU;GAAwB,MAAK;GACzC,UAAA,EAAE,SAAS,EAAE,gBAAgB;EAC3B,CAAA,GAyBN,EAAK,WACJ,kBAAC,OAAD;GAAK,KAAK;GAAU,WAAU;GAC5B,UAAA,kBAAC,GAAD;IAAQ,SAAQ;IAAU,MAAK;IAAK,UAAU,EAAK;IAAa,eAAe,KAAK,EAAK,SAAS;IAC/F,UAAA,EAAK,cAAc,EAAE,kBAAkB,IAAI,EAAE,mBAAmB;GAC3D,CAAA;EACL,CAAA,CAES;;AAEtB;AAGA,SAAgB,EAAY,EAAE,UAAO,GAAG,KAA8C;CACpF,IAAM,IAAI,SAAe;EAAE,GAAG;EAAO,OAAO,EAAM,SAAS,EAAE;CAAS,IAAI,CAAC,GAAO,EAAE,QAAQ,CAAC,GACvF,IAAO,EAAY,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC;CAChD,OAAO,kBAAC,GAAD;EAAU,GAAI;EAAS;EAAM,QAAQ,KAAK,UAAU,CAAC;CAAI,CAAA;AAClE;AAGA,SAAgB,EAAc,EAAE,UAAO,GAAG,KAA6C;CACrF,IAAM,EAAE,SAAM,EAAY,GACpB,IAAI,SAAe;EAAE,GAAG;EAAO,OAAO,EAAM,SAAS,EAAE;CAAS,IAAI,CAAC,GAAO,EAAE,QAAQ,CAAC,GACvF,IAAO,EAAU,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC;CAE9C,OADK,EAAM,EAAE,KAAK,IACX,kBAAC,GAAD;EAAU,SAAQ;EAAS,OAAO,EAAE,sBAAsB,EAAE,GAAG,EAAM,EAAE,KAAK,EAAE,CAAC;EAAG,GAAI;EAAS;EAAM,QAAQ,KAAK,UAAU,CAAC;CAAI,CAAA,IAD5G;AAE9B;AAGA,SAAgB,EAAe,EAAE,WAAQ,CAAC,GAAG,GAAG,KAA+C;CAC7F,IAAM,EAAE,SAAM,EAAY,GACpB,IAAM,EAAW,CAAiB,GAClC,IAAI,SAAe;EAAE,GAAG;EAAO,OAAO,EAAM,SAAS,EAAE;CAAS,IAAI,CAAC,GAAO,EAAE,QAAQ,CAAC,GACvF,IAAO,EAAW,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC,GACzC,IAAS,EAAU,gBAAgB;CAEzC,OADI,GAAK,WAAW,OAAa,kBAAC,KAAD;EAAG,WAAU;EAAyB,UAAA,EAAE,2BAA2B;CAAK,CAAA,IAEvG,kBAAC,OAAD;EAAK,WAAU;EAAa,aAAU;EAAtC,UAAA,CACG,EAAK,MAAM,SAAS,KACnB,kBAAC,GAAD;GAAQ,MAAK;GAAK,SAAQ;GAAU,WAAU;GAAmB,UAAU,EAAO;GAAS,eAAe,KAAK,EAAO,UAAU,EAAK,OAAO,EAAM,OAAO,EAAE,MAAM,EAAM,KAAK,IAAI,CAAC,CAAC,CAAC;GAChL,UAAA,EAAE,uBAAuB;EACpB,CAAA,GAEV,kBAAC,GAAD;GACE,SAAQ;GACR,OAAO,EAAE,uBAAuB;GAChC,GAAI;GACE;GACN,QAAQ,KAAK,UAAU,CAAC;GACxB,YACE,EAAE,gBACA,MACA,kBAAC,GAAD;IACQ;IACN,MAAM,EAAE;IACR,OAAO,EAAE;IACT,YAAY,EAAE;IACd,OAAO,EAAE;IACT,OAAO,EAAE;IACT,QAAQ,EAAE;IACV,OAAO,EAAE;IACT,WAAW,EAAE;IAEb,UAAA,kBAAC,GAAD;KAAQ,MAAK;KAAK,SAAQ;KAAQ,WAAU;KAAqB,UAAU,EAAO;KAAS,eAAe,KAAK,EAAO,UAAU,EAAK,OAAO,EAAE,YAAY,EAAK,GAAG,CAAC,CAAC;KACjK,UAAA,EAAE,4BAA4B;IACzB,CAAA;GACG,CAAA;EAGlB,CAAA,CACE;;AAET;AA0BA,SAAgB,EAAY,EAAE,UAAO,YAAS,oBAAiB,YAAS,UAAO,MAAM,GAAW,WAAQ,CAAC,GAAG,SAAM,GAAG,KAAuB;CAC1I,IAAM,IAAQ,EAAM,SAAS,EAAE,YAAY,IACrC,IAAI,SAAe;EAAE,GAAG;EAAO;CAAM,IAAI,CAAC,GAAO,CAAK,CAAC,GACvD,IAAU,QACP,IAAY;EAAE,GAAG;EAAW,OAAO,EAAU,SAAS;CAAM,IAAI,IAAQ;EAAE,QAAQ,CAAC,CAAK;EAAG,MAAM;EAAqB;CAAM,IAAI,MACvI;EAAC;EAAW;EAAO;CAAK,CAC1B,GACM,IAAO,EAAW,KAAmB,KAAW,IAAU,OAAO,GAAS,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC,GACjG,IAAO,EAAmB,IAAkB,IAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,GAC1E,IAAO,EAAW,IAAU;EAAE,GAAG;EAAS,OAAO,EAAQ,SAAS;CAAM,IAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,GACtG,IAAS,EAAY,GAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,GAClD,IAAgB,IAClB,IACA,KAAW,WACF;EACL,IAAM,IAAI,IAAU,IAAO;EAC3B,OAAO;GAAE,OAAO,EAAE;GAAO,SAAS,EAAE;GAAS,OAAO,EAAE;GAAO,aAAa,EAAE,OAAO,SAAS;GAAkB,QAAQ,EAAE;EAAO;CACjI,EAAA,CAAG,IACH,GACA,EAAE,aAAU,EAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,GACzC,IAAU,EAAE,YAAY,IAAkB,oBAAoB,IAAU,YAAY,IAAQ,aAAa,IAAU,SAAS,YAC5H,IAAW,EAAY,EAAK,OAAO;EAAE;EAAS,QAAQ,KAAK,UAAU;GAAC;GAAS;GAAiB;GAAS;GAAO;GAAS;EAAC,CAAC;EAAG,QAAQ,EAAE;CAAO,CAAC;CAGtJ,OADI,EADW,KAAW,KAAmB,KAAW,KAAS,MAClD,EAAK,eAAgB,CAAC,EAAK,WAAW,CAAC,EAAK,MAAM,SAAgB,OAE/E,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAe,gBAAc;EAArI,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;IAA2B,UAAA;GAAU,CAAA,GAClD,CACE;EACL,CAAA,GAAA,kBAAC,MAAD;GAAI,WAAU;GACV,WAAA,EAAK,WAAW,CAAC,EAAK,MAAM,SAAS,MAAM,KAAK,EAAE,QAAQ,EAAE,SAAS,IAAI,IAAI,EAAK,MAAA,CAAO,KAAK,GAAM,MACpG,kBAAC,MAAD;IAAwB,WAAU;IAAmC,KAAK,IAAO,EAAS,MAAM,EAAK,IAAI,IAAI,CAAC,IAAI,KAAA;IAC/G,UAAC,IAEE,EAAE,aACJ,EAAE,WAAW,GAAM,IAAI,CAAC,IAExB,kBAAC,GAAD;KACQ;KACN,MAAM,EAAE;KACR,OAAO,EAAE;KACT,YAAY,EAAE;KACd,OAAO,EAAE;KACT,OAAO,EAAE,SAAS,GAAO;KACzB,QAAQ,EAAE;KACV,OAAO,EAAE;KACT,WAAW,EAAE;KACb,cAAc,EAAS,MAAM,EAAK,IAAI,IAAI,CAAC;IAC5C,CAAA,IAfD,kBAAC,GAAD,EAAU,WAAW,EAAE,UAAU,cAAc,wBAAwB,sBAAwB,CAAA;GAiB/F,GAnBK,GAAM,MAAM,CAmBjB,CACL;EACC,CAAA,CACY;;AAEtB"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/content/grid.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ContentQuery, HistoryQuery, RailQuery, SearchQuery } from \"../../client/discovery.js\";\nimport type { Card } from \"../../client/generated/wire.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext } from \"../../react/context.js\";\nimport { useContents, useExposure, useHistory, useLockedCount, useRecommendations, useSearch, useSimilar, type UseRail } from \"../../react/discovery.js\";\nimport { useKinds } from \"../../react/groups.js\";\nimport type { UseList } from \"../../react/use-resource.js\";\nimport { useNearViewport } from \"../../react/viewport.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError, useAction } from \"../social/parts.js\";\nimport { ContentCard, type ContentCardProps } from \"./card.js\";\n\nexport interface CardListProps extends Omit<ContentCardProps, \"card\" | \"onOpen\" | \"children\" | \"className\"> {\n  /** Where the list is, for exposures and click attribution: \"home\", \"search\", \"similar\". */\n  surface?: string;\n  /** Loads the next page as the end nears, instead of a button. */\n  infinite?: boolean;\n  /** A card's entry instead of ContentCard. */\n  renderCard?: (card: Card, position: number) => ReactNode;\n  /** Shown when nothing matches. */\n  empty?: ReactNode;\n  pageSize?: number;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\nconst GRID = \"grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6\";\n\n/** A list's cards in a responsive grid, paged, with exposures and click signals. */\nexport function CardGrid({ list, render, ...p }: CardListProps & { list: UseList<Card>; render: string }) {\n  const m = useMessages();\n  const { t } = m;\n  const { kinds } = useKinds({ client: p.client });\n  const exposure = useExposure(list.items, { surface: p.surface ?? \"list\", render, client: p.client });\n  const [sentinel, near] = useNearViewport({ margin: \"600px 0px\", leaveMargin: \"1200px 0px\" });\n  const { hasMore, loadingMore, loadMore } = list;\n  useEffect(() => {\n    if (p.infinite && near && hasMore && !loadingMore) void loadMore();\n  }, [p.infinite, near, hasMore, loadingMore, loadMore]);\n  const tiers = p.tiers ?? kinds?.tiers;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"content-grid\" aria-busy={list.loading}>\n      {list.loading && !list.items.length ? (\n        <div className={GRID}>\n          {Array.from({ length: 8 }, (_, i) => (\n            <Skeleton key={i} className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n          ))}\n        </div>\n      ) : list.error && !list.items.length ? (\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, list.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={list.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>\n      ) : !list.items.length ? (\n        <div className=\"text-muted-foreground\" role=\"status\">\n          {p.empty ?? t(\"contents.empty\")}\n        </div>\n      ) : (\n        <ol className={GRID}>\n          {list.items.map((card, i) => (\n            <li key={card.id} ref={exposure.track(card.id, i + 1)}>\n              {p.renderCard ? (\n                p.renderCard(card, i + 1)\n              ) : (\n                <ContentCard\n                  card={card}\n                  href={p.href}\n                  shape={p.shape}\n                  groupKinds={p.groupKinds}\n                  chips={p.chips}\n                  tiers={tiers}\n                  labels={p.labels}\n                  owner={p.owner}\n                  ownerHref={p.ownerHref}\n                  decorate={p.decorate}\n                  onOpen={() => exposure.click(card.id, i + 1)}\n                />\n              )}\n            </li>\n          ))}\n        </ol>\n      )}\n      {list.hasMore && (\n        <div ref={sentinel} className=\"grid justify-items-center\">\n          <Button variant=\"outline\" size=\"sm\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n            {list.loadingMore ? t(\"contents.loading\") : t(\"contents.loadMore\")}\n          </Button>\n        </div>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n\n/**\n * What a list does with cards the reader doesn't open: shows them marked\n * (show), leaves them out (hide), or lists them apart, counted, behind a\n * toggle that loads them when opened (collapse).\n */\nexport type LockedCards = \"show\" | \"hide\" | \"collapse\";\n\nconst LOCKED_LEVELS = [\"tier\", \"group\", \"ppv\", \"group_ppv\"] as const;\n\n/** Contents as cards (GET /v1/contents): any sort and filter, paged. */\nexport function ContentGrid({ query, locked = \"show\", ...p }: CardListProps & { query: ContentQuery; locked?: LockedCards }) {\n  const q = useMemo<ContentQuery>(\n    () => ({ ...query, limit: query.limit ?? p.pageSize, ...(locked === \"show\" ? {} : { mode: \"hide\" }) }),\n    [query, p.pageSize, locked],\n  );\n  const list = useContents(q, { client: p.client });\n  return (\n    <>\n      {locked === \"collapse\" && <LockedSection {...p} query={query} />}\n      <CardGrid {...p} list={list} render={JSON.stringify(q)} />\n    </>\n  );\n}\n\n/** A list's locked cards, counted, loaded and shown on opening. */\nfunction LockedSection({ query, ...p }: CardListProps & { query: ContentQuery }) {\n  const m = useMessages();\n  const [open, setOpen] = useState(false);\n  const { count } = useLockedCount(query, { client: p.client });\n  const q = useMemo<ContentQuery | null>(\n    () => (open ? { ...query, mode: \"lock\", access: query.access ?? LOCKED_LEVELS, limit: query.limit ?? p.pageSize } : null),\n    [open, query, p.pageSize],\n  );\n  const list = useContents(q, { client: p.client });\n  const items = useMemo(() => list.items.filter((c) => !c.access.allowed), [list.items]);\n  if (!count) return null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className=\"grid gap-3 text-sm\" data-ckui=\"locked-cards\">\n      <Button variant=\"outline\" size=\"sm\" className=\"justify-self-start\" aria-expanded={open} onClick={() => setOpen(!open)}>\n        {open ? m.t(\"contents.lockedHide\") : m.plural(\"contents.lockedShow\", count)}\n      </Button>\n      {open && <CardGrid {...p} list={{ ...list, items }} render={JSON.stringify(q)} />}\n    </ContentKitUiRoot>\n  );\n}\n\n/** Search results as cards; nothing until the query has text. */\nexport function SearchResults({ query, ...p }: CardListProps & { query: SearchQuery }) {\n  const { t } = useMessages();\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useSearch(q, { client: p.client });\n  if (!query.q.trim()) return null;\n  return <CardGrid surface=\"search\" empty={t(\"contents.noResults\", { q: query.q.trim() })} {...p} list={list} render={JSON.stringify(q)} />;\n}\n\n/** The signed-in reader's history as cards, each removable, with a clear-all. */\nexport function ContentHistory({ query = {}, ...p }: CardListProps & { query?: HistoryQuery }) {\n  const { t } = useMessages();\n  const ctx = useContext(ContentKitContext);\n  const q = useMemo(() => ({ ...query, limit: query.limit ?? p.pageSize }), [query, p.pageSize]);\n  const list = useHistory(q, { client: p.client });\n  const forget = useAction(\"history.forget\");\n  if (ctx?.viewer === null) return <p className=\"text-muted-foreground\">{t(\"contents.historySignedOut\")}</p>;\n  return (\n    <div className=\"grid gap-3\" data-ckui=\"content-history\">\n      {list.items.length > 0 && (\n        <Button size=\"sm\" variant=\"outline\" className=\"justify-self-end\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget(query.kind ? { kind: query.kind } : {}))}>\n          {t(\"contents.clearHistory\")}\n        </Button>\n      )}\n      <CardGrid\n        surface=\"history\"\n        empty={t(\"contents.historyEmpty\")}\n        {...p}\n        list={list}\n        render={JSON.stringify(q)}\n        renderCard={\n          p.renderCard ??\n          ((card) => (\n            <ContentCard\n              card={card}\n              href={p.href}\n              shape={p.shape}\n              groupKinds={p.groupKinds}\n              chips={p.chips}\n              tiers={p.tiers}\n              labels={p.labels}\n              owner={p.owner}\n              ownerHref={p.ownerHref}\n              decorate={p.decorate}\n            >\n              <Button size=\"xs\" variant=\"ghost\" className=\"justify-self-start\" disabled={forget.pending} onClick={() => void forget.run(() => list.forget({ content_id: card.id }))}>\n                {t(\"contents.removeFromHistory\")}\n              </Button>\n            </ContentCard>\n          ))\n        }\n      />\n    </div>\n  );\n}\n\nexport interface ContentRailProps extends Omit<CardListProps, \"infinite\" | \"empty\"> {\n  /** The rail's heading. */\n  title: ReactNode;\n  /** Contents like this one. */\n  similar?: string;\n  /** For the signed-in reader. */\n  recommendations?: boolean;\n  /** The reader's history: { status: \"in_progress\" } is a continue-watching rail. */\n  history?: HistoryQuery;\n  /** An ordered group's members in its order: a featured rail (its windows apply). */\n  group?: string;\n  /** Any list: a sort and filters. */\n  list?: ContentQuery;\n  /** Filters and reader options of a similar or recommended rail. */\n  query?: RailQuery;\n  /** A link beside the heading, e.g. to the whole list. */\n  more?: ReactNode;\n}\n\n/**\n * A horizontal row of contents: similar, recommended, the reader's history,\n * an ordered group's members or any list. It hides itself when it has none or\n * the site runs without what it needs.\n */\nexport function ContentRail({ title, similar, recommendations, history, group, list: listQuery, query = {}, more, ...p }: ContentRailProps) {\n  const limit = query.limit ?? p.pageSize ?? 12;\n  const q = useMemo(() => ({ ...query, limit }), [query, limit]);\n  const listing = useMemo(\n    () => (listQuery ? { ...listQuery, limit: listQuery.limit ?? limit } : group ? { groups: [group], sort: \"position\" as const, limit } : null),\n    [listQuery, group, limit],\n  );\n  const like = useSimilar(recommendations || history || listing ? null : similar, q, { client: p.client });\n  const mine = useRecommendations(recommendations ? q : null, { client: p.client });\n  const seen = useHistory(history ? { ...history, limit: history.limit ?? limit } : null, { client: p.client });\n  const listed = useContents(listing, { client: p.client });\n  const rail: UseRail = recommendations\n    ? mine\n    : history || listing\n      ? (() => {\n          const l = history ? seen : listed;\n          return { items: l.items, loading: l.loading, error: l.error, unavailable: l.error?.code === \"not_configured\", reload: l.reload };\n        })()\n      : like;\n  const { kinds } = useKinds({ client: p.client });\n  const surface = p.surface ?? (recommendations ? \"recommendations\" : history ? \"history\" : group ? \"featured\" : listing ? \"list\" : \"similar\");\n  const exposure = useExposure(rail.items, { surface, render: JSON.stringify([similar, recommendations, history, group, listing, q]), client: p.client });\n  const source = similar || recommendations || history || group || listing;\n  if (!source || rail.unavailable || (!rail.loading && !rail.items.length)) return null;\n  return (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-rail\" data-surface={surface}>\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <h2 className=\"text-base font-semibold\">{title}</h2>\n        {more}\n      </div>\n      <ol className=\"flex snap-x gap-4 overflow-x-auto pb-2\">\n        {(rail.loading && !rail.items.length ? Array.from({ length: 6 }, () => null) : rail.items).map((card, i) => (\n          <li key={card?.id ?? i} className=\"w-36 shrink-0 snap-start sm:w-44\" ref={card ? exposure.track(card.id, i + 1) : undefined}>\n            {!card ? (\n              <Skeleton className={p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\"} />\n            ) : p.renderCard ? (\n              p.renderCard(card, i + 1)\n            ) : (\n              <ContentCard\n                card={card}\n                href={p.href}\n                shape={p.shape}\n                groupKinds={p.groupKinds}\n                chips={p.chips}\n                tiers={p.tiers ?? kinds?.tiers}\n                labels={p.labels}\n                owner={p.owner}\n                ownerHref={p.ownerHref}\n                decorate={p.decorate}\n                onOpen={() => exposure.click(card.id, i + 1)}\n              />\n            )}\n          </li>\n        ))}\n      </ol>\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,9 +1,10 @@
 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 { CardGrid, ContentGrid, ContentHistory, ContentRail, SearchResults, type CardListProps, type ContentRailProps, type LockedCards } 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 VersionMenuOptions, type VersionPickerProps } from './paywall.js';
-export { AccessEditor, ContentDetailsEditor, ContentSections, SegmentsEditor, VersionsEditor, versionLabel } from './editors.js';
+export { AccessEditor, ContentDetailsEditor, ContentSections, SegmentsEditor, VersionCover, VersionsEditor, versionLabel } from './editors.js';
 export { OfferFields } from './offer-fields.js';
 export { ReaderStats, type ReaderStatsProps } from './reader-stats.js';
+export { VersionDownloadButton, type VersionDownloadButtonProps } from './download-button.js';

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

@@ -1,6 +1,6 @@
 import { ContentQuery, ListSort } from '../../client/discovery.js';
 import { Translator } from '../../i18n/messages.js';
-import { CardListProps } from './grid.js';
+import { CardListProps, LockedCards } 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 {
@@ -11,6 +11,8 @@ export interface ContentListingProps extends CardListProps {
     onQueryChange?: (query: ContentQuery) => void;
     /** The sorts offered; default newest, popular (week, month, all time), top rated, most favorited, title, oldest. */
     sorts?: readonly ListSort[];
+    /** Cards the reader doesn't open: show (default), hide or collapse. */
+    locked?: LockedCards;
     /** 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. */

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

@@ -1 +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 { useLanguageName, 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 } 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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"}
+{"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 { useLanguageName, 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 } from \"../groups/parts.js\";\nimport { ContentGrid, type CardListProps, type LockedCards } 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  /** Cards the reader doesn't open: show (default), hide or collapse. */\n  locked?: LockedCards;\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":";;;;;;;;;;;AAYA,IAAM,IAA6B;CAAC;CAAU;CAAc;CAAe;CAAW;CAAa;CAAkB;CAAS;AAAQ,GAChI,IAAM;AAGZ,SAAgB,EAAU,GAAe,GAAwB;CAC/D,IAAM,CAAC,GAAM,KAAU,EAAK,MAAM,GAAG,GAC/B,IAAO,EAAE,EAAE,gBAAgB,GAAoB;CACrD,OAAO,IAAS,EAAE,EAAE,sBAAsB;EAAE,MAAM;EAAM,QAAQ,EAAE,EAAE,kBAAkB,GAAsB;CAAE,CAAC,IAAI;AACrH;AAmBA,SAAgB,EAAe,EAAE,SAAM,OAAO,GAAY,kBAAe,WAAQ,GAAO,cAAW,YAAS,GAAG,KAA0B;CACvI,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAe,EAAgB,GAC/B,EAAE,OAAO,MAAU,EAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,GAChD,CAAC,GAAK,KAAU,EAAuB,CAAC,CAAC,GACzC,IAAQ,KAAc,GACtB,IAAM,GACT,MAAuB;EAEtB,AADI,MAAe,KAAA,KAAW,EAAO,CAAI,GACzC,IAAgB,CAAI;CACtB,GACA,CAAC,GAAY,CAAa,CAC5B,GACM,IAAO,IAAO,GAAO,MAAM,KAAQ,KAAA,GACnC,IAAO,EAAM,QAAS,GAAM,QAAiC,EAAM,IACnE,KAAW,MAAiB,CAAC,KAAW,EAAQ,SAAS,CAAI,GAC7D,KAAU,GAAM,SAAS,UAAU,CAAC,EAAA,CAAG,OAAO,CAAO,GACrD,IAAa,OAAO,QAAQ,GAAM,cAAc,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,OAAO,EAAE,eAAe,EAAE,QAAQ,UAAU,EAAE,SAAS,WAAW,EAAQ,CAAC,CAAC,GAC5I,KAAkB,MAAc,GAAO,UAAU,UAAU,KAAK,MAAM,CAAC,CAAC,GAAO,UAAU,QACzF,KAAkB,MAAiB,EAAM,WAAW,MAAM,MAAM,EAAE,WAAW,GAAG,EAAK,EAAE,CAAC,CAAC,EAAE,MAAM,EAAK,SAAS,CAAC,GAChH,KAAgB,GAAc,MAClC,EAAI;EAAE,GAAG;EAAO,WAAW,CAAC,IAAI,EAAM,aAAa,CAAC,EAAA,CAAG,QAAQ,MAAM,CAAC,EAAE,WAAW,GAAG,EAAK,EAAE,CAAC,GAAG,GAAI,MAAU,KAAA,IAAY,CAAC,IAAI,CAAC,GAAG,EAAK,GAAG,GAAO,CAAE;CAAE,CAAC,GACpJ,KAAe,MAAc;EACjC,IAAM,IAAK,EAAM,QAAQ,SAAS,CAAC;EACnC,EAAI;GAAE,GAAG;GAAO,QAAQ,IAAK,EAAM,OAAQ,QAAQ,MAAM,MAAM,CAAC,IAAI,CAAC,GAAI,EAAM,UAAU,CAAC,GAAI,CAAC;EAAE,CAAC;CACpG,GACM,IAAW,CAAC,EAAE,EAAM,YAAY,EAAM,QAAQ,UAAU,EAAM,WAAW,SACzE,IAAO,SAAe;EAAE,GAAG;EAAO,MAAM,KAAQ,EAAM;EAAM;CAAK,IAAI;EAAC;EAAO;EAAM;CAAI,CAAC;CAC9F,OACE,kBAAC,GAAD;EAAkB,YAAY,EAAE;EAAY,WAAW,EAAG,sBAAsB,EAAE,SAAS;EAAG,aAAU;EAAxG,UAAA,CACE,kBAAC,OAAD;GAAK,MAAK;GAAU,cAAY,EAAE,iBAAiB;GAAG,WAAU;GAAhE,UAAA;IACE,kBAAC,GAAD;KAAQ,OAAO;KAAM,gBAAgB,MAAM,EAAI;MAAE,GAAG;MAAO,MAAM;KAAc,CAAC;KAAhF,UAAA,CACE,kBAAC,GAAD;MAAe,MAAK;MAAK,cAAY,EAAE,cAAc;MAAG,aAAU;MAChE,UAAA,kBAAC,GAAD,EAAA,WAAe,MAAc,EAAU,GAAG,CAAa,EAAe,CAAA;KACzD,CAAA,GACf,kBAAC,GAAD,EAAA,UACG,EAAM,KAAK,MACV,kBAAC,GAAD;MAAoB,OAAO;MACxB,UAAA,EAAU,GAAG,CAAC;KACL,GAFK,CAEL,CACb,EACY,CAAA,CACT;;IACP,KACC,kBAAC,GAAD;KAAQ,OAAO,EAAM,YAAY;KAAK,gBAAgB,MAAM,EAAI;MAAE,GAAG;MAAO,UAAU,MAAM,IAAM,KAAA,IAAa;KAAa,CAAC;KAA7H,UAAA,CACE,kBAAC,GAAD;MAAe,MAAK;MAAK,cAAY,EAAE,kBAAkB;MAAG,aAAU;MACpE,UAAA,kBAAC,GAAD,EAAA,WAAe,MAAe,MAAM,IAAM,EAAE,qBAAqB,IAAI,EAAa,CAAC,EAAgB,CAAA;KACtF,CAAA,GACf,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAY,OAAO;MAAM,UAAA,EAAE,qBAAqB;KAAc,CAAA,GAC7D,EAAO,UAAU,KAAK,MACrB,kBAAC,GAAD;MAAoB,OAAO;MACxB,UAAA,EAAa,CAAC;KACL,GAFK,CAEL,CACb,CACY,EAAA,CAAA,CACT;;IAET,EAAW,KAAK,CAAC,GAAM,OAAO;KAC7B,IAAM,IAAQ,EAAe,CAAI;KAOjC,OANI,EAAE,SAAS,SAEX,kBAAC,GAAD;MAAmB,MAAK;MAAK,SAAS,MAAU,SAAS,YAAY;MAAW,gBAAc,MAAU;MAAQ,eAAe,EAAa,GAAM,MAAU,SAAS,KAAA,IAAY,MAAM;MACpL,UAAA,EAAQ,EAAE,QAAQ,CAAI;KACjB,GAFK,CAEL,IAGV,kBAAC,GAAD;MAAmB,OAAO,KAAS;MAAK,gBAAgB,MAAM,EAAa,GAAM,MAAM,IAAM,KAAA,IAAa,CAAY;MAAtH,UAAA,CACE,kBAAC,GAAD;OAAe,MAAK;OAAK,cAAY,EAAQ,EAAE,QAAQ,CAAI;OAAG,aAAU;OAAoB,aAAW;OACrG,UAAA,kBAAC,GAAD,EAAA,WAAe,MAAe,MAAM,IAAM,EAAQ,EAAE,QAAQ,CAAI,IAAI,EAAQ,EAAE,QAAQ,CAAC,EAAgB,CAAA;MAC1F,CAAA,GACf,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;OAAY,OAAO;OAAM,UAAA,EAAE,aAAa;MAAc,CAAA,GACrD,EAAE,OAAQ,KAAK,MACd,kBAAC,GAAD;OAAoB,OAAO;OACxB,UAAA,EAAQ,EAAE,QAAQ,CAAC;MACV,GAFK,CAEL,CACb,CACY,EAAA,CAAA,CACT;KAZK,GAAA,CAYL;IAEZ,CAAC;IACA,EAAO,KAAK,MAAM;KACjB,IAAM,IAAK,CAAC,CAAC,EAAM,QAAQ,SAAS,CAAC;KACrC,OACE,kBAAC,GAAD;MAAgB,MAAK;MAAK,SAAS,IAAK,YAAY;MAAW,gBAAc;MAAI,eAAe,EAAY,CAAC;MAAG,aAAU;MACvH,UAAA,EAAQ,EAAE,QAAQ,CAAC;KACd,GAFK,CAEL;IAEZ,CAAC;IACA,KACC,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,eAAe;MACb,IAAM,EAAE,UAAU,GAAI,QAAQ,GAAI,WAAW,GAAI,GAAG,MAAS;MAC7D,EAAI,CAAI;KACV;KAEC,UAAA,EAAE,eAAe;IACZ,CAAA;GAEP;EACL,CAAA,GAAA,kBAAC,GAAD;GAAa,GAAI;GAAG,OAAO;EAAO,CAAA,CAClB;;AAEtB"}

package/dist/components/content/paywall.js

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

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 { 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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"}
+{"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 { editionOf, 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 sorted = [...versions].sort((a, b) => a.position - b.position);\n    const current = findVersion(versions, selected) ?? editionOf(sorted, reader ?? undefined);\n    const language = current ? primary(current) : \"\";\n    return { current, language, languages: [...new Set(sorted.map(primary))], variants: sorted.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].sort((a, b) => a.position - b.position).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":";;;;;;;;;;;;;;;;AAqBA,SAAgB,EAAW,GAAe,GAAsB;CAC9D,IAAI;CACJ,IAAI;EACF,IAAQ,IAAI,KAAK,aAAa,EAAE,UAAU;GAAE,OAAO;GAAY,UAAU,EAAM;EAAS,CAAC,CAAC,CAAC,OAAO,OAAO,EAAM,MAAM,CAAC;CACxH,QAAQ;EACN,IAAQ,GAAG,EAAM,OAAO,GAAG,EAAM;CACnC;CACA,IAAM,KAAU,MAAmB,IAAQ,MAAO,IAAI,EAAE,OAAO,gBAAgB,IAAQ,EAAE,IAAI,EAAE,OAAO,iBAAiB,CAAK;CAG5H,OAFI,EAAM,cAAoB,EAAE,EAAE,kBAAkB;EAAE;EAAO,QAAQ,EAAO,EAAM,WAAW;CAAE,CAAC,IAC5F,EAAM,eAAqB,EAAE,EAAE,iBAAiB;EAAE;EAAO,QAAQ,EAAO,EAAM,YAAY;CAAE,CAAC,IAC1F;AACT;AAyBA,SAAgB,EAAQ,EAAE,aAAU,eAAY,UAAO,aAAU,WAAQ,aAAU,QAAQ,GAAK,YAAS,cAAW,iBAA4B;CAC9I,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAM,EAAW,CAAiB,GAClC,IAAS,EAAoB,CAAG,GAChC,EAAE,aAAU,EAAS,EAAE,QAAQ,EAAI,CAAC,GACpC,IAAO,EAAU,mBAAmB,CAAO;CACjD,IAAI,EAAS,SAAS,OAAO;CAC7B,IAAM,IAAS,KAAY,GAAK,UAC1B,IAAS,EAAS,UAAU,CAAC,GAC7B,IAAO,IAAI,IAAI,EAAO,KAAK,MAAM,EAAE,GAAG,CAAC,GACvC,IAAY,GAAO,SAAS,OAAO,KAAK,KAAS,CAAC,CAAC,GACnD,KAAY,EAAS,QAAQ,CAAC,EAAA,CAAG,QAAQ,MAAM,CAAC,EAAK,IAAI,CAAC,MAAM,EAAU,SAAS,CAAC,KAAK,CAAC,CAAC,IAAQ,GAAG,GACtG,IAAW,EAAS,UAEpB,IAAW,KAAY,CAAC,EAAO,MAAM,MAAM,EAAE,QAAQ,CAAQ,IAAI,IAAW,KAAA,GAC5E,KAAS,MAAgB,CAAC,CAAC,KAAY,MAAQ,GAC/C,IAAU,EAAS;CACzB,OACE,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,0DAA0D,CAAS;EAAG,aAAU;EAAxI,UAAA;GACE,kBAAC,KAAD;IAAG,WAAU;IAAb,UAAA,CACE,kBAAC,GAAD;KAAe,MAAM;KAAU,aAAa;KAAG,WAAU;KAAS,eAAA;IAAa,CAAA,GAC9E,EAAS,UAAU,EAAE,iBAAiB,IAAe,EAAX,IAAa,0BAA6B,gBAAgB,CACpG;;GACF,GAAS,QAAQ,kBAAC,KAAD;IAAG,WAAU;IAAyB,UAAA,EAAE,OAAO,wBAAwB,EAAQ,KAAK;GAAK,CAAA,IAAI;GAC9G,GAAS,WAAW,kBAAC,KAAD;IAAG,WAAU;IAAyB,UAAA,EAAE,OAAO,2BAA2B,EAAQ,QAAQ;GAAK,CAAA,IAAI;GACvH,EAAS,cAAc,kBAAC,KAAD;IAAG,WAAU;IAAyB,UAAA,EAAE,oBAAoB,EAAE,MAAM,EAAW,GAAG,EAAS,YAAY,EAAK,EAAE,CAAC;GAAK,CAAA;GAC3I,CAAC,EAAS,WACT,kBAAC,OAAD;IAAK,WAAU;IAAuB,aAAU;IAAhD,UAAA;KACG,KACC,kBAAC,GAAD;MAAQ,MAAK;MAAK,SAAQ;MAAU,eAAe,EAAW,EAAE,KAAK,EAAS,CAAC;MAC5E,UAAA,EAAE,mBAAmB;KAChB,CAAA;KAET,EAAO,KAAK,MACX,EAAE,OAAO,SAAS,WAAW,OAAO,EAAE,MAAM,MAAM,MAAM,IACtD,kBAAC,GAAD;MAEE,MAAK;MACL,UAAU,EAAM,EAAE,GAAG,KAAK,EAAK;MAC/B,eAAgB,GAAK,WAAW,QAAQ,IAAS,EAAO,IAAI,KAAK,EAAK,UAAU,EAAO,OAAO,KAAK,EAAE,OAAO,EAAE,CAAC;MAC/G,aAAU;MACV,eAAY;MACZ,aAAU;MAET,UAAA,EAAE,mBAAmB;KAChB,GATD,EAAE,GASD,IAER,kBAAC,GAAD;MAAoB,MAAK;MAAK,UAAU,EAAM,EAAE,GAAG;MAAG,eAAe,EAAW;OAAE,KAAK,EAAE;OAAK,OAAO;MAAE,CAAC;MAAG,aAAU;MAAgB,eAAa,EAAE,OAAO;MACxJ,UAAA,EAAE,EAAE,OAAO,SAAS,UAAU,oBAAoB,EAAE,OAAO,SAAS,YAAY,6BAA6B,qBAAqB,EAAE,OAAO,EAAW,GAAG,EAAE,KAAK,EAAE,CAAC;KAC9J,GAFK,EAAE,GAEP,CAEZ;KACC,EAAS,KAAK,MACb,kBAAC,GAAD;MAAgB,MAAK;MAAK,SAAS,EAAO,SAAS,YAAY;MAAW,eAAe,EAAW,EAAE,KAAK,EAAE,CAAC;MAAG,aAAU;MAAe,aAAW;MAArJ,UAAA,CACG,EAAE,qBAAqB,EAAE,MAAM,IAAQ,EAAE,EAAE,SAAS,EAAQ,GAAQ,CAAC,EAAE,CAAC,GACxE,IAAQ,EAAE,EAAE,SAAS,kBAAC,QAAD;OAAM,WAAU;OAAmB,UAAA,EAAM,EAAE,CAAE;MAAY,CAAA,CACzE;KAHK,GAAA,CAGL,CACT;IACE;;GAEN,EAAK,SAAS,kBAAC,GAAD,EAAA,UAAY,EAAa,GAAG,EAAK,KAAK,EAAa,CAAA;GACjE,GAAK,WAAW,QAAQ,KACvB,kBAAC,KAAD;IAAG,WAAU;IAAb,UAAA;KACG,EAAE,gBAAgB;KAAG;KACtB,kBAAC,UAAD;MAAQ,MAAK;MAAS,WAAU;MAAiE,SAAS;MACvG,UAAA,EAAE,gBAAgB;KACb,CAAA;IACP;;GAEJ;EACe;;AAEtB;AAeA,SAAS,EAAY,GAAY,GAAqC,GAAyB;CAC7F,OAAO,EAAE,UAAU,EAAE,OAAO,SAAS,EAAE,OAAO,KAAK,MAAM,EAAQ,GAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,EAAE,UAAU,IAAI,CAAY,CAAC,CAAC,KAAK,IAAI;AACpI;AAEA,IAAM,KAAW,MAAe,EAAE,UAAU,MAAM;AAOlD,SAAS,EAAW,GAA8B,GAAkC,GAA8C;CAChI,IAAM,CAAC,GAAO,KAAY,EAAgB,GACpC,IAAS,EAAW,CAAiB,CAAC,EAAE,UACxC,IAAW,MAAU,KAAA,IAAY,IAAQ,GACzC,IAAS,GAAa,MAAgB,IAAW,EAAS,CAAC,IAAI,EAAS,EAAE,IAAI,GAAI,CAAC,GAAU,CAAQ,CAAC;CAC5G,OAAO,QAAc;EACnB,IAAM,IAAS,CAAC,GAAG,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,GAC7D,IAAU,EAAY,GAAU,CAAQ,KAAK,EAAU,GAAQ,KAAU,KAAA,CAAS,GAClF,IAAW,IAAU,EAAQ,CAAO,IAAI;EAC9C,OAAO;GAAE;GAAS;GAAU,WAAW,CAAC,GAAG,IAAI,IAAI,EAAO,IAAI,CAAO,CAAC,CAAC;GAAG,UAAU,EAAO,QAAQ,MAAM,EAAQ,CAAC,MAAM,CAAQ;GAAG;EAAO;CAC5I,GAAG;EAAC;EAAU;EAAU;EAAQ;CAAM,CAAC;AACzC;AAOA,SAAgB,EAAc,EAAE,aAAU,UAAO,aAAU,WAAQ,cAAW,iBAAkC;CAC9G,IAAM,EAAE,SAAM,EAAY,GACpB,IAAe,EAAgB,GAC/B,EAAE,YAAS,aAAU,cAAW,aAAU,cAAW,EAAW,GAAU,GAAO,CAAQ;CAE/F,OADI,EAAS,SAAS,KAAK,CAAC,IAAgB,OAE1C,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,6CAA6C,CAAS;EAAG,aAAU;EAA3H,UAAA,CACG,EAAU,SAAS,KAClB,kBAAC,GAAD;GACE,OAAO;GACP,gBAAgB,MAAM;IACpB,IAAM,IAAI,CAAC,GAAG,CAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,MAAM,MAAM,EAAQ,CAAC,MAAM,CAAC;IAC5F,AAAI,KAAG,EAAO,CAAC;GACjB;GALF,UAAA,CAOE,kBAAC,GAAD;IAAe,MAAK;IAAK,cAAY,EAAE,mBAAmB;IACxD,UAAA,kBAAC,GAAD,EAAA,WAAe,MAAc,EAAa,CAAC,EAAe,CAAA;GAC7C,CAAA,GACf,kBAAC,GAAD,EAAA,UACG,EAAU,KAAK,MACd,kBAAC,GAAD;IAAoB,OAAO;IACxB,UAAA,EAAa,CAAC;GACL,GAFK,CAEL,CACb,EACY,CAAA,CACT;EAET,CAAA,GAAA,EAAS,SAAS,KACjB,kBAAC,OAAD;GAAK,MAAK;GAAa,cAAY,EAAE,kBAAkB;GAAG,WAAU;GACjE,UAAA,EAAS,KAAK,MACb,kBAAC,GAAD;IAEE,MAAK;IACL,MAAK;IACL,gBAAc,EAAE,OAAO,EAAQ;IAC/B,SAAS,EAAE,OAAO,EAAQ,KAAK,YAAY;IAC3C,eAAe,EAAO,CAAC;IACvB,aAAU;IACV,eAAa,EAAE,SAAS,UAAU,KAAA,IAAY;IARhD,UAAA,CAUG,CAAC,EAAE,SAAS,WAAW,kBAAC,GAAD;KAAe,MAAM;KAAU,aAAa;KAAG,WAAU;KAAW,cAAY,EAAE,iBAAiB;IAAI,CAAA,GAC9H,EAAY,GAAG,GAAc,CAAM,CAC9B;GAXD,GAAA,EAAE,EAWD,CACT;EACE,CAAA,CAES;;AAEtB;AAWA,SAAgB,EAAoB,GAA8B,IAAwB,CAAC,GAAqB;CAC9G,IAAM,EAAE,SAAM,EAAY,GACpB,IAAe,EAAgB,GAC/B,EAAE,YAAS,aAAU,cAAW,aAAU,cAAW,EAAW,GAAU,EAAE,OAAO,EAAE,QAAQ,GAC7F,EAAE,cAAW;CACnB,OAAO,QAAc;EACnB,IAAI,EAAS,SAAS,KAAK,CAAC,GAAS,OAAO,CAAC;EAC7C,IAAM,IAAwB,CAAC;EAwB/B,OAvBI,EAAU,SAAS,KACrB,EAAI,KAAK;GACP,OAAO,EAAE,mBAAmB;GAC5B,OAAO;GACP,SAAS,EAAU,KAAK,OAAO;IAAE,OAAO;IAAG,OAAO,EAAa,CAAC;GAAE,EAAE;GACpE,WAAW,MAAM;IACf,IAAM,IAAI,EAAS,MAAM,MAAM,EAAQ,CAAC,MAAM,CAAC;IAC/C,AAAI,KAAG,EAAO,CAAC;GACjB;EACF,CAAC,GACC,EAAS,SAAS,KACpB,EAAI,KAAK;GACP,OAAO,EAAE,kBAAkB;GAC3B,OAAO,EAAQ;GACf,SAAS,EAAS,KAAK,MAAM;IAC3B,IAAM,IAAO,EAAY,GAAG,GAAc,CAAM;IAChD,OAAO;KAAE,OAAO,EAAE;KAAI,OAAO,EAAE,SAAS,UAAU,IAAO,EAAE,yBAAyB,EAAE,QAAK,CAAC;IAAE;GAChG,CAAC;GACD,WAAW,MAAO;IAChB,IAAM,IAAI,EAAS,MAAM,MAAM,EAAE,OAAO,CAAE;IAC1C,AAAI,KAAG,EAAO,CAAC;GACjB;EACF,CAAC,GACI;CACT,GAAG;EAAC;EAAU;EAAS;EAAU;EAAW;EAAU;EAAQ;EAAQ;EAAG;CAAY,CAAC;AACxF"}

package/dist/components/media-gallery.d.ts

@@ -31,10 +31,7 @@ export interface MediaGalleryProps extends GalleryViewOptions, Pick<HlsPlayerOpt
     /** Playable videos preview muted inline (hover, or in view on touch); default the provider's. */
     inlinePreview?: boolean;
     /** The host's unlock call to action, drawn over the locked item. */
-    renderLocked?: (locked: {
-        count: number;
-        videos: number;
-    }) => ReactNode;
+    renderLocked?: () => ReactNode;
     /** Below the carousel, for its current item (e.g. downloads). */
     renderDetails?: (item: GalleryItem) => ReactNode;
     /** `sizes` for carousel images. Default "(min-width: 768px) 720px, 100vw". */