tempest-react-sdk 0.78.0 → 0.80.0

package/dist/components/TreeView/TreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.js","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — expansion and selection\n * are two independent controlled states, each with its uncontrolled twin\n * (expandedIds/defaultExpandedIds/onExpandedChange, selectedId/\n * defaultSelectedId/onSelect), plus toggleOnSelect for the case where they should\n * move together. The body is the flattened visible list and the roving focus over\n * it.\n */\nimport { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TreeView.js","names":["styles","TreeView_module_default","flatten","node","nodes","hasChildren","expanded","expandedIds","out","depth","TreeView","expandedControlled","internalExpanded","setInternalExpanded","useState","defaultExpandedIds","selectionControlled","selectedId","internalSelected","setInternalSelected","defaultSelectedId","selected","expandedSet","useMemo","rows","focusedId","setFocusedId","containerRef","useRef","activeId","row","setExpanded","useCallback","next","onExpandedChange","toggle","id","x","select","onSelect","toggleOnSelect","focusRow","moveFocus","index","from","delta","handleKeyDown","event","label","cn","className","isSelected","ChevronRight"],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — expansion and selection\n * are two independent controlled states, each with its uncontrolled twin\n * (expandedIds/defaultExpandedIds/onExpandedChange, selectedId/\n * defaultSelectedId/onSelect), plus toggleOnSelect for the case where they should\n * move together. The body is the flattened visible list and the roving focus over\n * it.\n */\nimport { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TreeView.module.cjs","names":[],"sources":["../../../src/components/TreeView/TreeView.module.css"],"sourcesContent":[".tree {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n}\n\n.item {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.row {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding-block: var(--tempest-space-2);\n    padding-inline-end: var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    user-select: none;\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.row:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-offset) * -1);\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.selected:hover {\n    background-color: var(--tempest-primary-soft-hover);\n}\n\n.disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.disabled:hover {\n    background-color: transparent;\n}\n\n.chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--tempest-radius-xs);\n    color: var(--tempest-text-muted);\n    transition: transform var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.chevron:hover {\n    background-color: var(--tempest-surface-3);\n}\n\n.chevronOpen {\n    transform: rotate(90deg);\n}\n\n.chevronPlaceholder {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    color: var(--tempest-text-muted);\n}\n\n.label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .row,\n    .chevron {\n        transition: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"TreeView.module.cjs","names":["tree","item","row","selected","disabled","chevron","chevronOpen","chevronPlaceholder","icon","label","TreeView_module_default"],"sources":["../../../src/components/TreeView/TreeView.module.css"],"sourcesContent":[".tree {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n}\n\n.item {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.row {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding-block: var(--tempest-space-2);\n    padding-inline-end: var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    user-select: none;\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.row:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-offset) * -1);\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.selected:hover {\n    background-color: var(--tempest-primary-soft-hover);\n}\n\n.disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.disabled:hover {\n    background-color: transparent;\n}\n\n.chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--tempest-radius-xs);\n    color: var(--tempest-text-muted);\n    transition: transform var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.chevron:hover {\n    background-color: var(--tempest-surface-3);\n}\n\n.chevronOpen {\n    transform: rotate(90deg);\n}\n\n.chevronPlaceholder {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    color: var(--tempest-text-muted);\n}\n\n.label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .row,\n    .chevron {\n        transition: none;\n    }\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"TreeView.module.js","names":[],"sources":["../../../src/components/TreeView/TreeView.module.css"],"sourcesContent":[".tree {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n}\n\n.item {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.row {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding-block: var(--tempest-space-2);\n    padding-inline-end: var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    user-select: none;\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.row:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-offset) * -1);\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.selected:hover {\n    background-color: var(--tempest-primary-soft-hover);\n}\n\n.disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.disabled:hover {\n    background-color: transparent;\n}\n\n.chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--tempest-radius-xs);\n    color: var(--tempest-text-muted);\n    transition: transform var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.chevron:hover {\n    background-color: var(--tempest-surface-3);\n}\n\n.chevronOpen {\n    transform: rotate(90deg);\n}\n\n.chevronPlaceholder {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    color: var(--tempest-text-muted);\n}\n\n.label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .row,\n    .chevron {\n        transition: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"TreeView.module.js","names":["tree","item","row","selected","disabled","chevron","chevronOpen","chevronPlaceholder","icon","label","TreeView_module_default"],"sources":["../../../src/components/TreeView/TreeView.module.css"],"sourcesContent":[".tree {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n}\n\n.item {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.row {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding-block: var(--tempest-space-2);\n    padding-inline-end: var(--tempest-space-3);\n    border-radius: var(--tempest-radius-sm);\n    cursor: pointer;\n    user-select: none;\n    transition:\n        background-color var(--tempest-duration-fast) var(--tempest-ease-out),\n        color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.row:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-offset) * -1);\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    font-weight: var(--tempest-weight-medium);\n}\n\n.selected:hover {\n    background-color: var(--tempest-primary-soft-hover);\n}\n\n.disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.disabled:hover {\n    background-color: transparent;\n}\n\n.chevron {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n    border-radius: var(--tempest-radius-xs);\n    color: var(--tempest-text-muted);\n    transition: transform var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.chevron:hover {\n    background-color: var(--tempest-surface-3);\n}\n\n.chevronOpen {\n    transform: rotate(90deg);\n}\n\n.chevronPlaceholder {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 18px;\n    height: 18px;\n}\n\n.icon {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    color: var(--tempest-text-muted);\n}\n\n.label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .row,\n    .chevron {\n        transition: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/TruncateText/TruncateText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TruncateText.cjs","names":[],"sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"gHAmBA,SAAgB,EAAa,CACzB,QAAQ,EACR,YACA,QACA,WACA,GAAG,GACe,CAClB,IAAM,EAAc,CAChB,GAAG,EACH,wBAAyB,CAC7B,EAEA,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,MAAO,EAAa,GAAI,EAChE,UACA,CAAA,CAEb"}
+{"version":3,"file":"TruncateText.cjs","names":["cn","styles","require_cn","require_TruncateText_module","react_jsx_runtime","TruncateText","props","mergedStyle","style","lines","className"],"sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"A,gHAmBA,SAAgBK,EAAa,CACzB,QAAQ,EACR,YACA,QACA,WACA,GAAGC,GACe,CAClB,IAAMC,EAAc,CAChB,GAAGC,EACH,wBAAyBC,CAC7B,EAEA,OACI,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,GAAGC,EAAAA,QAAO,MAAOS,CAAS,EAAG,MAAOH,EAAa,GAAID,EAChE,UACA,CAAA,CAEb,C"}

package/dist/components/TruncateText/TruncateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"TruncateText.js","names":[],"sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;AAmBA,SAAgB,EAAa,EACzB,WAAQ,GACR,cACA,UACA,aACA,GAAG,KACe;CAClB,IAAM,IAAc;EAChB,GAAG;EACH,yBAAyB;CAC7B;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,OAAO,CAAS;EAAG,OAAO;EAAa,GAAI;EAChE;CACA,CAAA;AAEb"}
+{"version":3,"file":"TruncateText.js","names":["styles","TruncateText_module_default","TruncateText","props","mergedStyle","style","lines","cn","className"],"sources":["../../../src/components/TruncateText/TruncateText.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TruncateText.module.css\";\n\nexport interface TruncateTextProps extends HTMLAttributes<HTMLDivElement> {\n    /** Maximum number of lines to show before clamping. Defaults to 1. */\n    lines?: number;\n    /** Content to clamp. */\n    children: ReactNode;\n}\n\n/**\n * Clamp text to a fixed number of lines using a CSS line-clamp, adding an\n * ellipsis on overflow. The line count is driven by the\n * `--tempest-clamp-lines` custom property.\n *\n * @example\n * <TruncateText lines={2}>{longDescription}</TruncateText>\n */\nexport function TruncateText({\n    lines = 1,\n    className,\n    style,\n    children,\n    ...props\n}: TruncateTextProps) {\n    const mergedStyle = {\n        ...style,\n        \"--tempest-clamp-lines\": lines,\n    } as CSSProperties;\n\n    return (\n        <div className={cn(styles.clamp, className)} style={mergedStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;AAmBA,SAAgBE,EAAa,EACzB,WAAQ,GACR,cACA,UACA,aACA,GAAGC,KACe;CAClB,IAAMC,IAAc;EAChB,GAAGC;EACH,yBAAyBC;CAC7B;CAEA,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGP,EAAO,OAAOQ,CAAS;EAAG,OAAOJ;EAAa,GAAID;EAChE;CACA,CAAA;AAEb"}

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

@@ -1 +1 @@
-{"version":3,"file":"TruncateText.module.cjs","names":[],"sources":["../../../src/components/TruncateText/TruncateText.module.css"],"sourcesContent":[".clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--tempest-clamp-lines, 1);\n    line-clamp: var(--tempest-clamp-lines, 1);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n"],"mappings":";"}
+{"version":3,"file":"TruncateText.module.cjs","names":["clamp","TruncateText_module_default"],"sources":["../../../src/components/TruncateText/TruncateText.module.css"],"sourcesContent":[".clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--tempest-clamp-lines, 1);\n    line-clamp: var(--tempest-clamp-lines, 1);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"TruncateText.module.js","names":[],"sources":["../../../src/components/TruncateText/TruncateText.module.css"],"sourcesContent":[".clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--tempest-clamp-lines, 1);\n    line-clamp: var(--tempest-clamp-lines, 1);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n"],"mappings":";"}
+{"version":3,"file":"TruncateText.module.js","names":["clamp","TruncateText_module_default"],"sources":["../../../src/components/TruncateText/TruncateText.module.css"],"sourcesContent":[".clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--tempest-clamp-lines, 1);\n    line-clamp: var(--tempest-clamp-lines, 1);\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n"],"mappings":";"}

package/dist/components/UpdatePrompt/UpdatePrompt.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatePrompt.cjs","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"0IAiCA,SAAgB,EAAa,CACzB,OACA,WACA,YACA,UAAU,mCACV,cAAc,YACd,WAAW,SACX,YACA,GAAG,GACe,CAElB,OADK,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAW,CAAS,EACxD,KAAK,QACL,YAAU,YACV,GAAI,EAJR,SAAA,EAMI,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAW,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,QAAU,SAAA,CAAc,CAAA,GAChD,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,OAAQ,QAAS,EACpD,SAAA,CACG,CAAA,EACP,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,aAAW,YACX,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAG,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC7B,CAAA,CAEX,IAvBS,IAyBtB"}
+{"version":3,"file":"UpdatePrompt.cjs","names":["cn","styles","RefreshCw","X","require_cn","require_UpdatePrompt_module","react_jsx_runtime","lucide_react","UpdatePrompt","props","open","position","className","message","onUpdate","actionLabel","onDismiss"],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"A,0IAiCA,SAAgBQ,EAAa,CACzB,OACA,WACA,YACA,UAAU,mCACV,cAAc,YACd,WAAW,SACX,YACA,GAAGC,GACe,CAElB,OADKC,GAED,EAAAJ,EAAA,KAAA,CAAC,MAAD,CACI,UAAWN,EAAAA,GAAGC,EAAAA,QAAO,OAAQA,EAAAA,QAAOU,GAAWC,CAAS,EACxD,KAAK,QACL,YAAU,YACV,GAAIH,EAJR,SAAA,EAMI,EAAAH,EAAA,IAAA,CAACJ,EAAAA,UAAD,CAAW,UAAWD,EAAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GACjE,EAAAK,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWL,EAAAA,QAAO,QAAU,SAAAY,CAAc,CAAA,GAChD,EAAAP,EAAA,IAAA,CAAC,SAAD,CAAQ,KAAK,SAAS,UAAWL,EAAAA,QAAO,OAAQ,QAASa,EACpD,SAAAC,CACG,CAAA,EACPC,IACG,EAAAV,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWL,EAAAA,QAAO,QAClB,aAAW,YACX,QAASe,EAET,UAAA,EAAAV,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAG,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC7B,CAAA,CAEX,C,GAvBS,IAyBtB,C"}

package/dist/components/UpdatePrompt/UpdatePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatePrompt.js","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAiCA,SAAgB,EAAa,EACzB,SACA,aACA,cACA,aAAU,oCACV,iBAAc,aACd,cAAW,UACX,cACA,GAAG,KACe;CAElB,OADK,IAED,kBAAC,OAAD;EACI,WAAW,EAAG,EAAO,QAAQ,EAAO,IAAW,CAAS;EACxD,MAAK;EACL,aAAU;EACV,GAAI;EAJR,UAAA;GAMI,kBAAC,GAAD;IAAW,WAAW,EAAO;IAAM,MAAM;IAAI,eAAY;GAAQ,CAAA;GACjE,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAU,UAAA;GAAc,CAAA;GAChD,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,EAAO;IAAQ,SAAS;IACpD,UAAA;GACG,CAAA;GACP,KACG,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,cAAW;IACX,SAAS;IAET,UAAA,kBAAC,GAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC7B,CAAA;EAEX;MAvBS;AAyBtB"}
+{"version":3,"file":"UpdatePrompt.js","names":["styles","UpdatePrompt_module_default","UpdatePrompt","props","open","cn","position","className","RefreshCw","message","onUpdate","actionLabel","onDismiss","X"],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAiCA,SAAgBE,EAAa,EACzB,SACA,aACA,cACA,aAAU,oCACV,iBAAc,aACd,cAAW,UACX,cACA,GAAGC,KACe;CAElB,OADKC,IAED,kBAAC,OAAD;EACI,WAAWC,EAAGL,EAAO,QAAQA,EAAOM,IAAWC,CAAS;EACxD,MAAK;EACL,aAAU;EACV,GAAIJ;EAJR,UAAA;GAMI,kBAACK,GAAD;IAAW,WAAWR,EAAO;IAAM,MAAM;IAAI,eAAY;GAAQ,CAAA;GACjE,kBAAC,QAAD;IAAM,WAAWA,EAAO;IAAU,UAAAS;GAAc,CAAA;GAChD,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAWT,EAAO;IAAQ,SAASU;IACpD,UAAAC;GACG,CAAA;GACPC,KACG,kBAAC,UAAD;IACI,MAAK;IACL,WAAWZ,EAAO;IAClB,cAAW;IACX,SAASY;IAET,UAAA,kBAACC,GAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC7B,CAAA;EAEX;C,KAvBS;AAyBtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"UpdatePrompt.module.cjs","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.module.css"],"sourcesContent":[".prompt {\n    position: fixed;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    max-width: calc(100vw - 2 * var(--tempest-space-4));\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-info-bg);\n    color: var(--tempest-info-fg);\n    border: 1px solid var(--tempest-info-border);\n    box-shadow: var(--tempest-shadow-lg);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n}\n\n.top {\n    top: max(var(--tempest-space-4), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: max(var(--tempest-space-4), env(safe-area-inset-bottom));\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n\n.message {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.action {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid currentColor;\n    border-radius: var(--tempest-radius-sm);\n    background: transparent;\n    color: currentColor;\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    cursor: pointer;\n}\n\n.action:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.dismiss {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: currentColor;\n    cursor: pointer;\n}\n\n.dismiss:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n"],"mappings":";"}
+{"version":3,"file":"UpdatePrompt.module.cjs","names":["prompt","top","bottom","icon","message","action","dismiss","UpdatePrompt_module_default"],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.module.css"],"sourcesContent":[".prompt {\n    position: fixed;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    max-width: calc(100vw - 2 * var(--tempest-space-4));\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-info-bg);\n    color: var(--tempest-info-fg);\n    border: 1px solid var(--tempest-info-border);\n    box-shadow: var(--tempest-shadow-lg);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n}\n\n.top {\n    top: max(var(--tempest-space-4), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: max(var(--tempest-space-4), env(safe-area-inset-bottom));\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n\n.message {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.action {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid currentColor;\n    border-radius: var(--tempest-radius-sm);\n    background: transparent;\n    color: currentColor;\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    cursor: pointer;\n}\n\n.action:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.dismiss {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: currentColor;\n    cursor: pointer;\n}\n\n.dismiss:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n"],"mappings":";"}

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

@@ -1 +1 @@
-{"version":3,"file":"UpdatePrompt.module.js","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.module.css"],"sourcesContent":[".prompt {\n    position: fixed;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    max-width: calc(100vw - 2 * var(--tempest-space-4));\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-info-bg);\n    color: var(--tempest-info-fg);\n    border: 1px solid var(--tempest-info-border);\n    box-shadow: var(--tempest-shadow-lg);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n}\n\n.top {\n    top: max(var(--tempest-space-4), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: max(var(--tempest-space-4), env(safe-area-inset-bottom));\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n\n.message {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.action {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid currentColor;\n    border-radius: var(--tempest-radius-sm);\n    background: transparent;\n    color: currentColor;\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    cursor: pointer;\n}\n\n.action:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.dismiss {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: currentColor;\n    cursor: pointer;\n}\n\n.dismiss:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n"],"mappings":";"}
+{"version":3,"file":"UpdatePrompt.module.js","names":["prompt","top","bottom","icon","message","action","dismiss","UpdatePrompt_module_default"],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.module.css"],"sourcesContent":[".prompt {\n    position: fixed;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: var(--tempest-z-toast, 1000);\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    max-width: calc(100vw - 2 * var(--tempest-space-4));\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-info-bg);\n    color: var(--tempest-info-fg);\n    border: 1px solid var(--tempest-info-border);\n    box-shadow: var(--tempest-shadow-lg);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-snug);\n}\n\n.top {\n    top: max(var(--tempest-space-4), env(safe-area-inset-top));\n}\n\n.bottom {\n    bottom: max(var(--tempest-space-4), env(safe-area-inset-bottom));\n}\n\n.icon {\n    flex: 0 0 auto;\n}\n\n.message {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.action {\n    flex: 0 0 auto;\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid currentColor;\n    border-radius: var(--tempest-radius-sm);\n    background: transparent;\n    color: currentColor;\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    cursor: pointer;\n}\n\n.action:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.dismiss {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: currentColor;\n    cursor: pointer;\n}\n\n.dismiss:hover {\n    background: color-mix(in srgb, currentColor 12%, transparent);\n}\n"],"mappings":";"}

package/dist/components/VideoPlayer/VideoPlayer.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-fullscreen.cjs"),n=require("../../hooks/use-object-url.cjs"),r=require("./playback-rates.cjs"),i=require("../../audio/duration.cjs"),a=require("./VideoPlayer.module.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("lucide-react");var l={"pt-BR":{play:`Tocar`,pause:`Pausar`,seek:`Posição`,mute:`Silenciar`,unmute:`Ativar som`,volume:`Volume`,rate:`Velocidade`,enterFullscreen:`Tela cheia`,exitFullscreen:`Sair da tela cheia`},en:{play:`Play`,pause:`Pause`,seek:`Seek`,mute:`Mute`,unmute:`Unmute`,volume:`Volume`,rate:`Speed`,enterFullscreen:`Full screen`,exitFullscreen:`Exit full screen`}};function u(e,t){return`${e.toLocaleString(t===`en`?`en-US`:`pt-BR`)}×`}function d({src:d,durationMs:f,poster:p,tracks:m,aspectRatio:h=16/9,rate:g,rates:_=r.DEFAULT_PLAYBACK_RATES,onRateChange:v,shiftPitch:y=!1,fullscreen:b=!0,autoPlay:x=!1,loop:S=!1,muted:C=!1,locale:w=`pt-BR`,actions:T,onEnded:E,onError:D,disabled:O=!1,className:k,...A}){let j=l[w],M=(0,o.useRef)(null),N=(0,o.useRef)(null),P=(0,o.useRef)(!1),[F,I]=(0,o.useState)(!1),[L,R]=(0,o.useState)(0),[z,B]=(0,o.useState)(1/0),[V,H]=(0,o.useState)(g??1),[U,W]=(0,o.useState)(1),[G,K]=(0,o.useState)(C),q=t.useFullscreen(M),J=n.useObjectUrl(typeof d==`string`?null:d),Y=typeof d==`string`?d:J,X=g??V,Z=Number.isFinite(f)?f:z,Q=Number.isFinite(Z)&&Z>0;(0,o.useEffect)(()=>{R(0),I(!1),B(1/0),P.current=!1},[Y]),(0,o.useEffect)(()=>{let e=N.current;e&&(e.defaultPlaybackRate=X,e.playbackRate=X,e.preservesPitch=!y)},[X,y,Y]),(0,o.useEffect)(()=>{let e=N.current;e&&(e.volume=U,e.muted=G)},[U,G,Y]);let $=()=>{let e=N.current;if(!e)return;if(Number.isFinite(e.duration)){B(e.duration*1e3);return}if(P.current||Number.isFinite(f))return;P.current=!0;let t=()=>{e.removeEventListener(`timeupdate`,t),Number.isFinite(e.duration)&&B(e.duration*1e3),e.currentTime=0};e.addEventListener(`timeupdate`,t),e.currentTime=1e101},ee=()=>{let e=N.current;if(e&&Y){if(e.paused){Promise.resolve(e.play()).then(()=>I(!0)).catch(e=>D?.(e));return}e.pause(),I(!1)}},te=e=>{let t=N.current;t&&Q&&(t.currentTime=e/1e3,R(e))},ne=e=>{g===void 0&&H(e),v?.(e)};return(0,s.jsxs)(`div`,{ref:M,className:e.cn(a.default.player,q.isFullscreen&&a.default.immersive,k),...A,children:[(0,s.jsx)(`div`,{className:a.default.frame,style:{aspectRatio:h},children:(0,s.jsx)(`video`,{ref:N,className:a.default.video,src:Y??void 0,poster:p,loop:S,autoPlay:x,playsInline:!0,preload:`metadata`,onLoadedMetadata:$,onDurationChange:$,onTimeUpdate:()=>{let e=N.current;e&&R(e.currentTime*1e3)},onPlay:()=>I(!0),onPause:()=>I(!1),onVolumeChange:()=>{let e=N.current;e&&(W(e.volume),K(e.muted))},onEnded:()=>{I(!1),E?.()},onError:e=>D?.(e),children:m?.map(e=>(0,s.jsx)(`track`,{kind:e.kind??`captions`,src:e.src,srcLang:e.srcLang,label:e.label,default:e.default},`${e.kind??`captions`}-${e.srcLang}-${e.src}`))})}),(0,s.jsxs)(`div`,{className:a.default.chrome,children:[(0,s.jsx)(`button`,{type:`button`,className:a.default.transport,onClick:ee,disabled:O||!Y,"aria-label":F?j.pause:j.play,title:F?j.pause:j.play,children:F?(0,s.jsx)(c.Pause,{size:16,"aria-hidden":!0}):(0,s.jsx)(c.Play,{size:16,"aria-hidden":!0})}),(0,s.jsx)(`input`,{type:`range`,className:a.default.seek,min:0,max:Q?Math.round(Z):0,step:100,value:Math.min(Math.round(L),Q?Math.round(Z):0),onChange:e=>te(Number(e.target.value)),disabled:O||!Q,"aria-label":j.seek,"aria-valuetext":`${i.formatDuration(L)} / ${i.formatDuration(Z)}`}),(0,s.jsxs)(`span`,{className:a.default.time,children:[(0,s.jsx)(`span`,{children:i.formatDuration(L)}),(0,s.jsx)(`span`,{"aria-hidden":`true`,children:`/`}),(0,s.jsx)(`span`,{children:i.formatDuration(Z)})]}),(0,s.jsx)(`button`,{type:`button`,className:a.default.icon,onClick:()=>K(e=>!e),disabled:O,"aria-label":G?j.unmute:j.mute,title:G?j.unmute:j.mute,children:G?(0,s.jsx)(c.VolumeX,{size:16,"aria-hidden":!0}):(0,s.jsx)(c.Volume2,{size:16,"aria-hidden":!0})}),(0,s.jsx)(`input`,{type:`range`,className:a.default.volume,min:0,max:1,step:.05,value:G?0:U,onChange:e=>{let t=Number(e.target.value);W(t),K(t===0)},disabled:O,"aria-label":j.volume}),_.length>0&&(0,s.jsx)(`select`,{className:a.default.rate,value:X,onChange:e=>ne(Number(e.target.value)),disabled:O,"aria-label":j.rate,title:j.rate,children:_.map(e=>(0,s.jsx)(`option`,{value:e,children:u(e,w)},e))}),b&&q.supported&&(0,s.jsx)(`button`,{type:`button`,className:a.default.icon,onClick:()=>{q.toggle().catch(e=>D?.(e))},disabled:O,"aria-label":q.isFullscreen?j.exitFullscreen:j.enterFullscreen,title:q.isFullscreen?j.exitFullscreen:j.enterFullscreen,children:q.isFullscreen?(0,s.jsx)(c.Minimize,{size:16,"aria-hidden":!0}):(0,s.jsx)(c.Maximize,{size:16,"aria-hidden":!0})}),T&&(0,s.jsx)(`span`,{className:a.default.actions,children:T})]})]})}exports.VideoPlayer=d;
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-fullscreen.cjs"),n=require("../../hooks/use-object-url.cjs"),r=require("./playback-rates.cjs"),i=require("../../audio/duration.cjs"),a=require("./VideoPlayer.module.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("lucide-react");var l={"pt-BR":{play:`Tocar`,pause:`Pausar`,seek:`Posição`,mute:`Silenciar`,unmute:`Ativar som`,volume:`Volume`,rate:`Velocidade`,enterFullscreen:`Tela cheia`,exitFullscreen:`Sair da tela cheia`},en:{play:`Play`,pause:`Pause`,seek:`Seek`,mute:`Mute`,unmute:`Unmute`,volume:`Volume`,rate:`Speed`,enterFullscreen:`Full screen`,exitFullscreen:`Exit full screen`}};function u(e,t){return`${e.toLocaleString(t===`en`?`en-US`:`pt-BR`)}×`}function d({src:d,durationMs:f,poster:p,tracks:m,aspectRatio:h=16/9,rate:g,rates:_=r.DEFAULT_PLAYBACK_RATES,onRateChange:v,shiftPitch:y=!1,fullscreen:b=!0,autoPlay:x=!1,loop:S=!1,muted:C=!1,locale:w=`pt-BR`,actions:T,onEnded:E,onError:D,disabled:O=!1,className:k,...A}){let j=l[w],M=(0,o.useRef)(null),N=(0,o.useRef)(null),P=(0,o.useRef)(!1),[F,I]=(0,o.useState)(!1),[L,R]=(0,o.useState)(0),[z,B]=(0,o.useState)(1/0),[V,H]=(0,o.useState)(g??1),[U,W]=(0,o.useState)(1),[G,K]=(0,o.useState)(C),q=t.useFullscreen(M),J=n.useObjectUrl(typeof d==`string`?null:d),Y=typeof d==`string`?d:J,X=g??V,Z=Number.isFinite(f)?f:z,Q=Number.isFinite(Z)&&Z>0;(0,o.useEffect)(()=>{R(0),I(!1),B(1/0),P.current=!1},[Y]),(0,o.useEffect)(()=>{let e=N.current;e&&(e.defaultPlaybackRate=X,e.playbackRate=X,e.preservesPitch=!y)},[X,y,Y]),(0,o.useEffect)(()=>{let e=N.current;e&&(e.volume=U,e.muted=G)},[U,G,Y]);let $=()=>{let e=N.current;if(!e)return;if(Number.isFinite(e.duration)){B(e.duration*1e3);return}if(P.current||Number.isFinite(f))return;P.current=!0;let t=()=>{e.removeEventListener(`timeupdate`,t),Number.isFinite(e.duration)&&B(e.duration*1e3),e.currentTime=0};e.addEventListener(`timeupdate`,t),e.currentTime=1e101},ee=()=>{let e=N.current;e&&Y&&(e.paused?Promise.resolve(e.play()).then(()=>I(!0)).catch(e=>D?.(e)):(e.pause(),I(!1)))},te=e=>{let t=N.current;t&&Q&&(t.currentTime=e/1e3,R(e))},ne=e=>{g===void 0&&H(e),v?.(e)};return(0,s.jsxs)(`div`,{ref:M,className:e.cn(a.default.player,q.isFullscreen&&a.default.immersive,k),...A,children:[(0,s.jsx)(`div`,{className:a.default.frame,style:{aspectRatio:h},children:(0,s.jsx)(`video`,{ref:N,className:a.default.video,src:Y??void 0,poster:p,loop:S,autoPlay:x,playsInline:!0,preload:`metadata`,onLoadedMetadata:$,onDurationChange:$,onTimeUpdate:()=>{let e=N.current;e&&R(e.currentTime*1e3)},onPlay:()=>I(!0),onPause:()=>I(!1),onVolumeChange:()=>{let e=N.current;e&&(W(e.volume),K(e.muted))},onEnded:()=>{I(!1),E?.()},onError:e=>D?.(e),children:m?.map(e=>(0,s.jsx)(`track`,{kind:e.kind??`captions`,src:e.src,srcLang:e.srcLang,label:e.label,default:e.default},`${e.kind??`captions`}-${e.srcLang}-${e.src}`))})}),(0,s.jsxs)(`div`,{className:a.default.chrome,children:[(0,s.jsx)(`button`,{type:`button`,className:a.default.transport,onClick:ee,disabled:O||!Y,"aria-label":F?j.pause:j.play,title:F?j.pause:j.play,children:F?(0,s.jsx)(c.Pause,{size:16,"aria-hidden":!0}):(0,s.jsx)(c.Play,{size:16,"aria-hidden":!0})}),(0,s.jsx)(`input`,{type:`range`,className:a.default.seek,min:0,max:Q?Math.round(Z):0,step:100,value:Math.min(Math.round(L),Q?Math.round(Z):0),onChange:e=>te(Number(e.target.value)),disabled:O||!Q,"aria-label":j.seek,"aria-valuetext":`${i.formatDuration(L)} / ${i.formatDuration(Z)}`}),(0,s.jsxs)(`span`,{className:a.default.time,children:[(0,s.jsx)(`span`,{children:i.formatDuration(L)}),(0,s.jsx)(`span`,{"aria-hidden":`true`,children:`/`}),(0,s.jsx)(`span`,{children:i.formatDuration(Z)})]}),(0,s.jsx)(`button`,{type:`button`,className:a.default.icon,onClick:()=>K(e=>!e),disabled:O,"aria-label":G?j.unmute:j.mute,title:G?j.unmute:j.mute,children:G?(0,s.jsx)(c.VolumeX,{size:16,"aria-hidden":!0}):(0,s.jsx)(c.Volume2,{size:16,"aria-hidden":!0})}),(0,s.jsx)(`input`,{type:`range`,className:a.default.volume,min:0,max:1,step:.05,value:G?0:U,onChange:e=>{let t=Number(e.target.value);W(t),K(t===0)},disabled:O,"aria-label":j.volume}),_.length>0&&(0,s.jsx)(`select`,{className:a.default.rate,value:X,onChange:e=>ne(Number(e.target.value)),disabled:O,"aria-label":j.rate,title:j.rate,children:_.map(e=>(0,s.jsx)(`option`,{value:e,children:u(e,w)},e))}),b&&q.supported&&(0,s.jsx)(`button`,{type:`button`,className:a.default.icon,onClick:()=>{q.toggle().catch(e=>D?.(e))},disabled:O,"aria-label":q.isFullscreen?j.exitFullscreen:j.enterFullscreen,title:q.isFullscreen?j.exitFullscreen:j.enterFullscreen,children:q.isFullscreen?(0,s.jsx)(c.Minimize,{size:16,"aria-hidden":!0}):(0,s.jsx)(c.Maximize,{size:16,"aria-hidden":!0})}),T&&(0,s.jsx)(`span`,{className:a.default.actions,children:T})]})]})}exports.VideoPlayer=d;
 //# sourceMappingURL=VideoPlayer.cjs.map

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"}