@openrails/contentkit-ui 0.98.5 → 0.99.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, useState, type CSSProperties, 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  /** Opt into a fluid grid, optionally with a desktop column ceiling. */\n  grid?: CardGridLayout;\n}\n\nconst GRID = \"grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6\";\n\nexport interface CardGridLayout {\n  /** Minimum desktop card width: CSS pixels or a CSS length such as clamp(...). Cards fill the available space. */\n  minCardWidth: number | string;\n  /** Maximum desktop columns. Omit to use all available width without a ceiling. */\n  maxColumns?: number;\n  /** Equal-width columns below the desktop breakpoint. Default 2. */\n  mobileColumns?: number;\n}\n\n/** Shared by complete lists, release-day sections and grid-style previews. */\nexport function cardGridLayout(layout?: CardGridLayout): { className: string; style?: CSSProperties } {\n  if (!layout) return { className: GRID };\n  const width = typeof layout.minCardWidth === \"string\" ? layout.minCardWidth.trim() || \"160px\" : `${Number.isFinite(layout.minCardWidth) ? Math.max(1, layout.minCardWidth) : 160}px`;\n  const columns = layout.mobileColumns !== undefined && Number.isFinite(layout.mobileColumns) ? Math.max(1, Math.floor(layout.mobileColumns)) : 2;\n  const maximum = layout.maxColumns !== undefined && Number.isFinite(layout.maxColumns) ? Math.max(1, Math.floor(layout.maxColumns)) : undefined;\n  const trackWidth = maximum === undefined ? width : `max(${width}, calc((100% - ${maximum - 1}rem) / ${maximum}))`;\n  return {\n    className: \"grid grid-cols-[repeat(var(--ckui-card-mobile-columns),minmax(0,1fr))] gap-x-4 gap-y-6 md:grid-cols-[repeat(auto-fill,minmax(min(100%,var(--ckui-card-min-width)),1fr))]\",\n    style: { \"--ckui-card-min-width\": trackWidth, \"--ckui-card-mobile-columns\": columns } as CSSProperties,\n  };\n}\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  const layout = cardGridLayout(p.grid);\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={layout.className} style={layout.style}>\n          {Array.from({ length: 8 }, (_, i) => (\n            <Skeleton key={i} className={p.aspectRatio === undefined ? p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\" : \"w-full\"} style={p.aspectRatio === undefined ? undefined : { aspectRatio: p.aspectRatio }} />\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={layout.className} style={layout.style}>\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                  client={p.client}\n                  href={p.href}\n                  shape={p.shape}\n                  aspectRatio={p.aspectRatio}\n                  titlePosition={p.titlePosition}\n                  loadMedia={p.loadMedia}\n                  groupKinds={p.groupKinds}\n                  chips={p.chips}\n                  filterEntity={p.filterEntity}\n                  entityStyle={p.entityStyle}\n                  entityLayout={p.entityLayout}\n                  metadata={p.metadata}\n                  showCounts={p.showCounts}\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              client={p.client}\n              href={p.href}\n              shape={p.shape}\n              aspectRatio={p.aspectRatio}\n              titlePosition={p.titlePosition}\n              loadMedia={p.loadMedia}\n              groupKinds={p.groupKinds}\n              chips={p.chips}\n              filterEntity={p.filterEntity}\n              entityStyle={p.entityStyle}\n              entityLayout={p.entityLayout}\n              metadata={p.metadata}\n              showCounts={p.showCounts}\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  const layout = p.grid ? cardGridLayout(p.grid) : undefined;\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={layout?.className ?? \"flex snap-x gap-4 overflow-x-auto pb-2\"} style={layout?.style}>\n        {(rail.loading && !rail.items.length ? Array.from({ length: 6 }, () => null) : rail.items).map((card, i) => (\n          <li key={card?.id ?? i} className={layout ? undefined : \"w-36 shrink-0 snap-start sm:w-44\"} ref={card ? exposure.track(card.id, i + 1) : undefined}>\n            {!card ? (\n              <Skeleton className={p.aspectRatio === undefined ? p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\" : \"w-full\"} style={p.aspectRatio === undefined ? undefined : { aspectRatio: p.aspectRatio }} />\n            ) : p.renderCard ? (\n              p.renderCard(card, i + 1)\n            ) : (\n              <ContentCard\n                card={card}\n                client={p.client}\n                href={p.href}\n                shape={p.shape}\n                aspectRatio={p.aspectRatio}\n                titlePosition={p.titlePosition}\n                loadMedia={p.loadMedia}\n                groupKinds={p.groupKinds}\n                chips={p.chips}\n                filterEntity={p.filterEntity}\n                entityStyle={p.entityStyle}\n                entityLayout={p.entityLayout}\n                metadata={p.metadata}\n                showCounts={p.showCounts}\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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"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/content/grid.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useEffect, useMemo, useState, type CSSProperties, 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  /** Opt into a fluid grid, optionally with a desktop column ceiling. */\n  grid?: CardGridLayout;\n}\n\nconst GRID = \"grid grid-cols-[repeat(auto-fill,minmax(min(100%,10rem),1fr))] gap-x-4 gap-y-6\";\n\nexport interface CardGridLayout {\n  /** Minimum desktop card width: CSS pixels or a CSS length such as clamp(...). Cards fill the available space. */\n  minCardWidth: number | string;\n  /** Maximum desktop columns. Omit to use all available width without a ceiling. */\n  maxColumns?: number;\n  /** Equal-width columns below the desktop breakpoint. Default 2. */\n  mobileColumns?: number;\n}\n\n/** Shared by complete lists, release-day sections and grid-style previews. */\nexport function cardGridLayout(layout?: CardGridLayout): { className: string; style?: CSSProperties } {\n  if (!layout) return { className: GRID };\n  const width = typeof layout.minCardWidth === \"string\" ? layout.minCardWidth.trim() || \"160px\" : `${Number.isFinite(layout.minCardWidth) ? Math.max(1, layout.minCardWidth) : 160}px`;\n  const columns = layout.mobileColumns !== undefined && Number.isFinite(layout.mobileColumns) ? Math.max(1, Math.floor(layout.mobileColumns)) : 2;\n  const maximum = layout.maxColumns !== undefined && Number.isFinite(layout.maxColumns) ? Math.max(1, Math.floor(layout.maxColumns)) : undefined;\n  const trackWidth = maximum === undefined ? width : `max(${width}, calc((100% - ${maximum - 1}rem) / ${maximum}))`;\n  return {\n    className: \"grid grid-cols-[repeat(var(--ckui-card-mobile-columns),minmax(0,1fr))] gap-x-4 gap-y-6 md:grid-cols-[repeat(auto-fill,minmax(min(100%,var(--ckui-card-min-width)),1fr))]\",\n    style: { \"--ckui-card-min-width\": trackWidth, \"--ckui-card-mobile-columns\": columns } as CSSProperties,\n  };\n}\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, error } = list;\n  useEffect(() => {\n    if (p.infinite && near && hasMore && !loadingMore && !error) void loadMore();\n  }, [p.infinite, near, hasMore, loadingMore, loadMore, error]);\n  const tiers = p.tiers ?? kinds?.tiers;\n  const layout = cardGridLayout(p.grid);\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={layout.className} style={layout.style}>\n          {Array.from({ length: 8 }, (_, i) => (\n            <Skeleton key={i} className={p.aspectRatio === undefined ? p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\" : \"w-full\"} style={p.aspectRatio === undefined ? undefined : { aspectRatio: p.aspectRatio }} />\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={layout.className} style={layout.style}>\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                  client={p.client}\n                  href={p.href}\n                  shape={p.shape}\n                  aspectRatio={p.aspectRatio}\n                  titlePosition={p.titlePosition}\n                  loadMedia={p.loadMedia}\n                  groupKinds={p.groupKinds}\n                  chips={p.chips}\n                  filterEntity={p.filterEntity}\n                  entityStyle={p.entityStyle}\n                  entityLayout={p.entityLayout}\n                  metadata={p.metadata}\n                  showCounts={p.showCounts}\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 gap-2\">\n          {list.error && list.items.length > 0 && <p role=\"alert\" className=\"text-destructive\">{contentError(m, list.error)}</p>}\n          <Button variant=\"outline\" size=\"sm\" disabled={list.loadingMore} onClick={() => void list.loadMore()}>\n            {list.loadingMore ? t(\"contents.loading\") : list.error ? t(\"common.retry\") : 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              client={p.client}\n              href={p.href}\n              shape={p.shape}\n              aspectRatio={p.aspectRatio}\n              titlePosition={p.titlePosition}\n              loadMedia={p.loadMedia}\n              groupKinds={p.groupKinds}\n              chips={p.chips}\n              filterEntity={p.filterEntity}\n              entityStyle={p.entityStyle}\n              entityLayout={p.entityLayout}\n              metadata={p.metadata}\n              showCounts={p.showCounts}\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  const layout = p.grid ? cardGridLayout(p.grid) : undefined;\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={layout?.className ?? \"flex snap-x gap-4 overflow-x-auto pb-2\"} style={layout?.style}>\n        {(rail.loading && !rail.items.length ? Array.from({ length: 6 }, () => null) : rail.items).map((card, i) => (\n          <li key={card?.id ?? i} className={layout ? undefined : \"w-36 shrink-0 snap-start sm:w-44\"} ref={card ? exposure.track(card.id, i + 1) : undefined}>\n            {!card ? (\n              <Skeleton className={p.aspectRatio === undefined ? p.shape === \"landscape\" ? \"aspect-video w-full\" : \"aspect-[3/4] w-full\" : \"w-full\"} style={p.aspectRatio === undefined ? undefined : { aspectRatio: p.aspectRatio }} />\n            ) : p.renderCard ? (\n              p.renderCard(card, i + 1)\n            ) : (\n              <ContentCard\n                card={card}\n                client={p.client}\n                href={p.href}\n                shape={p.shape}\n                aspectRatio={p.aspectRatio}\n                titlePosition={p.titlePosition}\n                loadMedia={p.loadMedia}\n                groupKinds={p.groupKinds}\n                chips={p.chips}\n                filterEntity={p.filterEntity}\n                entityStyle={p.entityStyle}\n                entityLayout={p.entityLayout}\n                metadata={p.metadata}\n                showCounts={p.showCounts}\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

