@krizaka/ui 3.1.0 → 3.3.0

package/dist/video-player.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/video-player/video-player.tsx"],"sourcesContent":["// Client. A `<video>` with its own controls, accessible from end to end: a named region the keyboard reaches (Space /\n// K, arrows, J / L, M, F, C, Home / End, 0–9), every button named by a prop, the seek and volume sliders of\n// `@krizaka/ui/slider` with the time read aloud. HLS plays natively where the browser can (Safari, iOS) and through\n// hls.js elsewhere — loaded only then, by the app's `loadHls` (`() => import(\"hls.js\")`): an optional peer, never in\n// the bundle of a page that does not play HLS. A signed address can be resolved at the last moment (`src` as a\n// function), again after an error; the video pauses when it leaves the screen; autoplay waits under reduced motion.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CaptionsGlyph, FullscreenGlyph, PauseGlyph, PipGlyph, PlayGlyph, RetryGlyph, VolumeGlyph } from \"../glyphs\";\nimport { clamp, formatClock, playSafely, useInView, usePrefersReducedMotion } from \"../media\";\nimport { Slider } from \"../slider\";\n\nexport const videoPlayer = tv({\n  slots: {\n    root:\n      \"theme-dark group/player relative isolate w-full overflow-hidden rounded-xl bg-media text-fg-on-media \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[idle]:cursor-none\",\n    video: \"absolute inset-0 h-full w-full object-contain\",\n    poster: \"pointer-events-none absolute inset-0 h-full w-full object-contain\",\n    big:\n      \"absolute left-1/2 top-1/2 z-10 inline-flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full \" +\n      \"bg-scrim-strong text-fg-on-media shadow-lg backdrop-blur-sm transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar:\n      \"absolute inset-x-0 bottom-0 z-20 flex flex-col gap-1 bg-linear-to-t from-scrim-strong via-scrim to-transparent px-3 pb-2 pt-10 \" +\n      \"transition-opacity duration-300 motion-reduce:transition-none group-data-[idle]/player:opacity-0 group-focus-within/player:opacity-100\",\n    row: \"flex items-center gap-1\",\n    button:\n      \"inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1 rounded-md px-1.5 text-xs font-semibold text-fg-on-media \" +\n      \"transition-colors hover:bg-fg-on-media/15 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-fg-on-media/20\",\n    time: \"px-1.5 font-mono text-[11px] tabular-nums text-fg-on-media\",\n    volume: \"hidden w-20 items-center sm:flex\",\n    status: \"absolute inset-0 z-30 flex flex-col items-center justify-center gap-3 bg-scrim-strong p-6 text-center text-sm\",\n    spinner: \"h-10 w-10 animate-spin rounded-full border-2 border-fg-on-media/30 border-t-fg-on-media motion-reduce:animate-none\",\n    overlay: \"absolute inset-0 z-30\",\n  },\n});\n\n/** What `loadHls` resolves to: the module of hls.js (only the members the player uses are typed). */\nexport type HlsModule = {\n  default: {\n    new (config?: Record<string, unknown>): {\n      loadSource(url: string): void;\n      attachMedia(media: HTMLMediaElement): void;\n      destroy(): void;\n      startLoad(): void;\n      recoverMediaError(): void;\n      on(event: string, listener: (event: string, data: { fatal?: boolean; type?: string }) => void): void;\n    };\n    isSupported(): boolean;\n    Events: { ERROR: string };\n    ErrorTypes: { NETWORK_ERROR: string; MEDIA_ERROR: string };\n  };\n};\n\nexport type VideoTrack = {\n  /** The WebVTT file. */\n  src: string;\n  /** Its language, BCP 47 (`\"fr\"`). */\n  srcLang: string;\n  /** Its name in the menu (\"Français\"), passed translated. */\n  label: string;\n  /** `subtitles` (default) or `captions` (with the sounds, for deaf viewers). */\n  kind?: \"subtitles\" | \"captions\";\n  /** Shown from the start. */\n  default?: boolean;\n};\n\nexport type VideoPlayerLabels = {\n  play: string;\n  pause: string;\n  mute: string;\n  unmute: string;\n  volume: string;\n  seek: string;\n  /** The speed button: `(rate) => \"Speed \" + rate + \"×\"`. */\n  speed: (rate: number) => string;\n  /** The captions button: `(track) => \"Subtitles: \" + (track ?? \"off\")`, the track's label or `null` when off. */\n  captions: (track: string | null) => string;\n  fullscreen: string;\n  exitFullscreen: string;\n  pictureInPicture: string;\n  /** Read while the video waits for data. */\n  loading: string;\n  /** The video cannot play. */\n  error: string;\n  /** Tries again (resolves a signed `src` again). */\n  retry: string;\n  /** The seek slider's value: `(time, duration) => \"1:05 of 3:20\"`. */\n  time: (time: string, duration: string) => string;\n};\n\nexport const videoPlayerLabels: VideoPlayerLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  mute: \"Mute\",\n  unmute: \"Unmute\",\n  volume: \"Volume\",\n  seek: \"Seek\",\n  speed: (rate) => `Speed ${rate}×`,\n  captions: (track) => `Subtitles: ${track ?? \"off\"}`,\n  fullscreen: \"Full screen\",\n  exitFullscreen: \"Exit full screen\",\n  pictureInPicture: \"Picture in picture\",\n  loading: \"Loading\",\n  error: \"This video cannot be played.\",\n  retry: \"Try again\",\n  time: (time, duration) => `${time} of ${duration}`,\n};\n\nexport type VideoPlayerProps = {\n  /** The address of the video (MP4, WebM, or an HLS `.m3u8`), or a function that resolves a signed one when needed. */\n  src: string | (() => Promise<string>);\n  /** `auto` (default): HLS when the address ends in `.m3u8`. */\n  type?: \"auto\" | \"hls\" | \"file\";\n  /** Loads hls.js when the browser cannot play HLS itself: `() => import(\"hls.js\")`. Without it, HLS needs Safari. */\n  loadHls?: () => Promise<HlsModule>;\n  /** The accessible name of the player (\"Video: Sunset over Montréal\"), passed translated. */\n  title: string;\n  /** The picture shown before playback. */\n  poster?: string;\n  /** Starts playing, muted (browsers refuse sound without a gesture) — not under reduced motion. */\n  autoPlay?: boolean;\n  /** Starts muted. */\n  muted?: boolean;\n  /** Plays again from the start at the end. */\n  loop?: boolean;\n  /** How much to fetch before playback: `none` (a list of many videos), `metadata` (default), `auto`. */\n  preload?: \"none\" | \"metadata\" | \"auto\";\n  /** Subtitles or captions (WebVTT): the C key and a button cycle through them. */\n  tracks?: readonly VideoTrack[];\n  /** The speeds offered by the speed button. Default `[0.5, 1, 1.25, 1.5, 2]`. */\n  playbackRates?: readonly number[];\n  /** Pauses when less than a quarter of the player is on screen. Default `true`. */\n  pauseWhenHidden?: boolean;\n  /** Shows the controls (default). `false`: a bare video (a background loop) — give it no sound. */\n  controls?: boolean;\n  /** Covers the video and hides the controls: a gate (sign in, unlock, age check) drawn by the app. */\n  overlay?: React.ReactNode;\n  /** The width / height ratio of the frame. Default `\"16 / 9\"`; `\"9 / 16\"` for a vertical video. */\n  aspectRatio?: string;\n  /** Called when playback starts. */\n  onPlay?: () => void;\n  /** Called when playback pauses. */\n  onPause?: () => void;\n  /** Called at the end. */\n  onEnded?: () => void;\n  /** Called as the time moves, in seconds (a few times a second). */\n  onTimeUpdate?: (time: number) => void;\n  /** Called when the video cannot play (a network failure, an expired address). */\n  onError?: (error: unknown) => void;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<VideoPlayerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst RATES = [0.5, 1, 1.25, 1.5, 2] as const;\nconst isHls = (url: string, type: VideoPlayerProps[\"type\"]) => type === \"hls\" || (type !== \"file\" && /\\.m3u8(\\?|#|$)/i.test(url));\n\n/** Shows the text track `index` of a video (and hides the others); -1 hides them all. */\nfunction showTrack(element: HTMLVideoElement, index: number) {\n  const list = element.textTracks;\n  for (let i = 0; i < list.length; i += 1) list[i]!.mode = i === index ? \"showing\" : \"disabled\";\n}\n\n/** A video player with accessible controls, HLS on demand, signed sources, subtitles, speed, full screen. */\nexport function VideoPlayer({\n  src,\n  type = \"auto\",\n  loadHls,\n  title,\n  poster,\n  autoPlay,\n  muted: initiallyMuted = false,\n  loop,\n  preload = \"metadata\",\n  tracks = [],\n  playbackRates = RATES,\n  pauseWhenHidden = true,\n  controls = true,\n  overlay,\n  aspectRatio = \"16 / 9\",\n  onPlay,\n  onPause,\n  onEnded,\n  onTimeUpdate,\n  onError,\n  labels: given,\n  className,\n}: VideoPlayerProps) {\n  const labels = { ...videoPlayerLabels, ...given };\n  const s = videoPlayer();\n  const root = React.useRef<HTMLDivElement>(null);\n  const video = React.useRef<HTMLVideoElement>(null);\n  const reduce = usePrefersReducedMotion();\n  const [resolved, setResolved] = React.useState<{ attempt: number; url: string } | null>(null);\n  const [attempt, setAttempt] = React.useState(0);\n  const [wanted, setWanted] = React.useState(false);\n  const [playing, setPlaying] = React.useState(false);\n  const [time, setTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(0);\n  const [volume, setVolume] = React.useState(1);\n  const [muted, setMuted] = React.useState(initiallyMuted || Boolean(autoPlay));\n  const [rate, setRate] = React.useState(1);\n  const [caption, setCaption] = React.useState(() => tracks.findIndex((t) => t.default));\n  const [fullscreen, setFullscreen] = React.useState(false);\n  const [waiting, setWaiting] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const [idle, setIdle] = React.useState(false);\n  // The poster is an image over the video until the first play: it loads like any image (lazy, decoded once), the\n  // same in every browser — the `poster` attribute is painted late and differently.\n  const [started, setStarted] = React.useState(false);\n  const idleTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const url = typeof src === \"string\" ? src : resolved?.attempt === attempt ? resolved.url : null;\n  const needSource = typeof src === \"function\" && (preload !== \"none\" || wanted || (autoPlay && !reduce));\n\n  // A signed source is resolved when it is needed, and again on \"Try again\".\n  React.useEffect(() => {\n    if (typeof src !== \"function\" || !needSource) return;\n    let live = true;\n    src().then(\n      (next) => live && setResolved({ attempt, url: next }),\n      (error: unknown) => {\n        if (!live) return;\n        setFailed(true);\n        onError?.(error);\n      },\n    );\n    return () => {\n      live = false;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` is a callback, not a reason to resolve again\n  }, [src, needSource, attempt]);\n\n  // Attaches the source: natively, or through hls.js when the browser needs it.\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url) return;\n    let hls: InstanceType<HlsModule[\"default\"]> | null = null;\n    let live = true;\n    const fail = (error: unknown) => {\n      if (!live) return;\n      setFailed(true);\n      onError?.(error);\n    };\n    if (isHls(url, type) && !element.canPlayType(\"application/vnd.apple.mpegurl\")) {\n      if (!loadHls) fail(new Error(\"VideoPlayer: HLS needs `loadHls` in this browser.\"));\n      else\n        loadHls().then(({ default: Hls }) => {\n          if (!live) return;\n          if (!Hls.isSupported()) return fail(new Error(\"VideoPlayer: HLS is not supported here.\"));\n          hls = new Hls({ enableWorker: true, backBufferLength: 60 });\n          hls.on(Hls.Events.ERROR, (_event, data) => {\n            if (!data.fatal) return;\n            if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls?.startLoad();\n            else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls?.recoverMediaError();\n            else fail(data);\n          });\n          hls.loadSource(url);\n          hls.attachMedia(element);\n        }, fail);\n    } else element.src = url;\n    return () => {\n      live = false;\n      hls?.destroy();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` and `loadHls` are callbacks\n  }, [url, type]);\n\n  // Plays once the source is there, when it was asked for (a click before a signed source resolved, an autoplay).\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url || !(wanted || (autoPlay && !reduce))) return;\n    playSafely(element);\n  }, [url, wanted, autoPlay, reduce]);\n\n  React.useEffect(() => {\n    if (video.current) showTrack(video.current, caption);\n  }, [caption, tracks.length]);\n\n  React.useEffect(() => {\n    const change = () => setFullscreen(document.fullscreenElement === root.current);\n    document.addEventListener(\"fullscreenchange\", change);\n    return () => document.removeEventListener(\"fullscreenchange\", change);\n  }, []);\n  React.useEffect(() => () => clearTimeout(idleTimer.current), []);\n\n  useInView(root, (visible) => !visible && video.current && !video.current.paused && video.current.pause(), pauseWhenHidden);\n\n  const play = () => {\n    setWanted(true);\n    setFailed(false);\n    playSafely(video.current);\n  };\n  const toggle = () => (playing ? video.current?.pause() : play());\n  const seek = (to: number) => {\n    if (!video.current) return;\n    video.current.currentTime = clamp(to, 0, duration || video.current.duration || 0);\n    setTime(video.current.currentTime);\n  };\n  const changeVolume = (to: number) => {\n    if (!video.current) return;\n    const next = clamp(to, 0, 1);\n    video.current.volume = next;\n    video.current.muted = next === 0;\n    setVolume(next);\n    setMuted(next === 0);\n  };\n  const toggleMute = () => {\n    if (!video.current) return;\n    if (muted && volume === 0) changeVolume(0.5);\n    video.current.muted = !muted;\n    setMuted(!muted);\n  };\n  const cycleRate = () => {\n    const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;\n    if (video.current) video.current.playbackRate = next;\n    setRate(next);\n  };\n  const cycleCaption = () => tracks.length > 0 && setCaption((c) => (c + 2) % (tracks.length + 1) - 1);\n  const toggleFullscreen = () => {\n    const element = root.current;\n    if (!element) return;\n    if (document.fullscreenElement) void document.exitFullscreen();\n    else if (element.requestFullscreen) void element.requestFullscreen();\n    else (video.current as HTMLVideoElement & { webkitEnterFullscreen?: () => void })?.webkitEnterFullscreen?.();\n  };\n  const pip = () => {\n    if (document.pictureInPictureElement) void document.exitPictureInPicture();\n    else void video.current?.requestPictureInPicture?.();\n  };\n  const wake = () => {\n    setIdle(false);\n    clearTimeout(idleTimer.current);\n    if (playing) idleTimer.current = setTimeout(() => setIdle(true), 2500);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const inControl = target.getAttribute(\"role\") === \"slider\";\n    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;\n    const now = video.current?.currentTime ?? 0;\n    const actions: Record<string, (() => void) | undefined> = {\n      \" \": target.tagName === \"BUTTON\" ? undefined : toggle,\n      k: toggle,\n      j: () => seek(now - 10),\n      l: () => seek(now + 10),\n      m: toggleMute,\n      f: toggleFullscreen,\n      c: tracks.length ? cycleCaption : undefined,\n      ArrowLeft: inControl ? undefined : () => seek(now - 5),\n      ArrowRight: inControl ? undefined : () => seek(now + 5),\n      ArrowUp: inControl ? undefined : () => changeVolume(volume + 0.1),\n      ArrowDown: inControl ? undefined : () => changeVolume(volume - 0.1),\n      Home: inControl ? undefined : () => seek(0),\n      End: inControl ? undefined : () => seek(duration),\n    };\n    const action = /^[0-9]$/.test(key) && !inControl ? () => seek((Number(key) / 10) * duration) : actions[key];\n    if (!action || event.metaKey || event.ctrlKey || event.altKey) return;\n    event.preventDefault();\n    action();\n    wake();\n  };\n\n  const showControls = controls && !overlay;\n  const pipSupported = typeof document !== \"undefined\" && \"pictureInPictureEnabled\" in document && document.pictureInPictureEnabled;\n\n  return (\n    <div\n      ref={root}\n      role=\"region\"\n      aria-label={title}\n      tabIndex={showControls ? 0 : undefined}\n      data-idle={idle && playing ? \"\" : undefined}\n      data-state={playing ? \"playing\" : \"paused\"}\n      className={s.root({ className })}\n      style={{ aspectRatio }}\n      onKeyDown={showControls ? onKeyDown : undefined}\n      onPointerMove={showControls ? wake : undefined}\n      onPointerLeave={() => playing && setIdle(true)}\n    >\n      <video\n        ref={video}\n        className={s.video()}\n        preload={preload}\n        loop={loop}\n        muted={muted}\n        playsInline\n        crossOrigin={tracks.length ? \"anonymous\" : undefined}\n        onClick={showControls ? toggle : undefined}\n        onPlay={() => {\n          setStarted(true);\n          setPlaying(true);\n          wake();\n          onPlay?.();\n        }}\n        onPause={() => {\n          setPlaying(false);\n          setIdle(false);\n          onPause?.();\n        }}\n        onEnded={() => onEnded?.()}\n        onTimeUpdate={(event) => {\n          setTime(event.currentTarget.currentTime);\n          onTimeUpdate?.(event.currentTarget.currentTime);\n        }}\n        onDurationChange={(event) => setDuration(Number.isFinite(event.currentTarget.duration) ? event.currentTarget.duration : 0)}\n        onWaiting={() => setWaiting(true)}\n        onPlaying={() => setWaiting(false)}\n        onCanPlay={() => setWaiting(false)}\n        onError={(event) => {\n          setFailed(true);\n          onError?.(event.currentTarget.error);\n        }}\n      >\n        {tracks.map((track) => (\n          <track key={track.src} src={track.src} srcLang={track.srcLang} label={track.label} kind={track.kind ?? \"subtitles\"} default={track.default} />\n        ))}\n      </video>\n\n      {poster && !started ? <img src={poster} alt=\"\" aria-hidden decoding=\"async\" className={s.poster()} /> : null}\n\n      {showControls && !playing && !failed && !waiting && (\n        <button type=\"button\" className={s.big()} aria-label={labels.play} onClick={play}>\n          <PlayGlyph className=\"ml-1 h-7 w-7\" />\n        </button>\n      )}\n\n      {waiting && !failed && (\n        <div className=\"pointer-events-none absolute inset-0 z-10 flex items-center justify-center\">\n          <span className={s.spinner()} aria-hidden />\n          <span role=\"status\" className=\"sr-only\">\n            {labels.loading}\n          </span>\n        </div>\n      )}\n\n      {failed && (\n        <div role=\"alert\" className={s.status()}>\n          <p>{labels.error}</p>\n          <button\n            type=\"button\"\n            className={s.button({ className: \"border border-fg-on-media/40 px-3\" })}\n            onClick={() => {\n              setFailed(false);\n              setAttempt((a) => a + 1);\n              video.current?.load();\n            }}\n          >\n            <RetryGlyph className=\"h-4 w-4\" />\n            {labels.retry}\n          </button>\n        </div>\n      )}\n\n      {overlay ? <div className={s.overlay()}>{overlay}</div> : null}\n\n      {showControls && (\n        <div className={s.bar()}>\n          <Slider\n            label={labels.seek}\n            min={0}\n            max={duration || 1}\n            step={0.1}\n            value={Math.min(time, duration || 1)}\n            onValueChange={seek}\n            formatValue={(v) => labels.time(formatClock(v), formatClock(duration))}\n            disabled={!duration}\n            className=\"[&_[role=slider]]:h-4 [&_[role=slider]]:w-4\"\n          />\n          <div className={s.row()}>\n            <button type=\"button\" className={s.button()} aria-label={playing ? labels.pause : labels.play} onClick={toggle}>\n              {playing ? <PauseGlyph className=\"h-5 w-5\" /> : <PlayGlyph className=\"h-5 w-5\" />}\n            </button>\n            <button type=\"button\" className={s.button()} aria-label={muted ? labels.unmute : labels.mute} onClick={toggleMute}>\n              <VolumeGlyph muted={muted} className=\"h-5 w-5\" />\n            </button>\n            <div className={s.volume()}>\n              <Slider label={labels.volume} min={0} max={1} step={0.05} value={muted ? 0 : volume} onValueChange={changeVolume} formatValue={(v) => `${Math.round(v * 100)} %`} className=\"w-full\" />\n            </div>\n            <span className={s.time()} aria-hidden>\n              {formatClock(time)} / {formatClock(duration)}\n            </span>\n            <span className=\"flex-1\" />\n            {playbackRates.length > 1 && (\n              <button type=\"button\" className={s.button()} aria-label={labels.speed(rate)} onClick={cycleRate}>\n                {rate}×\n              </button>\n            )}\n            {tracks.length > 0 && (\n              <button type=\"button\" className={s.button()} aria-pressed={caption >= 0} aria-label={labels.captions(caption >= 0 ? (tracks[caption]?.label ?? null) : null)} onClick={cycleCaption}>\n                <CaptionsGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            {pipSupported && (\n              <button type=\"button\" className={s.button()} aria-label={labels.pictureInPicture} onClick={pip}>\n                <PipGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            <button type=\"button\" className={s.button()} aria-label={fullscreen ? labels.exitFullscreen : labels.fullscreen} onClick={toggleFullscreen}>\n              <FullscreenGlyph exit={fullscreen} className=\"h-5 w-5\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/video-player/video-player.tsx"],"sourcesContent":["// Client. A `<video>` with its own controls, accessible from end to end: a named region the keyboard reaches (Space /\n// K, arrows, J / L, M, F, C, Home / End, 0–9), every button named by a prop, the seek and volume sliders of\n// `@krizaka/ui/slider` with the time read aloud. HLS plays natively where the browser can (Safari, iOS) and through\n// hls.js elsewhere — loaded only then, by the app's `loadHls` (`() => import(\"hls.js\")`): an optional peer, never in\n// the bundle of a page that does not play HLS. A signed address can be resolved at the last moment (`src` as a\n// function), again after an error; the video pauses when it leaves the screen; autoplay waits under reduced motion.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CaptionsGlyph, FullscreenGlyph, PauseGlyph, PipGlyph, PlayGlyph, RetryGlyph, VolumeGlyph } from \"../glyphs\";\nimport { clamp, formatClock, playSafely, useInView, usePrefersReducedMotion } from \"../media\";\nimport { Slider } from \"../slider\";\n\nexport const videoPlayer = tv({\n  slots: {\n    root:\n      \"theme-dark group/player relative isolate w-full overflow-hidden rounded-xl bg-media text-fg-on-media \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[idle]:cursor-none\",\n    video: \"absolute inset-0 h-full w-full object-contain\",\n    poster: \"pointer-events-none absolute inset-0 h-full w-full object-contain\",\n    big:\n      \"absolute left-1/2 top-1/2 z-10 inline-flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full \" +\n      \"bg-scrim-strong text-fg-on-media shadow-lg backdrop-blur-sm transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar:\n      \"absolute inset-x-0 bottom-0 z-20 flex flex-col gap-1 bg-linear-to-t from-scrim-strong via-scrim to-transparent px-3 pb-2 pt-10 \" +\n      \"transition-opacity duration-300 motion-reduce:transition-none group-data-[idle]/player:opacity-0 group-focus-within/player:opacity-100\",\n    row: \"flex items-center gap-1\",\n    button:\n      \"inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1 rounded-md px-1.5 text-xs font-semibold text-fg-on-media \" +\n      \"transition-colors hover:bg-fg-on-media/15 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-fg-on-media/20\",\n    time: \"px-1.5 font-mono text-[11px] tabular-nums text-fg-on-media\",\n    volume: \"hidden w-20 items-center sm:flex\",\n    status: \"absolute inset-0 z-30 flex flex-col items-center justify-center gap-3 bg-scrim-strong p-6 text-center text-sm\",\n    spinner: \"h-10 w-10 animate-spin rounded-full border-2 border-fg-on-media/30 border-t-fg-on-media motion-reduce:animate-none\",\n    overlay: \"absolute inset-0 z-30\",\n  },\n});\n\n/** What `loadHls` resolves to: the module of hls.js (only the members the player uses are typed). */\nexport type HlsModule = {\n  default: {\n    new (config?: Record<string, unknown>): {\n      loadSource(url: string): void;\n      attachMedia(media: HTMLMediaElement): void;\n      destroy(): void;\n      startLoad(): void;\n      recoverMediaError(): void;\n      on(event: string, listener: (event: string, data: { fatal?: boolean; type?: string }) => void): void;\n    };\n    isSupported(): boolean;\n    Events: { ERROR: string };\n    ErrorTypes: { NETWORK_ERROR: string; MEDIA_ERROR: string };\n  };\n};\n\nexport type VideoTrack = {\n  /** The WebVTT file. */\n  src: string;\n  /** Its language, BCP 47 (`\"fr\"`). */\n  srcLang: string;\n  /** Its name in the menu (\"Français\"), passed translated. */\n  label: string;\n  /** `subtitles` (default) or `captions` (with the sounds, for deaf viewers). */\n  kind?: \"subtitles\" | \"captions\";\n  /** Shown from the start. */\n  default?: boolean;\n};\n\nexport type VideoPlayerLabels = {\n  play: string;\n  pause: string;\n  mute: string;\n  unmute: string;\n  volume: string;\n  seek: string;\n  /** The speed button: `(rate) => \"Speed \" + rate + \"×\"`. */\n  speed: (rate: number) => string;\n  /** The captions button: `(track) => \"Subtitles: \" + (track ?? \"off\")`, the track's label or `null` when off. */\n  captions: (track: string | null) => string;\n  fullscreen: string;\n  exitFullscreen: string;\n  pictureInPicture: string;\n  /** Read while the video waits for data. */\n  loading: string;\n  /** The video cannot play. */\n  error: string;\n  /** Tries again (resolves a signed `src` again). */\n  retry: string;\n  /** The seek slider's value: `(time, duration) => \"1:05 of 3:20\"`. */\n  time: (time: string, duration: string) => string;\n};\n\nexport const videoPlayerLabels: VideoPlayerLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  mute: \"Mute\",\n  unmute: \"Unmute\",\n  volume: \"Volume\",\n  seek: \"Seek\",\n  speed: (rate) => `Speed ${rate}×`,\n  captions: (track) => `Subtitles: ${track ?? \"off\"}`,\n  fullscreen: \"Full screen\",\n  exitFullscreen: \"Exit full screen\",\n  pictureInPicture: \"Picture in picture\",\n  loading: \"Loading\",\n  error: \"This video cannot be played.\",\n  retry: \"Try again\",\n  time: (time, duration) => `${time} of ${duration}`,\n};\n\nexport type VideoPlayerProps = {\n  /** The address of the video (MP4, WebM, or an HLS `.m3u8`), or a function that resolves a signed one when needed. */\n  src: string | (() => Promise<string>);\n  /** `auto` (default): HLS when the address ends in `.m3u8`. */\n  type?: \"auto\" | \"hls\" | \"file\";\n  /** Loads hls.js when the browser cannot play HLS itself: `() => import(\"hls.js\")`. Without it, HLS needs Safari. */\n  loadHls?: () => Promise<HlsModule>;\n  /** The accessible name of the player (\"Video: Sunset over Montréal\"), passed translated. */\n  title: string;\n  /** The picture shown before playback. */\n  poster?: string;\n  /** Starts playing, muted (browsers refuse sound without a gesture) — not under reduced motion. */\n  autoPlay?: boolean;\n  /** Starts muted. */\n  muted?: boolean;\n  /** Plays again from the start at the end. */\n  loop?: boolean;\n  /** How much to fetch before playback: `none` (a list of many videos), `metadata` (default), `auto`. */\n  preload?: \"none\" | \"metadata\" | \"auto\";\n  /** Subtitles or captions (WebVTT): the C key and a button cycle through them. */\n  tracks?: readonly VideoTrack[];\n  /** The speeds offered by the speed button. Default `[0.5, 1, 1.25, 1.5, 2]`. */\n  playbackRates?: readonly number[];\n  /** Pauses when less than a quarter of the player is on screen. Default `true`. */\n  pauseWhenHidden?: boolean;\n  /** Shows the controls (default). `false`: a bare video (a background loop) — give it no sound. */\n  controls?: boolean;\n  /** Covers the video and hides the controls: a gate (sign in, unlock, age check) drawn by the app. */\n  overlay?: React.ReactNode;\n  /** The width / height ratio of the frame. Default `\"16 / 9\"`; `\"9 / 16\"` for a vertical video. */\n  aspectRatio?: string;\n  /** Called when playback starts. */\n  onPlay?: () => void;\n  /** Called when playback pauses. */\n  onPause?: () => void;\n  /** Called at the end. */\n  onEnded?: () => void;\n  /** Called as the time moves, in seconds (a few times a second). */\n  onTimeUpdate?: (time: number) => void;\n  /** Called when the video cannot play (a network failure, an expired address). */\n  onError?: (error: unknown) => void;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<VideoPlayerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst RATES = [0.5, 1, 1.25, 1.5, 2] as const;\nconst isHls = (url: string, type: VideoPlayerProps[\"type\"]) => type === \"hls\" || (type !== \"file\" && /\\.m3u8(\\?|#|$)/i.test(url));\n\n/** Shows the text track `index` of a video (and hides the others); -1 hides them all. */\nfunction showTrack(element: HTMLVideoElement, index: number) {\n  const list = element.textTracks;\n  for (let i = 0; i < list.length; i += 1) list[i]!.mode = i === index ? \"showing\" : \"disabled\";\n}\n\n/** A video player with accessible controls, HLS on demand, signed sources, subtitles, speed, full screen. */\nexport function VideoPlayer({\n  src,\n  type = \"auto\",\n  loadHls,\n  title,\n  poster,\n  autoPlay,\n  muted: initiallyMuted = false,\n  loop,\n  preload = \"metadata\",\n  tracks = [],\n  playbackRates = RATES,\n  pauseWhenHidden = true,\n  controls = true,\n  overlay,\n  aspectRatio = \"16 / 9\",\n  onPlay,\n  onPause,\n  onEnded,\n  onTimeUpdate,\n  onError,\n  labels: given,\n  className,\n}: VideoPlayerProps) {\n  const labels = { ...videoPlayerLabels, ...given };\n  const s = videoPlayer();\n  const root = React.useRef<HTMLDivElement>(null);\n  const video = React.useRef<HTMLVideoElement>(null);\n  const reduce = usePrefersReducedMotion();\n  const [resolved, setResolved] = React.useState<{ attempt: number; url: string } | null>(null);\n  const [attempt, setAttempt] = React.useState(0);\n  const [wanted, setWanted] = React.useState(false);\n  const [playing, setPlaying] = React.useState(false);\n  const [time, setTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(0);\n  const [volume, setVolume] = React.useState(1);\n  const [muted, setMuted] = React.useState(initiallyMuted || Boolean(autoPlay));\n  const [rate, setRate] = React.useState(1);\n  const [caption, setCaption] = React.useState(() => tracks.findIndex((t) => t.default));\n  const [fullscreen, setFullscreen] = React.useState(false);\n  const [waiting, setWaiting] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const [idle, setIdle] = React.useState(false);\n  // The poster is an image over the video until the first play: it loads like any image (lazy, decoded once), the\n  // same in every browser — the `poster` attribute is painted late and differently.\n  const [started, setStarted] = React.useState(false);\n  const idleTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const url = typeof src === \"string\" ? src : resolved?.attempt === attempt ? resolved.url : null;\n  const needSource = typeof src === \"function\" && (preload !== \"none\" || wanted || (autoPlay && !reduce));\n\n  // A signed source is resolved when it is needed, and again on \"Try again\".\n  React.useEffect(() => {\n    if (typeof src !== \"function\" || !needSource) return;\n    let live = true;\n    src().then(\n      (next) => live && setResolved({ attempt, url: next }),\n      (error: unknown) => {\n        if (!live) return;\n        setFailed(true);\n        onError?.(error);\n      },\n    );\n    return () => {\n      live = false;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` is a callback, not a reason to resolve again\n  }, [src, needSource, attempt]);\n\n  // Attaches the source: natively, or through hls.js when the browser needs it.\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url) return;\n    let hls: InstanceType<HlsModule[\"default\"]> | null = null;\n    let live = true;\n    const fail = (error: unknown) => {\n      if (!live) return;\n      setFailed(true);\n      onError?.(error);\n    };\n    if (isHls(url, type) && !element.canPlayType(\"application/vnd.apple.mpegurl\")) {\n      if (!loadHls) fail(new Error(\"VideoPlayer: HLS needs `loadHls` in this browser.\"));\n      else\n        loadHls().then(({ default: Hls }) => {\n          if (!live) return;\n          if (!Hls.isSupported()) return fail(new Error(\"VideoPlayer: HLS is not supported here.\"));\n          hls = new Hls({ enableWorker: true, backBufferLength: 60 });\n          hls.on(Hls.Events.ERROR, (_event, data) => {\n            if (!data.fatal) return;\n            if (data.type === Hls.ErrorTypes.NETWORK_ERROR) hls?.startLoad();\n            else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) hls?.recoverMediaError();\n            else fail(data);\n          });\n          hls.loadSource(url);\n          hls.attachMedia(element);\n        }, fail);\n    } else element.src = url;\n    return () => {\n      live = false;\n      hls?.destroy();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `onError` and `loadHls` are callbacks\n  }, [url, type]);\n\n  // Plays once the source is there, when it was asked for (a click before a signed source resolved, an autoplay).\n  React.useEffect(() => {\n    const element = video.current;\n    if (!element || !url || !(wanted || (autoPlay && !reduce))) return;\n    playSafely(element);\n  }, [url, wanted, autoPlay, reduce]);\n\n  React.useEffect(() => {\n    if (video.current) showTrack(video.current, caption);\n  }, [caption, tracks.length]);\n\n  React.useEffect(() => {\n    const change = () => setFullscreen(document.fullscreenElement === root.current);\n    document.addEventListener(\"fullscreenchange\", change);\n    return () => document.removeEventListener(\"fullscreenchange\", change);\n  }, []);\n  React.useEffect(() => () => clearTimeout(idleTimer.current), []);\n\n  useInView(root, (visible) => !visible && video.current && !video.current.paused && video.current.pause(), pauseWhenHidden);\n\n  const play = () => {\n    setWanted(true);\n    setFailed(false);\n    playSafely(video.current);\n  };\n  const toggle = () => (playing ? video.current?.pause() : play());\n  const seek = (to: number) => {\n    if (!video.current) return;\n    video.current.currentTime = clamp(to, 0, duration || video.current.duration || 0);\n    setTime(video.current.currentTime);\n  };\n  const changeVolume = (to: number) => {\n    if (!video.current) return;\n    const next = clamp(to, 0, 1);\n    video.current.volume = next;\n    video.current.muted = next === 0;\n    setVolume(next);\n    setMuted(next === 0);\n  };\n  const toggleMute = () => {\n    if (!video.current) return;\n    if (muted && volume === 0) changeVolume(0.5);\n    video.current.muted = !muted;\n    setMuted(!muted);\n  };\n  const cycleRate = () => {\n    const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;\n    if (video.current) video.current.playbackRate = next;\n    setRate(next);\n  };\n  const cycleCaption = () => tracks.length > 0 && setCaption((c) => (c + 2) % (tracks.length + 1) - 1);\n  const toggleFullscreen = () => {\n    const element = root.current;\n    if (!element) return;\n    if (document.fullscreenElement) void document.exitFullscreen();\n    else if (element.requestFullscreen) void element.requestFullscreen();\n    else (video.current as HTMLVideoElement & { webkitEnterFullscreen?: () => void })?.webkitEnterFullscreen?.();\n  };\n  const pip = () => {\n    if (document.pictureInPictureElement) void document.exitPictureInPicture();\n    else void video.current?.requestPictureInPicture?.();\n  };\n  const wake = () => {\n    setIdle(false);\n    clearTimeout(idleTimer.current);\n    if (playing) idleTimer.current = setTimeout(() => setIdle(true), 2500);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const inControl = target.getAttribute(\"role\") === \"slider\";\n    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;\n    const now = video.current?.currentTime ?? 0;\n    const actions: Record<string, (() => void) | undefined> = {\n      \" \": target.tagName === \"BUTTON\" ? undefined : toggle,\n      k: toggle,\n      j: () => seek(now - 10),\n      l: () => seek(now + 10),\n      m: toggleMute,\n      f: toggleFullscreen,\n      c: tracks.length ? cycleCaption : undefined,\n      ArrowLeft: inControl ? undefined : () => seek(now - 5),\n      ArrowRight: inControl ? undefined : () => seek(now + 5),\n      ArrowUp: inControl ? undefined : () => changeVolume(volume + 0.1),\n      ArrowDown: inControl ? undefined : () => changeVolume(volume - 0.1),\n      Home: inControl ? undefined : () => seek(0),\n      End: inControl ? undefined : () => seek(duration),\n    };\n    const action = /^[0-9]$/.test(key) && !inControl ? () => seek((Number(key) / 10) * duration) : actions[key];\n    if (!action || event.metaKey || event.ctrlKey || event.altKey) return;\n    event.preventDefault();\n    action();\n    wake();\n  };\n\n  const showControls = controls && !overlay;\n  const pipSupported = typeof document !== \"undefined\" && \"pictureInPictureEnabled\" in document && document.pictureInPictureEnabled;\n\n  return (\n    <div\n      ref={root}\n      role=\"region\"\n      aria-label={title}\n      tabIndex={showControls ? 0 : undefined}\n      data-idle={idle && playing ? \"\" : undefined}\n      data-state={playing ? \"playing\" : \"paused\"}\n      className={s.root({ className })}\n      style={{ aspectRatio }}\n      onKeyDown={showControls ? onKeyDown : undefined}\n      onPointerMove={showControls ? wake : undefined}\n      onPointerLeave={() => playing && setIdle(true)}\n    >\n      <video\n        ref={video}\n        className={s.video()}\n        preload={preload}\n        loop={loop}\n        muted={muted}\n        playsInline\n        crossOrigin={tracks.length ? \"anonymous\" : undefined}\n        onClick={showControls ? toggle : undefined}\n        onPlay={() => {\n          setStarted(true);\n          setPlaying(true);\n          wake();\n          onPlay?.();\n        }}\n        onPause={() => {\n          setPlaying(false);\n          setIdle(false);\n          onPause?.();\n        }}\n        onEnded={() => onEnded?.()}\n        onTimeUpdate={(event) => {\n          setTime(event.currentTarget.currentTime);\n          onTimeUpdate?.(event.currentTarget.currentTime);\n        }}\n        onDurationChange={(event) => setDuration(Number.isFinite(event.currentTarget.duration) ? event.currentTarget.duration : 0)}\n        onWaiting={() => setWaiting(true)}\n        onPlaying={() => setWaiting(false)}\n        onCanPlay={() => setWaiting(false)}\n        onError={(event) => {\n          setFailed(true);\n          onError?.(event.currentTarget.error);\n        }}\n      >\n        {tracks.map((track) => (\n          <track key={track.src} src={track.src} srcLang={track.srcLang} label={track.label} kind={track.kind ?? \"subtitles\"} default={track.default} />\n        ))}\n      </video>\n\n      {poster && !started ? <img src={poster} alt=\"\" aria-hidden decoding=\"async\" className={s.poster()} /> : null}\n\n      {showControls && !playing && !failed && !waiting && (\n        <button type=\"button\" className={s.big()} aria-label={labels.play} onClick={play}>\n          <PlayGlyph className=\"ml-1 h-7 w-7\" />\n        </button>\n      )}\n\n      {waiting && !failed && (\n        <div className=\"pointer-events-none absolute inset-0 z-10 flex items-center justify-center\">\n          <span className={s.spinner()} aria-hidden />\n          <span role=\"status\" className=\"sr-only\">\n            {labels.loading}\n          </span>\n        </div>\n      )}\n\n      {failed && (\n        <div role=\"alert\" className={s.status()}>\n          <p>{labels.error}</p>\n          <button\n            type=\"button\"\n            className={s.button({ className: \"border border-fg-on-media/40 px-3\" })}\n            onClick={() => {\n              setFailed(false);\n              setAttempt((a) => a + 1);\n              video.current?.load();\n            }}\n          >\n            <RetryGlyph className=\"h-4 w-4\" />\n            {labels.retry}\n          </button>\n        </div>\n      )}\n\n      {overlay ? <div className={s.overlay()}>{overlay}</div> : null}\n\n      {showControls && (\n        <div className={s.bar()}>\n          <Slider\n            label={labels.seek}\n            min={0}\n            max={duration || 1}\n            step={0.1}\n            value={Math.min(time, duration || 1)}\n            onValueChange={seek}\n            formatValue={(v) => labels.time(formatClock(v), formatClock(duration))}\n            disabled={!duration}\n            className=\"[&_[role=slider]]:h-4 [&_[role=slider]]:w-4\"\n          />\n          <div className={s.row()}>\n            <button type=\"button\" className={s.button()} aria-label={playing ? labels.pause : labels.play} onClick={toggle}>\n              {playing ? <PauseGlyph className=\"h-5 w-5\" /> : <PlayGlyph className=\"h-5 w-5\" />}\n            </button>\n            <button type=\"button\" className={s.button()} aria-label={muted ? labels.unmute : labels.mute} onClick={toggleMute}>\n              <VolumeGlyph muted={muted} className=\"h-5 w-5\" />\n            </button>\n            <div className={s.volume()}>\n              <Slider label={labels.volume} min={0} max={1} step={0.05} value={muted ? 0 : volume} onValueChange={changeVolume} formatValue={(v) => `${Math.round(v * 100)} %`} className=\"w-full\" />\n            </div>\n            <span className={s.time()} aria-hidden>\n              {formatClock(time)} / {formatClock(duration)}\n            </span>\n            <span className=\"flex-1\" />\n            {playbackRates.length > 1 && (\n              <button type=\"button\" className={s.button()} aria-label={labels.speed(rate)} onClick={cycleRate}>\n                {rate}×\n              </button>\n            )}\n            {tracks.length > 0 && (\n              <button type=\"button\" className={s.button()} aria-pressed={caption >= 0} aria-label={labels.captions(caption >= 0 ? (tracks[caption]?.label ?? null) : null)} onClick={cycleCaption}>\n                <CaptionsGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            {pipSupported && (\n              <button type=\"button\" className={s.button()} aria-label={labels.pictureInPicture} onClick={pip}>\n                <PipGlyph className=\"h-5 w-5\" />\n              </button>\n            )}\n            <button type=\"button\" className={s.button()} aria-label={fullscreen ? labels.exitFullscreen : labels.fullscreen} onClick={toggleFullscreen}>\n              <FullscreenGlyph exit={fullscreen} className=\"h-5 w-5\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yazakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -518,7 +518,7 @@
   ],
   "peerDependencies": {
     "@krizaka/query": ">=0.1.0",
-    "@krizaka/tailwind": ">=3.1.0",
+    "@krizaka/tailwind": ">=3.3.0",
     "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
     "expo-video": ">=2",
@@ -571,8 +571,8 @@
     "vitest": "^4.1.11",
     "zod": "^4.6.5",
     "@krizaka/query": "0.1.0",
-    "@krizaka/tokens": "3.1.0",
-    "@krizaka/config": "0.2.0"
+    "@krizaka/tokens": "3.3.0",
+    "@krizaka/config": "0.3.0"
   },
   "engines": {
     "node": ">=20"
@@ -622,7 +622,7 @@
     {
       "name": "./native (bundled into the app by Metro, never downloaded: a regression guard, not a budget)",
       "path": "dist/native.js",
-      "limit": "21.5 kB",
+      "limit": "31.5 kB",
       "gzip": true
     },
     {
@@ -920,7 +920,7 @@
     {
       "name": "./radio-group",
       "path": "dist/radio-group.js",
-      "limit": "11 kB",
+      "limit": "12.5 kB",
       "gzip": true,
       "ignore": [
         "tailwind-variants",
@@ -1160,7 +1160,7 @@
     {
       "name": "./date-picker",
       "path": "dist/date-picker.js",
-      "limit": "29 kB",
+      "limit": "35 kB",
       "gzip": true,
       "ignore": [
         "tailwind-variants",
@@ -1345,7 +1345,7 @@
     {
       "name": "./mascot-quote",
       "path": "dist/mascot-quote.js",
-      "limit": "4.8 kB",
+      "limit": "5 kB",
       "gzip": true,
       "ignore": [
         "tailwind-variants",

package/registry/cn.json

@@ -53,7 +53,7 @@
   "files": [
     {
       "path": "cn.ts",
-      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { cn as merge } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return merge(clsx(inputs)) ?? \"\";\n}\n"
+      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { cnMerge, type TWMergeConfig } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * The preset's own utilities, told to the merge engine: the material (BRAND.md §6: `bg-sheen`, `bg-fill-shade`,\n * `bg-halo` are background images; `shadow-raised` · `-floating` · `-overlay` · `-glow` are shadows; `inset-shadow-edge`\n * · `-edge-fill` · `-well` are inset shadows). Unknown, tailwind-merge would take `bg-sheen` for a colour and drop the\n * `bg-surface-2` it lies on.\n */\nexport const twMergeConfig: TWMergeConfig = {\n  extend: {\n    classGroups: {\n      \"bg-image\": [\"bg-sheen\", \"bg-fill-shade\", \"bg-halo\"],\n      shadow: [\"shadow-raised\", \"shadow-floating\", \"shadow-overlay\", \"shadow-glow\", \"shadow-glow-lg\"],\n      \"inset-shadow\": [\"inset-shadow-edge\", \"inset-shadow-edge-fill\", \"inset-shadow-well\"],\n    },\n  },\n};\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return cnMerge(clsx(inputs))({ twMergeConfig }) ?? \"\";\n}\n"
     }
   ],
   "dependencies": [

package/registry/combobox.json

@@ -6,7 +6,7 @@
   "description": "A text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.",
   "status": "beta",
   "category": "forms",
-  "platforms": "web",
+  "platforms": "both",
   "whenToUse": [
     "To choose among many values the person knows by name: a creator, a country, a model, a playlist.",
     "With `onSearch` when the values live on a server (debounced, the previous request aborted).",
@@ -269,7 +269,229 @@
       }
     ]
   },
-  "native": null,
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { Combobox } from \"@krizaka/ui/native\";",
+    "differences": [
+      "A field that opens a `Sheet` with a search box and the matching options: radios for one value, checkboxes and a Done button with `multiple`.",
+      "`onSearch(query, signal)` is debounced (250 ms) and aborted by a newer query, as on the web; no `creatable` yet."
+    ],
+    "props": [
+      {
+        "component": "Select",
+        "description": "One choice among many — the web `<select>`: a field that opens a sheet of options; picking one closes it.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (the field's name).",
+            "required": true
+          },
+          {
+            "name": "options",
+            "type": "readonly SelectOption[]",
+            "default": null,
+            "description": "The choices.",
+            "required": true
+          },
+          {
+            "name": "defaultValue",
+            "type": "string | null",
+            "default": "null",
+            "description": "The chosen value at first, uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "string",
+            "default": null,
+            "description": "An error under the field: a danger edge, read and announced. Replaces the hint.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the field.",
+            "required": false
+          },
+          {
+            "name": "onBlur",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Called when the sheet closes (the field is left).",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string) => void)",
+            "default": null,
+            "description": "Called with the value picked.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "Shown while nothing is chosen (\"Choose a category\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "sheetTitle",
+            "type": "string",
+            "default": null,
+            "description": "The sheet's title. Default: the label.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string | null",
+            "default": null,
+            "description": "The chosen value (controlled); `null` or `\"\"` for none.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Combobox",
+        "description": "A choice among many, searched: a field that opens a sheet with a search box and the matching options.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The visible label, passed translated (the field's name).",
+            "required": true
+          },
+          {
+            "name": "disabled",
+            "type": "boolean",
+            "default": null,
+            "description": "Not available.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "string",
+            "default": null,
+            "description": "An error under the field: a danger edge, read and announced. Replaces the hint.",
+            "required": false
+          },
+          {
+            "name": "hint",
+            "type": "string",
+            "default": null,
+            "description": "A help text under the field.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<ComboboxLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "multiple",
+            "type": "boolean",
+            "default": null,
+            "description": "Several values (`string[]`, checkboxes, a Done button); one by default.",
+            "required": false
+          },
+          {
+            "name": "onBlur",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Called when the sheet closes (the field is left).",
+            "required": false
+          },
+          {
+            "name": "onSearch",
+            "type": "((query: string, signal: AbortSignal) => Promise<readonly SelectOption[]>)",
+            "default": null,
+            "description": "Fetches the options for a query (debounced 250 ms, aborted by a newer one).",
+            "required": false
+          },
+          {
+            "name": "onValueChange",
+            "type": "((value: string | string[]) => void)",
+            "default": null,
+            "description": "Called with the value — or the values — chosen.",
+            "required": false
+          },
+          {
+            "name": "options",
+            "type": "readonly SelectOption[]",
+            "default": "[]",
+            "description": "The options, filtered by what is typed.",
+            "required": false
+          },
+          {
+            "name": "placeholder",
+            "type": "string",
+            "default": null,
+            "description": "Shown while nothing is chosen (\"Choose a category\"), passed translated.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last, on the field.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "string | readonly string[] | null",
+            "default": null,
+            "description": "The chosen value(s) (controlled): a string, or strings with `multiple`.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "search",
+        "title": "Search",
+        "description": "Cities filtered as you type.",
+        "path": "examples/combobox/native/search.tsx",
+        "module": "@krizaka/ui/registry/examples/combobox/native/search",
+        "code": "import { Combobox } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nconst CITIES = [\"Montréal\", \"Québec\", \"Laval\", \"Gatineau\", \"Sherbrooke\", \"Trois-Rivières\"].map((c) => ({ value: c.toLowerCase(), label: c }));\n\n// A choice among many, searched in a sheet: what is typed filters the options.\nexport default function NativeComboboxSearch() {\n  const [city, setCity] = React.useState<string>(\"montréal\");\n  return (\n    <View style={{ width: 300 }}>\n      <Combobox label=\"City\" placeholder=\"Choose a city\" options={CITIES} value={city} onValueChange={(v) => setCity(String(v))} />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/combobox/native/search.dark.png",
+          "light": "examples/combobox/native/search.light.png"
+        }
+      },
+      {
+        "name": "multiple",
+        "title": "Several values",
+        "description": "Interests as checkboxes; the field lists them.",
+        "path": "examples/combobox/native/multiple.tsx",
+        "module": "@krizaka/ui/registry/examples/combobox/native/multiple",
+        "code": "import { Combobox } from \"@krizaka/ui/native\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nconst TOPICS = [\"Music\", \"Sport\", \"Art\", \"Cooking\", \"Gaming\", \"Travel\"].map((t) => ({ value: t.toLowerCase(), label: t }));\n\n// Several values: checkboxes in the sheet, Done closes it; the field lists the choices.\nexport default function NativeComboboxMultiple() {\n  const [topics, setTopics] = React.useState<string[]>([\"music\", \"travel\"]);\n  return (\n    <View style={{ width: 300 }}>\n      <Combobox label=\"Interests\" multiple options={TOPICS} value={topics} onValueChange={(v) => setTopics(Array.isArray(v) ? v : [v])} />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/combobox/native/multiple.dark.png",
+          "light": "examples/combobox/native/multiple.light.png"
+        }
+      }
+    ]
+  },
   "files": [
     {
       "path": "combobox/combobox.tsx",
@@ -281,7 +503,7 @@
     },
     {
       "path": "combobox/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Combobox\",\n  summary: \"A text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"web\",\n  whenToUse: [\n    \"To choose among many values the person knows by name: a creator, a country, a model, a playlist.\",\n    \"With `onSearch` when the values live on a server (debounced, the previous request aborted).\",\n    \"With `multiple` for several values (collaborators, categories), and `creatable` when a new one can be added.\",\n  ],\n  whenNotToUse: [\n    { when: \"For fewer than about seven options known in advance: radios or a select.\", use: \"radio-group\" },\n    { when: \"For free words without a closed list (tags, keywords): a tag input.\", use: \"tag-input\" },\n    { when: \"To run a search and show results: a search field.\", use: \"search-field\" },\n  ],\n  bestPractices: [\n    \"Write `label` as the question (“Collaborators”), the `placeholder` as an example (“Type a name”).\",\n    \"Return at most 20 options from `onSearch`; put the best match first.\",\n    \"Give options a `description` when names collide (two creators named Eric: their handles).\",\n    \"Set `maxSelected` when the product has a limit, and say it in `hint`.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Arrow Down / Arrow Up\", action: \"Open the list and move the active option.\" },\n      { keys: \"Home / End\", action: \"First or last option, when the list is open.\" },\n      { keys: \"Enter\", action: \"Choose the active option (or create the typed value).\" },\n      { keys: \"Esc\", action: \"Close the list; for one value, restore its label.\" },\n      { keys: \"Backspace\", action: \"In an empty input, remove the last chip.\" },\n    ],\n    notes: [\n      \"The ARIA 1.2 combobox pattern: the focus stays in the input, `aria-activedescendant` points at the active option of the `listbox`.\",\n      \"The number of results is announced in a polite live region (`labels.results`).\",\n      \"Chosen options carry `aria-selected`; each chip's remove button is named (“Remove Eric”).\",\n      \"The label is a real `<label>`; `hint` and `error` are wired with `aria-describedby`, `error` sets `aria-invalid`.\",\n    ],\n  },\n  related: [\"tag-input\", \"search-field\", \"field\", \"chip\", \"command\"],\n  web: {\n    imports: [\"Combobox\"],\n    examples: [\n      { name: \"async\", title: \"From a server\", description: \"`onSearch`: creators fetched as you type, debounced, the stale request aborted.\" },\n      { name: \"multiple\", title: \"Several values\", description: \"Collaborators as chips; Backspace removes the last one, at most three.\" },\n      { name: \"creatable\", title: \"Create a value\", description: \"Pick a playlist or create one from what was typed.\" },\n      { name: \"invalid\", title: \"With an error\", description: \"A required choice left empty: the error is read with the field.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Combobox\",\n  summary: \"A text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To choose among many values the person knows by name: a creator, a country, a model, a playlist.\",\n    \"With `onSearch` when the values live on a server (debounced, the previous request aborted).\",\n    \"With `multiple` for several values (collaborators, categories), and `creatable` when a new one can be added.\",\n  ],\n  whenNotToUse: [\n    { when: \"For fewer than about seven options known in advance: radios or a select.\", use: \"radio-group\" },\n    { when: \"For free words without a closed list (tags, keywords): a tag input.\", use: \"tag-input\" },\n    { when: \"To run a search and show results: a search field.\", use: \"search-field\" },\n  ],\n  bestPractices: [\n    \"Write `label` as the question (“Collaborators”), the `placeholder` as an example (“Type a name”).\",\n    \"Return at most 20 options from `onSearch`; put the best match first.\",\n    \"Give options a `description` when names collide (two creators named Eric: their handles).\",\n    \"Set `maxSelected` when the product has a limit, and say it in `hint`.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Arrow Down / Arrow Up\", action: \"Open the list and move the active option.\" },\n      { keys: \"Home / End\", action: \"First or last option, when the list is open.\" },\n      { keys: \"Enter\", action: \"Choose the active option (or create the typed value).\" },\n      { keys: \"Esc\", action: \"Close the list; for one value, restore its label.\" },\n      { keys: \"Backspace\", action: \"In an empty input, remove the last chip.\" },\n    ],\n    notes: [\n      \"The ARIA 1.2 combobox pattern: the focus stays in the input, `aria-activedescendant` points at the active option of the `listbox`.\",\n      \"The number of results is announced in a polite live region (`labels.results`).\",\n      \"Chosen options carry `aria-selected`; each chip's remove button is named (“Remove Eric”).\",\n      \"The label is a real `<label>`; `hint` and `error` are wired with `aria-describedby`, `error` sets `aria-invalid`.\",\n    ],\n  },\n  related: [\"tag-input\", \"search-field\", \"field\", \"chip\", \"command\"],\n  web: {\n    imports: [\"Combobox\"],\n    examples: [\n      { name: \"async\", title: \"From a server\", description: \"`onSearch`: creators fetched as you type, debounced, the stale request aborted.\" },\n      { name: \"multiple\", title: \"Several values\", description: \"Collaborators as chips; Backspace removes the last one, at most three.\" },\n      { name: \"creatable\", title: \"Create a value\", description: \"Pick a playlist or create one from what was typed.\" },\n      { name: \"invalid\", title: \"With an error\", description: \"A required choice left empty: the error is read with the field.\" },\n    ],\n  },\n  native: {\n    imports: [\"Combobox\"],\n    differences: [\n      \"A field that opens a `Sheet` with a search box and the matching options: radios for one value, checkboxes and a Done button with `multiple`.\",\n      \"`onSearch(query, signal)` is debounced (250 ms) and aborted by a newer query, as on the web; no `creatable` yet.\",\n    ],\n    examples: [\n      { name: \"search\", title: \"Search\", description: \"Cities filtered as you type.\" },\n      { name: \"multiple\", title: \"Several values\", description: \"Interests as checkboxes; the field lists them.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "glyphs.tsx",