@krizaka/ui 3.19.0 → 3.21.0

package/dist/media-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/media-grid/shorts-shelf.tsx","../src/block-link.tsx","../src/media-grid/media-grid.tsx","../src/media-grid/video-card.tsx","../src/card/card.tsx","../src/card/recipe.ts"],"sourcesContent":["// Client (the arrows scroll the row). A horizontal row of 9:16 cards of one height: scroll-snap, arrows with a mouse,\n// a swipe on touch, a \"See all\" link. The row is a labelled list that scrolls with the keyboard (it takes focus).\nimport * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\n\nexport interface ShortsShelfProps<T> extends Omit<React.ComponentProps<\"section\">, \"children\" | \"title\"> {\n  /** The shelf's accessible name (\"Shorts\"), passed translated; shown as its heading unless `title` is set. */\n  label: string;\n  /** A heading different from the name. */\n  title?: React.ReactNode;\n  /** The clips, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** One card: use `VideoCard aspect=\"portrait\"`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Opens the vertical feed. */\n  seeAll?: { href: string; label: string; linkAs?: LinkComponent };\n  /** The arrows' names, passed translated. */\n  previousLabel: string;\n  /** The next arrow's name. */\n  nextLabel: string;\n}\n\nconst Chevron = ({ flip }: { flip?: boolean }) => (\n  <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={flip ? \"rotate-180\" : undefined}>\n    <path d=\"m9 6 6 6-6 6\" />\n  </svg>\n);\n\nconst ARROW =\n  \"hidden h-9 w-9 items-center justify-center rounded-full border border-border-default bg-surface-1 text-fg shadow-sm transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 [@media(hover:hover)]:inline-flex\";\n\n/** A Shorts shelf: equal-height 9:16 cards in a snap-scrolling row. */\nexport function ShortsShelf<T>({ label, title, items, getId, renderItem, seeAll, previousLabel, nextLabel, className, ...props }: ShortsShelfProps<T>) {\n  const row = React.useRef<HTMLUListElement>(null);\n  const [edge, setEdge] = React.useState({ start: true, end: false });\n  const measure = React.useCallback(() => {\n    const el = row.current;\n    if (!el) return;\n    setEdge({ start: el.scrollLeft <= 2, end: el.scrollLeft + el.clientWidth >= el.scrollWidth - 2 });\n  }, []);\n  React.useEffect(measure, [measure, items.length]);\n  const page = (dir: 1 | -1) => {\n    const el = row.current;\n    if (el) el.scrollBy({ left: dir * el.clientWidth * 0.85, behavior: window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : \"smooth\" });\n  };\n  const headingId = React.useId();\n  if (items.length === 0) return null;\n  return (\n    <section aria-labelledby={headingId} data-shorts-shelf className={cn(\"min-w-0\", className)} {...props}>\n      <div className=\"mb-3 flex items-center gap-2\">\n        <h2 id={headingId} className=\"m-0 mr-auto text-base font-bold text-fg\">\n          {title ?? label}\n        </h2>\n        {seeAll && (\n          <BlockLink href={seeAll.href} linkAs={seeAll.linkAs} className=\"text-sm font-semibold text-fg-accent hover:underline\">\n            {seeAll.label}\n          </BlockLink>\n        )}\n        <button type=\"button\" aria-label={previousLabel} disabled={edge.start} onClick={() => page(-1)} className={ARROW}>\n          <Chevron flip />\n        </button>\n        <button type=\"button\" aria-label={nextLabel} disabled={edge.end} onClick={() => page(1)} className={ARROW}>\n          <Chevron />\n        </button>\n      </div>\n      <ul\n        ref={row}\n        onScroll={measure}\n        // biome-ignore: a scroll container must take the keyboard focus to scroll with the arrow keys\n        tabIndex={0}\n        aria-labelledby={headingId}\n        className=\"m-0 flex list-none snap-x snap-mandatory items-stretch gap-3 overflow-x-auto overscroll-x-contain p-0 pb-2 [scrollbar-width:none] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-scrollbar]:hidden\"\n      >\n        {items.map((item, i) => (\n          <li key={getId(item)} className=\"w-[9.5rem] shrink-0 snap-start sm:w-44\">\n            {renderItem(item, i)}\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n}\n","// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n  href,\n  linkAs: Link = \"a\",\n  external = isExternal(href),\n  rel,\n  ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n  if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n  const Comp = Link as React.ElementType;\n  return <Comp href={href} {...props} />;\n}\n","// Client (it renders the shelf). Mixed orientations without a broken grid. `split` (the feed default) sends the 9:16\n// clips to a `ShortsShelf` and lays the rest in a uniform 16:9 grid; `uniform` puts everything in one grid of one frame\n// (a source of the other orientation is told to `contain`, never cropped to a face). `layout=\"list\"` is one column.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { ShortsShelf, type ShortsShelfProps } from \"./shorts-shelf\";\nimport type { VideoCardAspect } from \"./video-card\";\n\nexport interface MediaGridState {\n  /** The frame the card is drawn in (`aspect` of `VideoCard`). */\n  aspect: VideoCardAspect;\n  /** The card's `layout`. */\n  layout: \"stack\" | \"row\";\n  /** The source's orientation differs from the frame: pass `fit=\"contain\"`. */\n  mismatch: boolean;\n}\n\nexport interface MediaGridProps<T> extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** The videos, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** The source's orientation (from its width and height). */\n  orientationOf: (item: T) => VideoCardAspect;\n  /** One card, drawn in the frame the grid gives (`state`): use `VideoCard`. */\n  renderItem: (item: T, state: MediaGridState) => React.ReactNode;\n  /**\n   * `split`: verticals on the shelf, the others in the grid · `uniform`: all in one frame (`frame`).\n   * @default \"split\"\n   */\n  mode?: \"split\" | \"uniform\";\n  /** The frame of `uniform`. @default \"landscape\" */\n  frame?: VideoCardAspect;\n  /** `grid` or `list` (one row per video). @default \"grid\" */\n  layout?: \"grid\" | \"list\";\n  /** The shelf of `split`: its name, \"See all\" and arrows, passed translated. */\n  shelf: Pick<ShortsShelfProps<unknown>, \"label\" | \"title\" | \"seeAll\" | \"previousLabel\" | \"nextLabel\">;\n}\n\nconst GRID = {\n  landscape: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\",\n  portrait: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6\",\n} as const;\n\n/** A media grid that never mixes heights badly: a shelf for the 9:16, a uniform grid for the rest. */\nexport function MediaGrid<T>({ items, getId, orientationOf, renderItem, mode = \"split\", frame = \"landscape\", layout = \"grid\", shelf, className, ...props }: MediaGridProps<T>) {\n  const row = layout === \"list\";\n  const split = mode === \"split\";\n  const verticals = split ? items.filter((i) => orientationOf(i) === \"portrait\") : [];\n  const rest = split ? items.filter((i) => orientationOf(i) !== \"portrait\") : items;\n  const gridFrame: VideoCardAspect = split ? \"landscape\" : frame;\n  const state = (item: T, aspect: VideoCardAspect): MediaGridState => ({ aspect, layout: row ? \"row\" : \"stack\", mismatch: orientationOf(item) !== aspect });\n  return (\n    <div data-media-grid={mode} className={cn(\"flex min-w-0 flex-col gap-8\", className)} {...props}>\n      {verticals.length > 0 && <ShortsShelf {...shelf} items={verticals} getId={getId} renderItem={(item) => renderItem(item, { ...state(item, \"portrait\"), layout: \"stack\" })} />}\n      {rest.length > 0 && (\n        <ul data-grid-frame={gridFrame} className={cn(\"m-0 grid list-none auto-rows-fr gap-4 p-0\", row ? \"grid-cols-1\" : GRID[gridFrame])}>\n          {rest.map((item) => (\n            <li key={getId(item)} className=\"min-w-0\">\n              {renderItem(item, state(item, gridFrame))}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n","// Client (hover / focus swaps the picture for its animated preview). A video in a grid or a shelf: the picture in a 16:9\n// or 9:16 frame (a source of the other shape is shown inside, never stretched), badges, duration, the title on two lines\n// reserved, the creator, a count and one quick action — the same height of body in every card so a row aligns.\nimport * as React from \"react\";\n\nimport { Avatar } from \"../avatar\";\nimport type { DefaultAvatar } from \"../avatar/default-avatar\";\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { Card } from \"../card\";\nimport { cn } from \"../cn\";\n\nexport type VideoCardAspect = \"landscape\" | \"portrait\";\n\nexport interface VideoCardCreator {\n  /** The creator's name. */\n  name: string;\n  /** Their photo. */\n  avatarSrc?: string | null;\n  /** Their profile. */\n  href?: string;\n  /** The Krizaka default picture when there is no photo (a brand and a seed). */\n  defaultAvatar?: DefaultAvatar;\n}\n\nexport interface VideoCardProps extends Omit<React.ComponentProps<\"article\">, \"title\"> {\n  /** The title; it names the card and is its link. */\n  title: string;\n  /** Where the card opens. */\n  href: string;\n  /** The app's router link (Next's `Link`). */\n  linkAs?: LinkComponent;\n  /**\n   * The frame: `landscape` (16:9) or `portrait` (9:16).\n   * @default \"landscape\"\n   */\n  aspect?: VideoCardAspect;\n  /**\n   * `stack` (picture over text) or `row` (picture beside the text: the list mode of a section).\n   * @default \"stack\"\n   */\n  layout?: \"stack\" | \"row\";\n  /** The picture. */\n  poster?: string | null;\n  /** An animated picture (WebP) shown while the card is hovered or focused. */\n  previewSrc?: string | null;\n  /**\n   * `cover` fills the frame; `contain` draws the whole picture over a blurred copy of itself (a source of the other\n   * orientation: no cropped face, no black bar).\n   * @default \"cover\"\n   */\n  fit?: \"cover\" | \"contain\";\n  /** The length, already formatted (`3:42`). */\n  duration?: string;\n  /** Badges at the top-left of the picture (Free, a price, 18+). Put them on `scrim` so they read in both themes. */\n  badges?: React.ReactNode;\n  /** Who made it: name, photo, profile. */\n  creator?: VideoCardCreator;\n  /** What is counted (`12.4K views`), already formatted. */\n  meta?: React.ReactNode;\n  /** One quick action at the end of the footer (a tip, a save). Its clicks must not follow the card's link. */\n  action?: React.ReactNode;\n  /** A sensitive picture: blurred and scaled so nothing shows (put the reveal button in `overlay`). */\n  blurred?: boolean;\n  /** Over the whole picture, above the card's link (a veil, a reveal button). */\n  overlay?: React.ReactNode;\n  /** Shown instead of the picture while there is none. */\n  fallback?: React.ReactNode;\n  /** `eager` for the first cards of a page. */\n  loading?: \"lazy\" | \"eager\";\n}\n\nconst FRAME = { landscape: \"aspect-video\", portrait: \"aspect-[9/16]\" } as const;\n\n/** A video card whose frame, body and footer have one height per aspect, so a grid row or a shelf never staggers. */\nexport function VideoCard({\n  title,\n  href,\n  linkAs,\n  aspect = \"landscape\",\n  layout = \"stack\",\n  poster,\n  previewSrc,\n  fit = \"cover\",\n  duration,\n  badges,\n  creator,\n  meta,\n  action,\n  fallback,\n  blurred = false,\n  overlay,\n  loading = \"lazy\",\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: VideoCardProps) {\n  const [live, setLive] = React.useState(false);\n  const picture = live && previewSrc ? previewSrc : poster;\n  const row = layout === \"row\";\n  const tall = aspect === \"portrait\" && !row;\n  return (\n    <article\n      data-aspect={aspect}\n      data-layout={layout}\n      className={cn(\"group relative h-full min-w-0\", className)}\n      onMouseEnter={(e) => (setLive(true), onMouseEnter?.(e))}\n      onMouseLeave={(e) => (setLive(false), onMouseLeave?.(e))}\n      onFocus={(e) => (setLive(true), onFocus?.(e))}\n      onBlur={(e) => (setLive(false), onBlur?.(e))}\n      {...props}\n    >\n      <Card.Root interactive tone=\"glass\" className={cn(\"h-full w-full max-w-full\", row ? \"flex-row\" : \"flex-col\")}>\n        <Card.Media aspect=\"auto\" className={cn(\"shrink-0\", FRAME[aspect], row && (aspect === \"portrait\" ? \"w-24 sm:w-28\" : \"w-40 sm:w-56\"))}>\n          {fit === \"contain\" && picture && <img src={picture} alt=\"\" aria-hidden loading=\"lazy\" className=\"absolute inset-0 h-full w-full scale-125 object-cover opacity-70 blur-2xl\" />}\n          <Card.Image src={picture} loading={loading} fallback={fallback} className={cn(fit === \"contain\" && \"relative object-contain\", blurred && \"scale-110 blur-xl\")} />\n          {overlay && <div className=\"absolute inset-0 z-20 flex\">{overlay}</div>}\n          {badges && (\n            <Card.Overlay corner=\"top-left\" className=\"theme-dark flex-wrap\">\n              {badges}\n            </Card.Overlay>\n          )}\n          {duration && (\n            <Card.Overlay corner=\"bottom-right\">\n              <span className=\"rounded-sm bg-scrim px-1.5 py-0.5 font-mono text-[11px] text-fg-on-media\">{duration}</span>\n            </Card.Overlay>\n          )}\n        </Card.Media>\n        <Card.Body className=\"min-w-0 flex-1 justify-between gap-2 p-3\">\n          <h3 className=\"m-0 min-h-[2.5em] text-sm font-semibold leading-tight text-fg\">\n            <BlockLink href={href} linkAs={linkAs} className=\"line-clamp-2 outline-none after:absolute after:inset-0 after:z-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-ring\">\n              {title}\n            </BlockLink>\n          </h3>\n          {/* A narrow card (9:16 on a shelf) puts the count and the action on a second line so the name is never cut to an initial. */}\n          <div className={cn(\"relative z-10 text-xs text-fg-secondary\", tall ? \"flex flex-col gap-1\" : \"flex h-8 items-center gap-2\")}>\n            {creator && (\n              <div className=\"flex h-6 min-w-0 items-center gap-2\">\n                <Avatar src={creator.avatarSrc} defaultAvatar={creator.defaultAvatar} alt=\"\" fallback={creator.name.charAt(0)} size=\"xs\" className=\"shrink-0\" />\n                {creator.href ? (\n                  <BlockLink href={creator.href} linkAs={linkAs} className=\"min-w-0 truncate hover:text-fg\">\n                    {creator.name}\n                  </BlockLink>\n                ) : (\n                  <span className=\"min-w-0 truncate\">{creator.name}</span>\n                )}\n              </div>\n            )}\n            {(meta || action) && (\n              <div className={cn(\"flex items-center gap-2\", tall ? \"h-7 justify-between\" : \"ml-auto shrink-0\")}>\n                {meta && <span className=\"shrink-0 font-mono text-[11px] text-fg-muted\">{meta}</span>}\n                {action && <span className=\"shrink-0\">{action}</span>}\n              </div>\n            )}\n          </div>\n        </Card.Body>\n      </Card.Root>\n    </article>\n  );\n}\n","// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { cardRecipe } from \"./recipe\";\n\nexport const card = tv(cardRecipe);\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The spotlight that follows the pointer and the lift on hover: for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n","// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the media's zoom, the spotlight) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"kz-spotlight kz-lift hover:border-accent/50\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n"],"mappings":"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","names":["jsx","jsx","jsxs","React","jsx","jsxs","jsx","jsxs"]}
+{"version":3,"sources":["../src/media-grid/load-more.tsx","../src/spinner/spinner.tsx","../src/media-grid/shorts-shelf.tsx","../src/block-link.tsx","../src/media-grid/media-grid.tsx","../src/media-grid/video-card.tsx","../src/card/card.tsx","../src/card/recipe.ts","../src/media-grid/preview-focus.ts","../src/skeleton/skeleton.tsx","../src/media-grid/video-card-skeleton.tsx"],"sourcesContent":["// Client (IntersectionObserver). The end of a long list: the next page is requested while the person is still a\n// screenful away (`rootMargin`), so it is there before they reach it; the button stays as the way that never fails\n// (no observer, a failed page, a keyboard).\nimport * as React from \"react\";\n\nimport { Button } from \"../button\";\nimport { cn } from \"../cn\";\nimport { Spinner } from \"../spinner\";\n\nexport interface LoadMoreProps extends Omit<React.ComponentProps<\"div\">, \"children\" | \"onError\"> {\n  /** Asks for the next page. Not called while `loading`, nor once `hasMore` is false. */\n  onLoadMore: () => void;\n  /** There is a next page. */\n  hasMore: boolean;\n  /** A page is on its way. */\n  loading?: boolean;\n  /** The last page failed: the button reads `retryLabel`, and nothing loads by itself until it is pressed. */\n  failed?: boolean;\n  /** The button, passed translated (\"Load more\"). */\n  label: string;\n  /** The wait, passed translated (\"Loading more videos\"). */\n  loadingLabel: string;\n  /** The button after a failure, passed translated (\"Try again\"). Defaults to `label`. */\n  retryLabel?: string;\n  /** Shown instead of the button when the list is over, passed translated (\"You have seen everything\"). Nothing if absent. */\n  endLabel?: string;\n  /**\n   * How far below the viewport the page is already requested (an IntersectionObserver `rootMargin`).\n   * @default \"900px 0px\"\n   */\n  rootMargin?: string;\n}\n\n/** Infinite scroll with a visible \"Load more\" under it. */\nexport function LoadMore({ onLoadMore, hasMore, loading = false, failed = false, label, loadingLabel, retryLabel, endLabel, rootMargin = \"900px 0px\", className, ...props }: LoadMoreProps) {\n  const sentinel = React.useRef<HTMLDivElement>(null);\n  const ask = React.useRef(onLoadMore);\n  React.useEffect(() => {\n    ask.current = onLoadMore;\n  });\n  // Observing again after each page makes the observer report the current state: a short page that leaves the sentinel in view asks for the next.\n  React.useEffect(() => {\n    const el = sentinel.current;\n    if (!el || !hasMore || loading || failed || typeof IntersectionObserver === \"undefined\") return;\n    const io = new IntersectionObserver((entries) => entries.some((e) => e.isIntersecting) && ask.current(), { rootMargin });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [hasMore, loading, failed, rootMargin]);\n  return (\n    <div data-load-more=\"\" data-state={loading ? \"loading\" : failed ? \"failed\" : hasMore ? \"idle\" : \"end\"} className={cn(\"relative flex min-h-14 items-center justify-center py-6\", className)} {...props}>\n      <div ref={sentinel} aria-hidden className=\"pointer-events-none absolute inset-x-0 top-0 h-px\" />\n      {loading ? (\n        <Spinner label={loadingLabel} size=\"md\" />\n      ) : hasMore ? (\n        <Button type=\"button\" variant=\"secondary\" size=\"md\" onClick={() => onLoadMore()}>\n          {failed ? (retryLabel ?? label) : label}\n        </Button>\n      ) : endLabel ? (\n        <p className=\"m-0 text-sm text-fg-secondary\">{endLabel}</p>\n      ) : null}\n    </div>\n  );\n}\n","// Server-safe. An indeterminate wait: the Krizaka loader glyph (a hexagon traced by light around a node), announced as\n// a status with its `label`. For a wait with a delay, a value, an ETA or an ending, see `@krizaka/ui/loader`.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"./glyph\";\n\nexport const spinnerVariants = tv({\n  base: \"shrink-0 text-accent\",\n  variants: { size: { sm: \"h-4 w-4\", md: \"h-6 w-6\", lg: \"h-10 w-10\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SpinnerProps = Omit<React.ComponentProps<\"svg\">, \"children\"> &\n  VariantProps<typeof spinnerVariants> & {\n    /**\n     * sm · md · lg.\n     * @default \"md\"\n     */\n    size?: VariantProps<typeof spinnerVariants>[\"size\"];\n    /** The accessible name of the wait, e.g. \"Loading\" — passed translated. */\n    label: string;\n    /** Between 0 and 1: the trace grows to the value (a determinate wait). Absent: it travels around. */\n    value?: number | null;\n  };\n\n/**\n * The Krizaka spinner: a hexagon traced by a segment of light around a breathing node, in `currentColor` (the accent by\n * default). `role=\"status\"`, named by `label`. Under prefers-reduced-motion it rests — a segment and the node lit.\n */\nexport function Spinner({ label, size, value, className, ...props }: SpinnerProps) {\n  return (\n    <LoaderGlyph\n      role=\"status\"\n      aria-label={label}\n      aria-hidden={undefined}\n      value={value}\n      data-size={size ?? \"md\"}\n      className={spinnerVariants({ size, className })}\n      {...props}\n    />\n  );\n}\n","// Client (the arrows scroll the row). A horizontal row of 9:16 cards of one height: scroll-snap, arrows with a mouse,\n// a swipe on touch, a \"See all\" link. The row is a labelled list that scrolls with the keyboard (it takes focus).\nimport * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\n\nexport interface ShortsShelfProps<T> extends Omit<React.ComponentProps<\"section\">, \"children\" | \"title\"> {\n  /** The shelf's accessible name (\"Shorts\"), passed translated; shown as its heading unless `title` is set. */\n  label: string;\n  /** A heading different from the name. */\n  title?: React.ReactNode;\n  /** The clips, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** One card: use `VideoCard aspect=\"portrait\"`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Opens the vertical feed. */\n  seeAll?: { href: string; label: string; linkAs?: LinkComponent };\n  /** The arrows' names, passed translated. */\n  previousLabel: string;\n  /** The next arrow's name. */\n  nextLabel: string;\n}\n\nconst Chevron = ({ flip }: { flip?: boolean }) => (\n  <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={flip ? \"rotate-180\" : undefined}>\n    <path d=\"m9 6 6 6-6 6\" />\n  </svg>\n);\n\nconst ARROW =\n  \"hidden h-9 w-9 items-center justify-center rounded-full border border-border-default bg-surface-1 text-fg shadow-sm transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 [@media(hover:hover)]:inline-flex\";\n\n/** A Shorts shelf: equal-height 9:16 cards in a snap-scrolling row. */\nexport function ShortsShelf<T>({ label, title, items, getId, renderItem, seeAll, previousLabel, nextLabel, className, ...props }: ShortsShelfProps<T>) {\n  const row = React.useRef<HTMLUListElement>(null);\n  const [edge, setEdge] = React.useState({ start: true, end: false });\n  const measure = React.useCallback(() => {\n    const el = row.current;\n    if (!el) return;\n    setEdge({ start: el.scrollLeft <= 2, end: el.scrollLeft + el.clientWidth >= el.scrollWidth - 2 });\n  }, []);\n  React.useEffect(measure, [measure, items.length]);\n  const page = (dir: 1 | -1) => {\n    const el = row.current;\n    if (el) el.scrollBy({ left: dir * el.clientWidth * 0.85, behavior: window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : \"smooth\" });\n  };\n  const headingId = React.useId();\n  if (items.length === 0) return null;\n  return (\n    <section aria-labelledby={headingId} data-shorts-shelf className={cn(\"min-w-0\", className)} {...props}>\n      <div className=\"mb-3 flex items-center gap-2\">\n        <h2 id={headingId} className=\"m-0 mr-auto text-base font-bold text-fg\">\n          {title ?? label}\n        </h2>\n        {seeAll && (\n          <BlockLink href={seeAll.href} linkAs={seeAll.linkAs} className=\"text-sm font-semibold text-fg-accent hover:underline\">\n            {seeAll.label}\n          </BlockLink>\n        )}\n        <button type=\"button\" aria-label={previousLabel} disabled={edge.start} onClick={() => page(-1)} className={ARROW}>\n          <Chevron flip />\n        </button>\n        <button type=\"button\" aria-label={nextLabel} disabled={edge.end} onClick={() => page(1)} className={ARROW}>\n          <Chevron />\n        </button>\n      </div>\n      <ul\n        ref={row}\n        onScroll={measure}\n        // biome-ignore: a scroll container must take the keyboard focus to scroll with the arrow keys\n        tabIndex={0}\n        aria-labelledby={headingId}\n        className=\"m-0 flex list-none snap-x snap-mandatory items-stretch gap-3 overflow-x-auto overflow-y-hidden overscroll-x-contain p-0 pt-1 -mt-1 pb-2 [scrollbar-width:none] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-scrollbar]:hidden\"\n      >\n        {items.map((item, i) => (\n          <li key={getId(item)} className=\"w-[9.5rem] shrink-0 snap-start sm:w-44\">\n            {renderItem(item, i)}\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n}\n","// The links of the page blocks (PageHero's back link, LinkCard, ArgumentCard, ActionBar): an internal path renders\n// through the app's router link (`linkAs`, e.g. Next's `Link`), anything else is an `<a>` that opens in a new tab.\n// Shared by the block entries; never exported on its own.\nimport type * as React from \"react\";\n\n/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */\nexport type LinkComponent = React.ElementType<{ href: string; className?: string; children?: React.ReactNode; \"aria-label\"?: string; \"aria-describedby\"?: string }>;\n\n/** An address that leaves the app: an absolute URL or a protocol (`mailto:`). */\nexport const isExternal = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href);\n\nexport function BlockLink({\n  href,\n  linkAs: Link = \"a\",\n  external = isExternal(href),\n  rel,\n  ...props\n}: Omit<React.ComponentProps<\"a\">, \"href\"> & { href: string; linkAs?: LinkComponent; external?: boolean }) {\n  if (external) return <a href={href} target=\"_blank\" rel={rel ?? \"noopener noreferrer\"} {...props} />;\n  const Comp = Link as React.ElementType;\n  return <Comp href={href} {...props} />;\n}\n","// Client (it renders the shelf). Mixed orientations without a broken grid. `split` (the feed default) sends the 9:16\n// clips to a `ShortsShelf` and lays the rest in a uniform 16:9 grid; `uniform` puts everything in one grid of one frame\n// (a source of the other orientation is told to `contain`, never cropped to a face). `layout=\"list\"` is one column.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { ShortsShelf, type ShortsShelfProps } from \"./shorts-shelf\";\nimport type { VideoCardAspect } from \"./video-card\";\n\nexport interface MediaGridState {\n  /** The frame the card is drawn in (`aspect` of `VideoCard`). */\n  aspect: VideoCardAspect;\n  /** The card's `layout`. */\n  layout: \"stack\" | \"row\";\n  /** The source's orientation differs from the frame: pass `fit=\"contain\"`. */\n  mismatch: boolean;\n}\n\nexport interface MediaGridProps<T> extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** The videos, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** The source's orientation (from its width and height). */\n  orientationOf: (item: T) => VideoCardAspect;\n  /** One card, drawn in the frame the grid gives (`state`): use `VideoCard`. */\n  renderItem: (item: T, state: MediaGridState) => React.ReactNode;\n  /**\n   * `split`: verticals on the shelf, the others in the grid · `uniform`: all in one frame (`frame`).\n   * @default \"split\"\n   */\n  mode?: \"split\" | \"uniform\";\n  /** The frame of `uniform`. @default \"landscape\" */\n  frame?: VideoCardAspect;\n  /** `grid` or `list` (one row per video). @default \"grid\" */\n  layout?: \"grid\" | \"list\";\n  /** The shelf of `split`: its name, \"See all\" and arrows, passed translated. */\n  shelf: Pick<ShortsShelfProps<unknown>, \"label\" | \"title\" | \"seeAll\" | \"previousLabel\" | \"nextLabel\">;\n}\n\nconst GRID = {\n  landscape: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\",\n  portrait: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6\",\n} as const;\n\n/** A media grid that never mixes heights badly: a shelf for the 9:16, a uniform grid for the rest. */\nexport function MediaGrid<T>({ items, getId, orientationOf, renderItem, mode = \"split\", frame = \"landscape\", layout = \"grid\", shelf, className, ...props }: MediaGridProps<T>) {\n  const row = layout === \"list\";\n  const split = mode === \"split\";\n  const verticals = split ? items.filter((i) => orientationOf(i) === \"portrait\") : [];\n  const rest = split ? items.filter((i) => orientationOf(i) !== \"portrait\") : items;\n  const gridFrame: VideoCardAspect = split ? \"landscape\" : frame;\n  const state = (item: T, aspect: VideoCardAspect): MediaGridState => ({ aspect, layout: row ? \"row\" : \"stack\", mismatch: orientationOf(item) !== aspect });\n  return (\n    <div data-media-grid={mode} className={cn(\"flex min-w-0 flex-col gap-8\", className)} {...props}>\n      {verticals.length > 0 && <ShortsShelf {...shelf} items={verticals} getId={getId} renderItem={(item) => renderItem(item, { ...state(item, \"portrait\"), layout: \"stack\" })} />}\n      {rest.length > 0 && (\n        <ul data-grid-frame={gridFrame} className={cn(\"m-0 grid list-none auto-rows-fr gap-4 p-0\", row ? \"grid-cols-1\" : GRID[gridFrame])}>\n          {rest.map((item) => (\n            <li key={getId(item)} className=\"min-w-0\">\n              {renderItem(item, state(item, gridFrame))}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n","// Client (hover / focus swaps the picture for its animated preview). A video in a grid or a shelf: the picture in a 16:9\n// or 9:16 frame (a source of the other shape is shown inside, never stretched), badges, duration, the title on two lines\n// reserved, the creator, a count and one quick action — the same height of body in every card so a row aligns.\nimport * as React from \"react\";\n\nimport { Avatar } from \"../avatar\";\nimport type { DefaultAvatar } from \"../avatar/default-avatar\";\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { Card } from \"../card\";\nimport { cn } from \"../cn\";\nimport { isLeader, subscribeLeader, trackVisibility } from \"./preview-focus\";\n\nexport type VideoCardAspect = \"landscape\" | \"portrait\";\n\nexport interface VideoCardCreator {\n  /** The creator's name. */\n  name: string;\n  /** Their photo. */\n  avatarSrc?: string | null;\n  /** Their profile. */\n  href?: string;\n  /** The Krizaka default picture when there is no photo (a brand and a seed). */\n  defaultAvatar?: DefaultAvatar;\n}\n\nexport interface VideoCardProps extends Omit<React.ComponentProps<\"article\">, \"title\"> {\n  /** The title; it names the card and is its link. */\n  title: string;\n  /** Where the card opens. */\n  href: string;\n  /** The app's router link (Next's `Link`). */\n  linkAs?: LinkComponent;\n  /**\n   * The frame: `landscape` (16:9) or `portrait` (9:16).\n   * @default \"landscape\"\n   */\n  aspect?: VideoCardAspect;\n  /**\n   * `stack` (picture over text) or `row` (picture beside the text: the list mode of a section).\n   * @default \"stack\"\n   */\n  layout?: \"stack\" | \"row\";\n  /** The picture. */\n  poster?: string | null;\n  /**\n   * An animated picture (WebP, a few hundred kB) that fades in over the poster once the pointer has rested on the card\n   * (or it is focused) for `previewDelay`, and is removed again on leave. It is never requested before. On a phone (no\n   * hover) only the card most inside the viewport plays it, unless the person asked for less data or less motion.\n   */\n  previewSrc?: string | null;\n  /**\n   * How long the pointer must rest before the preview is requested, in ms: a pointer crossing the grid loads nothing.\n   * @default 200\n   */\n  previewDelay?: number;\n  /**\n   * `fetchPriority` of the poster: `high` for the first row (the largest contentful paint).\n   * @default \"auto\"\n   */\n  posterPriority?: \"high\" | \"low\" | \"auto\";\n  /**\n   * `cover` fills the frame; `contain` draws the whole picture over a blurred copy of itself (a source of the other\n   * orientation: no cropped face, no black bar).\n   * @default \"cover\"\n   */\n  fit?: \"cover\" | \"contain\";\n  /** The length, already formatted (`3:42`). */\n  duration?: string;\n  /** Badges at the top-left of the picture (Free, a price, 18+). Put them on `scrim` so they read in both themes. */\n  badges?: React.ReactNode;\n  /** Who made it: name, photo, profile. */\n  creator?: VideoCardCreator;\n  /** What is counted (`12.4K views`), already formatted. */\n  meta?: React.ReactNode;\n  /** One quick action at the end of the footer (a tip, a save). Its clicks must not follow the card's link. */\n  action?: React.ReactNode;\n  /** A sensitive picture: blurred and scaled so nothing shows (put the reveal button in `overlay`). */\n  blurred?: boolean;\n  /** Over the whole picture, above the card's link (a veil, a reveal button). */\n  overlay?: React.ReactNode;\n  /** Shown instead of the picture while there is none. */\n  fallback?: React.ReactNode;\n  /** `eager` for the first cards of a page. */\n  loading?: \"lazy\" | \"eager\";\n}\n\nconst FRAME = { landscape: \"aspect-video\", portrait: \"aspect-[9/16]\" } as const;\n\n/** A video card whose frame, body and footer have one height per aspect, so a grid row or a shelf never staggers. */\nexport function VideoCard({\n  title,\n  href,\n  linkAs,\n  aspect = \"landscape\",\n  layout = \"stack\",\n  poster,\n  previewSrc,\n  previewDelay = 200,\n  posterPriority = \"auto\",\n  fit = \"cover\",\n  duration,\n  badges,\n  creator,\n  meta,\n  action,\n  fallback,\n  blurred = false,\n  overlay,\n  loading = \"lazy\",\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  ref,\n  ...props\n}: VideoCardProps) {\n  const [node, setNode] = React.useState<HTMLElement | null>(null);\n  const setRef = React.useCallback(\n    (el: HTMLElement | null) => {\n      setNode(el);\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) (ref as React.RefObject<HTMLElement | null>).current = el;\n    },\n    [ref],\n  );\n  const canPreview = Boolean(previewSrc) && !blurred;\n  const { live, arm, disarm } = usePreviewIntent(node, canPreview, previewDelay);\n  const row = layout === \"row\";\n  const tall = aspect === \"portrait\" && !row;\n  return (\n    <article\n      ref={setRef}\n      data-aspect={aspect}\n      data-layout={layout}\n      className={cn(\"group relative h-full min-w-0\", className)}\n      data-preview={live ? \"on\" : undefined}\n      onMouseEnter={(e) => (arm(\"pointer\"), onMouseEnter?.(e))}\n      onMouseLeave={(e) => (disarm(\"pointer\"), onMouseLeave?.(e))}\n      onFocus={(e) => (arm(\"focus\"), onFocus?.(e))}\n      onBlur={(e) => (disarm(\"focus\"), onBlur?.(e))}\n      {...props}\n    >\n      <Card.Root interactive tone=\"glass\" className={cn(\"h-full w-full max-w-full\", row ? \"flex-row\" : \"flex-col\")}>\n        <Card.Media aspect=\"auto\" className={cn(\"shrink-0\", FRAME[aspect], row && (aspect === \"portrait\" ? \"w-24 sm:w-28\" : \"w-40 sm:w-56\"))}>\n          {fit === \"contain\" && poster && <img src={poster} alt=\"\" aria-hidden loading=\"lazy\" className=\"absolute inset-0 h-full w-full scale-125 object-cover opacity-70 blur-2xl\" />}\n          <Card.Image\n            src={poster}\n            loading={loading}\n            fetchPriority={posterPriority === \"auto\" ? undefined : posterPriority}\n            fallback={fallback}\n            className={cn(fit === \"contain\" && \"relative object-contain\", blurred && \"scale-110 blur-xl\")}\n          />\n          {live && previewSrc && <PreviewLayer src={previewSrc} contain={fit === \"contain\"} />}\n          {overlay && <div className=\"absolute inset-0 z-20 flex\">{overlay}</div>}\n          {badges && (\n            <Card.Overlay corner=\"top-left\" className=\"theme-dark pointer-events-none flex-wrap\">\n              {badges}\n            </Card.Overlay>\n          )}\n          {duration && (\n            <Card.Overlay corner=\"bottom-right\" className=\"pointer-events-none\">\n              <span className=\"rounded-sm bg-scrim px-1.5 py-0.5 font-mono text-[11px] text-fg-on-media\">{duration}</span>\n            </Card.Overlay>\n          )}\n        </Card.Media>\n        {/* `static`: the body must not be the containing block of the title link's ::after, or the link would cover the text only and the picture would not open the video. */}\n        <Card.Body className=\"static min-w-0 flex-1 justify-between gap-2 p-3\">\n          <h3 className=\"m-0 min-h-[2.5em] text-sm font-semibold leading-tight text-fg\">\n            <BlockLink href={href} linkAs={linkAs} className=\"line-clamp-2 outline-none after:absolute after:inset-0 after:z-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-ring\">\n              {title}\n            </BlockLink>\n          </h3>\n          {/* A narrow card (9:16 on a shelf) puts the count and the action on a second line so the name is never cut to an initial. */}\n          <div className={cn(\"relative z-10 text-xs text-fg-secondary\", tall ? \"flex flex-col gap-1\" : \"flex h-8 items-center gap-2\")}>\n            {creator && (\n              <div className=\"flex h-6 min-w-0 items-center gap-2\">\n                <Avatar src={creator.avatarSrc} defaultAvatar={creator.defaultAvatar} alt=\"\" fallback={creator.name.charAt(0)} size=\"xs\" className=\"shrink-0\" />\n                {creator.href ? (\n                  <BlockLink href={creator.href} linkAs={linkAs} className=\"min-w-0 truncate hover:text-fg\">\n                    {creator.name}\n                  </BlockLink>\n                ) : (\n                  <span className=\"min-w-0 truncate\">{creator.name}</span>\n                )}\n              </div>\n            )}\n            {(meta || action) && (\n              <div className={cn(\"flex items-center gap-2\", tall ? \"h-7 justify-between\" : \"ml-auto shrink-0\")}>\n                {meta && <span className=\"shrink-0 font-mono text-[11px] text-fg-muted\">{meta}</span>}\n                {action && <span className=\"shrink-0\">{action}</span>}\n              </div>\n            )}\n          </div>\n        </Card.Body>\n      </Card.Root>\n    </article>\n  );\n}\n\n/** The animated preview, fading in over the poster once it has loaded; unmounted (so unloaded) on leave. */\nfunction PreviewLayer({ src, contain }: { src: string; contain: boolean }) {\n  const [ready, setReady] = React.useState(false);\n  return (\n    <img\n      src={src}\n      alt=\"\"\n      aria-hidden\n      decoding=\"async\"\n      data-preview-layer=\"\"\n      data-ready={ready ? \"\" : undefined}\n      onLoad={() => setReady(true)}\n      className={cn(\"pointer-events-none absolute inset-0 h-full w-full opacity-0 transition-opacity duration-300 data-[ready]:opacity-100 motion-reduce:transition-none\", contain ? \"object-contain\" : \"object-cover\")}\n    />\n  );\n}\n\ntype Cause = \"pointer\" | \"focus\";\n\nconst matches = (query: string) => typeof window !== \"undefined\" && typeof window.matchMedia === \"function\" && window.matchMedia(query).matches;\nconst hoverCapable = () => matches(\"(hover: hover)\");\nconst saveData = () => typeof navigator !== \"undefined\" && (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData === true;\n\n/**\n * When the preview is wanted. A desktop pointer or the keyboard focus must rest `delay` ms first; on a phone the card\n * the page shows most (and only one) wants it, never under Save-Data or reduced motion. Leaving clears everything.\n */\nfunction usePreviewIntent(node: HTMLElement | null, enabled: boolean, delay: number) {\n  const [causes, setCauses] = React.useState<ReadonlySet<Cause>>(new Set());\n  const timers = React.useRef(new Map<Cause, ReturnType<typeof setTimeout>>());\n  const arm = React.useCallback(\n    (cause: Cause) => {\n      if (!enabled || saveData()) return;\n      if (cause === \"pointer\" && !hoverCapable()) return;\n      clearTimeout(timers.current.get(cause));\n      timers.current.set(\n        cause,\n        setTimeout(() => setCauses((c) => new Set(c).add(cause)), delay),\n      );\n    },\n    [enabled, delay],\n  );\n  const disarm = React.useCallback((cause: Cause) => {\n    clearTimeout(timers.current.get(cause));\n    timers.current.delete(cause);\n    setCauses((c) => {\n      if (!c.has(cause)) return c;\n      const next = new Set(c);\n      next.delete(cause);\n      return next;\n    });\n  }, []);\n  React.useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      for (const t of pending.values()) clearTimeout(t);\n      pending.clear();\n    };\n  }, []);\n\n  // A phone: the single most visible card, after the same rest.\n  const touch = enabled && !hoverCapable();\n  const leading = React.useSyncExternalStore(\n    subscribeLeader,\n    () => isLeader(node),\n    () => false,\n  );\n  React.useEffect(() => {\n    if (!node || !touch) return;\n    return trackVisibility(node);\n  }, [node, touch]);\n  const [ready, setReady] = React.useState(false);\n  const [wasLeading, setWasLeading] = React.useState(false);\n  if (leading !== wasLeading) {\n    setWasLeading(leading);\n    if (!leading) setReady(false);\n  }\n  const wanted = touch && leading && !saveData() && !matches(\"(prefers-reduced-motion: reduce)\");\n  React.useEffect(() => {\n    if (!wanted) return;\n    const t = setTimeout(() => setReady(true), delay);\n    return () => clearTimeout(t);\n  }, [wanted, delay]);\n\n  return { live: enabled && (causes.size > 0 || (wanted && ready)), arm, disarm };\n}\n","// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { cardRecipe } from \"./recipe\";\n\nexport const card = tv(cardRecipe);\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The spotlight that follows the pointer and the lift on hover: for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n","// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the media's zoom, the spotlight) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"kz-spotlight kz-lift hover:border-accent/50\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n","// Client only. Which card of the page is the most visible: on a phone there is no hover, so exactly one card at a time\n// (the one most inside the viewport) may play its preview. One IntersectionObserver for the whole page, no per-card\n// observer; the answer is a store read with `useSyncExternalStore`.\nconst MIN_RATIO = 0.6;\nconst ratios = new Map<Element, number>();\nconst listeners = new Set<() => void>();\nlet observer: IntersectionObserver | null = null;\nlet leader: Element | null = null;\n\nfunction elect() {\n  let best: Element | null = null;\n  let bestRatio = MIN_RATIO - Number.EPSILON;\n  for (const [el, ratio] of ratios) {\n    if (ratio > bestRatio) {\n      best = el;\n      bestRatio = ratio;\n    }\n  }\n  if (best === leader) return;\n  leader = best;\n  for (const l of listeners) l();\n}\n\n/** Starts counting an element's visibility; returns the function that stops it. */\nexport function trackVisibility(el: Element): () => void {\n  if (typeof IntersectionObserver === \"undefined\") return () => {};\n  observer ??= new IntersectionObserver(\n    (entries) => {\n      for (const e of entries) ratios.set(e.target, e.isIntersecting ? e.intersectionRatio : 0);\n      elect();\n    },\n    { threshold: [0, 0.25, 0.5, 0.6, 0.75, 1] },\n  );\n  ratios.set(el, 0);\n  observer.observe(el);\n  return () => {\n    observer?.unobserve(el);\n    ratios.delete(el);\n    elect();\n  };\n}\n\nexport const subscribeLeader = (l: () => void) => (listeners.add(l), () => void listeners.delete(l));\n\n/** Whether this element is the card the page is showing most. */\nexport const isLeader = (el: Element | null) => el !== null && leader === el;\n\n/** Test seam: forget everything. */\nexport function resetPreviewFocus() {\n  observer?.disconnect();\n  observer = null;\n  ratios.clear();\n  leader = null;\n}\n","// Server-safe. A placeholder for content on its way: decorative, so hidden from assistive technology. One reflection of\n// the brand light crosses every skeleton of the page together (`background-attachment: fixed`), instead of each one\n// pulsing on its own; under reduced motion they rest, tinted.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const skeletonVariants = tv({\n  base: \"kz-skeleton block bg-surface-3\",\n  variants: {\n    shape: { text: \"h-3 w-full rounded-sm\", circle: \"aspect-square h-10 rounded-full\", rect: \"h-24 w-full rounded-lg\" },\n  },\n  defaultVariants: { shape: \"text\" },\n});\n\nexport type SkeletonProps = React.ComponentProps<\"span\"> & {\n  /**\n   * text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).\n   * @default \"text\"\n   */\n  shape?: VariantProps<typeof skeletonVariants>[\"shape\"];\n};\n\n/** A shape the size of what is loading. Announce the wait elsewhere (`LoadingRegion` does it, with `aria-busy`). */\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return <span aria-hidden data-shape={shape ?? \"text\"} className={skeletonVariants({ shape, className })} {...props} />;\n}\n\nexport type SkeletonTextProps = React.ComponentProps<\"span\"> & {\n  /**\n   * How many lines.\n   * @default 3\n   */\n  lines?: number;\n};\n\n/** A paragraph on its way: `lines` lines, the last one shorter — like text that wraps. */\nexport function SkeletonText({ lines = 3, className, ...props }: SkeletonTextProps) {\n  return (\n    <span aria-hidden className={[\"flex w-full flex-col gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton key={i} className={i === lines - 1 && lines > 1 ? \"w-3/5\" : undefined} />\n      ))}\n    </span>\n  );\n}\n\nexport type SkeletonShapeProps = React.ComponentProps<\"div\">;\n\n/**\n * The skeleton of the real thing: render your component with placeholder data inside, and its text, images and icons\n * become skeleton shapes in place — the exact layout, nothing to draw twice. Inert and hidden from assistive technology.\n */\nexport function SkeletonShape({ className, children, ...props }: SkeletonShapeProps) {\n  return (\n    <div aria-hidden inert className={[\"kz-skeleton-shape\", className].filter(Boolean).join(\" \")} {...props}>\n      {children}\n    </div>\n  );\n}\n","// A video card on its way: the same frame, body and footer heights as `VideoCard`, so nothing moves when it arrives.\nimport * as React from \"react\";\n\nimport { Card } from \"../card\";\nimport { cn } from \"../cn\";\nimport { Skeleton } from \"../skeleton\";\nimport type { VideoCardAspect } from \"./video-card\";\n\nexport interface VideoCardSkeletonProps extends React.ComponentProps<\"div\"> {\n  /** `landscape` (16:9) or `portrait` (9:16), as the card it stands for. @default \"landscape\" */\n  aspect?: VideoCardAspect;\n  /** `stack` or `row`, as the card it stands for. @default \"stack\" */\n  layout?: \"stack\" | \"row\";\n}\n\nconst FRAME = { landscape: \"aspect-video\", portrait: \"aspect-[9/16]\" } as const;\n\n/** The placeholder of a `VideoCard` (decorative: announce the wait on the list, with `MediaGridSkeleton`). */\nexport function VideoCardSkeleton({ aspect = \"landscape\", layout = \"stack\", className, ...props }: VideoCardSkeletonProps) {\n  const row = layout === \"row\";\n  const tall = aspect === \"portrait\" && !row;\n  return (\n    <div aria-hidden data-skeleton=\"video-card\" data-aspect={aspect} data-layout={layout} className={cn(\"h-full min-w-0\", className)} {...props}>\n      <Card.Root tone=\"glass\" className={cn(\"h-full w-full max-w-full\", row ? \"flex-row\" : \"flex-col\")}>\n        <Card.Media aspect=\"auto\" className={cn(\"shrink-0\", FRAME[aspect], row && (aspect === \"portrait\" ? \"w-24 sm:w-28\" : \"w-40 sm:w-56\"))}>\n          <Skeleton shape=\"rect\" className=\"h-full w-full rounded-none\" />\n        </Card.Media>\n        <Card.Body className=\"static min-w-0 flex-1 justify-between gap-2 p-3\">\n          <div className=\"flex min-h-[2.5em] flex-col justify-center gap-1.5\">\n            <Skeleton className=\"h-3\" />\n            <Skeleton className=\"h-3 w-3/5\" />\n          </div>\n          <div className={cn(\"flex text-xs\", tall ? \"flex-col gap-1\" : \"h-8 items-center gap-2\")}>\n            <div className=\"flex h-6 min-w-0 items-center gap-2\">\n              <Skeleton shape=\"circle\" className=\"h-6 w-6 shrink-0\" />\n              <Skeleton className=\"h-2.5 w-20\" />\n            </div>\n            <div className={cn(\"flex items-center\", tall ? \"h-7\" : \"ml-auto\")}>\n              <Skeleton className=\"h-2.5 w-14\" />\n            </div>\n          </div>\n        </Card.Body>\n      </Card.Root>\n    </div>\n  );\n}\n\nexport interface MediaGridSkeletonProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, passed translated (\"Loading videos\"): announced once, the cards are hidden from assistive technology. */\n  label: string;\n  /** Cards in the grid. @default 8 */\n  count?: number;\n  /** Cards on the Shorts shelf above the grid (`split` mode); 0 for none. @default 0 */\n  shelfCount?: number;\n  /** `grid` or `list`. @default \"grid\" */\n  layout?: \"grid\" | \"list\";\n  /** The frame of the grid. @default \"landscape\" */\n  frame?: VideoCardAspect;\n}\n\nconst GRID = {\n  landscape: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\",\n  portrait: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6\",\n} as const;\n\n/** The placeholder of a `MediaGrid`: the same shelf and grid, skeleton cards, one polite announcement. */\nexport function MediaGridSkeleton({ label, count = 8, shelfCount = 0, layout = \"grid\", frame = \"landscape\", className, ...props }: MediaGridSkeletonProps) {\n  const row = layout === \"list\";\n  return (\n    <div role=\"status\" aria-busy=\"true\" data-media-grid-skeleton=\"\" className={cn(\"flex min-w-0 flex-col gap-8\", className)} {...props}>\n      <span className=\"sr-only\">{label}</span>\n      {shelfCount > 0 && (\n        <div aria-hidden className=\"min-w-0\">\n          <Skeleton className=\"mb-3 h-4 w-24\" />\n          <ul className=\"m-0 flex list-none items-stretch gap-3 overflow-hidden p-0\">\n            {Array.from({ length: shelfCount }, (_, i) => (\n              <li key={i} className=\"w-[9.5rem] shrink-0 sm:w-44\">\n                <VideoCardSkeleton aspect=\"portrait\" />\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n      <ul aria-hidden className={cn(\"m-0 grid list-none auto-rows-fr gap-4 p-0\", row ? \"grid-cols-1\" : GRID[frame])}>\n        {Array.from({ length: count }, (_, i) => (\n          <li key={i} className=\"min-w-0\">\n            <VideoCardSkeleton aspect={frame} layout={row ? \"row\" : \"stack\"} />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","React","jsx","jsx","jsxs","jsx","jsxs","React","tv","jsx","jsxs","tv","jsx","jsxs","tv","jsx","jsx","jsxs","FRAME","GRID"]}

package/dist/native.d.ts

@@ -952,6 +952,31 @@ type TextFieldProps = Omit<TextInputProps, "value" | "defaultValue" | "onChangeT
  */
 declare function TextField({ label, hint, error, value, defaultValue, onValueChange, disabled, end, inputRef, style, multiline, onFocus, onBlur, ...props }: TextFieldProps): React$1.JSX.Element;
 
+type ForceUpdateScreenProps = {
+    /** The headline (“Update to keep going”) — passed translated. */
+    title: string;
+    /** Why, in a sentence — the backend's localized `message`. */
+    message?: string;
+    /** The versions, in mono (“You have 1.1.0 · 1.2.0 or later is required”). */
+    versionLabel?: string;
+    /** The product's mark or mascot (decorative). */
+    mark?: React$1.ReactNode;
+    /** The button that updates (“Update the app”). */
+    updateLabel: string;
+    /** Opens the store page (`Linking.openURL(storeUrl)`). */
+    onUpdate: () => void;
+    /** A secondary way (“I already updated”) — with `onRetry`. */
+    retryLabel?: string;
+    /** Checks the backend again (`useAppConfig().refresh`). */
+    onRetry?: () => void;
+    /** Fill the whole screen (default). `false` for a card in a catalogue. */
+    fill?: boolean;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** The forced update: replaces the app, with one thing to do and the way to do it. */
+declare function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, fill, style }: ForceUpdateScreenProps): React$1.JSX.Element;
+
 type GoalGaugeProps = Omit<ViewProps, "children"> & {
     /** What the gauge counts (“Backers”) — passed translated; the meter's accessible name. */
     label: string;
@@ -1094,6 +1119,25 @@ type LoaderProps = {
 /** A wait from start to end — the web `Loader`: delayed, never blinking, announced when it shows and when it ends. */
 declare function Loader({ label, status, successLabel, errorLabel, value, eta, delay, minDuration, endDuration, variant, product, style }: LoaderProps): React$1.JSX.Element | null;
 
+type MaintenanceScreenProps = {
+    /** The headline (“Back in a few minutes”) — passed translated. */
+    title: string;
+    /** What is happening — the backend's localized maintenance `message`. */
+    message?: string;
+    /** The product's mark or mascot (decorative). */
+    mark?: React$1.ReactNode;
+    /** The button that checks again (“Try again”) — with `onRetry`. */
+    retryLabel?: string;
+    /** Checks the backend again (`useAppConfig().refresh`). */
+    onRetry?: () => void;
+    /** Fill the whole screen (default). `false` for a card in a catalogue. */
+    fill?: boolean;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** The maintenance screen: announced politely, with one way to check again. */
+declare function MaintenanceScreen({ title, message, mark, retryLabel, onRetry, fill, style }: MaintenanceScreenProps): React$1.JSX.Element;
+
 /**
  * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
  * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
@@ -2320,6 +2364,29 @@ type ToasterProps = {
 /** Mount once, at the root (inside `ThemeProvider`). Then call `toast()` from anywhere. */
 declare function Toaster({ closeLabel, position, offset, duration, max }: ToasterProps): React$1.JSX.Element | null;
 
+type UpdatePromptProps = {
+    /** The headline (“A new version is available”) — passed translated; also the accessible name of the card. */
+    title: string;
+    /** Why update, in a sentence — the backend's localized `message`. */
+    message?: string;
+    /** The versions, in mono (“1.2.0 → 1.4.0”). */
+    versionLabel?: string;
+    /** The product's mark (decorative), e.g. `<ProductMark id="orazaka" size={40} />`. */
+    mark?: React$1.ReactNode;
+    /** The button that updates (“Update”). */
+    updateLabel: string;
+    /** Opens the store page (`Linking.openURL(storeUrl)`). */
+    onUpdate: () => void;
+    /** The way out (“Later”). */
+    laterLabel: string;
+    /** Called by the way out: `useAppConfig().dismissSoft` remembers it for this version. */
+    onLater: () => void;
+    /** Styles merged last. */
+    style?: StyleProp<ViewStyle>;
+};
+/** The soft update: a card the person can dismiss, never a blocker. */
+declare function UpdatePrompt({ title, message, versionLabel, mark, updateLabel, onUpdate, laterLabel, onLater, style }: UpdatePromptProps): React$1.JSX.Element;
+
 type VerifiedBadgeProps = {
     /** Its words, read (and shown with `showLabel`): “Verified” — passed translated. */
     label: string;
@@ -2405,4 +2472,4 @@ declare function YomizakaMark({ size, animated, title, neutral }: NativeMarkProp
  */
 declare function YororisMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };
+export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, ForceUpdateScreen, type ForceUpdateScreenProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, MaintenanceScreen, type MaintenanceScreenProps, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, UpdatePrompt, type UpdatePromptProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };