@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/components/ImagePostSlot/index.d.ts

@@ -0,0 +1,207 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { ImagePost, MusicInfo } from '@xhub-short/contracts';
+import { b as VideoSlotPlayIndicatorInnerProps } from '../../VideoSlotPlayIndicator-DPs8Xt5C.js';
+
+/** CSS class for image post slot */
+declare const IMAGE_POST_SLOT_CLASS = "sv-image-post-slot";
+/** CSS class for active state */
+declare const IMAGE_POST_SLOT_ACTIVE_CLASS = "sv-image-post-slot--active";
+/** CSS class for clean mode */
+declare const IMAGE_POST_SLOT_CLEAN_MODE_CLASS = "sv-image-post-slot--clean-mode";
+/** Data attribute for image post ID */
+declare const IMAGE_POST_ID_ATTR = "data-image-post-id";
+/** Data attribute for active state */
+declare const IMAGE_POST_ACTIVE_ATTR = "data-active";
+interface ImagePostSlotContextValue {
+    /** The image post data */
+    imagePost: ImagePost;
+    /** Current image index in carousel */
+    currentImageIndex: number;
+    /** Total number of images */
+    totalImages: number;
+    /** Whether this slot is active (visible) */
+    isActive: boolean;
+    /** Whether in clean mode */
+    isCleanMode: boolean;
+    /** Timestamp of last user music toggle (for PlayIndicator) */
+    lastMusicToggleTime: number;
+    /** Music info (if any) */
+    music?: MusicInfo;
+    /** Whether music is playing */
+    isMusicPlaying: boolean;
+    /** Toggle music playback */
+    toggleMusic: () => void;
+    /** Navigate to specific image */
+    goToImage: (index: number) => void;
+    /** Go to next image */
+    nextImage: () => void;
+    /** Go to previous image */
+    prevImage: () => void;
+    /** Expand caption / open detail view */
+    expandCaption: () => void;
+}
+/**
+ * Hook to access ImagePostSlot context
+ * @throws if used outside ImagePostSlotHeadless
+ */
+declare function useImagePostSlotContext(): ImagePostSlotContextValue;
+/**
+ * Hook to optionally access ImagePostSlot context
+ * Returns null if used outside ImagePostSlotHeadless
+ */
+declare function useOptionalImagePostSlotContext(): ImagePostSlotContextValue | null;
+interface ImagePostSlotHeadlessProps {
+    /** The image post data */
+    imagePost: ImagePost;
+    /** Whether this slot is active (visible in viewport) */
+    isActive?: boolean;
+    /** Current image index (controlled) */
+    currentImageIndex?: number;
+    /** Called when image index changes */
+    onImageIndexChange?: (index: number) => void;
+    /** Music info for this post */
+    music?: MusicInfo;
+    /** Whether music is playing */
+    isMusicPlaying?: boolean;
+    /** Toggle music playback */
+    onToggleMusic?: () => void;
+    /**
+     * Last music toggle timestamp (controlled from parent for PlayIndicator sync).
+     * If provided, overrides internal tracking.
+     */
+    lastMusicToggleTime?: number;
+    /** Whether in clean mode (hide overlay) */
+    isCleanMode?: boolean;
+    /** Handle single tap */
+    onTap?: () => void;
+    /** Handle double tap (usually for like) */
+    onDoubleTap?: () => void;
+    /** Handle long press */
+    onLongPress?: () => void;
+    /** Called when "Read More" is clicked */
+    onReadMoreClick?: () => void;
+    /** Disable tap gestures */
+    disableTap?: boolean;
+    /** Enable pinch-to-zoom on images */
+    enableZoom?: boolean;
+    /** Show image counter (1/5) */
+    showCounter?: boolean;
+    /** Show pagination dots */
+    showIndicators?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Children (render prop or ReactNode) */
+    children?: ReactNode | ((context: ImagePostSlotContextValue) => ReactNode);
+}
+declare function ImagePostSlotHeadlessBase({ imagePost, isActive, currentImageIndex: controlledIndex, onImageIndexChange, music, isMusicPlaying, onToggleMusic, lastMusicToggleTime: controlledToggleTime, isCleanMode, onTap, onDoubleTap, onLongPress, onReadMoreClick, disableTap, enableZoom, showCounter, showIndicators, className, children, }: ImagePostSlotHeadlessProps): ReactElement;
+declare const ImagePostSlotHeadless: react.MemoExoticComponent<typeof ImagePostSlotHeadlessBase>;
+/**
+ * Overlay container for author, caption, actions
+ */
+interface ImagePostSlotOverlayProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function ImagePostSlotOverlay({ children, className, }: ImagePostSlotOverlayProps): ReactElement;
+/**
+ * Bottom content area (author, caption, read more)
+ */
+interface ImagePostSlotBottomProps {
+    children?: ReactNode;
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+declare function ImagePostSlotBottom({ children, className, onClick, }: ImagePostSlotBottomProps): ReactElement;
+/**
+ * Actions container (right side)
+ */
+interface ImagePostSlotActionsProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function ImagePostSlotActions({ children, className, }: ImagePostSlotActionsProps): ReactElement;
+/**
+ * Caption component with optional expansion
+ */
+interface ImagePostSlotCaptionProps {
+    /** Maximum lines to show (default: 2) */
+    maxLines?: number;
+    /** Whether caption is expanded */
+    expanded?: boolean;
+    /** Class name */
+    className?: string;
+}
+declare function ImagePostSlotCaption({ maxLines, expanded, className, }: ImagePostSlotCaptionProps): ReactElement;
+/**
+ * Read More button
+ */
+interface ImagePostSlotReadMoreProps {
+    /** Button label */
+    label?: string;
+    /** Class name */
+    className?: string;
+    /** Click handler (overrides context) */
+    onClick?: () => void;
+}
+declare function ImagePostSlotReadMore({ label, className, onClick, }: ImagePostSlotReadMoreProps): ReactElement;
+/**
+ * Music bar component
+ */
+interface ImagePostSlotMusicProps {
+    /** Class name */
+    className?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Custom fallback element when cover image fails to load or is not provided.
+     * If not provided, a default vinyl disc SVG will be used.
+     *
+     * @example
+     * ```tsx
+     * <ImagePostSlotMusic
+     *   fallbackCover={<MyCustomMusicIcon className="my-icon" />}
+     * />
+     * ```
+     */
+    fallbackCover?: ReactNode;
+}
+declare function ImagePostSlotMusic({ className, onClick, fallbackCover, }: ImagePostSlotMusicProps): ReactElement | null;
+/**
+ * Props for ImagePostSlotPlayIndicator
+ * Uses same props as VideoSlotPlayIndicatorInner, minus context-derived props
+ */
+type ImagePostSlotPlayIndicatorProps = Omit<VideoSlotPlayIndicatorInnerProps, 'lastUserToggleTime' | 'isPlaying'>;
+/**
+ * ImagePostSlotPlayIndicator - Shows play/pause icon when user toggles music
+ *
+ * Reuses the same visual component as VideoSlot but reads from ImagePostSlot context.
+ * This ensures UI consistency across Video and Image posts.
+ *
+ * @example
+ * ```tsx
+ * <ImagePostSlotHeadless imagePost={imagePost}>
+ *   <ImagePostSlotPlayIndicator persistWhenPaused />
+ * </ImagePostSlotHeadless>
+ * ```
+ */
+declare function ImagePostSlotPlayIndicator(props: ImagePostSlotPlayIndicatorProps): ReactElement | null;
+declare namespace ImagePostSlotPlayIndicator {
+    var displayName: string;
+}
+
+/**
+ * ImagePostSlot CSS - Injected at runtime
+ *
+ * Features:
+ * - Full-screen image post display
+ * - Overlay for author, caption, actions
+ * - Music bar (optional)
+ * - Read more button
+ */
+declare const IMAGE_POST_SLOT_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   IMAGE POST SLOT - Container\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-image-post-bg, #000);\n  touch-action: pan-y;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.sv-image-post-slot--active {\n  z-index: 1;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   IMAGE CONTAINER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot__images {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   OVERLAY (Author, Caption, Actions)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot__overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n}\n\n.sv-image-post-slot__overlay > * {\n  pointer-events: auto;\n}\n\n/* Gradient background for better text visibility */\n.sv-image-post-slot__gradient {\n  position: absolute;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.sv-image-post-slot__gradient--top {\n  top: 0;\n  height: 120px;\n  background: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.5) 0%,\n    rgba(0, 0, 0, 0.3) 50%,\n    transparent 100%\n  );\n}\n\n.sv-image-post-slot__gradient--bottom {\n  bottom: 0;\n  height: 200px;\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.7) 0%,\n    rgba(0, 0, 0, 0.4) 50%,\n    transparent 100%\n  );\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   TOP BAR (Counter, Badge)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot__top-bar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: var(--sv-image-post-top-padding, 16px);\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  z-index: 10;\n}\n\n.sv-image-post-slot__counter {\n  padding: 4px 10px;\n  background: var(--sv-image-post-counter-bg, rgba(0, 0, 0, 0.6));\n  border-radius: 12px;\n  font-size: var(--sv-image-post-counter-font-size, 12px);\n  font-weight: 500;\n  color: var(--sv-image-post-counter-color, #fff);\n}\n\n/* Image badge (e.g., \"Photo\") */\n.sv-image-post-slot__badge {\n  padding: 4px 8px;\n  background: var(--sv-image-post-badge-bg, rgba(255, 255, 255, 0.2));\n  border-radius: 4px;\n  font-size: var(--sv-image-post-badge-font-size, 11px);\n  font-weight: 500;\n  color: var(--sv-image-post-badge-color, #fff);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BOTTOM CONTENT (Author, Caption, Music, Read More)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot__bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: var(--sv-image-post-action-bar-width, 72px);\n  padding: var(--sv-image-post-bottom-padding, 16px);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  z-index: 5;\n}\n\n/* Author section */\n.sv-image-post-slot__author {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sv-image-post-slot__author-avatar {\n  width: var(--sv-image-post-avatar-size, 40px);\n  height: var(--sv-image-post-avatar-size, 40px);\n  border-radius: 50%;\n  object-fit: cover;\n  border: 2px solid var(--sv-image-post-avatar-border, rgba(255, 255, 255, 0.3));\n}\n\n.sv-image-post-slot__author-name {\n  font-size: var(--sv-image-post-author-font-size, 15px);\n  font-weight: 600;\n  color: var(--sv-image-post-author-color, #fff);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n}\n\n/* Caption section */\n.sv-image-post-slot__caption {\n  font-size: var(--sv-image-post-caption-font-size, 14px);\n  line-height: 1.4;\n  color: var(--sv-image-post-caption-color, #fff);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  display: -webkit-box;\n  -webkit-line-clamp: var(--sv-image-post-caption-lines, 2);\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.sv-image-post-slot__caption--expanded {\n  -webkit-line-clamp: unset;\n  overflow: visible;\n}\n\n/* Read more button */\n.sv-image-post-slot__read-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 16px;\n  background: var(--sv-image-post-read-more-bg, rgba(255, 255, 255, 0.2));\n  border: none;\n  border-radius: 20px;\n  font-size: var(--sv-image-post-read-more-font-size, 13px);\n  font-weight: 500;\n  color: var(--sv-image-post-read-more-color, #fff);\n  cursor: pointer;\n  transition: background 0.2s ease;\n  width: fit-content;\n}\n\n.sv-image-post-slot__read-more:hover {\n  background: var(--sv-image-post-read-more-hover-bg, rgba(255, 255, 255, 0.3));\n}\n\n.sv-image-post-slot__read-more svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ACTION BAR (Right side)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot__actions {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  width: var(--sv-image-post-action-bar-width, 72px);\n  padding: var(--sv-image-post-actions-padding, 16px 8px);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  z-index: 5;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MUSIC BAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot__music {\n  overflow: hidden;\n  aspect-ratio: 1/1;\n  background: transparent;\n  width: fit-content;\n  height: fit-content;\n  border: none;\n}\n\n.sv-image-post-slot__music-cover {\n  width: 44px;\n  height: 44px;\n  object-fit: cover;\n  border-radius: 999px;\n  border: 2px solid var(--sv-image-post-music-border, rgba(255, 255, 255, 0.3));\n}\n\n.sv-image-post-slot__music-cover--playing {\n  animation: sv-music-rotate 4s linear infinite;\n}\n\n@keyframes sv-music-rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LIKE ANIMATION\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot__like-animation {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 20;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CLEAN MODE (Hide overlay)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot--clean-mode .sv-image-post-slot__overlay,\n.sv-image-post-slot--clean-mode .sv-image-post-slot__top-bar,\n.sv-image-post-slot--clean-mode .sv-image-post-slot__bottom,\n.sv-image-post-slot--clean-mode .sv-image-post-slot__actions,\n.sv-image-post-slot--clean-mode .sv-image-post-slot__gradient {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LOADING STATE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot--loading .sv-image-post-slot__skeleton {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0.05) 25%,\n    rgba(255, 255, 255, 0.1) 50%,\n    rgba(255, 255, 255, 0.05) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-image-post-shimmer 1.5s infinite;\n}\n\n@keyframes sv-image-post-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ACCESSIBILITY\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-image-post-slot:focus-visible {\n  outline: 2px solid var(--sv-image-post-focus-color, #4dabff);\n  outline-offset: -2px;\n}\n\n.sv-image-post-slot__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+
+export { IMAGE_POST_ACTIVE_ATTR, IMAGE_POST_ID_ATTR, IMAGE_POST_SLOT_ACTIVE_CLASS, IMAGE_POST_SLOT_CLASS, IMAGE_POST_SLOT_CLEAN_MODE_CLASS, IMAGE_POST_SLOT_CSS, ImagePostSlotActions, type ImagePostSlotActionsProps, ImagePostSlotBottom, type ImagePostSlotBottomProps, ImagePostSlotCaption, type ImagePostSlotCaptionProps, type ImagePostSlotContextValue, ImagePostSlotHeadless, type ImagePostSlotHeadlessProps, ImagePostSlotMusic, type ImagePostSlotMusicProps, ImagePostSlotOverlay, type ImagePostSlotOverlayProps, ImagePostSlotPlayIndicator, type ImagePostSlotPlayIndicatorProps, ImagePostSlotReadMore, type ImagePostSlotReadMoreProps, useImagePostSlotContext, useOptionalImagePostSlotContext };

package/dist/components/ImagePostSlot/index.js

@@ -0,0 +1 @@
+export { IMAGE_POST_ACTIVE_ATTR, IMAGE_POST_ID_ATTR, IMAGE_POST_SLOT_ACTIVE_CLASS, IMAGE_POST_SLOT_CLASS, IMAGE_POST_SLOT_CLEAN_MODE_CLASS, IMAGE_POST_SLOT_CSS, ImagePostSlotActions, ImagePostSlotBottom, ImagePostSlotCaption, ImagePostSlotHeadless, ImagePostSlotMusic, ImagePostSlotOverlay, ImagePostSlotPlayIndicator, ImagePostSlotReadMore, useImagePostSlotContext, useOptionalImagePostSlotContext } from '../../chunk-JEY6R4KJ.js';

package/dist/components/ProgressBar/index.d.ts

@@ -1,3 +1,4 @@
+import * as react from 'react';
 import { ProgressBarHeadlessProps } from '@xhub-short/contracts';
 
 interface ProgressBarHeadlessExtendedProps extends ProgressBarHeadlessProps {
@@ -16,6 +17,23 @@ interface ProgressBarHeadlessExtendedProps extends ProgressBarHeadlessProps {
      * @default false
      */
     minimal?: boolean;
+    /**
+     * Auto-hide progress bar when video is playing
+     *
+     * When enabled:
+     * - Hidden when video is playing
+     * - Visible when video is paused
+     * - Visible when user hovers (if seekable)
+     *
+     * @default true
+     */
+    autoHide?: boolean;
+    /**
+     * Whether progress bar should be visible (controlled by parent)
+     * Used by wired component to control visibility based on player state.
+     * Takes precedence over autoHide behavior.
+     */
+    visible?: boolean;
     /**
      * Ref to the fill element for direct DOM manipulation (ADR 005)
      * Used by wired component for 60fps smooth updates
@@ -64,8 +82,18 @@ declare function calculateProgress(currentTime: number, duration: number): numbe
  * - Headless version updates via React state (acceptable for demos)
  * - Wired version (P11) will use Direct DOM Update for 60fps smooth
  * - Fill element uses will-change: transform for GPU compositing
+ *
+ * Wrapped with React.memo to prevent unnecessary re-renders from parent.
+ * Re-render is expected during seek (local state changes).
+ */
+declare function ProgressBarHeadlessBase({ currentTime, duration, buffered, seekable, className, onSeek, onSeekStart, onSeekEnd, showTime, showTooltip, minimal, autoHide, visible, fillRef: externalFillRef, bufferedRef: externalBufferedRef, handleRef: externalHandleRef, currentTimeRef: externalCurrentTimeRef, durationRef: externalDurationRef, }: ProgressBarHeadlessExtendedProps): React.ReactElement;
+/**
+ * ProgressBarHeadless - Memoized for performance
+ *
+ * Custom compare function excludes frequently-changing time values since
+ * the wired component uses Direct DOM Update for those.
  */
-declare function ProgressBarHeadless({ currentTime, duration, buffered, seekable, className, onSeek, onSeekStart, onSeekEnd, showTime, showTooltip, minimal, fillRef: externalFillRef, bufferedRef: externalBufferedRef, handleRef: externalHandleRef, currentTimeRef: externalCurrentTimeRef, durationRef: externalDurationRef, }: ProgressBarHeadlessExtendedProps): React.ReactElement;
+declare const ProgressBarHeadless: react.MemoExoticComponent<typeof ProgressBarHeadlessBase>;
 
 /**
  * CSS for ProgressBar Component
@@ -79,6 +107,6 @@ declare function ProgressBarHeadless({ currentTime, duration, buffered, seekable
  *    - Avoid width changes (causes layout thrashing)
  * 5. Support touch/click seek interaction
  */
-declare const PROGRESS_BAR_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ProgressBar Container\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-progress-bar {\n  /* Layout */\n  position: relative;\n  width: 100%;\n  \n  /* Interactive area - larger than visual for easier touch */\n  height: var(--sv-progress-bar-touch-height, 24px);\n  display: flex;\n  align-items: center;\n  \n  /* Cursor */\n  cursor: pointer;\n  \n  /* Prevent text selection during seek */\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.sv-progress-bar--disabled {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track Wrapper (contains track + tooltip)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track-wrapper {\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track (background bar)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track {\n  position: relative;\n  width: 100%;\n  height: var(--sv-progress-bar-height, 3px);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-track-bg, rgba(255, 255, 255, 0.2));\n  border-radius: var(--sv-progress-bar-radius, 1.5px);\n  overflow: hidden;\n}\n\n/* Expand track on hover/active for better visibility */\n.sv-progress-bar:hover .sv-progress-bar__track,\n.sv-progress-bar--seeking .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-active, 5px);\n}\n\n/* Disable transition during seeking for immediate feedback */\n.sv-progress-bar--seeking .sv-progress-bar__fill,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transition: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Buffered Fill (shows buffered progress)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-buffered-bg, rgba(255, 255, 255, 0.3));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for buffered updates */\n  transition: transform 0.3s ease-out;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Progress Fill (shows playback progress)\n * IMPORTANT: Designed for Direct DOM Update (ADR 005)\n * - Uses scaleX() for 60fps smooth animation\n * - Wired component will update transform directly via DOM manipulation\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-fill-bg, var(--sv-color-accent, #fe2c55));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for headless mode (timeupdate ~250ms intervals)\n   * For RAF-based Direct DOM Update (wired mode), this has minimal impact\n   * because transform updates every 16ms anyway */\n  transition: var(--sv-progress-bar-fill-transition, transform 0.25s linear);\n  will-change: transform;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Handle (thumb indicator)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__handle {\n  position: absolute;\n  top: 50%;\n  \n  /* Size */\n  width: var(--sv-progress-bar-handle-size, 12px);\n  height: var(--sv-progress-bar-handle-size, 12px);\n  \n  /* Positioning - will be set via left % */\n  left: 0;\n  transform: translate(-50%, -50%) scale(0);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-handle-bg, #fff);\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  \n  /* Animation - smooth position + show/hide */\n  transition: left 0.25s linear, transform 0.15s ease-out;\n}\n\n/* Show handle on hover/seeking */\n.sv-progress-bar:hover .sv-progress-bar__handle,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Time Display (optional, shows current/duration)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__time {\n  display: flex;\n  justify-content: space-between;\n  padding: var(--sv-spacing-xs, 4px) 0;\n  \n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-secondary, rgba(255, 255, 255, 0.7));\n}\n\n.sv-progress-bar__time-current,\n.sv-progress-bar__time-duration {\n  /* Ensure consistent width for changing numbers */\n  min-width: 2.5em;\n}\n\n.sv-progress-bar__time-current {\n  text-align: left;\n}\n\n.sv-progress-bar__time-duration {\n  text-align: right;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Tooltip (shows time at cursor position during hover)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__tooltip {\n  position: absolute;\n  /* Position above the container (not inside track to avoid overflow:hidden) */\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  \n  /* Visual */\n  padding: 4px 8px;\n  background: var(--sv-bg-overlay, rgba(0, 0, 0, 0.8));\n  border-radius: var(--sv-border-radius-sm, 4px);\n  \n  /* Typography */\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-primary, #fff);\n  white-space: nowrap;\n  \n  /* Hidden by default */\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n  \n  /* Prevent tooltip from capturing pointer events */\n  pointer-events: none;\n  \n  /* Ensure tooltip is above other elements */\n  z-index: 10;\n}\n\n.sv-progress-bar:hover .sv-progress-bar__tooltip,\n.sv-progress-bar--seeking .sv-progress-bar__tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Minimal Variant (for use inside VideoSlot overlay)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar--minimal {\n  height: auto;\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal:hover .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__handle {\n  display: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Reduced Motion (Accessibility)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-progress-bar__fill,\n  .sv-progress-bar__buffered,\n  .sv-progress-bar__handle,\n  .sv-progress-bar__tooltip {\n    transition: none;\n  }\n}\n";
+declare const PROGRESS_BAR_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ProgressBar Container\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-progress-bar {\n  /* Layout */\n  position: relative;\n  width: 100%;\n  \n  /* Interactive area - larger than visual for easier touch */\n  height: var(--sv-progress-bar-touch-height, 24px);\n  display: flex;\n  align-items: center;\n  \n  /* Cursor */\n  cursor: pointer;\n  \n  /* Prevent text selection during seek */\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.sv-progress-bar--disabled {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track Wrapper (contains track + tooltip)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track-wrapper {\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Track (background bar)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__track {\n  position: relative;\n  width: 100%;\n  height: var(--sv-progress-bar-height, 3px);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-track-bg, rgba(255, 255, 255, 0.2));\n  border-radius: var(--sv-progress-bar-radius, 1.5px);\n  overflow: hidden;\n}\n\n/* Expand track on hover/active for better visibility */\n.sv-progress-bar:hover .sv-progress-bar__track,\n.sv-progress-bar--seeking .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-active, 5px);\n}\n\n/* Disable transition during seeking for immediate feedback */\n.sv-progress-bar--seeking .sv-progress-bar__fill,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transition: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Buffered Fill (shows buffered progress)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-buffered-bg, rgba(255, 255, 255, 0.3));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for buffered updates */\n  transition: transform 0.3s ease-out;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Progress Fill (shows playback progress)\n * IMPORTANT: Designed for Direct DOM Update (ADR 005)\n * - Uses scaleX() for 60fps smooth animation\n * - Wired component will update transform directly via DOM manipulation\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  \n  /* Visual */\n  background: var(--sv-progress-bar-fill-bg, var(--sv-color-accent, #fe2c55));\n  border-radius: inherit;\n  \n  /* Performance: Use scaleX for GPU acceleration */\n  transform-origin: left center;\n  transform: scaleX(0);\n  \n  /* Smooth transition for headless mode (timeupdate ~250ms intervals)\n   * For RAF-based Direct DOM Update (wired mode), this has minimal impact\n   * because transform updates every 16ms anyway */\n  transition: var(--sv-progress-bar-fill-transition, transform 0.25s linear);\n  will-change: transform;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Handle (thumb indicator)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__handle {\n  position: absolute;\n  top: 50%;\n  \n  /* Size */\n  width: var(--sv-progress-bar-handle-size, 12px);\n  height: var(--sv-progress-bar-handle-size, 12px);\n  \n  /* Positioning - will be set via left % */\n  left: 0;\n  transform: translate(-50%, -50%) scale(0);\n  \n  /* Visual */\n  background: var(--sv-progress-bar-handle-bg, #fff);\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  \n  /* Animation - smooth position + show/hide */\n  transition: left 0.25s linear, transform 0.15s ease-out;\n}\n\n/* Show handle on hover/seeking */\n.sv-progress-bar:hover .sv-progress-bar__handle,\n.sv-progress-bar--seeking .sv-progress-bar__handle {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Time Display (optional, shows current/duration)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__time {\n  display: flex;\n  justify-content: space-between;\n  padding: var(--sv-spacing-xs, 4px) 0;\n  \n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-secondary, rgba(255, 255, 255, 0.7));\n}\n\n.sv-progress-bar__time-current,\n.sv-progress-bar__time-duration {\n  /* Ensure consistent width for changing numbers */\n  min-width: 2.5em;\n}\n\n.sv-progress-bar__time-current {\n  text-align: left;\n}\n\n.sv-progress-bar__time-duration {\n  text-align: right;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Seek Tooltip (shows time at cursor position during hover)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar__tooltip {\n  position: absolute;\n  /* Position above the container (not inside track to avoid overflow:hidden) */\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -100%);\n  margin-top: -8px;\n  \n  /* Visual */\n  padding: 4px 8px;\n  background: var(--sv-bg-overlay, rgba(0, 0, 0, 0.8));\n  border-radius: var(--sv-border-radius-sm, 4px);\n  \n  /* Typography */\n  font-family: var(--sv-font-family, 'Urbanist', sans-serif);\n  font-size: var(--sv-font-size-xs, 11px);\n  font-variant-numeric: tabular-nums;\n  color: var(--sv-text-primary, #fff);\n  white-space: nowrap;\n  \n  /* Hidden by default */\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n  \n  /* Prevent tooltip from capturing pointer events */\n  pointer-events: none;\n  \n  /* Ensure tooltip is above other elements */\n  z-index: 10;\n}\n\n.sv-progress-bar:hover .sv-progress-bar__tooltip,\n.sv-progress-bar--seeking .sv-progress-bar__tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Minimal Variant (for use inside VideoSlot overlay)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar--minimal {\n  height: auto;\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal:hover .sv-progress-bar__track {\n  height: var(--sv-progress-bar-height-minimal, 2px);\n}\n\n.sv-progress-bar--minimal .sv-progress-bar__handle {\n  display: none;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Auto-hide Variant\n * Shows progress bar only when video is paused or user is seeking/hovering\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sv-progress-bar--auto-hide {\n  /* Smooth transition for show/hide */\n  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sv-progress-bar--auto-hide.sv-progress-bar--hidden {\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(8px);\n  pointer-events: none;\n}\n\n/* Show on hover even when auto-hide is enabled */\n.sv-progress-bar--auto-hide:hover {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* Always show when seeking */\n.sv-progress-bar--auto-hide.sv-progress-bar--seeking {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Reduced Motion (Accessibility)\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-progress-bar__fill,\n  .sv-progress-bar__buffered,\n  .sv-progress-bar__handle,\n  .sv-progress-bar__tooltip {\n    transition: none;\n  }\n}\n";
 
 export { PROGRESS_BAR_CSS, ProgressBarHeadless, type ProgressBarHeadlessExtendedProps, calculateProgress, formatTime };

package/dist/components/ProgressBar/index.js

@@ -1 +1 @@
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from '../../chunk-YW23IBKF.js';
+export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from '../../chunk-VXW7AOGM.js';

package/dist/components/QualityPicker/index.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+import { VideoQuality } from '@xhub-short/contracts';
+
+interface QualityPickerHeadlessProps {
+    /** Current quality level (-1 = auto) */
+    quality: number;
+    /** Available quality levels from HLS.js */
+    levels: VideoQuality[];
+    /** Quality change callback (level index, -1 for auto) */
+    onQualityChange: (level: number) => void;
+    /** Title text (default: "Quality") */
+    title?: string;
+    /** Custom class name */
+    className?: string;
+    /** Close callback (optional, for integration with menu) */
+    onClose?: () => void;
+    /** Auto-close after selection (default: true) */
+    autoClose?: boolean;
+    /** Show "Auto" option (default: true) */
+    showAuto?: boolean;
+    /** Custom label for auto (default: "Auto") */
+    autoLabel?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+}
+declare function QualityPickerHeadlessComponent({ quality, levels, onQualityChange, title, className, onClose, autoClose, showAuto, autoLabel, emptyMessage, }: QualityPickerHeadlessProps): ReactElement;
+declare const QualityPickerHeadless: react.MemoExoticComponent<typeof QualityPickerHeadlessComponent>;
+
+/**
+ * QualityPicker CSS
+ */
+declare const QUALITY_PICKER_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-quality-picker {\n  /* Colors */\n  --sv-quality-picker-bg: rgba(28, 28, 30, 0.95);\n  --sv-quality-picker-text: #ffffff;\n  --sv-quality-picker-text-secondary: rgba(255, 255, 255, 0.6);\n  --sv-quality-picker-selected: #007aff;\n  --sv-quality-picker-item-hover: rgba(255, 255, 255, 0.1);\n  --sv-quality-picker-check: #007aff;\n  --sv-quality-picker-badge: rgba(255, 255, 255, 0.15);\n  \n  /* Dimensions */\n  --sv-quality-picker-item-height: 48px;\n  --sv-quality-picker-radius: 12px;\n  --sv-quality-picker-padding: 8px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CONTAINER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-quality-picker {\n  padding: var(--sv-quality-picker-padding);\n}\n\n.sv-quality-picker-title {\n  padding: 8px 16px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--sv-quality-picker-text-secondary);\n  text-align: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   OPTIONS\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-quality-picker-options {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sv-quality-picker-option {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  height: var(--sv-quality-picker-item-height);\n  padding: 0 16px;\n  border: none;\n  background: transparent;\n  color: var(--sv-quality-picker-text);\n  font-size: 16px;\n  font-weight: 400;\n  cursor: pointer;\n  border-radius: var(--sv-quality-picker-radius);\n  transition: background-color 150ms ease;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sv-quality-picker-option:hover {\n  background: var(--sv-quality-picker-item-hover);\n}\n\n.sv-quality-picker-option[data-selected=\"true\"] {\n  color: var(--sv-quality-picker-selected);\n  font-weight: 500;\n}\n\n.sv-quality-picker-option-label {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sv-quality-picker-option-badge {\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  padding: 2px 6px;\n  background: var(--sv-quality-picker-badge);\n  border-radius: 4px;\n  color: var(--sv-quality-picker-text-secondary);\n}\n\n.sv-quality-picker-option[data-selected=\"true\"] .sv-quality-picker-option-badge {\n  background: var(--sv-quality-picker-selected);\n  color: #ffffff;\n}\n\n.sv-quality-picker-option-check {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-quality-picker-check);\n  opacity: 0;\n  transition: opacity 150ms ease;\n}\n\n.sv-quality-picker-option[data-selected=\"true\"] .sv-quality-picker-option-check {\n  opacity: 1;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   EMPTY STATE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-quality-picker-empty {\n  padding: 24px 16px;\n  text-align: center;\n  color: var(--sv-quality-picker-text-secondary);\n  font-size: 14px;\n}\n";
+
+export { QUALITY_PICKER_CSS, QualityPickerHeadless, type QualityPickerHeadlessProps };

package/dist/components/QualityPicker/index.js

@@ -0,0 +1 @@
+export { QUALITY_PICKER_CSS, QualityPickerHeadless } from '../../chunk-DR7KR7OT.js';

package/dist/components/ReportSheet/index.d.ts

@@ -0,0 +1,68 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { ReportReason } from '@xhub-short/contracts';
+
+type ReportSheetStep = 'select' | 'detail';
+type ReportSheetState = 'form' | 'loading' | 'success' | 'error';
+interface ReportSheetHeadlessProps {
+    /** Whether the sheet is open */
+    isOpen: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Submit handler */
+    onSubmit: (reasonId: string, description?: string) => Promise<void>;
+    /** Available report reasons */
+    reasons?: ReportReason[];
+    /** Whether reasons are being loaded from API */
+    isLoadingReasons?: boolean;
+    /** Max characters for text input (default: 500) */
+    maxLength?: number;
+    /** Content ID being reported (for display) */
+    contentId?: string;
+    /**
+     * If true, show success screen immediately (video was already reported)
+     * Used to prevent re-reporting the same video
+     */
+    alreadyReported?: boolean;
+    /** Sheet title for step 1 - reason selection */
+    selectTitle?: string;
+    /** Sheet title for step 2 - report detail */
+    title?: string;
+    /** Text input placeholder */
+    inputPlaceholder?: string;
+    /** Submit button text */
+    submitText?: string;
+    /** Loading text */
+    loadingText?: string;
+    /** Success title */
+    successTitle?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Done button text (on success screen) */
+    doneText?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Error description (retry hint) */
+    errorDescription?: string;
+    /** Custom success icon */
+    successIcon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+declare function ReportSheetHeadlessComponent({ isOpen, onClose, onSubmit, reasons, isLoadingReasons, maxLength, alreadyReported, selectTitle, title, inputPlaceholder, submitText, loadingText, successTitle, successMessage, doneText, errorMessage, errorDescription, successIcon, className, }: ReportSheetHeadlessProps): ReactElement | null;
+declare const ReportSheetHeadless: react.MemoExoticComponent<typeof ReportSheetHeadlessComponent>;
+
+/**
+ * ReportSheet CSS-in-TS
+ *
+ * Report form bottom sheet styling (2-step flow).
+ * Built on BottomSheetHeadless base.
+ */
+declare const REPORT_SHEET_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-sheet {\n  /* Colors */\n  --sv-report-bg: #1a1a1a;\n  --sv-report-text: rgba(255, 255, 255, 0.95);\n  --sv-report-text-muted: rgba(255, 255, 255, 0.6);\n  --sv-report-border: rgba(255, 255, 255, 0.1);\n  --sv-report-error: #ef4444;\n  --sv-report-success: #22c55e;\n  --sv-report-primary: #3b82f6;\n  --sv-report-item-hover: rgba(255, 255, 255, 0.05);\n  \n  /* Spacing */\n  --sv-report-padding: 16px;\n  --sv-report-gap: 12px;\n  --sv-report-radius: 8px;\n  \n  /* Override BottomSheet */\n  --sv-sheet-bg: var(--sv-report-bg);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   HEADER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: var(--sv-report-padding);\n  border-bottom: 1px solid var(--sv-report-border);\n  min-height: 56px;\n}\n\n.sv-report-title {\n  flex: 1;\n  font-size: 17px;\n  font-weight: 600;\n  color: var(--sv-report-text);\n  margin: 0;\n  text-align: center;\n}\n\n/* When back button is present, title should still be centered */\n.sv-report-header .sv-report-back + .sv-report-title {\n  margin-left: -32px; /* Compensate for back button */\n}\n\n.sv-report-close,\n.sv-report-back {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  flex-shrink: 0;\n  \n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  \n  color: var(--sv-report-text-muted);\n  cursor: pointer;\n  transition: background 150ms ease, color 150ms ease;\n}\n\n.sv-report-close:hover,\n.sv-report-back:hover {\n  background: var(--sv-report-item-hover);\n  color: var(--sv-report-text);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CONTENT\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-content {\n  padding: 0;\n  max-height: 50vh;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sv-report-content--detail {\n  padding: var(--sv-report-padding);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   STEP 1: REASON LIST\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-reasons {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.sv-report-reason-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  padding: 16px var(--sv-report-padding);\n  \n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--sv-report-border);\n  \n  color: var(--sv-report-text);\n  font-size: 15px;\n  text-align: left;\n  \n  cursor: pointer;\n  transition: background 150ms ease;\n}\n\n.sv-report-reason-item:last-child {\n  border-bottom: none;\n}\n\n.sv-report-reason-item:hover {\n  background: var(--sv-report-item-hover);\n}\n\n.sv-report-reason-item:active {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.sv-report-reason-item .sv-report-reason-label {\n  flex: 1;\n}\n\n.sv-report-reason-item svg {\n  flex-shrink: 0;\n  color: var(--sv-report-text-muted);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   SKELETON LOADING\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-reasons--loading {\n  pointer-events: none;\n}\n\n.sv-report-reason-skeleton {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px var(--sv-report-padding);\n  border-bottom: 1px solid var(--sv-report-border);\n}\n\n.sv-report-reason-skeleton:last-child {\n  border-bottom: none;\n}\n\n.sv-report-skeleton-text {\n  flex: 1;\n  height: 16px;\n  max-width: 200px;\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0.06) 25%,\n    rgba(255, 255, 255, 0.12) 50%,\n    rgba(255, 255, 255, 0.06) 75%\n  );\n  background-size: 200% 100%;\n  border-radius: 4px;\n  animation: sv-report-skeleton-shimmer 1.5s infinite;\n}\n\n.sv-report-skeleton-icon {\n  width: 20px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.06);\n  border-radius: 4px;\n}\n\n@keyframes sv-report-skeleton-shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   STEP 2: REASON DETAIL\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-reason-title {\n  margin: 0 0 var(--sv-report-gap);\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--sv-report-text);\n}\n\n.sv-report-reason-description {\n  margin: 0 0 var(--sv-report-gap);\n  padding: 12px 16px;\n  \n  background: rgba(255, 255, 255, 0.05);\n  border-radius: var(--sv-report-radius);\n  \n  font-size: 14px;\n  color: var(--sv-report-text-muted);\n  line-height: 1.5;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   TEXT INPUT\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-input-section {\n  margin-top: var(--sv-report-gap);\n}\n\n.sv-report-textarea {\n  width: 100%;\n  min-height: 120px;\n  padding: 12px;\n  \n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid var(--sv-report-border);\n  border-radius: var(--sv-report-radius);\n  \n  color: var(--sv-report-text);\n  font-size: 14px;\n  font-family: inherit;\n  line-height: 1.5;\n  resize: vertical;\n  \n  transition: border-color 150ms ease;\n}\n\n.sv-report-textarea::placeholder {\n  color: var(--sv-report-text-muted);\n}\n\n.sv-report-textarea:focus {\n  outline: none;\n  border-color: var(--sv-report-primary);\n}\n\n.sv-report-char-count {\n  margin-top: 4px;\n  font-size: 12px;\n  color: var(--sv-report-text-muted);\n  text-align: right;\n}\n\n.sv-report-char-count[data-over=\"true\"] {\n  color: var(--sv-report-error);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FOOTER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-footer {\n  display: flex;\n  gap: 12px;\n  padding: var(--sv-report-padding);\n  border-top: 1px solid var(--sv-report-border);\n}\n\n.sv-report-footer--single {\n  /* Single button layout */\n}\n\n.sv-report-button {\n  flex: 1;\n  padding: 14px 20px;\n  \n  border: none;\n  border-radius: var(--sv-report-radius);\n  \n  font-size: 15px;\n  font-weight: 600;\n  \n  cursor: pointer;\n  transition: background 150ms ease, opacity 150ms ease;\n}\n\n.sv-report-button-submit {\n  background: var(--sv-report-primary);\n  color: white;\n}\n\n.sv-report-button-submit:hover:not(:disabled) {\n  background: #2563eb;\n}\n\n.sv-report-button-submit:active:not(:disabled) {\n  background: #1d4ed8;\n}\n\n.sv-report-button-submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LOADING & SUCCESS STATES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 48px 24px;\n  color: var(--sv-report-text-muted);\n}\n\n.sv-report-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--sv-report-border);\n  border-top-color: var(--sv-report-primary);\n  border-radius: 50%;\n  animation: sv-report-spin 0.8s linear infinite;\n}\n\n@keyframes sv-report-spin {\n  to { transform: rotate(360deg); }\n}\n\n.sv-report-success {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 48px 24px;\n  text-align: center;\n}\n\n.sv-report-success-icon {\n  width: 48px;\n  height: 48px;\n  color: var(--sv-report-success);\n}\n\n.sv-report-success-title {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--sv-report-text);\n}\n\n.sv-report-success-message {\n  margin: 0;\n  font-size: 14px;\n  color: var(--sv-report-text-muted);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ERROR STATE\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-report-error-message {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px;\n  margin-bottom: var(--sv-report-gap);\n  \n  background: rgba(239, 68, 68, 0.1);\n  border-radius: var(--sv-report-radius);\n  \n  color: var(--sv-report-error);\n  font-size: 14px;\n}\n";
+/**
+ * Inject ReportSheet CSS into document
+ * Note: layered=false to prevent host app CSS from overriding critical styles
+ */
+declare function injectReportSheetCSS(): void;
+
+export { REPORT_SHEET_CSS, ReportSheetHeadless, type ReportSheetHeadlessProps, type ReportSheetState, type ReportSheetStep, injectReportSheetCSS };

package/dist/components/ReportSheet/index.js

@@ -0,0 +1 @@
+export { REPORT_SHEET_CSS, ReportSheetHeadless, injectReportSheetCSS } from '../../chunk-QCKVF2DR.js';

package/dist/components/Skeleton/index.js

@@ -1 +1 @@
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from '../../chunk-4MN72OZH.js';
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from '../../chunk-4RIMQOBR.js';

package/dist/components/SpeedPicker/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+/** Default speed presets */
+declare const DEFAULT_SPEEDS: readonly [0.5, 0.75, 1, 1.25, 1.5, 2];
+interface SpeedPickerHeadlessProps {
+    /** Current speed */
+    speed: number;
+    /** Speed change callback */
+    onSpeedChange: (speed: number) => void;
+    /** Available speeds (default: DEFAULT_SPEEDS) */
+    speeds?: readonly number[];
+    /** Title text (default: "Playback Speed") */
+    title?: string;
+    /** Custom class name */
+    className?: string;
+    /** Format speed label (default: "1x", "0.5x") */
+    formatLabel?: (speed: number) => string;
+    /** Close callback (optional, for integration with menu) */
+    onClose?: () => void;
+    /** Auto-close after selection (default: true) */
+    autoClose?: boolean;
+}
+declare function SpeedPickerHeadlessComponent({ speed, onSpeedChange, speeds, title, className, formatLabel, onClose, autoClose, }: SpeedPickerHeadlessProps): ReactElement;
+declare const SpeedPickerHeadless: react.MemoExoticComponent<typeof SpeedPickerHeadlessComponent>;
+
+/**
+ * SpeedPicker CSS
+ */
+declare const SPEED_PICKER_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CSS VARIABLES\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-speed-picker {\n  /* Colors */\n  --sv-speed-picker-bg: rgba(28, 28, 30, 0.95);\n  --sv-speed-picker-text: #ffffff;\n  --sv-speed-picker-text-secondary: rgba(255, 255, 255, 0.6);\n  --sv-speed-picker-selected: #007aff;\n  --sv-speed-picker-item-hover: rgba(255, 255, 255, 0.1);\n  --sv-speed-picker-check: #007aff;\n  \n  /* Dimensions */\n  --sv-speed-picker-item-height: 48px;\n  --sv-speed-picker-radius: 12px;\n  --sv-speed-picker-padding: 8px;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CONTAINER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-speed-picker {\n  padding: var(--sv-speed-picker-padding);\n}\n\n.sv-speed-picker-title {\n  padding: 8px 16px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--sv-speed-picker-text-secondary);\n  text-align: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   OPTIONS\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-speed-picker-options {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sv-speed-picker-option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--sv-speed-picker-item-height);\n  padding: 0 16px;\n  border: none;\n  background: transparent;\n  color: var(--sv-speed-picker-text);\n  font-size: 16px;\n  font-weight: 400;\n  cursor: pointer;\n  border-radius: var(--sv-speed-picker-radius);\n  transition: background-color 150ms ease;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sv-speed-picker-option:hover {\n  background: var(--sv-speed-picker-item-hover);\n}\n\n.sv-speed-picker-option[data-selected=\"true\"] {\n  color: var(--sv-speed-picker-selected);\n  font-weight: 500;\n}\n\n.sv-speed-picker-option-label {\n  flex: 1;\n}\n\n.sv-speed-picker-option-check {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-speed-picker-check);\n  opacity: 0;\n  transition: opacity 150ms ease;\n}\n\n.sv-speed-picker-option[data-selected=\"true\"] .sv-speed-picker-option-check {\n  opacity: 1;\n}\n";
+
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless, type SpeedPickerHeadlessProps };

package/dist/components/SpeedPicker/index.js

@@ -0,0 +1 @@
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless } from '../../chunk-QCRRF76W.js';

package/dist/components/VideoFeed/index.d.ts

@@ -8,6 +8,11 @@ import { ReactNode } from 'react';
  * Position-based virtual scroller for video feed (TikTok-style).
  * Receives state via props (headless pattern).
  *
+ * This component wraps VirtualSlider<VideoItem> and adds:
+ * - Video-specific context (VideoFeedContext)
+ * - Video-specific CSS classes (sv-video-feed prefix)
+ * - Backwards-compatible API
+ *
  * Features:
  * - Virtual scrolling (only renders visible + buffer slots)
  * - CSS transform-based scrolling (60fps)
@@ -39,7 +44,7 @@ interface VideoFeedHeadlessProps {
     /** Additional CSS classes */
     className?: string;
     /** Render function for each video slot */
-    renderSlot: (video: VideoItem, index: number) => ReactNode;
+    renderSlot: (video: VideoItem, index: number, isActive: boolean) => ReactNode;
     /** Called when active index changes */
     onIndexChange?: (index: number) => void;
     /** Called when reaching near end of feed */
@@ -72,8 +77,14 @@ interface VideoFeedHeadlessProps {
  *
  * Renders a vertical video feed with virtual scrolling.
  * Position-based: each video takes full viewport height.
+ *
+ * Internally uses VirtualSlider<VideoItem> for the core slider logic,
+ * adding video-specific context and styling.
  */
 declare function VideoFeedHeadless({ feedState, swipeState, height, className, renderSlot, onIndexChange, onEndReached, endReachedThreshold, bufferSize, loadingText, emptyText, endText, disableInlineTransforms, }: VideoFeedHeadlessProps): React.ReactElement;
+declare namespace VideoFeedHeadless {
+    var displayName: string;
+}
 
 /**
  * VideoFeed context value

package/dist/components/VideoFeed/index.js

@@ -1 +1 @@
-export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from '../../chunk-ZZDQKP4R.js';
+export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from '../../chunk-4TUBNA2X.js';