@@ -4,7 +4,8 @@ export { DailyReleases, type DailyReleasesProps } from './daily-releases.js';
 export { PopularContentGrid, type PopularContentGridProps } from './popular.js';
 export { SearchBox, type SearchBoxProps } from './search.js';
 export { ReaderSettings, type ReaderSettingsProps } from './reader-settings.js';
-export { ContentFilterSettings, ReleaseDateIndex, type ContentFilterSettingsProps, type ReleaseDateIndexProps } from './filters.js';
+export { ContentFilterDialog, type ContentFilterDialogProps } from './filter-dialog.js';
+export { ContentFilterSettings, ReleaseDateIndex, type ContentFilterSettingsProps, type ContentFilterCount, 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, VersionCover, VersionsEditor, versionLabel } from './editors.js';

package/dist/components/content/release-reveal.d.ts

@@ -0,0 +1,5 @@
+/** A local layout transition for a cached reveal, not an image-loading policy. */
+export declare function useReleaseReveal(identity: string): {
+    grid: import('react').RefObject<HTMLOListElement | null>;
+    prepare: (focus?: boolean) => void;
+};

package/dist/components/content/release-reveal.js

@@ -0,0 +1,62 @@
+import { useReducedMotion as e } from "../../react/inline-preview.js";
+import { useCallback as t, useEffect as n, useLayoutEffect as r, useRef as i } from "react";
+//#region src/components/content/release-reveal.ts
+function a(a) {
+	let o = i(null), s = i(null), c = i([]), l = e(), u = t((e = !1) => {
+		let t = o.current;
+		t && (s.current = {
+			height: t.getBoundingClientRect().height,
+			positions: new Map([...t.children].map((e) => [e.getAttribute("data-release-key") ?? "", e.getBoundingClientRect()])),
+			focus: e
+		});
+	}, []);
+	return r(() => {
+		let e = s.current;
+		s.current = null;
+		let t = o.current;
+		if (!e || !t) return;
+		c.current.forEach((e) => e.cancel()), c.current = [];
+		let n = [...t.children].filter((e) => e instanceof HTMLElement), r = n.filter((t) => !e.positions.has(t.dataset.releaseKey ?? ""));
+		if (e.focus && r[0]?.querySelector("a[href]:not([tabindex='-1']), button:not([disabled])")?.focus({ preventScroll: !0 }), l || typeof t.animate != "function") return;
+		let i = "cubic-bezier(0.22, 1, 0.36, 1)", a = 0;
+		for (let t of n) {
+			let n = e.positions.get(t.dataset.releaseKey ?? "");
+			if (n) {
+				let e = t.getBoundingClientRect(), r = n.left - e.left, a = n.top - e.top;
+				(r || a) && c.current.push(t.animate([{ transform: `translate(${r}px, ${a}px)` }, { transform: "translate(0, 0)" }], {
+					duration: 400,
+					easing: i
+				}));
+			} else c.current.push(t.animate([{
+				opacity: 0,
+				transform: "translateY(16px) scale(0.97)"
+			}, {
+				opacity: 1,
+				transform: "translateY(0) scale(1)"
+			}], {
+				duration: 400,
+				delay: Math.min(a++, 5) * 45,
+				easing: i,
+				fill: "backwards"
+			}));
+		}
+		let u = t.getBoundingClientRect().height;
+		Math.abs(u - e.height) > 1 && c.current.push(t.animate([{
+			height: `${e.height}px`,
+			overflow: "clip"
+		}, {
+			height: `${u}px`,
+			overflow: "clip"
+		}], {
+			duration: 400,
+			easing: i
+		}));
+	}, [a, l]), n(() => () => c.current.forEach((e) => e.cancel()), []), {
+		grid: o,
+		prepare: u
+	};
+}
+//#endregion
+export { a as useReleaseReveal };
+
+//# sourceMappingURL=release-reveal.js.map

