tempest-react-sdk 0.77.0 → 0.79.0

package/dist/components/VideoPlayer/VideoPlayer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.cjs","names":[],"sources":["../../../src/components/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — `src` takes a URL or a Blob, and\n * every other prop is a facet of playing it: durationMs (a MediaRecorder WebM may\n * carry none), poster, captions, aspect ratio, the rate control and its presets,\n * pitch, fullscreen, autoPlay/loop/muted, onEnded/onError, plus the actions slot and\n * locale. The body is the transport state machine — object-URL lifecycle, seek, rate,\n * volume — around one video element ref.\n */\nimport { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { formatDuration } from \"@/audio/duration\";\nimport { useFullscreen } from \"@/hooks/use-fullscreen\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport { DEFAULT_PLAYBACK_RATES } from \"./playback-rates\";\nimport styles from \"./VideoPlayer.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `onRateChange` is a real collision, not tidiness: React types it on every\n * element as the media `ratechange` handler, `ReactEventHandler`. Ours carries\n * the rate the viewer picked, and a `(rate: number) => void` is not assignable\n * to a handler that receives an event — same shape of clash as `Input`'s `size`\n * against `HTMLInputElement.size`. The DOM one is useless on a `<div>` anyway:\n * the event fires on the media element inside, which this component owns.\n */\ntype OverriddenDomProps = \"children\" | \"onRateChange\";\n\n/** One caption or subtitle file, rendered as a `<track>`. */\nexport interface VideoTextTrack {\n    /** URL of the WebVTT file. */\n    src: string;\n    /** BCP 47 language tag, e.g. `\"pt-BR\"`. */\n    srcLang: string;\n    /** Name shown in the browser's own track menu. */\n    label: string;\n    /** Track kind. Default `\"captions\"`. */\n    kind?: \"subtitles\" | \"captions\" | \"descriptions\" | \"chapters\" | \"metadata\";\n    /** Whether this track is on unless the viewer picks another. */\n    default?: boolean;\n}\n\nexport interface VideoPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a session that records twenty clips does not leak\n     * twenty URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useVideoRecorder` always\n     * does. Without it the element's own `duration` is used, and a fresh\n     * `MediaRecorder` blob may report `Infinity` until it is probed for one.\n     */\n    durationMs?: number;\n    /** Still shown before playback. Pair it with `captureFrame` from `/imaging`. */\n    poster?: string;\n    /** Caption and subtitle files. */\n    tracks?: readonly VideoTextTrack[];\n    /** Frame shape while the video has no intrinsic size yet. Default `16 / 9`. */\n    aspectRatio?: number;\n    /**\n     * Playback rate. Controlled when passed with `onRateChange`.\n     *\n     * Written to both `playbackRate` and `defaultPlaybackRate`, because the\n     * element resets the first to the second when a source loads — a player that\n     * only writes `playbackRate` silently drops back to 1× on every clip change.\n     */\n    rate?: number;\n    /** Presets the control offers. `[]` hides it. Default {@link DEFAULT_PLAYBACK_RATES}. */\n    rates?: readonly number[];\n    /** Called with the rate the viewer picked. */\n    onRateChange?: (rate: number) => void;\n    /** Let the pitch rise with the rate (`preservesPitch = false`). Default `false`. */\n    shiftPitch?: boolean;\n    /** Offer a fullscreen button where the browser supports it. Default `true`. */\n    fullscreen?: boolean;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Start muted. Autoplay without a gesture needs this. Default `false`. */\n    muted?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered at the end of the control row — a download button, a delete button. */\n    actions?: ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": {\n        play: \"Tocar\",\n        pause: \"Pausar\",\n        seek: \"Posição\",\n        mute: \"Silenciar\",\n        unmute: \"Ativar som\",\n        volume: \"Volume\",\n        rate: \"Velocidade\",\n        enterFullscreen: \"Tela cheia\",\n        exitFullscreen: \"Sair da tela cheia\",\n    },\n    en: {\n        play: \"Play\",\n        pause: \"Pause\",\n        seek: \"Seek\",\n        mute: \"Mute\",\n        unmute: \"Unmute\",\n        volume: \"Volume\",\n        rate: \"Speed\",\n        enterFullscreen: \"Full screen\",\n        exitFullscreen: \"Exit full screen\",\n    },\n} as const;\n\n/**\n * Label a rate the way a viewer reads it.\n *\n * @param rate The multiplier.\n * @param locale Which decimal separator to use.\n * @returns e.g. `\"1,5×\"` in pt-BR, `\"1.5×\"` in English.\n */\nfunction rateLabel(rate: number, locale: \"pt-BR\" | \"en\"): string {\n    return `${rate.toLocaleString(locale === \"en\" ? \"en-US\" : \"pt-BR\")}×`;\n}\n\n/**\n * Playback transport for one video: play/pause, seek, volume, speed, fullscreen.\n *\n * Built on a real `<video>` element, and deliberately **not** an overlay: the\n * controls sit in a bar under the frame rather than on top of it. Controls drawn\n * over video have to earn their contrast against arbitrary pixels, which no\n * `--tempest-*` token can promise — every text token in this SDK is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction.\n *\n * The seek bar, the volume slider and the speed picker are bare `<input>` and\n * `<select>` elements rather than the SDK's `Slider` and `Select`: those are form\n * fields, with a label row and a value badge, and a transport wants neither. The\n * native elements keep the keyboard and screen-reader behaviour that matters here\n * for free.\n *\n * @example\n * const rec = useVideoRecorder(screen.stream);\n * {rec.recording && (\n *     <VideoPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function VideoPlayer({\n    src,\n    durationMs,\n    poster,\n    tracks,\n    aspectRatio = 16 / 9,\n    rate,\n    rates = DEFAULT_PLAYBACK_RATES,\n    onRateChange,\n    shiftPitch = false,\n    fullscreen = true,\n    autoPlay = false,\n    loop = false,\n    muted = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: VideoPlayerProps) {\n    const strings = STRINGS[locale];\n    const shell = useRef<HTMLDivElement | null>(null);\n    const video = useRef<HTMLVideoElement | null>(null);\n    const probed = useRef(false);\n\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const [ownRate, setOwnRate] = useState(rate ?? 1);\n    const [volume, setVolume] = useState(1);\n    const [silent, setSilent] = useState(muted);\n\n    const immersive = useFullscreen(shell);\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    const effectiveRate = rate ?? ownRate;\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    /**\n     * Keep the rate on the element, and keep it across sources.\n     *\n     * `defaultPlaybackRate` is written alongside `playbackRate` because the load\n     * algorithm copies the former onto the latter: writing only `playbackRate`\n     * means the rate the viewer chose is silently lost on the next clip.\n     */\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.defaultPlaybackRate = effectiveRate;\n        node.playbackRate = effectiveRate;\n        node.preservesPitch = !shiftPitch;\n    }, [effectiveRate, shiftPitch, url]);\n\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.volume = volume;\n        node.muted = silent;\n    }, [volume, silent, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after\n     * which it knows the real length. It runs at most once per source, and only\n     * when the caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = video.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onProbed = (): void => {\n            node.removeEventListener(\"timeupdate\", onProbed);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onProbed);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = video.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void Promise.resolve(node.play())\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = video.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    const changeRate = (next: number): void => {\n        if (rate === undefined) setOwnRate(next);\n        onRateChange?.(next);\n    };\n\n    return (\n        <div\n            ref={shell}\n            className={cn(styles.player, immersive.isFullscreen && styles.immersive, className)}\n            {...rest}\n        >\n            <div className={styles.frame} style={{ aspectRatio }}>\n                <video\n                    ref={video}\n                    className={styles.video}\n                    src={url ?? undefined}\n                    poster={poster}\n                    loop={loop}\n                    autoPlay={autoPlay}\n                    playsInline\n                    preload=\"metadata\"\n                    onLoadedMetadata={handleMetadata}\n                    onDurationChange={handleMetadata}\n                    onTimeUpdate={() => {\n                        const node = video.current;\n                        if (node) setCurrentMs(node.currentTime * 1000);\n                    }}\n                    onPlay={() => setPlaying(true)}\n                    onPause={() => setPlaying(false)}\n                    onVolumeChange={() => {\n                        const node = video.current;\n                        if (!node) return;\n                        setVolume(node.volume);\n                        setSilent(node.muted);\n                    }}\n                    onEnded={() => {\n                        setPlaying(false);\n                        onEnded?.();\n                    }}\n                    onError={(event) => onError?.(event)}\n                >\n                    {tracks?.map((track) => (\n                        <track\n                            key={`${track.kind ?? \"captions\"}-${track.srcLang}-${track.src}`}\n                            kind={track.kind ?? \"captions\"}\n                            src={track.src}\n                            srcLang={track.srcLang}\n                            label={track.label}\n                            default={track.default}\n                        />\n                    ))}\n                </video>\n            </div>\n\n            <div className={styles.chrome}>\n                <button\n                    type=\"button\"\n                    className={styles.transport}\n                    onClick={toggle}\n                    disabled={disabled || !url}\n                    aria-label={playing ? strings.pause : strings.play}\n                    title={playing ? strings.pause : strings.play}\n                >\n                    {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.seek}\n                    min={0}\n                    max={seekable ? Math.round(totalMs) : 0}\n                    step={100}\n                    value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                    onChange={(event) => seek(Number(event.target.value))}\n                    disabled={disabled || !seekable}\n                    aria-label={strings.seek}\n                    aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n                />\n\n                <span className={styles.time}>\n                    <span>{formatDuration(currentMs)}</span>\n                    <span aria-hidden=\"true\">/</span>\n                    <span>{formatDuration(totalMs)}</span>\n                </span>\n\n                <button\n                    type=\"button\"\n                    className={styles.icon}\n                    onClick={() => setSilent((was) => !was)}\n                    disabled={disabled}\n                    aria-label={silent ? strings.unmute : strings.mute}\n                    title={silent ? strings.unmute : strings.mute}\n                >\n                    {silent ? <VolumeX size={16} aria-hidden /> : <Volume2 size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.volume}\n                    min={0}\n                    max={1}\n                    step={0.05}\n                    value={silent ? 0 : volume}\n                    onChange={(event) => {\n                        const next = Number(event.target.value);\n                        setVolume(next);\n                        setSilent(next === 0);\n                    }}\n                    disabled={disabled}\n                    aria-label={strings.volume}\n                />\n\n                {rates.length > 0 && (\n                    <select\n                        className={styles.rate}\n                        value={effectiveRate}\n                        onChange={(event) => changeRate(Number(event.target.value))}\n                        disabled={disabled}\n                        aria-label={strings.rate}\n                        title={strings.rate}\n                    >\n                        {rates.map((option) => (\n                            <option key={option} value={option}>\n                                {rateLabel(option, locale)}\n                            </option>\n                        ))}\n                    </select>\n                )}\n\n                {fullscreen && immersive.supported && (\n                    <button\n                        type=\"button\"\n                        className={styles.icon}\n                        onClick={() => {\n                            void immersive.toggle().catch((error: unknown) => onError?.(error));\n                        }}\n                        disabled={disabled}\n                        aria-label={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                        title={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                    >\n                        {immersive.isFullscreen ? (\n                            <Minimize size={16} aria-hidden />\n                        ) : (\n                            <Maximize size={16} aria-hidden />\n                        )}\n                    </button>\n                )}\n\n                {actions && <span className={styles.actions}>{actions}</span>}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VideoPlayer.cjs","names":["DEFAULT_PLAYBACK_RATES","useRef","useState","useFullscreen","useObjectUrl","cn","styles","Pause","Play","formatDuration","VolumeX","Volume2","Minimize","Maximize","require_cn","require_use_fullscreen","require_use_object_url","require_playback_rates","require_duration","require_VideoPlayer_module","react","react_jsx_runtime","lucide_react","STRINGS","rateLabel","rate","locale","VideoPlayer","rest","strings","shell","video","probed","playing","setPlaying","currentMs","setCurrentMs","elementMs","setElementMs","ownRate","setOwnRate","volume","setVolume","silent","setSilent","muted","immersive","blobUrl","src","url","effectiveRate","totalMs","durationMs","seekable","node","shiftPitch","handleMetadata","onProbed","toggle","onError","error","seek","ms","changeRate","next","onRateChange","className","onEnded","event","tracks","track","disabled","was","rates","option","fullscreen","actions"],"sources":["../../../src/components/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — `src` takes a URL or a Blob, and\n * every other prop is a facet of playing it: durationMs (a MediaRecorder WebM may\n * carry none), poster, captions, aspect ratio, the rate control and its presets,\n * pitch, fullscreen, autoPlay/loop/muted, onEnded/onError, plus the actions slot and\n * locale. The body is the transport state machine — object-URL lifecycle, seek, rate,\n * volume — around one video element ref.\n */\nimport { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { formatDuration } from \"@/audio/duration\";\nimport { useFullscreen } from \"@/hooks/use-fullscreen\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport { DEFAULT_PLAYBACK_RATES } from \"./playback-rates\";\nimport styles from \"./VideoPlayer.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `onRateChange` is a real collision, not tidiness: React types it on every\n * element as the media `ratechange` handler, `ReactEventHandler`. Ours carries\n * the rate the viewer picked, and a `(rate: number) => void` is not assignable\n * to a handler that receives an event — same shape of clash as `Input`'s `size`\n * against `HTMLInputElement.size`. The DOM one is useless on a `<div>` anyway:\n * the event fires on the media element inside, which this component owns.\n */\ntype OverriddenDomProps = \"children\" | \"onRateChange\";\n\n/** One caption or subtitle file, rendered as a `<track>`. */\nexport interface VideoTextTrack {\n    /** URL of the WebVTT file. */\n    src: string;\n    /** BCP 47 language tag, e.g. `\"pt-BR\"`. */\n    srcLang: string;\n    /** Name shown in the browser's own track menu. */\n    label: string;\n    /** Track kind. Default `\"captions\"`. */\n    kind?: \"subtitles\" | \"captions\" | \"descriptions\" | \"chapters\" | \"metadata\";\n    /** Whether this track is on unless the viewer picks another. */\n    default?: boolean;\n}\n\nexport interface VideoPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a session that records twenty clips does not leak\n     * twenty URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useVideoRecorder` always\n     * does. Without it the element's own `duration` is used, and a fresh\n     * `MediaRecorder` blob may report `Infinity` until it is probed for one.\n     */\n    durationMs?: number;\n    /** Still shown before playback. Pair it with `captureFrame` from `/imaging`. */\n    poster?: string;\n    /** Caption and subtitle files. */\n    tracks?: readonly VideoTextTrack[];\n    /** Frame shape while the video has no intrinsic size yet. Default `16 / 9`. */\n    aspectRatio?: number;\n    /**\n     * Playback rate. Controlled when passed with `onRateChange`.\n     *\n     * Written to both `playbackRate` and `defaultPlaybackRate`, because the\n     * element resets the first to the second when a source loads — a player that\n     * only writes `playbackRate` silently drops back to 1× on every clip change.\n     */\n    rate?: number;\n    /** Presets the control offers. `[]` hides it. Default {@link DEFAULT_PLAYBACK_RATES}. */\n    rates?: readonly number[];\n    /** Called with the rate the viewer picked. */\n    onRateChange?: (rate: number) => void;\n    /** Let the pitch rise with the rate (`preservesPitch = false`). Default `false`. */\n    shiftPitch?: boolean;\n    /** Offer a fullscreen button where the browser supports it. Default `true`. */\n    fullscreen?: boolean;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Start muted. Autoplay without a gesture needs this. Default `false`. */\n    muted?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered at the end of the control row — a download button, a delete button. */\n    actions?: ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": {\n        play: \"Tocar\",\n        pause: \"Pausar\",\n        seek: \"Posição\",\n        mute: \"Silenciar\",\n        unmute: \"Ativar som\",\n        volume: \"Volume\",\n        rate: \"Velocidade\",\n        enterFullscreen: \"Tela cheia\",\n        exitFullscreen: \"Sair da tela cheia\",\n    },\n    en: {\n        play: \"Play\",\n        pause: \"Pause\",\n        seek: \"Seek\",\n        mute: \"Mute\",\n        unmute: \"Unmute\",\n        volume: \"Volume\",\n        rate: \"Speed\",\n        enterFullscreen: \"Full screen\",\n        exitFullscreen: \"Exit full screen\",\n    },\n} as const;\n\n/**\n * Label a rate the way a viewer reads it.\n *\n * @param rate The multiplier.\n * @param locale Which decimal separator to use.\n * @returns e.g. `\"1,5×\"` in pt-BR, `\"1.5×\"` in English.\n */\nfunction rateLabel(rate: number, locale: \"pt-BR\" | \"en\"): string {\n    return `${rate.toLocaleString(locale === \"en\" ? \"en-US\" : \"pt-BR\")}×`;\n}\n\n/**\n * Playback transport for one video: play/pause, seek, volume, speed, fullscreen.\n *\n * Built on a real `<video>` element, and deliberately **not** an overlay: the\n * controls sit in a bar under the frame rather than on top of it. Controls drawn\n * over video have to earn their contrast against arbitrary pixels, which no\n * `--tempest-*` token can promise — every text token in this SDK is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction.\n *\n * The seek bar, the volume slider and the speed picker are bare `<input>` and\n * `<select>` elements rather than the SDK's `Slider` and `Select`: those are form\n * fields, with a label row and a value badge, and a transport wants neither. The\n * native elements keep the keyboard and screen-reader behaviour that matters here\n * for free.\n *\n * @example\n * const rec = useVideoRecorder(screen.stream);\n * {rec.recording && (\n *     <VideoPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function VideoPlayer({\n    src,\n    durationMs,\n    poster,\n    tracks,\n    aspectRatio = 16 / 9,\n    rate,\n    rates = DEFAULT_PLAYBACK_RATES,\n    onRateChange,\n    shiftPitch = false,\n    fullscreen = true,\n    autoPlay = false,\n    loop = false,\n    muted = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: VideoPlayerProps) {\n    const strings = STRINGS[locale];\n    const shell = useRef<HTMLDivElement | null>(null);\n    const video = useRef<HTMLVideoElement | null>(null);\n    const probed = useRef(false);\n\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const [ownRate, setOwnRate] = useState(rate ?? 1);\n    const [volume, setVolume] = useState(1);\n    const [silent, setSilent] = useState(muted);\n\n    const immersive = useFullscreen(shell);\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    const effectiveRate = rate ?? ownRate;\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    /**\n     * Keep the rate on the element, and keep it across sources.\n     *\n     * `defaultPlaybackRate` is written alongside `playbackRate` because the load\n     * algorithm copies the former onto the latter: writing only `playbackRate`\n     * means the rate the viewer chose is silently lost on the next clip.\n     */\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.defaultPlaybackRate = effectiveRate;\n        node.playbackRate = effectiveRate;\n        node.preservesPitch = !shiftPitch;\n    }, [effectiveRate, shiftPitch, url]);\n\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.volume = volume;\n        node.muted = silent;\n    }, [volume, silent, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after\n     * which it knows the real length. It runs at most once per source, and only\n     * when the caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = video.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onProbed = (): void => {\n            node.removeEventListener(\"timeupdate\", onProbed);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onProbed);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = video.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void Promise.resolve(node.play())\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = video.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    const changeRate = (next: number): void => {\n        if (rate === undefined) setOwnRate(next);\n        onRateChange?.(next);\n    };\n\n    return (\n        <div\n            ref={shell}\n            className={cn(styles.player, immersive.isFullscreen && styles.immersive, className)}\n            {...rest}\n        >\n            <div className={styles.frame} style={{ aspectRatio }}>\n                <video\n                    ref={video}\n                    className={styles.video}\n                    src={url ?? undefined}\n                    poster={poster}\n                    loop={loop}\n                    autoPlay={autoPlay}\n                    playsInline\n                    preload=\"metadata\"\n                    onLoadedMetadata={handleMetadata}\n                    onDurationChange={handleMetadata}\n                    onTimeUpdate={() => {\n                        const node = video.current;\n                        if (node) setCurrentMs(node.currentTime * 1000);\n                    }}\n                    onPlay={() => setPlaying(true)}\n                    onPause={() => setPlaying(false)}\n                    onVolumeChange={() => {\n                        const node = video.current;\n                        if (!node) return;\n                        setVolume(node.volume);\n                        setSilent(node.muted);\n                    }}\n                    onEnded={() => {\n                        setPlaying(false);\n                        onEnded?.();\n                    }}\n                    onError={(event) => onError?.(event)}\n                >\n                    {tracks?.map((track) => (\n                        <track\n                            key={`${track.kind ?? \"captions\"}-${track.srcLang}-${track.src}`}\n                            kind={track.kind ?? \"captions\"}\n                            src={track.src}\n                            srcLang={track.srcLang}\n                            label={track.label}\n                            default={track.default}\n                        />\n                    ))}\n                </video>\n            </div>\n\n            <div className={styles.chrome}>\n                <button\n                    type=\"button\"\n                    className={styles.transport}\n                    onClick={toggle}\n                    disabled={disabled || !url}\n                    aria-label={playing ? strings.pause : strings.play}\n                    title={playing ? strings.pause : strings.play}\n                >\n                    {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.seek}\n                    min={0}\n                    max={seekable ? Math.round(totalMs) : 0}\n                    step={100}\n                    value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                    onChange={(event) => seek(Number(event.target.value))}\n                    disabled={disabled || !seekable}\n                    aria-label={strings.seek}\n                    aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n                />\n\n                <span className={styles.time}>\n                    <span>{formatDuration(currentMs)}</span>\n                    <span aria-hidden=\"true\">/</span>\n                    <span>{formatDuration(totalMs)}</span>\n                </span>\n\n                <button\n                    type=\"button\"\n                    className={styles.icon}\n                    onClick={() => setSilent((was) => !was)}\n                    disabled={disabled}\n                    aria-label={silent ? strings.unmute : strings.mute}\n                    title={silent ? strings.unmute : strings.mute}\n                >\n                    {silent ? <VolumeX size={16} aria-hidden /> : <Volume2 size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.volume}\n                    min={0}\n                    max={1}\n                    step={0.05}\n                    value={silent ? 0 : volume}\n                    onChange={(event) => {\n                        const next = Number(event.target.value);\n                        setVolume(next);\n                        setSilent(next === 0);\n                    }}\n                    disabled={disabled}\n                    aria-label={strings.volume}\n                />\n\n                {rates.length > 0 && (\n                    <select\n                        className={styles.rate}\n                        value={effectiveRate}\n                        onChange={(event) => changeRate(Number(event.target.value))}\n                        disabled={disabled}\n                        aria-label={strings.rate}\n                        title={strings.rate}\n                    >\n                        {rates.map((option) => (\n                            <option key={option} value={option}>\n                                {rateLabel(option, locale)}\n                            </option>\n                        ))}\n                    </select>\n                )}\n\n                {fullscreen && immersive.supported && (\n                    <button\n                        type=\"button\"\n                        className={styles.icon}\n                        onClick={() => {\n                            void immersive.toggle().catch((error: unknown) => onError?.(error));\n                        }}\n                        disabled={disabled}\n                        aria-label={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                        title={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                    >\n                        {immersive.isFullscreen ? (\n                            <Minimize size={16} aria-hidden />\n                        ) : (\n                            <Maximize size={16} aria-hidden />\n                        )}\n                    </button>\n                )}\n\n                {actions && <span className={styles.actions}>{actions}</span>}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/VideoPlayer/VideoPlayer.js

@@ -69,13 +69,7 @@ function m({ src: m, durationMs: h, poster: g, tracks: _, aspectRatio: v = 16 /
 		e.addEventListener("timeupdate", t), e.currentTime = 1e101;
 	}, ce = () => {
 		let e = P.current;
-		if (e && Y) {
-			if (e.paused) {
-				Promise.resolve(e.play()).then(() => L(!0)).catch((e) => A?.(e));
-				return;
-			}
-			e.pause(), L(!1);
-		}
+		e && Y && (e.paused ? Promise.resolve(e.play()).then(() => L(!0)).catch((e) => A?.(e)) : (e.pause(), L(!1)));
 	}, le = (e) => {
 		let t = P.current;
 		t && Q && (t.currentTime = e / 1e3, z(e));

package/dist/components/VideoPlayer/VideoPlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.js","names":[],"sources":["../../../src/components/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — `src` takes a URL or a Blob, and\n * every other prop is a facet of playing it: durationMs (a MediaRecorder WebM may\n * carry none), poster, captions, aspect ratio, the rate control and its presets,\n * pitch, fullscreen, autoPlay/loop/muted, onEnded/onError, plus the actions slot and\n * locale. The body is the transport state machine — object-URL lifecycle, seek, rate,\n * volume — around one video element ref.\n */\nimport { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { formatDuration } from \"@/audio/duration\";\nimport { useFullscreen } from \"@/hooks/use-fullscreen\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport { DEFAULT_PLAYBACK_RATES } from \"./playback-rates\";\nimport styles from \"./VideoPlayer.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `onRateChange` is a real collision, not tidiness: React types it on every\n * element as the media `ratechange` handler, `ReactEventHandler`. Ours carries\n * the rate the viewer picked, and a `(rate: number) => void` is not assignable\n * to a handler that receives an event — same shape of clash as `Input`'s `size`\n * against `HTMLInputElement.size`. The DOM one is useless on a `<div>` anyway:\n * the event fires on the media element inside, which this component owns.\n */\ntype OverriddenDomProps = \"children\" | \"onRateChange\";\n\n/** One caption or subtitle file, rendered as a `<track>`. */\nexport interface VideoTextTrack {\n    /** URL of the WebVTT file. */\n    src: string;\n    /** BCP 47 language tag, e.g. `\"pt-BR\"`. */\n    srcLang: string;\n    /** Name shown in the browser's own track menu. */\n    label: string;\n    /** Track kind. Default `\"captions\"`. */\n    kind?: \"subtitles\" | \"captions\" | \"descriptions\" | \"chapters\" | \"metadata\";\n    /** Whether this track is on unless the viewer picks another. */\n    default?: boolean;\n}\n\nexport interface VideoPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a session that records twenty clips does not leak\n     * twenty URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useVideoRecorder` always\n     * does. Without it the element's own `duration` is used, and a fresh\n     * `MediaRecorder` blob may report `Infinity` until it is probed for one.\n     */\n    durationMs?: number;\n    /** Still shown before playback. Pair it with `captureFrame` from `/imaging`. */\n    poster?: string;\n    /** Caption and subtitle files. */\n    tracks?: readonly VideoTextTrack[];\n    /** Frame shape while the video has no intrinsic size yet. Default `16 / 9`. */\n    aspectRatio?: number;\n    /**\n     * Playback rate. Controlled when passed with `onRateChange`.\n     *\n     * Written to both `playbackRate` and `defaultPlaybackRate`, because the\n     * element resets the first to the second when a source loads — a player that\n     * only writes `playbackRate` silently drops back to 1× on every clip change.\n     */\n    rate?: number;\n    /** Presets the control offers. `[]` hides it. Default {@link DEFAULT_PLAYBACK_RATES}. */\n    rates?: readonly number[];\n    /** Called with the rate the viewer picked. */\n    onRateChange?: (rate: number) => void;\n    /** Let the pitch rise with the rate (`preservesPitch = false`). Default `false`. */\n    shiftPitch?: boolean;\n    /** Offer a fullscreen button where the browser supports it. Default `true`. */\n    fullscreen?: boolean;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Start muted. Autoplay without a gesture needs this. Default `false`. */\n    muted?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered at the end of the control row — a download button, a delete button. */\n    actions?: ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": {\n        play: \"Tocar\",\n        pause: \"Pausar\",\n        seek: \"Posição\",\n        mute: \"Silenciar\",\n        unmute: \"Ativar som\",\n        volume: \"Volume\",\n        rate: \"Velocidade\",\n        enterFullscreen: \"Tela cheia\",\n        exitFullscreen: \"Sair da tela cheia\",\n    },\n    en: {\n        play: \"Play\",\n        pause: \"Pause\",\n        seek: \"Seek\",\n        mute: \"Mute\",\n        unmute: \"Unmute\",\n        volume: \"Volume\",\n        rate: \"Speed\",\n        enterFullscreen: \"Full screen\",\n        exitFullscreen: \"Exit full screen\",\n    },\n} as const;\n\n/**\n * Label a rate the way a viewer reads it.\n *\n * @param rate The multiplier.\n * @param locale Which decimal separator to use.\n * @returns e.g. `\"1,5×\"` in pt-BR, `\"1.5×\"` in English.\n */\nfunction rateLabel(rate: number, locale: \"pt-BR\" | \"en\"): string {\n    return `${rate.toLocaleString(locale === \"en\" ? \"en-US\" : \"pt-BR\")}×`;\n}\n\n/**\n * Playback transport for one video: play/pause, seek, volume, speed, fullscreen.\n *\n * Built on a real `<video>` element, and deliberately **not** an overlay: the\n * controls sit in a bar under the frame rather than on top of it. Controls drawn\n * over video have to earn their contrast against arbitrary pixels, which no\n * `--tempest-*` token can promise — every text token in this SDK is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction.\n *\n * The seek bar, the volume slider and the speed picker are bare `<input>` and\n * `<select>` elements rather than the SDK's `Slider` and `Select`: those are form\n * fields, with a label row and a value badge, and a transport wants neither. The\n * native elements keep the keyboard and screen-reader behaviour that matters here\n * for free.\n *\n * @example\n * const rec = useVideoRecorder(screen.stream);\n * {rec.recording && (\n *     <VideoPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function VideoPlayer({\n    src,\n    durationMs,\n    poster,\n    tracks,\n    aspectRatio = 16 / 9,\n    rate,\n    rates = DEFAULT_PLAYBACK_RATES,\n    onRateChange,\n    shiftPitch = false,\n    fullscreen = true,\n    autoPlay = false,\n    loop = false,\n    muted = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: VideoPlayerProps) {\n    const strings = STRINGS[locale];\n    const shell = useRef<HTMLDivElement | null>(null);\n    const video = useRef<HTMLVideoElement | null>(null);\n    const probed = useRef(false);\n\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const [ownRate, setOwnRate] = useState(rate ?? 1);\n    const [volume, setVolume] = useState(1);\n    const [silent, setSilent] = useState(muted);\n\n    const immersive = useFullscreen(shell);\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    const effectiveRate = rate ?? ownRate;\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    /**\n     * Keep the rate on the element, and keep it across sources.\n     *\n     * `defaultPlaybackRate` is written alongside `playbackRate` because the load\n     * algorithm copies the former onto the latter: writing only `playbackRate`\n     * means the rate the viewer chose is silently lost on the next clip.\n     */\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.defaultPlaybackRate = effectiveRate;\n        node.playbackRate = effectiveRate;\n        node.preservesPitch = !shiftPitch;\n    }, [effectiveRate, shiftPitch, url]);\n\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.volume = volume;\n        node.muted = silent;\n    }, [volume, silent, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after\n     * which it knows the real length. It runs at most once per source, and only\n     * when the caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = video.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onProbed = (): void => {\n            node.removeEventListener(\"timeupdate\", onProbed);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onProbed);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = video.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void Promise.resolve(node.play())\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = video.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    const changeRate = (next: number): void => {\n        if (rate === undefined) setOwnRate(next);\n        onRateChange?.(next);\n    };\n\n    return (\n        <div\n            ref={shell}\n            className={cn(styles.player, immersive.isFullscreen && styles.immersive, className)}\n            {...rest}\n        >\n            <div className={styles.frame} style={{ aspectRatio }}>\n                <video\n                    ref={video}\n                    className={styles.video}\n                    src={url ?? undefined}\n                    poster={poster}\n                    loop={loop}\n                    autoPlay={autoPlay}\n                    playsInline\n                    preload=\"metadata\"\n                    onLoadedMetadata={handleMetadata}\n                    onDurationChange={handleMetadata}\n                    onTimeUpdate={() => {\n                        const node = video.current;\n                        if (node) setCurrentMs(node.currentTime * 1000);\n                    }}\n                    onPlay={() => setPlaying(true)}\n                    onPause={() => setPlaying(false)}\n                    onVolumeChange={() => {\n                        const node = video.current;\n                        if (!node) return;\n                        setVolume(node.volume);\n                        setSilent(node.muted);\n                    }}\n                    onEnded={() => {\n                        setPlaying(false);\n                        onEnded?.();\n                    }}\n                    onError={(event) => onError?.(event)}\n                >\n                    {tracks?.map((track) => (\n                        <track\n                            key={`${track.kind ?? \"captions\"}-${track.srcLang}-${track.src}`}\n                            kind={track.kind ?? \"captions\"}\n                            src={track.src}\n                            srcLang={track.srcLang}\n                            label={track.label}\n                            default={track.default}\n                        />\n                    ))}\n                </video>\n            </div>\n\n            <div className={styles.chrome}>\n                <button\n                    type=\"button\"\n                    className={styles.transport}\n                    onClick={toggle}\n                    disabled={disabled || !url}\n                    aria-label={playing ? strings.pause : strings.play}\n                    title={playing ? strings.pause : strings.play}\n                >\n                    {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.seek}\n                    min={0}\n                    max={seekable ? Math.round(totalMs) : 0}\n                    step={100}\n                    value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                    onChange={(event) => seek(Number(event.target.value))}\n                    disabled={disabled || !seekable}\n                    aria-label={strings.seek}\n                    aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n                />\n\n                <span className={styles.time}>\n                    <span>{formatDuration(currentMs)}</span>\n                    <span aria-hidden=\"true\">/</span>\n                    <span>{formatDuration(totalMs)}</span>\n                </span>\n\n                <button\n                    type=\"button\"\n                    className={styles.icon}\n                    onClick={() => setSilent((was) => !was)}\n                    disabled={disabled}\n                    aria-label={silent ? strings.unmute : strings.mute}\n                    title={silent ? strings.unmute : strings.mute}\n                >\n                    {silent ? <VolumeX size={16} aria-hidden /> : <Volume2 size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.volume}\n                    min={0}\n                    max={1}\n                    step={0.05}\n                    value={silent ? 0 : volume}\n                    onChange={(event) => {\n                        const next = Number(event.target.value);\n                        setVolume(next);\n                        setSilent(next === 0);\n                    }}\n                    disabled={disabled}\n                    aria-label={strings.volume}\n                />\n\n                {rates.length > 0 && (\n                    <select\n                        className={styles.rate}\n                        value={effectiveRate}\n                        onChange={(event) => changeRate(Number(event.target.value))}\n                        disabled={disabled}\n                        aria-label={strings.rate}\n                        title={strings.rate}\n                    >\n                        {rates.map((option) => (\n                            <option key={option} value={option}>\n                                {rateLabel(option, locale)}\n                            </option>\n                        ))}\n                    </select>\n                )}\n\n                {fullscreen && immersive.supported && (\n                    <button\n                        type=\"button\"\n                        className={styles.icon}\n                        onClick={() => {\n                            void immersive.toggle().catch((error: unknown) => onError?.(error));\n                        }}\n                        disabled={disabled}\n                        aria-label={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                        title={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                    >\n                        {immersive.isFullscreen ? (\n                            <Minimize size={16} aria-hidden />\n                        ) : (\n                            <Maximize size={16} aria-hidden />\n                        )}\n                    </button>\n                )}\n\n                {actions && <span className={styles.actions}>{actions}</span>}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VideoPlayer.js","names":["styles","VideoPlayer_module_default","STRINGS","rateLabel","rate","locale","VideoPlayer","DEFAULT_PLAYBACK_RATES","rest","strings","shell","useRef","video","probed","playing","setPlaying","useState","currentMs","setCurrentMs","elementMs","setElementMs","ownRate","setOwnRate","volume","setVolume","silent","setSilent","muted","immersive","useFullscreen","blobUrl","useObjectUrl","src","url","effectiveRate","totalMs","durationMs","seekable","useEffect","node","shiftPitch","handleMetadata","onProbed","toggle","onError","error","seek","ms","changeRate","next","onRateChange","cn","className","onEnded","event","tracks","track","disabled","jsx","Pause","Play","formatDuration","was","VolumeX","Volume2","rates","option","fullscreen","Minimize","Maximize","actions"],"sources":["../../../src/components/VideoPlayer/VideoPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — `src` takes a URL or a Blob, and\n * every other prop is a facet of playing it: durationMs (a MediaRecorder WebM may\n * carry none), poster, captions, aspect ratio, the rate control and its presets,\n * pitch, fullscreen, autoPlay/loop/muted, onEnded/onError, plus the actions slot and\n * locale. The body is the transport state machine — object-URL lifecycle, seek, rate,\n * volume — around one video element ref.\n */\nimport { Maximize, Minimize, Pause, Play, Volume2, VolumeX } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { formatDuration } from \"@/audio/duration\";\nimport { useFullscreen } from \"@/hooks/use-fullscreen\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport { DEFAULT_PLAYBACK_RATES } from \"./playback-rates\";\nimport styles from \"./VideoPlayer.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `onRateChange` is a real collision, not tidiness: React types it on every\n * element as the media `ratechange` handler, `ReactEventHandler`. Ours carries\n * the rate the viewer picked, and a `(rate: number) => void` is not assignable\n * to a handler that receives an event — same shape of clash as `Input`'s `size`\n * against `HTMLInputElement.size`. The DOM one is useless on a `<div>` anyway:\n * the event fires on the media element inside, which this component owns.\n */\ntype OverriddenDomProps = \"children\" | \"onRateChange\";\n\n/** One caption or subtitle file, rendered as a `<track>`. */\nexport interface VideoTextTrack {\n    /** URL of the WebVTT file. */\n    src: string;\n    /** BCP 47 language tag, e.g. `\"pt-BR\"`. */\n    srcLang: string;\n    /** Name shown in the browser's own track menu. */\n    label: string;\n    /** Track kind. Default `\"captions\"`. */\n    kind?: \"subtitles\" | \"captions\" | \"descriptions\" | \"chapters\" | \"metadata\";\n    /** Whether this track is on unless the viewer picks another. */\n    default?: boolean;\n}\n\nexport interface VideoPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a session that records twenty clips does not leak\n     * twenty URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useVideoRecorder` always\n     * does. Without it the element's own `duration` is used, and a fresh\n     * `MediaRecorder` blob may report `Infinity` until it is probed for one.\n     */\n    durationMs?: number;\n    /** Still shown before playback. Pair it with `captureFrame` from `/imaging`. */\n    poster?: string;\n    /** Caption and subtitle files. */\n    tracks?: readonly VideoTextTrack[];\n    /** Frame shape while the video has no intrinsic size yet. Default `16 / 9`. */\n    aspectRatio?: number;\n    /**\n     * Playback rate. Controlled when passed with `onRateChange`.\n     *\n     * Written to both `playbackRate` and `defaultPlaybackRate`, because the\n     * element resets the first to the second when a source loads — a player that\n     * only writes `playbackRate` silently drops back to 1× on every clip change.\n     */\n    rate?: number;\n    /** Presets the control offers. `[]` hides it. Default {@link DEFAULT_PLAYBACK_RATES}. */\n    rates?: readonly number[];\n    /** Called with the rate the viewer picked. */\n    onRateChange?: (rate: number) => void;\n    /** Let the pitch rise with the rate (`preservesPitch = false`). Default `false`. */\n    shiftPitch?: boolean;\n    /** Offer a fullscreen button where the browser supports it. Default `true`. */\n    fullscreen?: boolean;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Start muted. Autoplay without a gesture needs this. Default `false`. */\n    muted?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered at the end of the control row — a download button, a delete button. */\n    actions?: ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": {\n        play: \"Tocar\",\n        pause: \"Pausar\",\n        seek: \"Posição\",\n        mute: \"Silenciar\",\n        unmute: \"Ativar som\",\n        volume: \"Volume\",\n        rate: \"Velocidade\",\n        enterFullscreen: \"Tela cheia\",\n        exitFullscreen: \"Sair da tela cheia\",\n    },\n    en: {\n        play: \"Play\",\n        pause: \"Pause\",\n        seek: \"Seek\",\n        mute: \"Mute\",\n        unmute: \"Unmute\",\n        volume: \"Volume\",\n        rate: \"Speed\",\n        enterFullscreen: \"Full screen\",\n        exitFullscreen: \"Exit full screen\",\n    },\n} as const;\n\n/**\n * Label a rate the way a viewer reads it.\n *\n * @param rate The multiplier.\n * @param locale Which decimal separator to use.\n * @returns e.g. `\"1,5×\"` in pt-BR, `\"1.5×\"` in English.\n */\nfunction rateLabel(rate: number, locale: \"pt-BR\" | \"en\"): string {\n    return `${rate.toLocaleString(locale === \"en\" ? \"en-US\" : \"pt-BR\")}×`;\n}\n\n/**\n * Playback transport for one video: play/pause, seek, volume, speed, fullscreen.\n *\n * Built on a real `<video>` element, and deliberately **not** an overlay: the\n * controls sit in a bar under the frame rather than on top of it. Controls drawn\n * over video have to earn their contrast against arbitrary pixels, which no\n * `--tempest-*` token can promise — every text token in this SDK is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction.\n *\n * The seek bar, the volume slider and the speed picker are bare `<input>` and\n * `<select>` elements rather than the SDK's `Slider` and `Select`: those are form\n * fields, with a label row and a value badge, and a transport wants neither. The\n * native elements keep the keyboard and screen-reader behaviour that matters here\n * for free.\n *\n * @example\n * const rec = useVideoRecorder(screen.stream);\n * {rec.recording && (\n *     <VideoPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function VideoPlayer({\n    src,\n    durationMs,\n    poster,\n    tracks,\n    aspectRatio = 16 / 9,\n    rate,\n    rates = DEFAULT_PLAYBACK_RATES,\n    onRateChange,\n    shiftPitch = false,\n    fullscreen = true,\n    autoPlay = false,\n    loop = false,\n    muted = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: VideoPlayerProps) {\n    const strings = STRINGS[locale];\n    const shell = useRef<HTMLDivElement | null>(null);\n    const video = useRef<HTMLVideoElement | null>(null);\n    const probed = useRef(false);\n\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const [ownRate, setOwnRate] = useState(rate ?? 1);\n    const [volume, setVolume] = useState(1);\n    const [silent, setSilent] = useState(muted);\n\n    const immersive = useFullscreen(shell);\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    const effectiveRate = rate ?? ownRate;\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    /**\n     * Keep the rate on the element, and keep it across sources.\n     *\n     * `defaultPlaybackRate` is written alongside `playbackRate` because the load\n     * algorithm copies the former onto the latter: writing only `playbackRate`\n     * means the rate the viewer chose is silently lost on the next clip.\n     */\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.defaultPlaybackRate = effectiveRate;\n        node.playbackRate = effectiveRate;\n        node.preservesPitch = !shiftPitch;\n    }, [effectiveRate, shiftPitch, url]);\n\n    useEffect(() => {\n        const node = video.current;\n        if (!node) return;\n        node.volume = volume;\n        node.muted = silent;\n    }, [volume, silent, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after\n     * which it knows the real length. It runs at most once per source, and only\n     * when the caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = video.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onProbed = (): void => {\n            node.removeEventListener(\"timeupdate\", onProbed);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onProbed);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = video.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void Promise.resolve(node.play())\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = video.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    const changeRate = (next: number): void => {\n        if (rate === undefined) setOwnRate(next);\n        onRateChange?.(next);\n    };\n\n    return (\n        <div\n            ref={shell}\n            className={cn(styles.player, immersive.isFullscreen && styles.immersive, className)}\n            {...rest}\n        >\n            <div className={styles.frame} style={{ aspectRatio }}>\n                <video\n                    ref={video}\n                    className={styles.video}\n                    src={url ?? undefined}\n                    poster={poster}\n                    loop={loop}\n                    autoPlay={autoPlay}\n                    playsInline\n                    preload=\"metadata\"\n                    onLoadedMetadata={handleMetadata}\n                    onDurationChange={handleMetadata}\n                    onTimeUpdate={() => {\n                        const node = video.current;\n                        if (node) setCurrentMs(node.currentTime * 1000);\n                    }}\n                    onPlay={() => setPlaying(true)}\n                    onPause={() => setPlaying(false)}\n                    onVolumeChange={() => {\n                        const node = video.current;\n                        if (!node) return;\n                        setVolume(node.volume);\n                        setSilent(node.muted);\n                    }}\n                    onEnded={() => {\n                        setPlaying(false);\n                        onEnded?.();\n                    }}\n                    onError={(event) => onError?.(event)}\n                >\n                    {tracks?.map((track) => (\n                        <track\n                            key={`${track.kind ?? \"captions\"}-${track.srcLang}-${track.src}`}\n                            kind={track.kind ?? \"captions\"}\n                            src={track.src}\n                            srcLang={track.srcLang}\n                            label={track.label}\n                            default={track.default}\n                        />\n                    ))}\n                </video>\n            </div>\n\n            <div className={styles.chrome}>\n                <button\n                    type=\"button\"\n                    className={styles.transport}\n                    onClick={toggle}\n                    disabled={disabled || !url}\n                    aria-label={playing ? strings.pause : strings.play}\n                    title={playing ? strings.pause : strings.play}\n                >\n                    {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.seek}\n                    min={0}\n                    max={seekable ? Math.round(totalMs) : 0}\n                    step={100}\n                    value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                    onChange={(event) => seek(Number(event.target.value))}\n                    disabled={disabled || !seekable}\n                    aria-label={strings.seek}\n                    aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n                />\n\n                <span className={styles.time}>\n                    <span>{formatDuration(currentMs)}</span>\n                    <span aria-hidden=\"true\">/</span>\n                    <span>{formatDuration(totalMs)}</span>\n                </span>\n\n                <button\n                    type=\"button\"\n                    className={styles.icon}\n                    onClick={() => setSilent((was) => !was)}\n                    disabled={disabled}\n                    aria-label={silent ? strings.unmute : strings.mute}\n                    title={silent ? strings.unmute : strings.mute}\n                >\n                    {silent ? <VolumeX size={16} aria-hidden /> : <Volume2 size={16} aria-hidden />}\n                </button>\n\n                <input\n                    type=\"range\"\n                    className={styles.volume}\n                    min={0}\n                    max={1}\n                    step={0.05}\n                    value={silent ? 0 : volume}\n                    onChange={(event) => {\n                        const next = Number(event.target.value);\n                        setVolume(next);\n                        setSilent(next === 0);\n                    }}\n                    disabled={disabled}\n                    aria-label={strings.volume}\n                />\n\n                {rates.length > 0 && (\n                    <select\n                        className={styles.rate}\n                        value={effectiveRate}\n                        onChange={(event) => changeRate(Number(event.target.value))}\n                        disabled={disabled}\n                        aria-label={strings.rate}\n                        title={strings.rate}\n                    >\n                        {rates.map((option) => (\n                            <option key={option} value={option}>\n                                {rateLabel(option, locale)}\n                            </option>\n                        ))}\n                    </select>\n                )}\n\n                {fullscreen && immersive.supported && (\n                    <button\n                        type=\"button\"\n                        className={styles.icon}\n                        onClick={() => {\n                            void immersive.toggle().catch((error: unknown) => onError?.(error));\n                        }}\n                        disabled={disabled}\n                        aria-label={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                        title={\n                            immersive.isFullscreen\n                                ? strings.exitFullscreen\n                                : strings.enterFullscreen\n                        }\n                    >\n                        {immersive.isFullscreen ? (\n                            <Minimize size={16} aria-hidden />\n                        ) : (\n                            <Maximize size={16} aria-hidden />\n                        )}\n                    </button>\n                )}\n\n                {actions && <span className={styles.actions}>{actions}</span>}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/VideoPlayer/VideoPlayer.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.module.cjs","names":[],"sources":["../../../src/components/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/*\n * The controls are a bar under the frame, not an overlay.\n *\n * An overlay has to earn its contrast against arbitrary video pixels, and no\n * `--tempest-*` token can promise that: every text token here is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction. An app that\n * wants a cinema overlay can position its own chrome over the frame; what ships\n * is the one that is right in both themes.\n */\n.player {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The frame keeps its shape before the video reports one, so the control bar\n * does not jump down the page when metadata lands. Black rather than a surface\n * token: letterboxing is part of the picture, and a light bar around a dark\n * video reads as a rendering bug.\n */\n.frame {\n    position: relative;\n    width: 100%;\n    background-color: #000000;\n}\n\n.video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n\n.chrome {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.icon {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.icon:hover:not(:disabled) {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text);\n}\n\n.icon:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an\n * overlay: the native element already carries the keyboard behaviour and the\n * value semantics, and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 8rem;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.volume {\n    flex: 0 1 4.5rem;\n    min-width: 2.5rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled,\n.volume:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.rate {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n}\n\n.rate:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible,\n.icon:focus-visible,\n.seek:focus-visible,\n.volume:focus-visible,\n.rate:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as\n * the digits change — a proportional `1` is narrower than a `0`, and at ten\n * updates a second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * Fullscreen presents the shell, so the frame has to give up its aspect box and\n * take the height that is left over — otherwise a 16/9 box inside a 16/10\n * display leaves the bar floating in the middle of the screen.\n */\n.immersive {\n    width: 100%;\n    height: 100%;\n    border: none;\n    border-radius: 0;\n}\n\n.immersive .frame {\n    flex: 1 1 auto;\n    aspect-ratio: auto !important;\n    min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport,\n    .icon {\n        transition: none;\n    }\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after,\n    .icon::after {\n        content: \"\";\n        position: absolute;\n        inset: -6px;\n    }\n}\n\n/*\n * On a phone the row cannot hold seven controls. The seek bar takes a line of its\n * own and the rest wraps under it, which keeps every target at full size instead\n * of shrinking them all below the touch minimum.\n */\n@media (max-width: 480px) {\n    .chrome {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n\n    .seek {\n        flex: 1 1 100%;\n        order: -1;\n    }\n\n    /*\n     * No volume slider on a phone. Measured at 390px in Chromium: the second row\n     * came to exactly the container width, which pushed the fullscreen button\n     * onto a third row — spent on a slider nobody drags on a phone, where the\n     * hardware keys do that job. The mute button stays, because silencing fast\n     * is the thing people actually want from a video in a feed.\n     */\n    .volume {\n        display: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"VideoPlayer.module.cjs","names":["player","frame","video","chrome","transport","icon","seek","volume","rate","time","actions","immersive","VideoPlayer_module_default"],"sources":["../../../src/components/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/*\n * The controls are a bar under the frame, not an overlay.\n *\n * An overlay has to earn its contrast against arbitrary video pixels, and no\n * `--tempest-*` token can promise that: every text token here is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction. An app that\n * wants a cinema overlay can position its own chrome over the frame; what ships\n * is the one that is right in both themes.\n */\n.player {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The frame keeps its shape before the video reports one, so the control bar\n * does not jump down the page when metadata lands. Black rather than a surface\n * token: letterboxing is part of the picture, and a light bar around a dark\n * video reads as a rendering bug.\n */\n.frame {\n    position: relative;\n    width: 100%;\n    background-color: #000000;\n}\n\n.video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n\n.chrome {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.icon {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.icon:hover:not(:disabled) {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text);\n}\n\n.icon:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an\n * overlay: the native element already carries the keyboard behaviour and the\n * value semantics, and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 8rem;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.volume {\n    flex: 0 1 4.5rem;\n    min-width: 2.5rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled,\n.volume:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.rate {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n}\n\n.rate:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible,\n.icon:focus-visible,\n.seek:focus-visible,\n.volume:focus-visible,\n.rate:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as\n * the digits change — a proportional `1` is narrower than a `0`, and at ten\n * updates a second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * Fullscreen presents the shell, so the frame has to give up its aspect box and\n * take the height that is left over — otherwise a 16/9 box inside a 16/10\n * display leaves the bar floating in the middle of the screen.\n */\n.immersive {\n    width: 100%;\n    height: 100%;\n    border: none;\n    border-radius: 0;\n}\n\n.immersive .frame {\n    flex: 1 1 auto;\n    aspect-ratio: auto !important;\n    min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport,\n    .icon {\n        transition: none;\n    }\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after,\n    .icon::after {\n        content: \"\";\n        position: absolute;\n        inset: -6px;\n    }\n}\n\n/*\n * On a phone the row cannot hold seven controls. The seek bar takes a line of its\n * own and the rest wraps under it, which keeps every target at full size instead\n * of shrinking them all below the touch minimum.\n */\n@media (max-width: 480px) {\n    .chrome {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n\n    .seek {\n        flex: 1 1 100%;\n        order: -1;\n    }\n\n    /*\n     * No volume slider on a phone. Measured at 390px in Chromium: the second row\n     * came to exactly the container width, which pushed the fullscreen button\n     * onto a third row — spent on a slider nobody drags on a phone, where the\n     * hardware keys do that job. The mute button stays, because silencing fast\n     * is the thing people actually want from a video in a feed.\n     */\n    .volume {\n        display: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/VideoPlayer/VideoPlayer.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.module.js","names":[],"sources":["../../../src/components/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/*\n * The controls are a bar under the frame, not an overlay.\n *\n * An overlay has to earn its contrast against arbitrary video pixels, and no\n * `--tempest-*` token can promise that: every text token here is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction. An app that\n * wants a cinema overlay can position its own chrome over the frame; what ships\n * is the one that is right in both themes.\n */\n.player {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The frame keeps its shape before the video reports one, so the control bar\n * does not jump down the page when metadata lands. Black rather than a surface\n * token: letterboxing is part of the picture, and a light bar around a dark\n * video reads as a rendering bug.\n */\n.frame {\n    position: relative;\n    width: 100%;\n    background-color: #000000;\n}\n\n.video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n\n.chrome {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.icon {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.icon:hover:not(:disabled) {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text);\n}\n\n.icon:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an\n * overlay: the native element already carries the keyboard behaviour and the\n * value semantics, and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 8rem;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.volume {\n    flex: 0 1 4.5rem;\n    min-width: 2.5rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled,\n.volume:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.rate {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n}\n\n.rate:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible,\n.icon:focus-visible,\n.seek:focus-visible,\n.volume:focus-visible,\n.rate:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as\n * the digits change — a proportional `1` is narrower than a `0`, and at ten\n * updates a second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * Fullscreen presents the shell, so the frame has to give up its aspect box and\n * take the height that is left over — otherwise a 16/9 box inside a 16/10\n * display leaves the bar floating in the middle of the screen.\n */\n.immersive {\n    width: 100%;\n    height: 100%;\n    border: none;\n    border-radius: 0;\n}\n\n.immersive .frame {\n    flex: 1 1 auto;\n    aspect-ratio: auto !important;\n    min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport,\n    .icon {\n        transition: none;\n    }\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after,\n    .icon::after {\n        content: \"\";\n        position: absolute;\n        inset: -6px;\n    }\n}\n\n/*\n * On a phone the row cannot hold seven controls. The seek bar takes a line of its\n * own and the rest wraps under it, which keeps every target at full size instead\n * of shrinking them all below the touch minimum.\n */\n@media (max-width: 480px) {\n    .chrome {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n\n    .seek {\n        flex: 1 1 100%;\n        order: -1;\n    }\n\n    /*\n     * No volume slider on a phone. Measured at 390px in Chromium: the second row\n     * came to exactly the container width, which pushed the fullscreen button\n     * onto a third row — spent on a slider nobody drags on a phone, where the\n     * hardware keys do that job. The mute button stays, because silencing fast\n     * is the thing people actually want from a video in a feed.\n     */\n    .volume {\n        display: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"VideoPlayer.module.js","names":["player","frame","video","chrome","transport","icon","seek","volume","rate","time","actions","immersive","VideoPlayer_module_default"],"sources":["../../../src/components/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/*\n * The controls are a bar under the frame, not an overlay.\n *\n * An overlay has to earn its contrast against arbitrary video pixels, and no\n * `--tempest-*` token can promise that: every text token here is resolved\n * against a known surface, and the two contrast defects this repo shipped were\n * both a text token used over a surface it was never checked against. A bar with\n * its own surface inherits the theme and is legible by construction. An app that\n * wants a cinema overlay can position its own chrome over the frame; what ships\n * is the one that is right in both themes.\n */\n.player {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The frame keeps its shape before the video reports one, so the control bar\n * does not jump down the page when metadata lands. Black rather than a surface\n * token: letterboxing is part of the picture, and a light bar around a dark\n * video reads as a rendering bug.\n */\n.frame {\n    position: relative;\n    width: 100%;\n    background-color: #000000;\n}\n\n.video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n}\n\n.chrome {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-top: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.icon {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-md);\n    background-color: transparent;\n    color: var(--tempest-text-muted);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.icon:hover:not(:disabled) {\n    background-color: var(--tempest-surface-2);\n    color: var(--tempest-text);\n}\n\n.icon:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an\n * overlay: the native element already carries the keyboard behaviour and the\n * value semantics, and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 8rem;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.volume {\n    flex: 0 1 4.5rem;\n    min-width: 2.5rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled,\n.volume:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.rate {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n}\n\n.rate:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible,\n.icon:focus-visible,\n.seek:focus-visible,\n.volume:focus-visible,\n.rate:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as\n * the digits change — a proportional `1` is narrower than a `0`, and at ten\n * updates a second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * Fullscreen presents the shell, so the frame has to give up its aspect box and\n * take the height that is left over — otherwise a 16/9 box inside a 16/10\n * display leaves the bar floating in the middle of the screen.\n */\n.immersive {\n    width: 100%;\n    height: 100%;\n    border: none;\n    border-radius: 0;\n}\n\n.immersive .frame {\n    flex: 1 1 auto;\n    aspect-ratio: auto !important;\n    min-height: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport,\n    .icon {\n        transition: none;\n    }\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after,\n    .icon::after {\n        content: \"\";\n        position: absolute;\n        inset: -6px;\n    }\n}\n\n/*\n * On a phone the row cannot hold seven controls. The seek bar takes a line of its\n * own and the rest wraps under it, which keeps every target at full size instead\n * of shrinking them all below the touch minimum.\n */\n@media (max-width: 480px) {\n    .chrome {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n\n    .seek {\n        flex: 1 1 100%;\n        order: -1;\n    }\n\n    /*\n     * No volume slider on a phone. Measured at 390px in Chromium: the second row\n     * came to exactly the container width, which pushed the fullscreen button\n     * onto a third row — spent on a slider nobody drags on a phone, where the\n     * hardware keys do that job. The mute button stays, because silencing fast\n     * is the thing people actually want from a video in a feed.\n     */\n    .volume {\n        display: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/VideoPlayer/playback-rates.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rates.cjs","names":[],"sources":["../../../src/components/VideoPlayer/playback-rates.ts"],"sourcesContent":["/**\n * The speed presets the player offers, and why they stop at 2×.\n *\n * The spec lets a browser drop the audio once `playbackRate` leaves a range it\n * considers useful, and that limit varies by engine. These four sit inside every\n * range measured, so the default control never silences a clip by accident. A\n * caller who wants 4× can pass it — and should test it with sound on the\n * browsers they support before promising it.\n */\nexport const DEFAULT_PLAYBACK_RATES: readonly number[] = [0.5, 1, 1.5, 2];\n"],"mappings":"AASA,IAAa,EAA4C,CAAC,GAAK,EAAG,IAAK,CAAC"}
+{"version":3,"file":"playback-rates.cjs","names":["DEFAULT_PLAYBACK_RATES"],"sources":["../../../src/components/VideoPlayer/playback-rates.ts"],"sourcesContent":["/**\n * The speed presets the player offers, and why they stop at 2×.\n *\n * The spec lets a browser drop the audio once `playbackRate` leaves a range it\n * considers useful, and that limit varies by engine. These four sit inside every\n * range measured, so the default control never silences a clip by accident. A\n * caller who wants 4× can pass it — and should test it with sound on the\n * browsers they support before promising it.\n */\nexport const DEFAULT_PLAYBACK_RATES: readonly number[] = [0.5, 1, 1.5, 2];\n"],"mappings":"AASA,IAAaA,EAA4C,CAAC,GAAK,EAAG,IAAK,CAAC,E"}

package/dist/components/VideoPlayer/playback-rates.js.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rates.js","names":[],"sources":["../../../src/components/VideoPlayer/playback-rates.ts"],"sourcesContent":["/**\n * The speed presets the player offers, and why they stop at 2×.\n *\n * The spec lets a browser drop the audio once `playbackRate` leaves a range it\n * considers useful, and that limit varies by engine. These four sit inside every\n * range measured, so the default control never silences a clip by accident. A\n * caller who wants 4× can pass it — and should test it with sound on the\n * browsers they support before promising it.\n */\nexport const DEFAULT_PLAYBACK_RATES: readonly number[] = [0.5, 1, 1.5, 2];\n"],"mappings":";AASA,IAAa,IAA4C;CAAC;CAAK;CAAG;CAAK;AAAC"}
+{"version":3,"file":"playback-rates.js","names":["DEFAULT_PLAYBACK_RATES"],"sources":["../../../src/components/VideoPlayer/playback-rates.ts"],"sourcesContent":["/**\n * The speed presets the player offers, and why they stop at 2×.\n *\n * The spec lets a browser drop the audio once `playbackRate` leaves a range it\n * considers useful, and that limit varies by engine. These four sit inside every\n * range measured, so the default control never silences a clip by accident. A\n * caller who wants 4× can pass it — and should test it with sound on the\n * browsers they support before promising it.\n */\nexport const DEFAULT_PLAYBACK_RATES: readonly number[] = [0.5, 1, 1.5, 2];\n"],"mappings":";AASA,IAAaA,IAA4C;CAAC;CAAK;CAAG;CAAK;AAAC"}

package/dist/components/VirtualList/VirtualList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.cjs","names":[],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { memo, useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\ninterface VirtualRowProps<T> {\n    item: T;\n    index: number;\n    top: number;\n    height: number;\n    render: (item: T, index: number) => ReactNode;\n}\n\n/**\n * One windowed row, rendered on its own so React can skip it.\n *\n * Without this boundary every scroll event re-rendered the whole visible window\n * rather than the one row that entered it: measured at 126 `renderItem` calls\n * across twenty single-row scroll steps where twenty are needed, and the factor\n * grows with the number of visible rows.\n *\n * `render` is part of the comparison on purpose. Reading it from a ref instead\n * would let a row keep painting output from a stale closure — the row that shows\n * the selected item would never notice the selection changed. Keeping it in the\n * props means an app that wraps `renderItem` in `useCallback` gets the skip, and\n * an app that passes an inline arrow gets exactly today's behaviour.\n *\n * @param props - The row's item, its position and the caller's renderer.\n * @returns The positioned row element.\n */\nfunction VirtualRowImpl<T>({ item, index, top, height, render }: VirtualRowProps<T>) {\n    return (\n        <div role=\"listitem\" className={styles.row} style={{ top, height }}>\n            {render(item, index)}\n        </div>\n    );\n}\n\n/**\n * `memo` erases the generic, so the memoised component is re-typed as the\n * function it wraps. The runtime value is unchanged; only the signature is\n * restored.\n */\nconst VirtualRow = memo(VirtualRowImpl) as typeof VirtualRowImpl;\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    return (\n                        <VirtualRow\n                            key={getKey ? getKey(item, index) : index}\n                            item={item}\n                            index={index}\n                            top={index * itemHeight}\n                            height={itemHeight}\n                            render={renderItem}\n                        />\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"kIA0DA,SAAS,EAAkB,CAAE,OAAM,QAAO,MAAK,SAAQ,UAA8B,CACjF,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,KAAK,WAAW,UAAW,EAAA,QAAO,IAAK,MAAO,CAAE,MAAK,QAAO,EAC5D,SAAA,EAAO,EAAM,CAAK,CAClB,CAAA,CAEb,CAOA,IAAM,GAAA,EAAa,EAAA,KAAA,CAAK,CAAc,EAStC,SAAgB,EAAe,CAC3B,QACA,aACA,aACA,SACA,WAAW,EACX,SACA,YACA,QACA,SACoB,CACpB,IAAM,GAAA,EAAe,EAAA,OAAA,CAAuB,IAAI,EAC1C,CAAC,EAAW,IAAA,EAAgB,EAAA,SAAA,CAAiB,CAAC,EAC9C,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAiB,CAAC,GAElD,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAM,EAAU,EAAa,QAG7B,GAFI,CAAC,IACL,EAAY,EAAQ,YAAY,EAC5B,OAAO,eAAmB,KAAa,OAC3C,IAAM,EAAW,IAAI,mBAAqB,EAAY,EAAQ,YAAY,CAAC,EAE3E,OADA,EAAS,QAAQ,CAAO,MACX,EAAS,WAAW,CACrC,EAAG,CAAC,CAAC,EAEL,IAAM,EAAc,EAAM,OAAS,EAQ7B,EAAa,EAAW,GAAK,EAAc,EAAW,EACtD,EAAQ,KAAK,IAAI,EAAG,KAAK,MAAM,EAAY,CAAU,EAAI,CAAQ,EACjE,EAAe,KAAK,KAAK,EAAW,CAAU,EAAI,EAAW,EAC7D,EAAM,KAAK,IAAI,EAAM,OAAQ,EAAQ,CAAY,EAEvD,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,MAAO,CAAE,SAAQ,GAAG,CAAM,EAC1B,SAAW,GAAU,EAAc,EAAM,OAA0B,SAAS,EAC5E,KAAK,OACL,aAAY,EACZ,SAAU,EAAa,EAAI,IAAA,GAE3B,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,MAAO,CAAE,OAAQ,CAAY,EACvD,SAAA,EAAM,MAAM,EAAO,CAAG,CAAC,CAAC,KAAK,EAAM,IAAW,CAC3C,IAAM,EAAQ,EAAQ,EACtB,OACI,EAAA,EAAA,IAAA,CAAC,EAAD,CAEU,OACC,QACP,IAAK,EAAQ,EACb,OAAQ,EACR,OAAQ,CACX,EANQ,EAAS,EAAO,EAAM,CAAK,EAAI,CAMvC,CAET,CAAC,CACA,CAAA,CACJ,CAAA,CAEb"}
+{"version":3,"file":"VirtualList.cjs","names":["styles","memo","useRef","useState","cn","require_cn","require_VirtualList_module","react","react_jsx_runtime","VirtualRowImpl","render","item","index","VirtualRow","VirtualList","containerRef","scrollTop","setScrollTop","viewport","setViewport","element","observer","totalHeight","items","itemHeight","scrollable","start","overscan","visibleCount","end","className","style","event","label","offset","renderItem","getKey"],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { memo, useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\ninterface VirtualRowProps<T> {\n    item: T;\n    index: number;\n    top: number;\n    height: number;\n    render: (item: T, index: number) => ReactNode;\n}\n\n/**\n * One windowed row, rendered on its own so React can skip it.\n *\n * Without this boundary every scroll event re-rendered the whole visible window\n * rather than the one row that entered it: measured at 126 `renderItem` calls\n * across twenty single-row scroll steps where twenty are needed, and the factor\n * grows with the number of visible rows.\n *\n * `render` is part of the comparison on purpose. Reading it from a ref instead\n * would let a row keep painting output from a stale closure — the row that shows\n * the selected item would never notice the selection changed. Keeping it in the\n * props means an app that wraps `renderItem` in `useCallback` gets the skip, and\n * an app that passes an inline arrow gets exactly today's behaviour.\n *\n * @param props - The row's item, its position and the caller's renderer.\n * @returns The positioned row element.\n */\nfunction VirtualRowImpl<T>({ item, index, top, height, render }: VirtualRowProps<T>) {\n    return (\n        <div role=\"listitem\" className={styles.row} style={{ top, height }}>\n            {render(item, index)}\n        </div>\n    );\n}\n\n/**\n * `memo` erases the generic, so the memoised component is re-typed as the\n * function it wraps. The runtime value is unchanged; only the signature is\n * restored.\n */\nconst VirtualRow = memo(VirtualRowImpl) as typeof VirtualRowImpl;\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    return (\n                        <VirtualRow\n                            key={getKey ? getKey(item, index) : index}\n                            item={item}\n                            index={index}\n                            top={index * itemHeight}\n                            height={itemHeight}\n                            render={renderItem}\n                        />\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"A,kIA0DA,SAASS,EAAkB,CAAE,OAAM,QAAO,MAAK,SAAQ,UAA8B,CACjF,OACI,EAAAD,EAAA,IAAA,CAAC,MAAD,CAAK,KAAK,WAAW,UAAWR,EAAAA,QAAO,IAAK,MAAO,CAAE,MAAK,QAAO,EAC5D,SAAAU,EAAOC,EAAMC,CAAK,CAClB,CAAA,CAEb,CAOA,IAAMC,GAAA,EAAaZ,EAAAA,KAAAA,CAAKQ,CAAc,EAStC,SAAgBK,EAAe,CAC3B,QACA,aACA,aACA,SACA,WAAW,EACX,SACA,YACA,QACA,SACoB,CACpB,IAAMC,GAAA,EAAeb,EAAAA,OAAAA,CAAuB,IAAI,EAC1C,CAACc,EAAWC,IAAA,EAAgBd,EAAAA,SAAAA,CAAiB,CAAC,EAC9C,CAACe,EAAUC,IAAA,EAAehB,EAAAA,SAAAA,CAAiB,CAAC,GAElD,EAAAI,EAAA,UAAA,KAAgB,CACZ,IAAMa,EAAUL,EAAa,QAG7B,GAFI,CAACK,IACLD,EAAYC,EAAQ,YAAY,EAC5B,OAAO,eAAmB,KAAa,OAC3C,IAAMC,EAAW,IAAI,mBAAqBF,EAAYC,EAAQ,YAAY,CAAC,EAE3E,OADAC,EAAS,QAAQD,CAAO,MACXC,EAAS,WAAW,CACrC,EAAG,CAAC,CAAC,EAEL,IAAMC,EAAcC,EAAM,OAASC,EAQ7BC,EAAaP,EAAW,GAAKI,EAAcJ,EAAW,EACtDQ,EAAQ,KAAK,IAAI,EAAG,KAAK,MAAMV,EAAYQ,CAAU,EAAIG,CAAQ,EACjEC,EAAe,KAAK,KAAKV,EAAWM,CAAU,EAAIG,EAAW,EAC7DE,EAAM,KAAK,IAAIN,EAAM,OAAQG,EAAQE,CAAY,EAEvD,OACI,EAAApB,EAAA,IAAA,CAAC,MAAD,CACI,IAAKO,EACL,UAAWX,EAAAA,GAAGJ,EAAAA,QAAO,OAAQ8B,CAAS,EACtC,MAAO,CAAE,SAAQ,GAAGC,CAAM,EAC1B,SAAW,GAAUd,EAAce,EAAM,OAA0B,SAAS,EAC5E,KAAK,OACL,aAAYC,EACZ,SAAUR,EAAa,EAAI,IAAA,GAE3B,UAAA,EAAAjB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWR,EAAAA,QAAO,OAAQ,MAAO,CAAE,OAAQsB,CAAY,EACvD,SAAAC,EAAM,MAAMG,EAAOG,CAAG,CAAC,CAAC,KAAK,EAAM,IAAW,CAC3C,IAAMjB,EAAQc,EAAQQ,EACtB,OACI,EAAA1B,EAAA,IAAA,CAACK,EAAD,CAEU,OACC,QACP,IAAKD,EAAQY,EACb,OAAQA,EACR,OAAQW,CACX,EANQC,EAASA,EAAOzB,EAAMC,CAAK,EAAIA,CAMvC,CAET,CAAC,CACA,CAAA,CACJ,CAAA,CAEb,C"}

package/dist/components/VirtualList/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","names":[],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { memo, useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\ninterface VirtualRowProps<T> {\n    item: T;\n    index: number;\n    top: number;\n    height: number;\n    render: (item: T, index: number) => ReactNode;\n}\n\n/**\n * One windowed row, rendered on its own so React can skip it.\n *\n * Without this boundary every scroll event re-rendered the whole visible window\n * rather than the one row that entered it: measured at 126 `renderItem` calls\n * across twenty single-row scroll steps where twenty are needed, and the factor\n * grows with the number of visible rows.\n *\n * `render` is part of the comparison on purpose. Reading it from a ref instead\n * would let a row keep painting output from a stale closure — the row that shows\n * the selected item would never notice the selection changed. Keeping it in the\n * props means an app that wraps `renderItem` in `useCallback` gets the skip, and\n * an app that passes an inline arrow gets exactly today's behaviour.\n *\n * @param props - The row's item, its position and the caller's renderer.\n * @returns The positioned row element.\n */\nfunction VirtualRowImpl<T>({ item, index, top, height, render }: VirtualRowProps<T>) {\n    return (\n        <div role=\"listitem\" className={styles.row} style={{ top, height }}>\n            {render(item, index)}\n        </div>\n    );\n}\n\n/**\n * `memo` erases the generic, so the memoised component is re-typed as the\n * function it wraps. The runtime value is unchanged; only the signature is\n * restored.\n */\nconst VirtualRow = memo(VirtualRowImpl) as typeof VirtualRowImpl;\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    return (\n                        <VirtualRow\n                            key={getKey ? getKey(item, index) : index}\n                            item={item}\n                            index={index}\n                            top={index * itemHeight}\n                            height={itemHeight}\n                            render={renderItem}\n                        />\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;AA0DA,SAAS,EAAkB,EAAE,SAAM,UAAO,QAAK,WAAQ,aAA8B;CACjF,OACI,kBAAC,OAAD;EAAK,MAAK;EAAW,WAAW,EAAO;EAAK,OAAO;GAAE;GAAK;EAAO;EAC5D,UAAA,EAAO,GAAM,CAAK;CAClB,CAAA;AAEb;AAOA,IAAM,IAAa,EAAK,CAAc;AAStC,SAAgB,EAAe,EAC3B,UACA,eACA,eACA,WACA,cAAW,GACX,WACA,cACA,UACA,YACoB;CACpB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAW,KAAgB,EAAiB,CAAC,GAC9C,CAAC,GAAU,KAAe,EAAiB,CAAC;CAElD,QAAgB;EACZ,IAAM,IAAU,EAAa;EAG7B,IAFI,CAAC,MACL,EAAY,EAAQ,YAAY,GAC5B,OAAO,iBAAmB,MAAa;EAC3C,IAAM,IAAW,IAAI,qBAAqB,EAAY,EAAQ,YAAY,CAAC;EAE3E,OADA,EAAS,QAAQ,CAAO,SACX,EAAS,WAAW;CACrC,GAAG,CAAC,CAAC;CAEL,IAAM,IAAc,EAAM,SAAS,GAQ7B,IAAa,IAAW,KAAK,IAAc,IAAW,GACtD,IAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,IAAY,CAAU,IAAI,CAAQ,GACjE,IAAe,KAAK,KAAK,IAAW,CAAU,IAAI,IAAW,GAC7D,IAAM,KAAK,IAAI,EAAM,QAAQ,IAAQ,CAAY;CAEvD,OACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,EAAO,QAAQ,CAAS;EACtC,OAAO;GAAE;GAAQ,GAAG;EAAM;EAC1B,WAAW,MAAU,EAAc,EAAM,OAA0B,SAAS;EAC5E,MAAK;EACL,cAAY;EACZ,UAAU,IAAa,IAAI,KAAA;EAE3B,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAQ,OAAO,EAAE,QAAQ,EAAY;GACvD,UAAA,EAAM,MAAM,GAAO,CAAG,CAAC,CAAC,KAAK,GAAM,MAAW;IAC3C,IAAM,IAAQ,IAAQ;IACtB,OACI,kBAAC,GAAD;KAEU;KACC;KACP,KAAK,IAAQ;KACb,QAAQ;KACR,QAAQ;IACX,GANQ,IAAS,EAAO,GAAM,CAAK,IAAI,CAMvC;GAET,CAAC;EACA,CAAA;CACJ,CAAA;AAEb"}
+{"version":3,"file":"VirtualList.js","names":["styles","VirtualList_module_default","VirtualRowImpl","render","item","index","VirtualRow","memo","VirtualList","containerRef","useRef","scrollTop","setScrollTop","useState","viewport","setViewport","element","observer","totalHeight","items","itemHeight","scrollable","start","overscan","visibleCount","end","cn","className","style","event","label","offset","renderItem","getKey"],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { memo, useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\ninterface VirtualRowProps<T> {\n    item: T;\n    index: number;\n    top: number;\n    height: number;\n    render: (item: T, index: number) => ReactNode;\n}\n\n/**\n * One windowed row, rendered on its own so React can skip it.\n *\n * Without this boundary every scroll event re-rendered the whole visible window\n * rather than the one row that entered it: measured at 126 `renderItem` calls\n * across twenty single-row scroll steps where twenty are needed, and the factor\n * grows with the number of visible rows.\n *\n * `render` is part of the comparison on purpose. Reading it from a ref instead\n * would let a row keep painting output from a stale closure — the row that shows\n * the selected item would never notice the selection changed. Keeping it in the\n * props means an app that wraps `renderItem` in `useCallback` gets the skip, and\n * an app that passes an inline arrow gets exactly today's behaviour.\n *\n * @param props - The row's item, its position and the caller's renderer.\n * @returns The positioned row element.\n */\nfunction VirtualRowImpl<T>({ item, index, top, height, render }: VirtualRowProps<T>) {\n    return (\n        <div role=\"listitem\" className={styles.row} style={{ top, height }}>\n            {render(item, index)}\n        </div>\n    );\n}\n\n/**\n * `memo` erases the generic, so the memoised component is re-typed as the\n * function it wraps. The runtime value is unchanged; only the signature is\n * restored.\n */\nconst VirtualRow = memo(VirtualRowImpl) as typeof VirtualRowImpl;\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    return (\n                        <VirtualRow\n                            key={getKey ? getKey(item, index) : index}\n                            item={item}\n                            index={index}\n                            top={index * itemHeight}\n                            height={itemHeight}\n                            render={renderItem}\n                        />\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;AA0DA,SAASE,EAAkB,EAAE,SAAM,UAAO,QAAK,WAAQ,aAA8B;CACjF,OACI,kBAAC,OAAD;EAAK,MAAK;EAAW,WAAWF,EAAO;EAAK,OAAO;GAAE;GAAK;EAAO;EAC5D,UAAAG,EAAOC,GAAMC,CAAK;CAClB,CAAA;AAEb;AAOA,IAAMC,IAAaC,EAAKL,CAAc;AAStC,SAAgBM,EAAe,EAC3B,UACA,eACA,eACA,WACA,cAAW,GACX,WACA,cACA,UACA,YACoB;CACpB,IAAMC,IAAeC,EAAuB,IAAI,GAC1C,CAACC,GAAWC,KAAgBC,EAAiB,CAAC,GAC9C,CAACC,GAAUC,KAAeF,EAAiB,CAAC;CAElD,QAAgB;EACZ,IAAMG,IAAUP,EAAa;EAG7B,IAFI,CAACO,MACLD,EAAYC,EAAQ,YAAY,GAC5B,OAAO,iBAAmB,MAAa;EAC3C,IAAMC,IAAW,IAAI,qBAAqBF,EAAYC,EAAQ,YAAY,CAAC;EAE3E,OADAC,EAAS,QAAQD,CAAO,SACXC,EAAS,WAAW;CACrC,GAAG,CAAC,CAAC;CAEL,IAAMC,IAAcC,EAAM,SAASC,GAQ7BC,IAAaP,IAAW,KAAKI,IAAcJ,IAAW,GACtDQ,IAAQ,KAAK,IAAI,GAAG,KAAK,MAAMX,IAAYS,CAAU,IAAIG,CAAQ,GACjEC,IAAe,KAAK,KAAKV,IAAWM,CAAU,IAAIG,IAAW,GAC7DE,IAAM,KAAK,IAAIN,EAAM,QAAQG,IAAQE,CAAY;CAEvD,OACI,kBAAC,OAAD;EACI,KAAKf;EACL,WAAWiB,EAAG1B,EAAO,QAAQ2B,CAAS;EACtC,OAAO;GAAE;GAAQ,GAAGC;EAAM;EAC1B,WAAW,MAAUhB,EAAciB,EAAM,OAA0B,SAAS;EAC5E,MAAK;EACL,cAAYC;EACZ,UAAUT,IAAa,IAAI,KAAA;EAE3B,UAAA,kBAAC,OAAD;GAAK,WAAWrB,EAAO;GAAQ,OAAO,EAAE,QAAQkB,EAAY;GACvD,UAAAC,EAAM,MAAMG,GAAOG,CAAG,CAAC,CAAC,KAAK,GAAM,MAAW;IAC3C,IAAMpB,IAAQiB,IAAQS;IACtB,OACI,kBAACzB,GAAD;KAEU;KACC;KACP,KAAKD,IAAQe;KACb,QAAQA;KACR,QAAQY;IACX,GANQC,IAASA,EAAO7B,GAAMC,CAAK,IAAIA,CAMvC;GAET,CAAC;EACA,CAAA;CACJ,CAAA;AAEb"}

package/dist/components/VirtualList/VirtualList.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.module.cjs","names":[],"sources":["../../../src/components/VirtualList/VirtualList.module.css"],"sourcesContent":[".scroll {\n    position: relative;\n    overflow: auto;\n    width: 100%;\n}\n\n.spacer {\n    position: relative;\n    width: 100%;\n}\n\n.row {\n    position: absolute;\n    left: 0;\n    right: 0;\n}\n\n.scroll:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}
+{"version":3,"file":"VirtualList.module.cjs","names":["scroll","spacer","row","VirtualList_module_default"],"sources":["../../../src/components/VirtualList/VirtualList.module.css"],"sourcesContent":[".scroll {\n    position: relative;\n    overflow: auto;\n    width: 100%;\n}\n\n.spacer {\n    position: relative;\n    width: 100%;\n}\n\n.row {\n    position: absolute;\n    left: 0;\n    right: 0;\n}\n\n.scroll:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}

package/dist/components/VirtualList/VirtualList.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.module.js","names":[],"sources":["../../../src/components/VirtualList/VirtualList.module.css"],"sourcesContent":[".scroll {\n    position: relative;\n    overflow: auto;\n    width: 100%;\n}\n\n.spacer {\n    position: relative;\n    width: 100%;\n}\n\n.row {\n    position: absolute;\n    left: 0;\n    right: 0;\n}\n\n.scroll:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}
+{"version":3,"file":"VirtualList.module.js","names":["scroll","spacer","row","VirtualList_module_default"],"sources":["../../../src/components/VirtualList/VirtualList.module.css"],"sourcesContent":[".scroll {\n    position: relative;\n    overflow: auto;\n    width: 100%;\n}\n\n.spacer {\n    position: relative;\n    width: 100%;\n}\n\n.row {\n    position: absolute;\n    left: 0;\n    right: 0;\n}\n\n.scroll:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n"],"mappings":";"}

package/dist/components/VirtualTable/VirtualTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualTable.cjs","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count — windowing needs its own measurements\n * (rowHeight, height, overscan, scrollToIndex) on top of everything a table already\n * takes (data, columns, rowKey, initialSort, onRowClick, emptyMessage, caption). The\n * caption is not optional chrome — a virtualised grid without one is unreadable to a\n * screen reader.\n */\nimport {\n    type HTMLAttributes,\n    type ReactNode,\n    memo,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\n\nimport type { TableAlign } from \"../Table\";\nimport styles from \"./VirtualTable.module.css\";\n\nexport type VirtualTableSortDirection = \"asc\" | \"desc\";\n\nexport interface VirtualTableSort<T> {\n    key: keyof T;\n    direction: VirtualTableSortDirection;\n}\n\nexport interface VirtualTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `row[key]`. */\n    render?: (row: T, index: number) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment. */\n    align?: TableAlign;\n    /**\n     * Column width. Recommended for every column: virtualized rows enter and\n     * leave the DOM as you scroll, so letting the browser auto-size columns from\n     * whatever is currently rendered makes them jump mid-scroll.\n     */\n    width?: string | number;\n}\n\nexport interface VirtualTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Full dataset. Every row is accounted for; only the visible ones render. */\n    data: T[];\n    /** Column definitions. */\n    columns: VirtualTableColumn<T>[];\n    /**\n     * Row height in px. Must be uniform and must match what the CSS produces,\n     * because it is what maps scroll offset to row index.\n     */\n    rowHeight: number;\n    /** Height of the scroll viewport — a number of px or any CSS length. */\n    height: number | string;\n    /** Rows rendered above and below the viewport. Default `4`. */\n    overscan?: number;\n    /** Stable key extractor. Defaults to the row's index in `data`. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Sort applied before any header interaction. */\n    initialSort?: VirtualTableSort<T>;\n    /** Called when a row is activated by click, `Enter` or `Space`. */\n    onRowClick?: (row: T, index: number) => void;\n    /** Content shown when `data` is empty. */\n    emptyMessage?: ReactNode;\n    /** Accessible name for the table. Rendered as a visually hidden `<caption>`. */\n    caption?: ReactNode;\n    /** Scroll this row into view whenever it changes. */\n    scrollToIndex?: number;\n}\n\n/** Resolve a column's alignment to its CSS module class. */\nfunction alignClass(align: TableAlign | undefined): string | undefined {\n    if (align === \"right\") return styles.alignRight;\n    if (align === \"center\") return styles.alignCenter;\n    return undefined;\n}\n\ninterface VirtualTableRowProps<T> {\n    row: T;\n    index: number;\n    rowHeight: number;\n    columns: VirtualTableColumn<T>[];\n    onRowClick: ((row: T, index: number) => void) | undefined;\n}\n\n/**\n * One windowed table row, rendered on its own so React can skip it.\n *\n * Scrolling changes state that lives inside `VirtualTable`, so without this\n * boundary every scroll event re-rendered every visible row and every cell in\n * them — including whatever `column.render` builds — rather than the one row\n * that entered the window.\n *\n * `columns` and `onRowClick` take part in the comparison because a cell renderer\n * closes over the app's state: leaving them out would freeze a row showing a\n * stale cell. An app that keeps its `columns` array stable (a module constant, or\n * `useMemo`) therefore gets the skip, and one that rebuilds it every render gets\n * exactly today's behaviour.\n *\n * @param props - The row, its position and the column contract.\n * @returns The table row element.\n */\nfunction VirtualTableRowImpl<T>({\n    row,\n    index,\n    rowHeight,\n    columns,\n    onRowClick,\n}: VirtualTableRowProps<T>) {\n    return (\n        <tr\n            aria-rowindex={index + 1}\n            className={cn(styles.tr, onRowClick && styles.clickable)}\n            style={{ height: rowHeight }}\n            tabIndex={onRowClick ? 0 : undefined}\n            onClick={onRowClick ? () => onRowClick(row, index) : undefined}\n            onKeyDown={\n                onRowClick\n                    ? (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                              event.preventDefault();\n                              onRowClick(row, index);\n                          }\n                      }\n                    : undefined\n            }\n        >\n            {columns.map((column) => (\n                <td\n                    key={String(column.key)}\n                    className={cn(styles.td, alignClass(column.align))}\n                    style={{ width: column.width }}\n                >\n                    {column.render\n                        ? column.render(row, index)\n                        : ((row[column.key] as ReactNode) ?? null)}\n                </td>\n            ))}\n        </tr>\n    );\n}\n\n/**\n * `memo` erases the generic, so the memoised component is re-typed as the\n * function it wraps. The runtime value is unchanged; only the signature is\n * restored.\n */\nconst VirtualTableRow = memo(VirtualTableRowImpl) as typeof VirtualTableRowImpl;\n\n/**\n * A table that stays responsive at 10k+ rows by rendering only the visible window.\n *\n * `Table` renders every row it is given and `DataTable` paginates to keep that\n * count small; neither has an answer for \"show me all 40 000 rows in one\n * scrollable grid\". This does, at the cost of one constraint: **`rowHeight` must\n * be uniform**, since mapping a scroll offset to a row index is what makes the\n * window computable without measuring anything.\n *\n * It stays a real `<table>`. The window is produced by two spacer rows — one\n * above the visible slice, one below — instead of absolutely positioning rows.\n * That is deliberate: `position: absolute` on `<tr>` collapses table layout, so\n * every column width would have to be computed by hand, and the element would\n * stop being a table for assistive technology. With spacer rows the browser keeps\n * doing column layout and screen readers keep announcing a grid.\n *\n * Because only a slice is in the DOM, `aria-rowcount` on the table and\n * `aria-rowindex` on each row carry the real numbers — without them a screen\n * reader announces \"row 3 of 20\" while the user is on row 5003 of 40 000.\n *\n * @example\n * <VirtualTable\n *     data={rows}\n *     columns={[\n *         { key: \"id\", header: \"#\", width: 80, sortable: true },\n *         { key: \"name\", header: \"Nome\", width: 240, sortable: true },\n *         { key: \"total\", header: \"Total\", align: \"right\", width: 120, sortable: true },\n *     ]}\n *     rowHeight={40}\n *     height={480}\n *     rowKey={(row) => row.id}\n * />\n */\nexport function VirtualTable<T>({\n    data,\n    columns,\n    rowHeight,\n    height,\n    overscan = 4,\n    rowKey,\n    initialSort,\n    onRowClick,\n    emptyMessage = \"Nenhum registro encontrado.\",\n    caption,\n    scrollToIndex,\n    className,\n    ...rest\n}: VirtualTableProps<T>) {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n    const [sort, setSort] = useState<VirtualTableSort<T> | null>(initialSort ?? null);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element || scrollToIndex == null) return;\n        element.scrollTop = Math.max(0, Math.min(scrollToIndex, data.length - 1)) * rowHeight;\n    }, [scrollToIndex, rowHeight, data.length]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return data;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...data].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [data, sort]);\n\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);\n    const windowSize = Math.ceil(viewport / rowHeight) + overscan * 2;\n    const end = Math.min(sorted.length, start + windowSize);\n    const slice = sorted.slice(start, end);\n\n    /**\n     * Advance a column through asc → desc → unsorted, and jump back to the top.\n     *\n     * The scroll reset happens here rather than in an effect keyed on the sort\n     * state for two reasons: this is the actual event that invalidates the offset\n     * (keeping it would leave the user at the same pixel of a different dataset,\n     * which reads as the table having jumped somewhere random), and an effect would\n     * also fire on mount — clobbering an initial `scrollToIndex`.\n     */\n    const toggleSort = useCallback((key: keyof T): void => {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n        const element = scrollRef.current;\n        if (element) element.scrollTop = 0;\n        setScrollTop(0);\n    }, []);\n\n    return (\n        <div\n            ref={scrollRef}\n            className={cn(styles.scroll, className)}\n            style={{ height }}\n            onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}\n            {...rest}\n        >\n            <table className={styles.table} aria-rowcount={sorted.length}>\n                {caption ? <caption className={styles.caption}>{caption}</caption> : null}\n                <thead className={styles.head}>\n                    <tr>\n                        {columns.map((column) => {\n                            const isSorted = sort?.key === column.key;\n                            return (\n                                <th\n                                    key={String(column.key)}\n                                    scope=\"col\"\n                                    className={cn(styles.th, alignClass(column.align))}\n                                    style={{ width: column.width }}\n                                    aria-sort={\n                                        isSorted\n                                            ? sort?.direction === \"asc\"\n                                                ? \"ascending\"\n                                                : \"descending\"\n                                            : column.sortable\n                                              ? \"none\"\n                                              : undefined\n                                    }\n                                >\n                                    {column.sortable ? (\n                                        <button\n                                            type=\"button\"\n                                            className={styles.sortButton}\n                                            onClick={() => toggleSort(column.key)}\n                                        >\n                                            {column.header}\n                                            <span className={styles.sortIndicator} aria-hidden>\n                                                {isSorted\n                                                    ? sort?.direction === \"asc\"\n                                                        ? \"▲\"\n                                                        : \"▼\"\n                                                    : \"↕\"}\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        column.header\n                                    )}\n                                </th>\n                            );\n                        })}\n                    </tr>\n                </thead>\n                <tbody>\n                    {sorted.length === 0 ? (\n                        <tr>\n                            <td className={styles.emptyRow} colSpan={columns.length}>\n                                {emptyMessage}\n                            </td>\n                        </tr>\n                    ) : (\n                        <>\n                            {start > 0 && <tr aria-hidden style={{ height: start * rowHeight }} />}\n                            {slice.map((row, offset) => {\n                                const index = start + offset;\n                                return (\n                                    <VirtualTableRow\n                                        key={rowKey ? rowKey(row, index) : index}\n                                        row={row}\n                                        index={index}\n                                        rowHeight={rowHeight}\n                                        columns={columns}\n                                        onRowClick={onRowClick}\n                                    />\n                                );\n                            })}\n                            {end < sorted.length && (\n                                <tr\n                                    aria-hidden\n                                    style={{ height: (sorted.length - end) * rowHeight }}\n                                />\n                            )}\n                        </>\n                    )}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VirtualTable.cjs","names":["styles","cn","memo","useRef","useState","useMemo","compareValues","useCallback","_Fragment","require_cn","require_compare_values","require_VirtualTable_module","react","react_jsx_runtime","alignClass","align","VirtualTableRowImpl","index","onRowClick","rowHeight","row","event","columns","column","VirtualTableRow","VirtualTable","rest","scrollRef","scrollTop","setScrollTop","viewport","setViewport","sort","setSort","initialSort","element","observer","scrollToIndex","data","sorted","factor","a","b","start","overscan","windowSize","end","slice","toggleSort","current","key","className","caption","isSorted","emptyMessage","offset","rowKey"],"sources":["../../../src/components/VirtualTable/VirtualTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count — windowing needs its own measurements\n * (rowHeight, height, overscan, scrollToIndex) on top of everything a table already\n * takes (data, columns, rowKey, initialSort, onRowClick, emptyMessage, caption). The\n * caption is not optional chrome — a virtualised grid without one is unreadable to a\n * screen reader.\n */\nimport {\n    type HTMLAttributes,\n    type ReactNode,\n    memo,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\n\nimport type { TableAlign } from \"../Table\";\nimport styles from \"./VirtualTable.module.css\";\n\nexport type VirtualTableSortDirection = \"asc\" | \"desc\";\n\nexport interface VirtualTableSort<T> {\n    key: keyof T;\n    direction: VirtualTableSortDirection;\n}\n\nexport interface VirtualTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `row[key]`. */\n    render?: (row: T, index: number) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment. */\n    align?: TableAlign;\n    /**\n     * Column width. Recommended for every column: virtualized rows enter and\n     * leave the DOM as you scroll, so letting the browser auto-size columns from\n     * whatever is currently rendered makes them jump mid-scroll.\n     */\n    width?: string | number;\n}\n\nexport interface VirtualTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Full dataset. Every row is accounted for; only the visible ones render. */\n    data: T[];\n    /** Column definitions. */\n    columns: VirtualTableColumn<T>[];\n    /**\n     * Row height in px. Must be uniform and must match what the CSS produces,\n     * because it is what maps scroll offset to row index.\n     */\n    rowHeight: number;\n    /** Height of the scroll viewport — a number of px or any CSS length. */\n    height: number | string;\n    /** Rows rendered above and below the viewport. Default `4`. */\n    overscan?: number;\n    /** Stable key extractor. Defaults to the row's index in `data`. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Sort applied before any header interaction. */\n    initialSort?: VirtualTableSort<T>;\n    /** Called when a row is activated by click, `Enter` or `Space`. */\n    onRowClick?: (row: T, index: number) => void;\n    /** Content shown when `data` is empty. */\n    emptyMessage?: ReactNode;\n    /** Accessible name for the table. Rendered as a visually hidden `<caption>`. */\n    caption?: ReactNode;\n    /** Scroll this row into view whenever it changes. */\n    scrollToIndex?: number;\n}\n\n/** Resolve a column's alignment to its CSS module class. */\nfunction alignClass(align: TableAlign | undefined): string | undefined {\n    if (align === \"right\") return styles.alignRight;\n    if (align === \"center\") return styles.alignCenter;\n    return undefined;\n}\n\ninterface VirtualTableRowProps<T> {\n    row: T;\n    index: number;\n    rowHeight: number;\n    columns: VirtualTableColumn<T>[];\n    onRowClick: ((row: T, index: number) => void) | undefined;\n}\n\n/**\n * One windowed table row, rendered on its own so React can skip it.\n *\n * Scrolling changes state that lives inside `VirtualTable`, so without this\n * boundary every scroll event re-rendered every visible row and every cell in\n * them — including whatever `column.render` builds — rather than the one row\n * that entered the window.\n *\n * `columns` and `onRowClick` take part in the comparison because a cell renderer\n * closes over the app's state: leaving them out would freeze a row showing a\n * stale cell. An app that keeps its `columns` array stable (a module constant, or\n * `useMemo`) therefore gets the skip, and one that rebuilds it every render gets\n * exactly today's behaviour.\n *\n * @param props - The row, its position and the column contract.\n * @returns The table row element.\n */\nfunction VirtualTableRowImpl<T>({\n    row,\n    index,\n    rowHeight,\n    columns,\n    onRowClick,\n}: VirtualTableRowProps<T>) {\n    return (\n        <tr\n            aria-rowindex={index + 1}\n            className={cn(styles.tr, onRowClick && styles.clickable)}\n            style={{ height: rowHeight }}\n            tabIndex={onRowClick ? 0 : undefined}\n            onClick={onRowClick ? () => onRowClick(row, index) : undefined}\n            onKeyDown={\n                onRowClick\n                    ? (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                              event.preventDefault();\n                              onRowClick(row, index);\n                          }\n                      }\n                    : undefined\n            }\n        >\n            {columns.map((column) => (\n                <td\n                    key={String(column.key)}\n                    className={cn(styles.td, alignClass(column.align))}\n                    style={{ width: column.width }}\n                >\n                    {column.render\n                        ? column.render(row, index)\n                        : ((row[column.key] as ReactNode) ?? null)}\n                </td>\n            ))}\n        </tr>\n    );\n}\n\n/**\n * `memo` erases the generic, so the memoised component is re-typed as the\n * function it wraps. The runtime value is unchanged; only the signature is\n * restored.\n */\nconst VirtualTableRow = memo(VirtualTableRowImpl) as typeof VirtualTableRowImpl;\n\n/**\n * A table that stays responsive at 10k+ rows by rendering only the visible window.\n *\n * `Table` renders every row it is given and `DataTable` paginates to keep that\n * count small; neither has an answer for \"show me all 40 000 rows in one\n * scrollable grid\". This does, at the cost of one constraint: **`rowHeight` must\n * be uniform**, since mapping a scroll offset to a row index is what makes the\n * window computable without measuring anything.\n *\n * It stays a real `<table>`. The window is produced by two spacer rows — one\n * above the visible slice, one below — instead of absolutely positioning rows.\n * That is deliberate: `position: absolute` on `<tr>` collapses table layout, so\n * every column width would have to be computed by hand, and the element would\n * stop being a table for assistive technology. With spacer rows the browser keeps\n * doing column layout and screen readers keep announcing a grid.\n *\n * Because only a slice is in the DOM, `aria-rowcount` on the table and\n * `aria-rowindex` on each row carry the real numbers — without them a screen\n * reader announces \"row 3 of 20\" while the user is on row 5003 of 40 000.\n *\n * @example\n * <VirtualTable\n *     data={rows}\n *     columns={[\n *         { key: \"id\", header: \"#\", width: 80, sortable: true },\n *         { key: \"name\", header: \"Nome\", width: 240, sortable: true },\n *         { key: \"total\", header: \"Total\", align: \"right\", width: 120, sortable: true },\n *     ]}\n *     rowHeight={40}\n *     height={480}\n *     rowKey={(row) => row.id}\n * />\n */\nexport function VirtualTable<T>({\n    data,\n    columns,\n    rowHeight,\n    height,\n    overscan = 4,\n    rowKey,\n    initialSort,\n    onRowClick,\n    emptyMessage = \"Nenhum registro encontrado.\",\n    caption,\n    scrollToIndex,\n    className,\n    ...rest\n}: VirtualTableProps<T>) {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n    const [sort, setSort] = useState<VirtualTableSort<T> | null>(initialSort ?? null);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element || scrollToIndex == null) return;\n        element.scrollTop = Math.max(0, Math.min(scrollToIndex, data.length - 1)) * rowHeight;\n    }, [scrollToIndex, rowHeight, data.length]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return data;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...data].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [data, sort]);\n\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);\n    const windowSize = Math.ceil(viewport / rowHeight) + overscan * 2;\n    const end = Math.min(sorted.length, start + windowSize);\n    const slice = sorted.slice(start, end);\n\n    /**\n     * Advance a column through asc → desc → unsorted, and jump back to the top.\n     *\n     * The scroll reset happens here rather than in an effect keyed on the sort\n     * state for two reasons: this is the actual event that invalidates the offset\n     * (keeping it would leave the user at the same pixel of a different dataset,\n     * which reads as the table having jumped somewhere random), and an effect would\n     * also fire on mount — clobbering an initial `scrollToIndex`.\n     */\n    const toggleSort = useCallback((key: keyof T): void => {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n        const element = scrollRef.current;\n        if (element) element.scrollTop = 0;\n        setScrollTop(0);\n    }, []);\n\n    return (\n        <div\n            ref={scrollRef}\n            className={cn(styles.scroll, className)}\n            style={{ height }}\n            onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}\n            {...rest}\n        >\n            <table className={styles.table} aria-rowcount={sorted.length}>\n                {caption ? <caption className={styles.caption}>{caption}</caption> : null}\n                <thead className={styles.head}>\n                    <tr>\n                        {columns.map((column) => {\n                            const isSorted = sort?.key === column.key;\n                            return (\n                                <th\n                                    key={String(column.key)}\n                                    scope=\"col\"\n                                    className={cn(styles.th, alignClass(column.align))}\n                                    style={{ width: column.width }}\n                                    aria-sort={\n                                        isSorted\n                                            ? sort?.direction === \"asc\"\n                                                ? \"ascending\"\n                                                : \"descending\"\n                                            : column.sortable\n                                              ? \"none\"\n                                              : undefined\n                                    }\n                                >\n                                    {column.sortable ? (\n                                        <button\n                                            type=\"button\"\n                                            className={styles.sortButton}\n                                            onClick={() => toggleSort(column.key)}\n                                        >\n                                            {column.header}\n                                            <span className={styles.sortIndicator} aria-hidden>\n                                                {isSorted\n                                                    ? sort?.direction === \"asc\"\n                                                        ? \"▲\"\n                                                        : \"▼\"\n                                                    : \"↕\"}\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        column.header\n                                    )}\n                                </th>\n                            );\n                        })}\n                    </tr>\n                </thead>\n                <tbody>\n                    {sorted.length === 0 ? (\n                        <tr>\n                            <td className={styles.emptyRow} colSpan={columns.length}>\n                                {emptyMessage}\n                            </td>\n                        </tr>\n                    ) : (\n                        <>\n                            {start > 0 && <tr aria-hidden style={{ height: start * rowHeight }} />}\n                            {slice.map((row, offset) => {\n                                const index = start + offset;\n                                return (\n                                    <VirtualTableRow\n                                        key={rowKey ? rowKey(row, index) : index}\n                                        row={row}\n                                        index={index}\n                                        rowHeight={rowHeight}\n                                        columns={columns}\n                                        onRowClick={onRowClick}\n                                    />\n                                );\n                            })}\n                            {end < sorted.length && (\n                                <tr\n                                    aria-hidden\n                                    style={{ height: (sorted.length - end) * rowHeight }}\n                                />\n                            )}\n                        </>\n                    )}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}