@xhub-short/ui 0.1.0-beta.9 → 1.0.0-beta.18

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

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+interface ImageCarouselProps {
+    /** Array of image URLs */
+    images: string[];
+    /** Current active index (controlled) */
+    currentIndex?: number;
+    /** Called when index changes */
+    onIndexChange?: (index: number) => void;
+    /** Show pagination indicators */
+    showIndicators?: boolean;
+    /** Indicator style: 'dots' or 'counter' (e.g., "1/5") */
+    indicatorStyle?: 'dots' | 'counter';
+    /** Show navigation arrows (desktop) */
+    showArrows?: boolean;
+    /** Enable pinch-to-zoom */
+    enableZoom?: boolean;
+    /** Maximum zoom scale */
+    maxZoomScale?: number;
+    /** Lazy load images (only load visible + adjacent) */
+    lazyLoad?: boolean;
+    /** Custom image renderer */
+    renderImage?: (url: string, index: number, isLoaded: boolean) => ReactNode;
+    /** Custom placeholder renderer */
+    renderPlaceholder?: (index: number) => ReactNode;
+    /** Swipe threshold (percentage of width) */
+    swipeThreshold?: number;
+    /** Called when zoom state changes */
+    onZoomChange?: (isZoomed: boolean) => void;
+    /** Called when swipe direction is locked (to allow/block scroll) */
+    onSwipeDirectionChange?: (direction: 'horizontal' | 'vertical' | null) => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function ImageCarouselHeadlessBase({ images, currentIndex: controlledIndex, onIndexChange, showIndicators, indicatorStyle, showArrows, enableZoom, maxZoomScale, lazyLoad, renderImage, renderPlaceholder, swipeThreshold, onZoomChange, onSwipeDirectionChange, className, }: ImageCarouselProps): ReactElement;
+declare const ImageCarouselHeadless: react.MemoExoticComponent<typeof ImageCarouselHeadlessBase>;
+
+/**
+ * ImageCarousel CSS - Injected at runtime
+ *
+ * Features:
+ * - Horizontal swipe carousel
+ * - Pagination indicators (dots)
+ * - Smooth transitions
+ * - Touch-friendly design
+ */
+declare const IMAGE_CAROUSEL_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 CAROUSEL - 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-carousel {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  touch-action: pan-y pinch-zoom;\n  user-select: none;\n  -webkit-user-select: none;\n  background: var(--sv-carousel-bg, #000);\n}\n\n/* Dragging state - only for styling, does not block scroll */\n.sv-image-carousel--dragging {\n  /* Do not set touch-action: none here - to detect direction */\n  -webkit-user-drag: none;\n}\n\n/* Direction-locked states */\n.sv-image-carousel--swiping-horizontal {\n  /* When swiping horizontally, block scroll, prevent overscroll */\n  touch-action: none !important;\n  overscroll-behavior: contain;\n}\n\n.sv-image-carousel--swiping-vertical {\n  /* When swiping vertically, allow scroll, block carousel swipe */\n  touch-action: pan-y;\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   TRACK - Horizontal sliding 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-carousel-track {\n  display: flex;\n  height: 100%;\n  will-change: transform;\n  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.sv-image-carousel-track--dragging {\n  transition: none;\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   SLIDE - Individual 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-carousel-slide {\n  flex: 0 0 100%;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\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\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-carousel-image {\n  max-width: 100%;\n  max-height: 100%;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  pointer-events: none;\n  transition: transform 0.2s ease-out;\n}\n\n.sv-image-carousel-image--loading {\n  opacity: 0;\n}\n\n.sv-image-carousel-image--loaded {\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n/* Zoomed image */\n.sv-image-carousel-image--zoomed {\n  cursor: grab;\n  pointer-events: auto;\n}\n\n.sv-image-carousel-image--zoomed:active {\n  cursor: grabbing;\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   PLACEHOLDER / SKELETON\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-carousel-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-carousel-placeholder-bg, rgba(255, 255, 255, 0.1));\n}\n\n.sv-image-carousel-skeleton {\n  width: 60%;\n  height: 60%;\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-carousel-shimmer 1.5s infinite;\n  border-radius: 8px;\n}\n\n@keyframes sv-carousel-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   PAGINATION INDICATORS (Dots)\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-carousel-indicators {\n  position: absolute;\n  bottom: var(--sv-carousel-indicators-bottom, 16px);\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: var(--sv-carousel-indicators-gap, 6px);\n  padding: 6px 12px;\n  border-radius: 20px;\n  z-index: 10;\n}\n\n.sv-image-carousel-dot {\n  width: var(--sv-carousel-dot-size, 6px);\n  height: var(--sv-carousel-dot-size, 6px);\n  border-radius: 50%;\n  background: var(--sv-carousel-dot-color, rgba(255, 255, 255, 0.5));\n  transition: all 0.2s ease;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n}\n\n.sv-image-carousel-dot:hover {\n  background: var(--sv-carousel-dot-hover, rgba(255, 255, 255, 0.7));\n}\n\n.sv-image-carousel-dot--active {\n  background: var(--sv-carousel-dot-active, #fff);\n  transform: scale(1.2);\n}\n\n/* Compact mode for many images (> 5) */\n.sv-image-carousel-indicators--compact .sv-image-carousel-dot {\n  width: 4px;\n  height: 4px;\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   COUNTER (Alternative to dots)\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-carousel-counter {\n  position: absolute;\n  top: var(--sv-carousel-counter-top, 16px);\n  right: var(--sv-carousel-counter-right, 16px);\n  padding: 4px 10px;\n  background: var(--sv-carousel-counter-bg, rgba(0, 0, 0, 0.6));\n  border-radius: 12px;\n  font-size: var(--sv-carousel-counter-font-size, 12px);\n  font-weight: 500;\n  color: var(--sv-carousel-counter-color, #fff);\n  z-index: 10;\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   NAVIGATION ARROWS (Optional)\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-carousel-nav {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-carousel-nav-bg, rgba(0, 0, 0, 0.4));\n  border: none;\n  border-radius: 50%;\n  color: var(--sv-carousel-nav-color, #fff);\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sv-image-carousel:hover .sv-image-carousel-nav {\n  opacity: 1;\n}\n\n.sv-image-carousel-nav:hover {\n  background: var(--sv-carousel-nav-hover-bg, rgba(0, 0, 0, 0.6));\n}\n\n.sv-image-carousel-nav:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.sv-image-carousel-nav--prev {\n  left: 12px;\n}\n\n.sv-image-carousel-nav--next {\n  right: 12px;\n}\n\n.sv-image-carousel-nav svg {\n  width: 20px;\n  height: 20px;\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   ZOOM 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-carousel-zoom-container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  touch-action: none;\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-carousel:focus-visible {\n  outline: 2px solid var(--sv-carousel-focus-color, #4dabff);\n  outline-offset: 2px;\n}\n\n.sv-image-carousel-dot:focus-visible {\n  outline: 2px solid var(--sv-carousel-focus-color, #4dabff);\n  outline-offset: 2px;\n}\n\n/* Screen reader only */\n.sv-image-carousel-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_CAROUSEL_CSS, ImageCarouselHeadless, type ImageCarouselProps };

package/dist/components/ImageCarousel/index.js

@@ -0,0 +1 @@
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless } from '../../chunk-GSNIZ6DF.js';

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

@@ -0,0 +1,117 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { ContentItem } from '@xhub-short/contracts';
+
+interface PlaylistBarHeadlessProps {
+    /** Playlist title */
+    title: string;
+    /** Current item index (1-based) */
+    currentIndex: number;
+    /** Total items count */
+    totalItems: number;
+    /** Callback when bar is clicked (open sheet) */
+    onClick?: () => void;
+    /** Callback when next button is clicked */
+    onNext?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: CSSProperties;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Custom arrow icon */
+    arrowIcon?: ReactNode;
+    /**
+     * Text for "Playlist" label (optional)
+     * If provided, title format will be "[Label] • [Title]"
+     */
+    label?: string;
+    /** Visibility state */
+    isVisible?: boolean;
+}
+/**
+ * Headless Playlist Bar Component
+ *
+ * Displays playlist info with "Slide/Fade" title transition.
+ * Designed to be placed at the bottom of the video slot (above progress bar).
+ *
+ * NOTE: Currently uses CSS-in-JS injection (legacy pattern) instead of CSS Modules.
+ */
+declare function PlaylistBarHeadless({ title, currentIndex, totalItems, onClick, className, style, icon, arrowIcon, onNext, label, isVisible, }: PlaylistBarHeadlessProps): react_jsx_runtime.JSX.Element;
+
+interface PlaylistSheetHeadlessProps {
+    /** Whether sheet is open */
+    isOpen: boolean;
+    /** Close callback */
+    onClose: () => void;
+    /** Playlist items */
+    items: ContentItem[];
+    /** Current active index (0-based) */
+    currentIndex: number;
+    /** ID of the item currently playing in the feed */
+    activeId?: string;
+    /** Callback when an item is selected */
+    onItemSelect: (index: number) => void;
+    /** Custom class name */
+    className?: string;
+    /** i18n translations */
+    translations: {
+        title: string;
+        emptyState: string;
+        nowPlaying?: string;
+    };
+    /** Custom header accessory (e.g. close button) */
+    headerAccessory?: ReactNode;
+    /** Callback to lock/unlock global gestures */
+    onGestureLock?: (isLocked: boolean) => void;
+}
+/**
+ * Headless Playlist Sheet Component
+ *
+ * Displays a scrollable list of playlist items in a bottom sheet.
+ * Supports auto-scroll to active item on open.
+ */
+declare function PlaylistSheetHeadlessComponent({ isOpen, onClose, items, currentIndex, activeId, onItemSelect, className, translations, headerAccessory, onGestureLock, }: PlaylistSheetHeadlessProps): react_jsx_runtime.JSX.Element;
+declare const PlaylistSheetHeadless: react.MemoExoticComponent<typeof PlaylistSheetHeadlessComponent>;
+
+interface PlaylistCollectionItem {
+    id: string;
+    title: string;
+    thumbnail?: string;
+    itemCount: number;
+    authorName?: string;
+    updatedAt?: string;
+}
+interface PlaylistCollectionHeadlessProps {
+    /** List of playlists */
+    playlists: PlaylistCollectionItem[];
+    /** View type: grid or list */
+    viewType?: 'grid' | 'list';
+    /** Loading state */
+    isLoading?: boolean;
+    /** Callback when a playlist is selected */
+    onSelect: (id: string) => void;
+    /** Custom class name */
+    className?: string;
+    /** Translations */
+    translations: {
+        title: string;
+        itemsCount: (count: number) => string;
+        emptyTitle: string;
+        emptyDesc: string;
+        retryButton: string;
+    };
+    /** Optional custom button for empty/error state */
+    renderEmptyButton?: () => ReactNode;
+}
+/**
+ * Headless Playlist Collection Component
+ *
+ * Displays a list or grid of playlists with skeleton loading support.
+ * Aspect ratio 9:16 for thumbnails is enforced via CSS.
+ */
+declare function PlaylistCollectionHeadlessComponent({ playlists, viewType, isLoading, onSelect, className, translations, renderEmptyButton, }: PlaylistCollectionHeadlessProps): react_jsx_runtime.JSX.Element;
+declare const PlaylistCollectionHeadless: react.MemoExoticComponent<typeof PlaylistCollectionHeadlessComponent>;
+
+export { PlaylistBarHeadless, type PlaylistBarHeadlessProps, PlaylistCollectionHeadless, type PlaylistCollectionHeadlessProps, type PlaylistCollectionItem, PlaylistSheetHeadless, type PlaylistSheetHeadlessProps };

package/dist/components/Playlist/index.js

@@ -0,0 +1 @@
+export { PlaylistBarHeadless, PlaylistCollectionHeadless, PlaylistSheetHeadless } from '../../chunk-5Y43HNRG.js';

package/dist/components/ProgressBar/index.js

@@ -1 +1 @@
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from '../../chunk-ECR42RKK.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,74 @@
+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;
+    /** Callback to lock/unlock global gestures */
+    onGestureLock?: (isLocked: boolean) => void;
+    /**
+     * Custom button element to trigger the report sheet
+     */
+    buttonElement?: ReactElement;
+}
+declare function ReportSheetHeadlessComponent({ isOpen, onClose, onSubmit, reasons, isLoadingReasons, maxLength, alreadyReported, selectTitle, title, inputPlaceholder, submitText, loadingText, successTitle, successMessage, doneText, errorMessage, errorDescription, successIcon, className, onGestureLock, }: 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-DGKMO3AE.js';

package/dist/components/Skeleton/index.js

@@ -1 +1 @@
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from '../../chunk-UNV3NWN6.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/VideoInfo/index.d.ts

@@ -34,12 +34,14 @@ interface VideoCaptionProps {
     moreText?: string;
     /** "less" button text */
     lessText?: string;
+    /** Click handler for caption (e.g., to open detail view) */
+    onClick?: () => void;
     /** Additional CSS classes */
     className?: string;
     /** Custom children (replaces default rendering) */
     children?: ReactNode;
 }
-declare function VideoCaption({ caption, maxLines, expandable, moreText, lessText, className, children, }: VideoCaptionProps): react_jsx_runtime.JSX.Element | null;
+declare function VideoCaption({ caption, maxLines, expandable, moreText, lessText, onClick, className, children, }: VideoCaptionProps): react_jsx_runtime.JSX.Element | null;
 
 interface VideoHashtagsProps {
     /** Override hashtags array */
@@ -97,11 +99,13 @@ interface VideoInfoHeadlessExtendedProps extends VideoInfoHeadlessProps {
     overlay?: boolean;
     /** Test ID for testing */
     testId?: string;
+    /** Visibility state */
+    isVisible?: boolean;
 }
 /**
  * VideoInfoHeadless Root Component
  */
-declare function VideoInfoHeadlessRoot({ videoInfoState, videoInfoActions, overlay, className, children, testId, }: VideoInfoHeadlessExtendedProps): react_jsx_runtime.JSX.Element;
+declare function VideoInfoHeadlessRoot({ videoInfoState, videoInfoActions, overlay, isVisible, className, children, testId, }: VideoInfoHeadlessExtendedProps): react_jsx_runtime.JSX.Element;
 /**
  * Content wrapper for grouping elements
  */
@@ -155,6 +159,6 @@ declare function useOptionalVideoInfoContext(): VideoInfoContextValue | undefine
  * - Location (optional)
  * - Music info (optional)
  */
-declare const VIDEO_INFO_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 * VideoInfo 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-video-info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-video-info-gap, 6px);\n  color: var(--sv-video-info-color, #fff);\n  font-family: var(--sv-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n  text-shadow: var(--sv-video-info-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));\n  max-width: 100%;\n  overflow: hidden;\n}\n\n/* Overlay variant (on top of video) */\n.sv-video-info--overlay {\n  pointer-events: none;\n}\n\n.sv-video-info--overlay > * {\n  pointer-events: auto;\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 * Author Name\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-video-info__author {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-author-gap, 6px);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__author:hover {\n  opacity: 0.85;\n}\n\n.sv-video-info__author:active {\n  opacity: 0.7;\n}\n\n.sv-video-info__author-name {\n  font-size: var(--sv-video-info-author-font-size, 16px);\n  font-weight: var(--sv-video-info-author-font-weight, 700);\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.sv-video-info__author-prefix {\n  opacity: 0.95;\n}\n\n.sv-video-info__verified-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sv-video-info-verified-size, 14px);\n  height: var(--sv-video-info-verified-size, 14px);\n  background: var(--sv-video-info-verified-bg, #20d5ec);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.sv-video-info__verified-badge svg,\n.sv-video-info__verified-badge span {\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\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 * Caption\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-video-info__caption {\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  line-height: var(--sv-video-info-caption-line-height, 1.4);\n  color: var(--sv-video-info-caption-color, #fff);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n}\n\n.sv-video-info__caption--lines-1 {\n  -webkit-line-clamp: 1;\n}\n\n.sv-video-info__caption--lines-2 {\n  -webkit-line-clamp: 2;\n}\n\n.sv-video-info__caption--lines-3 {\n  -webkit-line-clamp: 3;\n}\n\n.sv-video-info__caption--expanded {\n  -webkit-line-clamp: unset;\n}\n\n/* \"more\" button for expandable caption */\n.sv-video-info__caption-more {\n  background: none;\n  border: none;\n  color: var(--sv-video-info-caption-more-color, rgba(255, 255, 255, 0.7));\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  padding: 0;\n  margin-left: 4px;\n  cursor: pointer;\n}\n\n.sv-video-info__caption-more:hover {\n  color: var(--sv-video-info-caption-color, #fff);\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 * Hashtags\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-video-info__hashtags {\n  display: inline-flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--sv-video-info-hashtag-gap, 6px);\n  font-size: var(--sv-video-info-hashtag-font-size, 14px);\n}\n\n/* Inline variant - more compact */\n.sv-video-info__hashtags--inline {\n  gap: var(--sv-video-info-hashtag-gap-inline, 4px);\n}\n\n.sv-video-info__hashtag {\n  display: inline-flex;\n  color: var(--sv-video-info-hashtag-color, #fff);\n  font-weight: var(--sv-video-info-hashtag-font-weight, 500);\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  white-space: nowrap;\n}\n\n.sv-video-info__hashtag:hover {\n  opacity: 0.8;\n  text-decoration: underline;\n}\n\n.sv-video-info__hashtag--not-clickable {\n  cursor: default;\n}\n\n.sv-video-info__hashtag--not-clickable:hover {\n  opacity: 1;\n  text-decoration: none;\n}\n\n/* Inline hashtags (inside caption) */\n.sv-video-info__caption .sv-video-info__hashtag {\n  display: inline;\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 * Location\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-video-info__location {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-location-gap, 4px);\n  font-size: var(--sv-video-info-location-font-size, 13px);\n  color: var(--sv-video-info-location-color, rgba(255, 255, 255, 0.9));\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__location:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__location-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__location-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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\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-video-info__music {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-music-gap, 8px);\n  font-size: var(--sv-video-info-music-font-size, 13px);\n  color: var(--sv-video-info-music-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  overflow: hidden;\n}\n\n.sv-video-info__music:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__music-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__music-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* Marquee animation for long text */\n}\n\n/* Marquee animation for music text */\n.sv-video-info__music-text--marquee {\n  animation: sv-video-info-marquee 8s linear infinite;\n}\n\n@keyframes sv-video-info-marquee {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n";
+declare const VIDEO_INFO_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 * VideoInfo 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-video-info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-video-info-gap, 6px);\n  color: var(--sv-video-info-color, #fff);\n  font-family: var(--sv-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n  text-shadow: var(--sv-video-info-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));\n  max-width: 100%;\n  overflow: hidden;\n  \n  /* Auto-hide transition */\n  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Hidden state for auto-hide */\n.sv-video-info--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Overlay variant (on top of video) */\n.sv-video-info--overlay {\n  pointer-events: none;\n}\n\n.sv-video-info--overlay > * {\n  pointer-events: auto;\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 * Author Name\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-video-info__author {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-author-gap, 6px);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__author:hover {\n  opacity: 0.85;\n}\n\n.sv-video-info__author:active {\n  opacity: 0.7;\n}\n\n.sv-video-info__author-name {\n  font-size: var(--sv-video-info-author-font-size, 16px);\n  font-weight: var(--sv-video-info-author-font-weight, 700);\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.sv-video-info__author-prefix {\n  opacity: 0.95;\n}\n\n.sv-video-info__verified-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sv-video-info-verified-size, 14px);\n  height: var(--sv-video-info-verified-size, 14px);\n  background: var(--sv-video-info-verified-bg, #20d5ec);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.sv-video-info__verified-badge svg,\n.sv-video-info__verified-badge span {\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\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 * Caption\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-video-info__caption {\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  line-height: var(--sv-video-info-caption-line-height, 1.4);\n  color: var(--sv-video-info-caption-color, #fff);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n}\n\n.sv-video-info__caption--lines-1 {\n  -webkit-line-clamp: 1;\n}\n\n.sv-video-info__caption--lines-2 {\n  -webkit-line-clamp: 2;\n}\n\n.sv-video-info__caption--lines-3 {\n  -webkit-line-clamp: 3;\n}\n\n.sv-video-info__caption--expanded {\n  -webkit-line-clamp: unset;\n}\n\n/* Clickable caption (for opening detail view) */\n.sv-video-info__caption--clickable {\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__caption--clickable:hover {\n  opacity: 0.85;\n}\n\n.sv-video-info__caption--clickable:active {\n  opacity: 0.7;\n}\n\n/* \"more\" button for expandable caption */\n.sv-video-info__caption-more {\n  background: none;\n  border: none;\n  color: var(--sv-video-info-caption-more-color, rgba(255, 255, 255, 0.7));\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  padding: 0;\n  margin-left: 4px;\n  cursor: pointer;\n}\n\n.sv-video-info__caption-more:hover {\n  color: var(--sv-video-info-caption-color, #fff);\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 * Hashtags\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-video-info__hashtags {\n  display: inline-flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--sv-video-info-hashtag-gap, 6px);\n  font-size: var(--sv-video-info-hashtag-font-size, 14px);\n}\n\n/* Inline variant - more compact */\n.sv-video-info__hashtags--inline {\n  gap: var(--sv-video-info-hashtag-gap-inline, 4px);\n}\n\n.sv-video-info__hashtag {\n  display: inline-flex;\n  color: var(--sv-video-info-hashtag-color, #fff);\n  font-weight: var(--sv-video-info-hashtag-font-weight, 500);\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  white-space: nowrap;\n}\n\n.sv-video-info__hashtag:hover {\n  opacity: 0.8;\n  text-decoration: underline;\n}\n\n.sv-video-info__hashtag--not-clickable {\n  cursor: default;\n}\n\n.sv-video-info__hashtag--not-clickable:hover {\n  opacity: 1;\n  text-decoration: none;\n}\n\n/* Inline hashtags (inside caption) */\n.sv-video-info__caption .sv-video-info__hashtag {\n  display: inline;\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 * Location\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-video-info__location {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-location-gap, 4px);\n  font-size: var(--sv-video-info-location-font-size, 13px);\n  color: var(--sv-video-info-location-color, rgba(255, 255, 255, 0.9));\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__location:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__location-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__location-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\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\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-video-info__music {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-music-gap, 8px);\n  font-size: var(--sv-video-info-music-font-size, 13px);\n  color: var(--sv-video-info-music-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  overflow: hidden;\n}\n\n.sv-video-info__music:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__music-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__music-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* Marquee animation for long text */\n}\n\n/* Marquee animation for music text */\n.sv-video-info__music-text--marquee {\n  animation: sv-video-info-marquee 8s linear infinite;\n}\n\n@keyframes sv-video-info-marquee {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n";
 
 export { VIDEO_INFO_CSS, VideoAuthorName, type VideoAuthorNameProps, VideoCaption, type VideoCaptionProps, VideoHashtags, type VideoHashtagsProps, VideoInfoContext, type VideoInfoContextValue, VideoInfoHeadless, type VideoInfoHeadlessExtendedProps, VideoLocation, type VideoLocationProps, VideoMusic, type VideoMusicProps, useOptionalVideoInfoContext, useVideoInfoContext };

package/dist/components/VideoInfo/index.js

@@ -1 +1 @@
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from '../../chunk-KWHMZ6H5.js';
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from '../../chunk-7WXAQHJI.js';

package/dist/components/VideoPlayer/index.js

@@ -1 +1 @@
-export { BUFFERING_STATE_CLASS, DEFAULT_OBJECT_FIT, DEFAULT_PRELOAD, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, FIRST_FRAME_MAX_WIDTH, FIRST_FRAME_QUALITY, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, Z_INDEX, Z_INDEX_CSS_VARS, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from '../../chunk-CL6BS7GB.js';
+export { BUFFERING_STATE_CLASS, DEFAULT_OBJECT_FIT, DEFAULT_PRELOAD, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, FIRST_FRAME_MAX_WIDTH, FIRST_FRAME_QUALITY, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, Z_INDEX, Z_INDEX_CSS_VARS, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from '../../chunk-OM4L7RE5.js';