package/dist/components/content/release-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"release-reveal.js","names":[],"sources":["../../../src/components/content/release-reveal.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef } from \"react\";\nimport { useReducedMotion } from \"../../react/inline-preview.js\";\n\n/** A local layout transition for a cached reveal, not an image-loading policy. */\nexport function useReleaseReveal(identity: string) {\n  const grid = useRef<HTMLOListElement>(null);\n  const pending = useRef<{ height: number; positions: Map<string, DOMRect>; focus: boolean } | null>(null);\n  const animations = useRef<Animation[]>([]);\n  const reduced = useReducedMotion();\n  const prepare = useCallback((focus = false) => {\n    const element = grid.current;\n    if (!element) return;\n    pending.current = {\n      height: element.getBoundingClientRect().height,\n      positions: new Map([...element.children].map((child) => [child.getAttribute(\"data-release-key\") ?? \"\", child.getBoundingClientRect()])),\n      focus,\n    };\n  }, []);\n  useLayoutEffect(() => {\n    const snapshot = pending.current;\n    pending.current = null;\n    const element = grid.current;\n    if (!snapshot || !element) return;\n    animations.current.forEach((animation) => animation.cancel());\n    animations.current = [];\n    const children = [...element.children].filter((child): child is HTMLElement => child instanceof HTMLElement);\n    const added = children.filter((child) => !snapshot.positions.has(child.dataset.releaseKey ?? \"\"));\n    if (snapshot.focus) added[0]?.querySelector<HTMLElement>(\"a[href]:not([tabindex='-1']), button:not([disabled])\")?.focus({ preventScroll: true });\n    if (reduced || typeof element.animate !== \"function\") return;\n    const easing = \"cubic-bezier(0.22, 1, 0.36, 1)\";\n    let revealed = 0;\n    for (const child of children) {\n      const previous = snapshot.positions.get(child.dataset.releaseKey ?? \"\");\n      if (previous) {\n        const next = child.getBoundingClientRect();\n        const x = previous.left - next.left;\n        const y = previous.top - next.top;\n        if (x || y) animations.current.push(child.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: \"translate(0, 0)\" }], { duration: 400, easing }));\n      } else {\n        animations.current.push(child.animate([{ opacity: 0, transform: \"translateY(16px) scale(0.97)\" }, { opacity: 1, transform: \"translateY(0) scale(1)\" }], { duration: 400, delay: Math.min(revealed++, 5) * 45, easing, fill: \"backwards\" }));\n      }\n    }\n    const height = element.getBoundingClientRect().height;\n    if (Math.abs(height - snapshot.height) > 1) animations.current.push(element.animate([{ height: `${snapshot.height}px`, overflow: \"clip\" }, { height: `${height}px`, overflow: \"clip\" }], { duration: 400, easing }));\n  }, [identity, reduced]);\n  useEffect(() => () => animations.current.forEach((animation) => animation.cancel()), []);\n  return { grid, prepare };\n}\n"],"mappings":";;;AAIA,SAAgB,EAAiB,GAAkB;CACjD,IAAM,IAAO,EAAyB,IAAI,GACpC,IAAU,EAAmF,IAAI,GACjG,IAAa,EAAoB,CAAC,CAAC,GACnC,IAAU,EAAiB,GAC3B,IAAU,GAAa,IAAQ,OAAU;EAC7C,IAAM,IAAU,EAAK;EAChB,MACL,EAAQ,UAAU;GAChB,QAAQ,EAAQ,sBAAsB,CAAC,CAAC;GACxC,WAAW,IAAI,IAAI,CAAC,GAAG,EAAQ,QAAQ,CAAC,CAAC,KAAK,MAAU,CAAC,EAAM,aAAa,kBAAkB,KAAK,IAAI,EAAM,sBAAsB,CAAC,CAAC,CAAC;GACtI;EACF;CACF,GAAG,CAAC,CAAC;CA6BL,OA5BA,QAAsB;EACpB,IAAM,IAAW,EAAQ;EACzB,EAAQ,UAAU;EAClB,IAAM,IAAU,EAAK;EACrB,IAAI,CAAC,KAAY,CAAC,GAAS;EAE3B,AADA,EAAW,QAAQ,SAAS,MAAc,EAAU,OAAO,CAAC,GAC5D,EAAW,UAAU,CAAC;EACtB,IAAM,IAAW,CAAC,GAAG,EAAQ,QAAQ,CAAC,CAAC,QAAQ,MAAgC,aAAiB,WAAW,GACrG,IAAQ,EAAS,QAAQ,MAAU,CAAC,EAAS,UAAU,IAAI,EAAM,QAAQ,cAAc,EAAE,CAAC;EAEhG,IADI,EAAS,SAAO,EAAM,EAAE,EAAE,cAA2B,sDAAsD,CAAC,EAAE,MAAM,EAAE,eAAe,GAAK,CAAC,GAC3I,KAAW,OAAO,EAAQ,WAAY,YAAY;EACtD,IAAM,IAAS,kCACX,IAAW;EACf,KAAK,IAAM,KAAS,GAAU;GAC5B,IAAM,IAAW,EAAS,UAAU,IAAI,EAAM,QAAQ,cAAc,EAAE;GACtE,IAAI,GAAU;IACZ,IAAM,IAAO,EAAM,sBAAsB,GACnC,IAAI,EAAS,OAAO,EAAK,MACzB,IAAI,EAAS,MAAM,EAAK;IAC9B,CAAI,KAAK,MAAG,EAAW,QAAQ,KAAK,EAAM,QAAQ,CAAC,EAAE,WAAW,aAAa,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,WAAW,kBAAkB,CAAC,GAAG;KAAE,UAAU;KAAK;IAAO,CAAC,CAAC;GAC9J,OACE,EAAW,QAAQ,KAAK,EAAM,QAAQ,CAAC;IAAE,SAAS;IAAG,WAAW;GAA+B,GAAG;IAAE,SAAS;IAAG,WAAW;GAAyB,CAAC,GAAG;IAAE,UAAU;IAAK,OAAO,KAAK,IAAI,KAAY,CAAC,IAAI;IAAI;IAAQ,MAAM;GAAY,CAAC,CAAC;EAE9O;EACA,IAAM,IAAS,EAAQ,sBAAsB,CAAC,CAAC;EAC/C,AAAI,KAAK,IAAI,IAAS,EAAS,MAAM,IAAI,KAAG,EAAW,QAAQ,KAAK,EAAQ,QAAQ,CAAC;GAAE,QAAQ,GAAG,EAAS,OAAO;GAAK,UAAU;EAAO,GAAG;GAAE,QAAQ,GAAG,EAAO;GAAK,UAAU;EAAO,CAAC,GAAG;GAAE,UAAU;GAAK;EAAO,CAAC,CAAC;CACrN,GAAG,CAAC,GAAU,CAAO,CAAC,GACtB,cAAsB,EAAW,QAAQ,SAAS,MAAc,EAAU,OAAO,CAAC,GAAG,CAAC,CAAC,GAChF;EAAE;EAAM;CAAQ;AACzB"}

package/dist/components/content/search.js

@@ -5,14 +5,14 @@ import { ContentKitContext as r } from "../../react/context.js";
 import { Input as i } from "../../ui/input.js";
 import { useRecentSearches as a, useTypeahead as o } from "../../react/discovery.js";
 import { labelOf as s } from "../groups/parts.js";
-import { useContext as c, useEffect as ee, useId as te, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { useContext as c, useEffect as l, useId as ee, useLayoutEffect as u, useMemo as te, useRef as d, useState as f } from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 import { cn as g } from "cn";
 import { Cancel01Icon as _, Clock01Icon as v, File01Icon as y, Folder01Icon as b, Image01Icon as x, Search01Icon as S, TagsIcon as C, UserIcon as w } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as T } from "@hugeicons/react";
-import { createPortal as E } from "react-dom";
+import { createPortal as ne } from "react-dom";
 //#region src/components/content/search.tsx
-var D = {
+var E = {
 	artist: {
 		icon: w,
 		color: "text-blue-500 dark:text-blue-400"
@@ -46,13 +46,13 @@ var D = {
 		color: "text-orange-500 dark:text-orange-400"
 	}
 };
-function O(e, t, n, r) {
+function D(e, t, n, r) {
 	let [i, a] = f({
 		top: 0,
 		left: 0,
 		width: 0
 	});
-	return l(() => {
+	return u(() => {
 		if (!e || !t || !n.current) return;
 		let i = r.current ?? n.current, o = n.current.ownerDocument.defaultView;
 		if (!o) return;
@@ -76,8 +76,8 @@ function O(e, t, n, r) {
 		r
 	]), i;
 }
-function k({ kind: e }) {
-	let t = D[e];
+function O({ kind: e }) {
+	let t = E[e];
 	return /* @__PURE__ */ m(T, {
 		icon: t?.icon ?? S,
 		strokeWidth: 2,
@@ -86,97 +86,89 @@ function k({ kind: e }) {
 		"aria-hidden": !0
 	});
 }
-function ne({ value: e, formatter: t }) {
-	return !e || Number.isNaN(Date.parse(e)) ? null : /* @__PURE__ */ m("time", {
-		dateTime: e,
-		className: "shrink-0 text-xs text-muted-foreground",
-		children: t.format(new Date(e))
-	});
-}
-function A(l) {
-	let { t: y, error: b, language: x } = t(), C = te(), w = c(r)?.navigate, [D, A] = f(l.defaultValue ?? ""), [j, M] = f(!1), [N, P] = f(-1), F = d(null), I = d(null), L = d(null), R = l.presentation === "header", z = O(j, R, F, L), { top: B } = z, V = u(() => new Intl.DateTimeFormat(x, { dateStyle: "short" }), [x]), H = !D.trim(), U = o(D, {
-		kind: l.kind,
-		entity_kinds: l.groupKinds,
-		client: l.client
-	}), W = a({
-		enabled: l.recent !== !1 && j && H,
-		client: l.client
-	}), re = u(() => H ? W.searches.map((e) => ({
+function k(u) {
+	let { t: y, error: b } = t(), x = ee(), C = c(r)?.navigate, [w, E] = f(u.defaultValue ?? ""), [k, A] = f(!1), [j, M] = f(-1), N = d(null), P = d(null), F = d(null), I = u.presentation === "header", L = D(k, I, N, F), { top: R } = L, z = !w.trim(), B = o(w, {
+		kind: u.kind,
+		entity_kinds: u.groupKinds,
+		client: u.client
+	}), V = a({
+		enabled: u.recent !== !1 && k && z,
+		client: u.client
+	}), H = te(() => z ? V.searches.map((e) => ({
 		type: "recent",
-		query: e.query,
-		searchedAt: e.searched_at
-	})) : [...U.contents.map((e) => ({
+		query: e.query
+	})) : [...B.contents.map((e) => ({
 		type: "content",
 		card: e
-	})), ...U.entities.map((e) => ({
+	})), ...B.entities.map((e) => ({
 		type: "group",
 		group: e
 	}))], [
-		H,
-		W.searches,
-		U.contents,
-		U.entities
-	]), G = H || U.query === D.trim(), K = G ? re : [], q = K[N], ie = H ? W.loading : !G || U.loading, J = H && l.recent !== !1, ae = H ? !R && J && !W.error ? "contents.noRecentSearches" : "contents.searchHint" : "contents.noResults";
-	ee(() => {
-		if (!j) return;
+		z,
+		V.searches,
+		B.contents,
+		B.entities
+	]), U = z || B.query === w.trim(), W = U ? H : [], G = W[j], K = z ? V.loading : !U || B.loading, q = z && u.recent !== !1, J = z ? !I && q && !V.error ? "contents.noRecentSearches" : "contents.searchHint" : "contents.noResults";
+	l(() => {
+		if (!k) return;
 		let e = (e) => {
-			!F.current?.contains(e.target) && !I.current?.contains(e.target) && M(!1);
+			!N.current?.contains(e.target) && !P.current?.contains(e.target) && A(!1);
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-	}, [j]);
+	}, [k]);
 	let Y = () => {
-		M(!0);
+		A(!0);
 	}, X = (e) => {
-		M(!1), e && l.onSearch(e);
+		A(!1), e && u.onSearch(e);
 	}, Z = (e) => {
-		if (e.type === "recent") return A(e.query), X(e.query);
-		let t = l.href ? l.href(e.type === "content" ? e.card : e.group) : e.type === "content" ? e.card.path : e.group.path;
-		M(!1), t && (w ? w(t) : location.assign(t));
+		if (e.type === "recent") return E(e.query), X(e.query);
+		let t = u.href ? u.href(e.type === "content" ? e.card : e.group) : e.type === "content" ? e.card.path : e.group.path;
+		A(!1), t && (C ? C(t) : location.assign(t));
 	}, Q = (e) => {
-		e.key === "Escape" && (e.preventDefault(), L.current?.focus(), M(!1), P(-1));
+		e.key === "Escape" && (e.preventDefault(), F.current?.focus(), A(!1), M(-1));
 	}, $ = /* @__PURE__ */ h(p, { children: [
-		J && /* @__PURE__ */ h("div", {
-			className: g("flex items-center justify-between gap-2 text-muted-foreground", R ? "mb-4 text-base font-semibold" : "px-2 py-1 text-xs"),
+		q && /* @__PURE__ */ h("div", {
+			className: g("flex items-center justify-between gap-2 text-muted-foreground", I ? "mb-4 text-base font-semibold" : "px-2 py-1 text-xs"),
 			children: [/* @__PURE__ */ h("span", {
-				id: `${C}-recent`,
+				id: `${x}-recent`,
 				className: "flex items-center gap-2",
-				children: [R && /* @__PURE__ */ m(T, {
+				children: [I && /* @__PURE__ */ m(T, {
 					icon: v,
 					strokeWidth: 2,
 					className: "size-5",
 					"aria-hidden": !0
 				}), y("contents.recentSearches")]
-			}), K.length > 0 && /* @__PURE__ */ m("button", {
+			}), W.length > 0 && /* @__PURE__ */ m("button", {
 				type: "button",
 				className: "rounded px-1 hover:text-foreground",
 				onMouseDown: (e) => {
 					e.preventDefault();
 				},
-				onClick: () => void W.clear(),
-				children: y(R ? "contents.clearAllRecent" : "contents.clearRecent")
+				onClick: () => void V.clear(),
+				children: y(I ? "contents.clearAllRecent" : "contents.clearRecent")
 			})]
 		}),
 		/* @__PURE__ */ m("ul", {
-			id: `${C}-list`,
+			id: `${x}-list`,
 			role: "listbox",
-			"aria-label": y(H ? "contents.recentSearches" : "contents.suggestions"),
-			className: g("grid", R && "gap-2"),
-			children: K.map((t, n) => /* @__PURE__ */ m("li", {
-				id: `${C}-${n}`,
+			"aria-label": y(z ? "contents.recentSearches" : "contents.suggestions"),
+			className: g("grid", I && "gap-2"),
+			children: W.map((t, n) => /* @__PURE__ */ m("li", {
+				id: `${x}-${n}`,
 				role: "option",
-				"aria-selected": n === N,
+				"aria-selected": n === j,
 				"data-ckui": "suggestion",
 				"data-type": t.type,
-				className: g("flex cursor-pointer items-center", R ? t.type === "recent" ? "gap-2 rounded-md p-3 text-base hover:bg-foreground/10" : "gap-3 rounded-md px-4 py-1 text-base font-medium hover:bg-foreground/10" : "gap-2 px-2 py-1.5", n === N && "bg-accent text-accent-foreground"),
-				onMouseEnter: () => P(n),
+				className: g("flex cursor-pointer items-center", I ? t.type === "recent" ? "gap-2 rounded-md p-3 text-base hover:bg-foreground/10" : "gap-3 rounded-md px-4 py-1 text-base font-medium hover:bg-foreground/10" : "gap-2 px-2 py-1.5", n === j && "bg-accent text-accent-foreground"),
+				onMouseEnter: () => M(n),
 				onMouseDown: (e) => {
 					e.preventDefault(), Z(t);
 				},
-				children: R && t.type !== "recent" ? /* @__PURE__ */ h(p, { children: [
-					/* @__PURE__ */ m(k, { kind: t.type === "content" ? t.card.kind : t.group.kind }),
+				children: I && t.type !== "recent" ? /* @__PURE__ */ h(p, { children: [
+					/* @__PURE__ */ m(O, { kind: t.type === "content" ? t.card.kind : t.group.kind }),
 					/* @__PURE__ */ m("span", {
 						className: "sr-only",
-						children: s(l.labels, t.type === "content" ? t.card.kind : t.group.kind)
+						children: s(u.labels, t.type === "content" ? t.card.kind : t.group.kind)
 					}),
 					/* @__PURE__ */ m("span", {
 						className: "min-w-0 flex-1 truncate",
@@ -198,10 +190,10 @@ function A(l) {
 					children: t.group.name || t.group.slug
 				}), /* @__PURE__ */ m("span", {
 					className: "text-xs text-muted-foreground",
-					children: s(l.labels, t.group.kind)
+					children: s(u.labels, t.group.kind)
 				})] }) : /* @__PURE__ */ h(p, { children: [
 					/* @__PURE__ */ m(T, {
-						icon: R ? S : v,
+						icon: I ? S : v,
 						strokeWidth: 2,
 						className: "size-4 shrink-0 text-muted-foreground",
 						"aria-hidden": !0
@@ -210,10 +202,6 @@ function A(l) {
 						className: "min-w-0 flex-1 truncate",
 						children: t.query
 					}),
-					R && z.width >= 320 && /* @__PURE__ */ m(ne, {
-						value: t.searchedAt,
-						formatter: V
-					}),
 					/* @__PURE__ */ m("button", {
 						type: "button",
 						className: "rounded p-0.5 text-muted-foreground hover:text-foreground",
@@ -221,7 +209,7 @@ function A(l) {
 						onMouseDown: (e) => {
 							e.preventDefault(), e.stopPropagation();
 						},
-						onClick: () => void W.clear(t.query),
+						onClick: () => void V.clear(t.query),
 						children: /* @__PURE__ */ m(T, {
 							icon: _,
 							strokeWidth: 2,
@@ -232,48 +220,48 @@ function A(l) {
 				] })
 			}, t.type === "content" ? `c:${t.card.id}` : t.type === "group" ? `g:${t.group.id}` : `r:${t.query}`))
 		}),
-		ie ? /* @__PURE__ */ m("div", {
+		K ? /* @__PURE__ */ m("div", {
 			role: "status",
-			className: g("text-muted-foreground", R ? "flex justify-center py-4" : "px-3 py-2"),
-			children: R ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
+			className: g("text-muted-foreground", I ? "flex justify-center py-4" : "px-3 py-2"),
+			children: I ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
 				className: "size-6 animate-spin rounded-full border-2 border-muted border-t-foreground motion-reduce:animate-none",
 				"aria-hidden": !0
 			}), /* @__PURE__ */ m("span", {
 				className: "sr-only",
 				children: y("contents.loading")
 			})] }) : y("contents.loading")
-		}) : !H && U.error ? /* @__PURE__ */ m("p", {
+		}) : !z && B.error ? /* @__PURE__ */ m("p", {
 			role: "alert",
-			className: g("px-3 py-2 text-destructive", R && "text-center"),
-			children: b(U.error)
-		}) : K.length === 0 && /* @__PURE__ */ h("div", {
+			className: g("px-3 py-2 text-destructive", I && "text-center"),
+			children: b(B.error)
+		}) : W.length === 0 && /* @__PURE__ */ h("div", {
 			role: "status",
-			className: g("text-muted-foreground", R ? "flex flex-col items-center gap-2 py-8 text-center" : "px-3 py-2"),
-			children: [R && /* @__PURE__ */ m(T, {
+			className: g("text-muted-foreground", I ? "flex flex-col items-center gap-2 py-8 text-center" : "px-3 py-2"),
+			children: [I && /* @__PURE__ */ m(T, {
 				icon: S,
 				strokeWidth: 2,
 				className: "size-8",
 				"aria-hidden": !0
-			}), /* @__PURE__ */ m("p", { children: y(ae, { q: D.trim() }) })]
+			}), /* @__PURE__ */ m("p", { children: y(J, { q: w.trim() }) })]
 		})
 	] });
 	return /* @__PURE__ */ h(n, {
-		ref: F,
-		appearance: l.appearance,
-		className: g("relative text-sm", l.className),
+		ref: N,
+		appearance: u.appearance,
+		className: g("relative text-sm", u.className),
 		"data-ckui": "search-box",
 		onBlur: (e) => {
-			!e.currentTarget.contains(e.relatedTarget) && !I.current?.contains(e.relatedTarget) && M(!1);
+			!e.currentTarget.contains(e.relatedTarget) && !P.current?.contains(e.relatedTarget) && A(!1);
 		},
 		children: [/* @__PURE__ */ h("form", {
 			role: "search",
 			className: "relative",
 			onSubmit: (e) => {
-				if (e.preventDefault(), j && q) return Z(q);
-				X(D.trim());
+				if (e.preventDefault(), k && G) return Z(G);
+				X(w.trim());
 			},
 			children: [
-				R ? /* @__PURE__ */ m("button", {
+				I ? /* @__PURE__ */ m("button", {
 					type: "submit",
 					className: "absolute top-1/2 left-2.5 -translate-y-1/2 rounded text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring",
 					"aria-label": y("contents.search"),
@@ -290,38 +278,38 @@ function A(l) {
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ m(i, {
-					ref: L,
-					type: R ? "text" : "search",
+					ref: F,
+					type: I ? "text" : "search",
 					role: "combobox",
 					"aria-label": y("contents.search"),
-					"aria-expanded": j,
-					"aria-controls": `${C}-list`,
-					"aria-activedescendant": j && q ? `${C}-${N}` : void 0,
+					"aria-expanded": k,
+					"aria-controls": `${x}-list`,
+					"aria-activedescendant": k && G ? `${x}-${j}` : void 0,
 					"aria-autocomplete": "list",
 					autoComplete: "off",
-					className: g("h-9 ps-8", R && "rounded-full border-border/50 bg-foreground/10 pe-9 text-base shadow-none md:text-base"),
-					value: D,
-					placeholder: l.placeholder ?? y("contents.searchPlaceholder"),
+					className: g("h-9 ps-8", I && "rounded-full border-border/50 bg-foreground/10 pe-9 text-base shadow-none md:text-base"),
+					value: w,
+					placeholder: u.placeholder ?? y("contents.searchPlaceholder"),
 					onChange: (e) => {
-						A(e.target.value), M(!0), P(-1);
+						E(e.target.value), A(!0), M(-1);
 					},
 					onFocus: Y,
 					onClick: Y,
 					onKeyDown: (e) => {
 						if (e.key === "Escape") {
-							e.preventDefault(), M(!1), P(-1);
+							e.preventDefault(), A(!1), M(-1);
 							return;
 						}
-						e.key === "ArrowDown" ? (e.preventDefault(), Y(), P((e) => j ? Math.min(K.length - 1, e + 1) : 0)) : e.key === "ArrowUp" && j && (e.preventDefault(), P((e) => Math.max(-1, e - 1)));
+						e.key === "ArrowDown" ? (e.preventDefault(), Y(), M((e) => k ? Math.min(W.length - 1, e + 1) : 0)) : e.key === "ArrowUp" && k && (e.preventDefault(), M((e) => Math.max(-1, e - 1)));
 					}
 				}),
-				R && (D || j) && /* @__PURE__ */ m("button", {
+				I && (w || k) && /* @__PURE__ */ m("button", {
 					type: "button",
 					className: "absolute top-1/2 right-2.5 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring",
-					"aria-label": y(D ? "contents.clearSearch" : "common.close"),
+					"aria-label": y(w ? "contents.clearSearch" : "common.close"),
 					onMouseDown: (e) => e.preventDefault(),
 					onClick: () => {
-						L.current?.focus(), P(-1), D ? (A(""), M(!0)) : M(!1);
+						F.current?.focus(), M(-1), w ? (E(""), A(!0)) : A(!1);
 					},
 					children: /* @__PURE__ */ m(T, {
 						icon: _,
@@ -331,20 +319,20 @@ function A(l) {
 					})
 				})
 			]
-		}), j && (R ? E(/* @__PURE__ */ h(n, {
-			appearance: l.appearance,
+		}), k && (I ? ne(/* @__PURE__ */ h(n, {
+			appearance: u.appearance,
 			className: "fixed inset-x-0 bottom-0 z-[70] text-sm",
-			style: { top: B },
+			style: { top: R },
 			"data-ckui": "search-layer",
 			children: [/* @__PURE__ */ m("div", {
 				className: "absolute inset-0 bg-black/30 backdrop-blur-sm",
 				"data-ckui": "search-backdrop",
 				"aria-hidden": !0
 			}), /* @__PURE__ */ m("div", {
-				ref: I,
+				ref: P,
 				style: {
-					width: z.width,
-					marginLeft: z.left
+					width: L.width,
+					marginLeft: L.left
 				},
 				className: "relative origin-top animate-[search-expand_300ms_ease-out] rounded-lg border border-border bg-background text-foreground shadow-lg transition-none motion-reduce:animate-none",
 				"data-ckui": "search-panel",
@@ -353,13 +341,13 @@ function A(l) {
 					className: "w-full px-3 pt-3",
 					children: /* @__PURE__ */ m("div", {
 						className: "[--search-max-height:70vh] overflow-y-auto pb-7 md:[--search-max-height:60vh]",
-						style: { maxHeight: `min(var(--search-max-height), calc(100dvh - ${B}px - 1.875rem))` },
+						style: { maxHeight: `min(var(--search-max-height), calc(100dvh - ${R}px - 1.875rem))` },
 						children: /* @__PURE__ */ m("div", { children: $ })
 					})
 				})
 			})]
 		}), document.body) : /* @__PURE__ */ m("div", {
-			ref: I,
+			ref: P,
 			className: "absolute top-full z-20 mt-1 grid max-h-96 w-full overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md",
 			"data-ckui": "search-panel",
 			onKeyDown: Q,
@@ -368,6 +356,6 @@ function A(l) {
 	});
 }
 //#endregion
-export { A as SearchBox };
+export { k as SearchBox };
 
 //# sourceMappingURL=search.js.map