@xhub-short/ui 0.1.0-beta.5 → 0.1.0-beta.7

package/dist/{CommentSheet.css-DR3Wcn0F.d.ts → CommentSheet.css-BD6XbpU2.d.ts}

@@ -202,6 +202,6 @@ declare const CommentSheet: react.NamedExoticComponent<CommentSheetHeadlessProps
  * - Pinned comment support
  * - Vertical reply thread lines
  */
-declare const COMMENT_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 (Light Theme)\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:root {\n  /* Primary colors */\n  --sv-comment-primary: #164d8e;\n  --sv-comment-primary-light: #1354ae;\n  --sv-comment-primary-dark: #003477;\n  \n  /* Contrast colors */\n  --sv-comment-bg: #ffffff;\n  --sv-comment-text: #121212;\n  --sv-comment-text-secondary: #6b7271;\n  --sv-comment-border: rgba(18, 18, 18, 0.08);\n  \n  /* Accent colors */\n  --sv-comment-like-color: #ff434e;\n  --sv-comment-verified-color: #1ea031;\n  --sv-comment-mention-color: #164d8e;\n  \n  /* Component specific */\n  --sv-comment-avatar-bg: #e5e6e6;\n  --sv-comment-input-border: #a3a3a3;\n  --sv-comment-reply-line: #e5e6e6;\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   BACKDROP & 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-comment-sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  background: var(--sv-comment-backdrop-bg, rgba(0, 0, 0, 0.5));\n  z-index: var(--sv-comment-sheet-z-index, 1000);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,\n              visibility 0s linear var(--sv-comment-animation-duration, 400ms);\n}\n\n.sv-comment-sheet-backdrop--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,\n              visibility 0s linear 0s;\n}\n\n/* Keyframes for slide animations */\n@keyframes sv-sheet-slide-up {\n  from { transform: translateY(100%); }\n  to { transform: translateY(0); }\n}\n\n@keyframes sv-sheet-slide-down {\n  from { transform: translateY(0); }\n  to { transform: translateY(100%); }\n}\n\n.sv-comment-sheet {\n  position: fixed;\n  margin: 16px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--sv-comment-bg, #ffffff);\n  border-radius: var(--sv-comment-sheet-radius, 24px);\n  z-index: var(--sv-comment-sheet-z-index, 1001);\n  display: flex;\n  flex-direction: column;\n  max-height: var(--sv-comment-sheet-height, 55vh);\n  transform: translateY(100%);\n  overflow: hidden;\n  touch-action: pan-y;\n  isolation: isolate;\n  pointer-events: none;\n  will-change: transform;\n}\n\n.sv-comment-sheet--open {\n  transform: translateY(0);\n  pointer-events: auto;\n  animation: sv-sheet-slide-up var(--sv-comment-animation-duration, 400ms) \n             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;\n}\n\n.sv-comment-sheet--open.sv-comment-sheet--closing {\n  pointer-events: none;\n  animation: sv-sheet-slide-down var(--sv-comment-animation-duration, 400ms) \n             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards !important;\n}\n\n/* CRITICAL: Disable VirtualSlider/VideoFeed swipe when CommentSheet is open */\nbody.sv-comment-sheet-open .sv-slider,\nbody.sv-comment-sheet-open .sv-video-feed {\n  pointer-events: none !important;\n  touch-action: none !important;\n}\n\nbody.sv-comment-sheet-open .sv-comment-sheet,\nbody.sv-comment-sheet-open .sv-comment-sheet-backdrop {\n  touch-action: auto !important;\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-comment-sheet__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  border-bottom: 1px solid var(--sv-comment-border);\n  flex-shrink: 0;\n  position: relative;\n  cursor: grab;\n  touch-action: none;\n}\n\n.sv-comment-sheet__header:active {\n  cursor: grabbing;\n}\n\n.sv-comment-sheet__header-handle {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 36px;\n  height: 4px;\n  background: var(--sv-comment-text-secondary);\n  border-radius: 2px;\n  opacity: 0.3;\n}\n\n.sv-comment-sheet__header-left {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.sv-comment-sheet__title {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  opacity: 0.9;\n  margin: 0;\n}\n\n.sv-comment-sheet__sort-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-sheet__sort-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-sheet__close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 100px;\n  background: linear-gradient(180deg, var(--sv-comment-primary-light) 0%, var(--sv-comment-primary-dark) 100%);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-comment-sheet__close-btn:hover {\n  opacity: 0.9;\n}\n\n.sv-comment-sheet__close-btn svg {\n  width: 20px;\n  height: 20px;\n  color: #ffffff;\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   COMMENT 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-comment-sheet__list {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 8px 16px 28px 16px;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n  touch-action: pan-y;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar {\n  width: 0px;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.0);\n  border-radius: 0px;\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   COMMENT ITEM\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-comment-item {\n  display: flex;\n  gap: 6px;\n  padding: 16px 0;\n  position: relative;\n}\n\n.sv-comment-item--pending {\n  opacity: 0.6;\n}\n\n.sv-comment-item--pinned {\n  background: var(--sv-comment-bg);\n}\n\n.sv-comment-item__avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 120px;\n  flex-shrink: 0;\n  object-fit: cover;\n  background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-item__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sv-comment-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n}\n\n.sv-comment-item__header-left {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-width: 0;\n}\n\n.sv-comment-item__pin-icon {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  color: var(--sv-comment-primary);\n}\n\n.sv-comment-item__author {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-comment-item__verified {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  color: var(--sv-comment-verified-color);\n}\n\n.sv-comment-item__badge {\n  font-size: 10px;\n  padding: 2px 6px;\n  background: var(--sv-comment-primary);\n  color: #ffffff;\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n\n.sv-comment-item__menu-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-item__menu-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-item__text {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  word-break: break-word;\n  margin: 0;\n  padding-right: 16px;\n}\n\n/* Text collapse */\n.sv-comment-item__text--collapsed {\n  display: -webkit-box;\n  -webkit-line-clamp: var(--sv-comment-max-lines, 3);\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.sv-comment-item__expand-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 12px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  margin-top: 4px;\n}\n\n.sv-comment-item__expand-btn:hover {\n  color: var(--sv-comment-text);\n}\n\n/* Actions row */\n.sv-comment-item__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.sv-comment-item__time {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--sv-comment-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-comment-item__action-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n\n.sv-comment-item__action-btn:hover {\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-item__action-btn--active {\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-btn--active:hover {\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-icon {\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\n   REPLIES\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-comment-replies {\n  margin-top: 12px;\n  position: relative;\n}\n\n/* Vertical connecting line */\n.sv-comment-item--has-replies::before {\n  content: '';\n  position: absolute;\n  left: 20px;\n  top: 56px;\n  bottom: 0;\n  width: 1px;\n  background: var(--sv-comment-reply-line);\n}\n\n.sv-comment-replies__toggle {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  background: none;\n  border: none;\n  padding: 4px 0;\n  cursor: pointer;\n}\n\n.sv-comment-replies__toggle-line {\n  width: 24px;\n  height: 1px;\n  background: #a3a3a3;\n  margin-right: 0;\n}\n\n.sv-comment-replies__toggle-text {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text-secondary);\n  white-space: nowrap;\n}\n\n.sv-comment-replies__toggle-icon {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-replies__list {\n  margin-top: 12px;\n}\n\n.sv-comment-reply {\n  display: flex;\n  gap: 6px;\n  padding: 0 0 12px 0;\n  position: relative;\n}\n\n.sv-comment-reply__avatar {\n  width: 24px;\n  height: 24px;\n  border-radius: 100px;\n  flex-shrink: 0;\n  object-fit: cover;\n  background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-reply__mention {\n  color: var(--sv-comment-mention-color);\n  font-weight: 500;\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   INPUT AREA\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-comment-sheet__input-area {\n  padding: 0 16px 36px 16px;\n  flex-shrink: 0;\n}\n\n.sv-comment-sheet__reply-to {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 0;\n  margin-bottom: 8px;\n  font-size: 12px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__reply-to-author-name {\n  font-size: 12px;\n  color: var(--sv-comment-text);\n  font-weight: 500;\n}\n\n.sv-comment-sheet__reply-to-clear {\n  background: none;\n  border: none;\n  padding: 4px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  font-size: 12px;\n}\n\n.sv-comment-sheet__input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 44px;\n  padding: 16px;\n  background: var(--sv-comment-bg);\n  border: 1px solid var(--sv-comment-input-border);\n  border-radius: 12px;\n  backdrop-filter: blur(50px);\n}\n\n.sv-comment-sheet__input-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n}\n\n.sv-comment-sheet__media-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.sv-comment-sheet__media-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-sheet__input {\n  flex: 1;\n  background: none;\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  padding: 0;\n  min-width: 0;\n}\n\n.sv-comment-sheet__input::placeholder {\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__input:not(:placeholder-shown) {\n  font-style: normal;\n}\n\n.sv-comment-sheet__emoji-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.sv-comment-sheet__emoji-btn svg {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-comment-primary);\n}\n\n/* Hidden emoji bar (can be toggled) */\n.sv-comment-sheet__emoji-bar {\n  display: none;\n  gap: 8px;\n  padding: 8px 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sv-comment-sheet__emoji-bar--visible {\n  display: flex;\n}\n\n.sv-comment-sheet__emoji-bar::-webkit-scrollbar {\n  display: none;\n}\n\n.sv-comment-sheet__emoji-bar-btn {\n  background: none;\n  border: none;\n  padding: 4px;\n  font-size: 20px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background 0.15s ease;\n}\n\n.sv-comment-sheet__emoji-bar-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\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   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-comment-sheet__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-top-color: var(--sv-comment-primary);\n  border-radius: 50%;\n  animation: sv-comment-spin 0.8s linear infinite;\n}\n\n@keyframes sv-comment-spin {\n  to { transform: rotate(360deg); }\n}\n\n.sv-comment-sheet__empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  text-align: center;\n}\n\n.sv-comment-sheet__empty-icon {\n  font-size: 48px;\n  margin-bottom: 12px;\n}\n\n.sv-comment-sheet__empty-text {\n  color: var(--sv-comment-text-secondary);\n  font-size: 14px;\n}\n\n.sv-comment-sheet__error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px;\n  text-align: center;\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-sheet__error-btn {\n  margin-top: 12px;\n  padding: 8px 16px;\n  background: rgba(0, 0, 0, 0.05);\n  border: none;\n  border-radius: 8px;\n  color: var(--sv-comment-text);\n  cursor: pointer;\n}\n\n/* Load more */\n.sv-comment-sheet__load-more {\n  display: flex;\n  justify-content: center;\n  padding: 12px;\n}\n\n.sv-comment-sheet__load-more-btn {\n  background: none;\n  border: none;\n  padding: 8px 16px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n}\n\n.sv-comment-sheet__load-more-btn:hover {\n  color: var(--sv-comment-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   DELETE CONFIRMATION\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-comment-delete-confirm {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: var(--sv-comment-modal-z-index, 1100);\n}\n\n.sv-comment-delete-confirm__dialog {\n  background: var(--sv-comment-bg);\n  border-radius: 12px;\n  padding: 16px;\n  max-width: 280px;\n  text-align: center;\n}\n\n.sv-comment-delete-confirm__title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--sv-comment-text);\n  margin-bottom: 8px;\n}\n\n.sv-comment-delete-confirm__text {\n  font-size: 14px;\n  color: var(--sv-comment-text-secondary);\n  margin-bottom: 16px;\n}\n\n.sv-comment-delete-confirm__actions {\n  display: flex;\n  gap: 8px;\n}\n\n.sv-comment-delete-confirm__btn {\n  flex: 1;\n  padding: 8px 12px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sv-comment-delete-confirm__btn--cancel {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-delete-confirm__btn--delete {\n  background: var(--sv-comment-like-color);\n  color: #ffffff;\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@keyframes sv-skeleton-shimmer {\n  0% { background-position: -200% 0; }\n  100% { background-position: 200% 0; }\n}\n\n.sv-comment-skeleton-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.sv-comment-skeleton {\n  animation: sv-skeleton-fade-in 0.3s ease;\n}\n\n@keyframes sv-skeleton-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.sv-comment-skeleton__avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sv-comment-skeleton__header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.sv-comment-skeleton__author {\n  width: 80px;\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.1s;\n}\n\n.sv-comment-skeleton__time {\n  width: 40px;\n  height: 12px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.15s;\n}\n\n.sv-comment-skeleton__text {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.sv-comment-skeleton__line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__line--full {\n  width: 100%;\n  animation-delay: 0.2s;\n}\n\n.sv-comment-skeleton__line--medium {\n  width: 65%;\n  animation-delay: 0.25s;\n}\n\n.sv-comment-skeleton__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-top: 4px;\n}\n\n.sv-comment-skeleton__action {\n  width: 50px;\n  height: 12px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.3s;\n}\n";
+declare const COMMENT_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 (Light Theme)\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:root {\n  /* Primary colors */\n  --sv-comment-primary: #164d8e;\n  --sv-comment-primary-light: #1354ae;\n  --sv-comment-primary-dark: #003477;\n  \n  /* Contrast colors */\n  --sv-comment-bg: #ffffff;\n  --sv-comment-text: #121212;\n  --sv-comment-text-secondary: #6b7271;\n  --sv-comment-border: rgba(18, 18, 18, 0.08);\n  \n  /* Accent colors */\n  --sv-comment-like-color: #ff434e;\n  --sv-comment-verified-color: #1ea031;\n  --sv-comment-mention-color: #164d8e;\n  \n  /* Component specific */\n  --sv-comment-avatar-bg: #e5e6e6;\n  --sv-comment-input-border: #a3a3a3;\n  --sv-comment-reply-line: #e5e6e6;\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   BACKDROP & 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-comment-sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  background: var(--sv-comment-backdrop-bg, rgba(0, 0, 0, 0.5));\n  z-index: var(--sv-comment-sheet-z-index, 1000);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,\n              visibility 0s linear var(--sv-comment-animation-duration, 400ms);\n}\n\n.sv-comment-sheet-backdrop--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,\n              visibility 0s linear 0s;\n}\n\n/* Keyframes for slide animations */\n@keyframes sv-sheet-slide-up {\n  from { transform: translateY(100%); }\n  to { transform: translateY(0); }\n}\n\n@keyframes sv-sheet-slide-down {\n  from { transform: translateY(0); }\n  to { transform: translateY(100%); }\n}\n\n.sv-comment-sheet {\n  position: fixed;\n  margin: 16px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--sv-comment-bg, #ffffff);\n  border-radius: var(--sv-comment-sheet-radius, 24px);\n  z-index: var(--sv-comment-sheet-z-index, 1001);\n  display: flex;\n  flex-direction: column;\n  max-height: var(--sv-comment-sheet-height, 55vh);\n  transform: translateY(100%);\n  overflow: hidden;\n  touch-action: pan-y;\n  isolation: isolate;\n  pointer-events: none;\n  will-change: transform;\n}\n\n.sv-comment-sheet--open {\n  transform: translateY(0);\n  pointer-events: auto;\n  animation: sv-sheet-slide-up var(--sv-comment-animation-duration, 400ms) \n             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;\n}\n\n.sv-comment-sheet--open.sv-comment-sheet--closing {\n  pointer-events: none;\n  animation: sv-sheet-slide-down var(--sv-comment-animation-duration, 400ms) \n             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards !important;\n}\n\n/* CRITICAL: Disable VirtualSlider/VideoFeed swipe when CommentSheet is open */\nbody.sv-comment-sheet-open .sv-slider,\nbody.sv-comment-sheet-open .sv-video-feed {\n  pointer-events: none !important;\n  touch-action: none !important;\n}\n\nbody.sv-comment-sheet-open .sv-comment-sheet,\nbody.sv-comment-sheet-open .sv-comment-sheet-backdrop {\n  touch-action: auto !important;\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-comment-sheet__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  border-bottom: 1px solid var(--sv-comment-border);\n  flex-shrink: 0;\n  position: relative;\n  cursor: grab;\n  touch-action: none;\n}\n\n.sv-comment-sheet__header:active {\n  cursor: grabbing;\n}\n\n.sv-comment-sheet__header-handle {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 36px;\n  height: 4px;\n  background: var(--sv-comment-text-secondary);\n  border-radius: 2px;\n  opacity: 0.3;\n}\n\n.sv-comment-sheet__header-left {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.sv-comment-sheet__title {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  opacity: 0.9;\n  margin: 0;\n}\n\n.sv-comment-sheet__sort-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-sheet__sort-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-sheet__close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 100px;\n  background: linear-gradient(180deg, var(--sv-comment-primary-light) 0%, var(--sv-comment-primary-dark) 100%);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-comment-sheet__close-btn:hover {\n  opacity: 0.9;\n}\n\n.sv-comment-sheet__close-btn svg {\n  width: 20px;\n  height: 20px;\n  color: #ffffff;\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   COMMENT 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-comment-sheet__list {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 8px 16px 28px 16px;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n  touch-action: pan-y;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar {\n  width: 0px;\n}\n\n.sv-comment-sheet__list::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.0);\n  border-radius: 0px;\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   COMMENT ITEM\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-comment-item {\n  display: flex;\n  gap: 6px;\n  padding: 16px 0;\n  position: relative;\n}\n\n.sv-comment-item--pending {\n  opacity: 0.6;\n}\n\n.sv-comment-item--pinned {\n  background: var(--sv-comment-bg);\n}\n\n.sv-comment-item__avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 120px;\n  flex-shrink: 0;\n  object-fit: cover;\n  background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-item__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sv-comment-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n}\n\n.sv-comment-item__header-left {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-width: 0;\n}\n\n.sv-comment-item__pin-icon {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  color: var(--sv-comment-primary);\n}\n\n.sv-comment-item__author {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-comment-item__verified {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  color: var(--sv-comment-verified-color);\n}\n\n.sv-comment-item__badge {\n  font-size: 10px;\n  padding: 2px 6px;\n  background: var(--sv-comment-primary);\n  color: #ffffff;\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n\n.sv-comment-item__menu-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-item__menu-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-item__text {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  word-break: break-word;\n  margin: 0;\n  padding-right: 16px;\n}\n\n/* Text collapse */\n.sv-comment-item__text--collapsed {\n  display: -webkit-box;\n  -webkit-line-clamp: var(--sv-comment-max-lines, 3);\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.sv-comment-item__expand-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 12px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  margin-top: 4px;\n}\n\n.sv-comment-item__expand-btn:hover {\n  color: var(--sv-comment-text);\n}\n\n/* Actions row */\n.sv-comment-item__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.sv-comment-item__time {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--sv-comment-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-comment-item__action-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background: none;\n  border: none;\n  padding: 0;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n\n.sv-comment-item__action-btn:hover {\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-item__action-btn--active {\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-btn--active:hover {\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-item__action-icon {\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\n   REPLIES\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-comment-replies {\n  margin-top: 12px;\n  position: relative;\n}\n\n/* Vertical connecting line */\n.sv-comment-item--has-replies::before {\n  content: '';\n  position: absolute;\n  left: 20px;\n  top: 56px;\n  bottom: 0;\n  width: 1px;\n  background: var(--sv-comment-reply-line);\n}\n\n.sv-comment-replies__toggle {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  background: none;\n  border: none;\n  padding: 4px 0;\n  cursor: pointer;\n}\n\n.sv-comment-replies__toggle-line {\n  width: 24px;\n  height: 1px;\n  background: #a3a3a3;\n  margin-right: 0;\n}\n\n.sv-comment-replies__toggle-text {\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--sv-comment-text-secondary);\n  white-space: nowrap;\n}\n\n.sv-comment-replies__toggle-icon {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-replies__list {\n  margin-top: 12px;\n}\n\n.sv-comment-reply {\n  display: flex;\n  gap: 6px;\n  padding: 0 0 12px 0;\n  position: relative;\n}\n\n.sv-comment-reply__avatar {\n  width: 24px;\n  height: 24px;\n  border-radius: 100px;\n  flex-shrink: 0;\n  object-fit: cover;\n  background: var(--sv-comment-avatar-bg);\n}\n\n.sv-comment-reply__mention {\n  color: var(--sv-comment-mention-color);\n  font-weight: 500;\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   INPUT AREA\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-comment-sheet__input-area {\n  padding: 0 16px 36px 16px;\n  flex-shrink: 0;\n}\n\n/* Guest mode - login prompt instead of input */\n.sv-comment-input-guest {\n  padding: 16px;\n  border-top: 1px solid var(--sv-comment-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  background: var(--sv-comment-bg);\n  color: var(--sv-comment-primary);\n  font-weight: 600;\n  font-size: 14px;\n  width: 100%;\n  transition: background 0.15s ease;\n}\n\n.sv-comment-input-guest:hover {\n  background: rgba(22, 77, 142, 0.05);\n}\n\n.sv-comment-input-guest:active {\n  background: rgba(22, 77, 142, 0.1);\n}\n\n.sv-comment-sheet__reply-to {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 0;\n  margin-bottom: 8px;\n  font-size: 12px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__reply-to-author-name {\n  font-size: 12px;\n  color: var(--sv-comment-text);\n  font-weight: 500;\n}\n\n.sv-comment-sheet__reply-to-clear {\n  background: none;\n  border: none;\n  padding: 4px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  font-size: 12px;\n}\n\n.sv-comment-sheet__input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 44px;\n  padding: 16px;\n  background: var(--sv-comment-bg);\n  border: 1px solid var(--sv-comment-input-border);\n  border-radius: 12px;\n  backdrop-filter: blur(50px);\n}\n\n.sv-comment-sheet__input-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n}\n\n.sv-comment-sheet__media-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.sv-comment-sheet__media-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.sv-comment-sheet__input {\n  flex: 1;\n  background: none;\n  border: none;\n  outline: none;\n  resize: none;\n  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--sv-comment-text);\n  padding: 0;\n  min-width: 0;\n}\n\n.sv-comment-sheet__input::placeholder {\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__input:not(:placeholder-shown) {\n  font-style: normal;\n}\n\n.sv-comment-sheet__emoji-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.sv-comment-sheet__emoji-btn svg {\n  width: 20px;\n  height: 20px;\n  color: var(--sv-comment-primary);\n}\n\n/* Hidden emoji bar (can be toggled) */\n.sv-comment-sheet__emoji-bar {\n  display: none;\n  gap: 8px;\n  padding: 8px 0;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sv-comment-sheet__emoji-bar--visible {\n  display: flex;\n}\n\n.sv-comment-sheet__emoji-bar::-webkit-scrollbar {\n  display: none;\n}\n\n.sv-comment-sheet__emoji-bar-btn {\n  background: none;\n  border: none;\n  padding: 4px;\n  font-size: 20px;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background 0.15s ease;\n}\n\n.sv-comment-sheet__emoji-bar-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\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   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-comment-sheet__loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  color: var(--sv-comment-text-secondary);\n}\n\n.sv-comment-sheet__loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-top-color: var(--sv-comment-primary);\n  border-radius: 50%;\n  animation: sv-comment-spin 0.8s linear infinite;\n}\n\n@keyframes sv-comment-spin {\n  to { transform: rotate(360deg); }\n}\n\n.sv-comment-sheet__empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  text-align: center;\n}\n\n.sv-comment-sheet__empty-icon {\n  font-size: 48px;\n  margin-bottom: 12px;\n}\n\n.sv-comment-sheet__empty-text {\n  color: var(--sv-comment-text-secondary);\n  font-size: 14px;\n}\n\n.sv-comment-sheet__error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px;\n  text-align: center;\n  color: var(--sv-comment-like-color);\n}\n\n.sv-comment-sheet__error-btn {\n  margin-top: 12px;\n  padding: 8px 16px;\n  background: rgba(0, 0, 0, 0.05);\n  border: none;\n  border-radius: 8px;\n  color: var(--sv-comment-text);\n  cursor: pointer;\n}\n\n/* Load more */\n.sv-comment-sheet__load-more {\n  display: flex;\n  justify-content: center;\n  padding: 12px;\n}\n\n.sv-comment-sheet__load-more-btn {\n  background: none;\n  border: none;\n  padding: 8px 16px;\n  color: var(--sv-comment-text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n}\n\n.sv-comment-sheet__load-more-btn:hover {\n  color: var(--sv-comment-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   DELETE CONFIRMATION\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-comment-delete-confirm {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: var(--sv-comment-modal-z-index, 1100);\n}\n\n.sv-comment-delete-confirm__dialog {\n  background: var(--sv-comment-bg);\n  border-radius: 12px;\n  padding: 16px;\n  max-width: 280px;\n  text-align: center;\n}\n\n.sv-comment-delete-confirm__title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--sv-comment-text);\n  margin-bottom: 8px;\n}\n\n.sv-comment-delete-confirm__text {\n  font-size: 14px;\n  color: var(--sv-comment-text-secondary);\n  margin-bottom: 16px;\n}\n\n.sv-comment-delete-confirm__actions {\n  display: flex;\n  gap: 8px;\n}\n\n.sv-comment-delete-confirm__btn {\n  flex: 1;\n  padding: 8px 12px;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sv-comment-delete-confirm__btn--cancel {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--sv-comment-text);\n}\n\n.sv-comment-delete-confirm__btn--delete {\n  background: var(--sv-comment-like-color);\n  color: #ffffff;\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@keyframes sv-skeleton-shimmer {\n  0% { background-position: -200% 0; }\n  100% { background-position: 200% 0; }\n}\n\n.sv-comment-skeleton-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.sv-comment-skeleton {\n  animation: sv-skeleton-fade-in 0.3s ease;\n}\n\n@keyframes sv-skeleton-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.sv-comment-skeleton__avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.sv-comment-skeleton__header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.sv-comment-skeleton__author {\n  width: 80px;\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.1s;\n}\n\n.sv-comment-skeleton__time {\n  width: 40px;\n  height: 12px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.15s;\n}\n\n.sv-comment-skeleton__text {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.sv-comment-skeleton__line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.sv-comment-skeleton__line--full {\n  width: 100%;\n  animation-delay: 0.2s;\n}\n\n.sv-comment-skeleton__line--medium {\n  width: 65%;\n  animation-delay: 0.25s;\n}\n\n.sv-comment-skeleton__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-top: 4px;\n}\n\n.sv-comment-skeleton__action {\n  width: 50px;\n  height: 12px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.04) 25%,\n    rgba(0, 0, 0, 0.08) 50%,\n    rgba(0, 0, 0, 0.04) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;\n  animation-delay: 0.3s;\n}\n";
 
 export { CommentSheet as C, type ReplyTarget as R, SheetHeader as S, CommentSheetHeadless as a, type CommentSheetHeadlessProps as b, type SheetHeaderProps as c, CommentList as d, type CommentListProps as e, CommentInput as f, type CommentInputProps as g, CommentItemComponent as h, type CommentItemProps as i, CommentSheetContext as j, useOptionalCommentSheetContext as k, type CommentSheetContextValue as l, type CommentSheetI18n as m, COMMENT_SHEET_CSS as n, useCommentSheetContext as u };

package/dist/{chunk-DVS7VILE.js → chunk-CXPNPSF7.js}

@@ -1,5 +1,5 @@
 import { formatCount } from './chunk-3XPJHUYL.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-5U3NZZGG.js → chunk-EBAMBI3O.js}

@@ -1,5 +1,5 @@
 import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { memo, useInsertionEffect, useMemo, useEffect, useCallback, useRef, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-NIFL42PC.js → chunk-K3CETRCY.js}

@@ -1,5 +1,5 @@
 import { PlusIcon } from './chunk-ANCP53F3.js';
-import { injectComponentCSS, removeComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useMemo, useState, useEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -670,10 +670,7 @@ function AuthorInfoHeadlessRoot({
   children
 }) {
   useInsertionEffect(() => {
-    injectComponentCSS(CSS_COMPONENT_ID, AUTHOR_INFO_CSS);
-    return () => {
-      removeComponentCSS(CSS_COMPONENT_ID);
-    };
+    return injectComponentCSS(CSS_COMPONENT_ID, AUTHOR_INFO_CSS);
   }, []);
   const contextValue = useMemo(
     () => ({

package/dist/{chunk-6LKRB7CM.js → chunk-NRQXKZO3.js}

@@ -1,5 +1,5 @@
 import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { memo, useInsertionEffect, useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -35,7 +35,7 @@ var VIDEO_PLAYER_CSS = (
   align-items: center;
   justify-content: center;
   z-index: var(--sv-player-video-z);
-  background: var(--sv-bg-primary, #0ff);
+  background: var(--sv-bg-primary, #000);
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550

package/dist/{chunk-RE62D5GG.js → chunk-OQ7P5XC7.js}

@@ -1,4 +1,4 @@
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { createContext, useContext, useMemo, useInsertionEffect, useRef, useState, useEffect, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-N62QNEY5.js → chunk-PGHLVKXS.js}

@@ -1,5 +1,5 @@
 import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { useInsertionEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-KGMGUOLY.js → chunk-QF7O26KZ.js}

@@ -1,6 +1,6 @@
-import { VirtualSlider } from './chunk-RE62D5GG.js';
+import { VirtualSlider } from './chunk-OQ7P5XC7.js';
 import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { createContext, useContext, useInsertionEffect, useRef, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-DHQJBXQW.js → chunk-RKS7YA7Z.js}

@@ -1,4 +1,4 @@
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { clsx } from 'clsx';
 import { createContext, useInsertionEffect, useMemo, useState, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-WLJCY7W3.js → chunk-T4RQWGRY.js}

@@ -1,6 +1,6 @@
 import { PauseIcon, PlayIcon, HeartFilledIcon } from './chunk-ANCP53F3.js';
 import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { createContext, memo, useMemo, useState, useCallback, useEffect, useRef, useInsertionEffect, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-UXMA4KJZ.js → chunk-UPCVSGWH.js}

@@ -24,7 +24,6 @@ function injectComponentCSS(componentId, css) {
   document.head.appendChild(style);
   injectedStyles.add(componentId);
   return () => {
-    removeComponentCSS(componentId);
   };
 }
 function removeComponentCSS(componentId) {

package/dist/{chunk-GGQNSM6R.js → chunk-UXNIXHII.js}

@@ -1193,6 +1193,30 @@ body.sv-comment-sheet-open .sv-comment-sheet-backdrop {
   flex-shrink: 0;
 }
 
+/* Guest mode - login prompt instead of input */
+.sv-comment-input-guest {
+  padding: 16px;
+  border-top: 1px solid var(--sv-comment-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: var(--sv-comment-bg);
+  color: var(--sv-comment-primary);
+  font-weight: 600;
+  font-size: 14px;
+  width: 100%;
+  transition: background 0.15s ease;
+}
+
+.sv-comment-input-guest:hover {
+  background: rgba(22, 77, 142, 0.05);
+}
+
+.sv-comment-input-guest:active {
+  background: rgba(22, 77, 142, 0.1);
+}
+
 .sv-comment-sheet__reply-to {
   display: flex;
   align-items: center;

package/dist/{chunk-SSJDO24Q.js → chunk-YWAPI7JO.js}

@@ -1,4 +1,4 @@
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
 import { useInsertionEffect, Component } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/components/ActionBar/index.js

@@ -1 +1 @@
-export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from '../../chunk-DVS7VILE.js';
+export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from '../../chunk-CXPNPSF7.js';

package/dist/components/AuthorInfo/index.js

@@ -1 +1 @@
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from '../../chunk-NIFL42PC.js';
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from '../../chunk-K3CETRCY.js';

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

@@ -1,4 +1,4 @@
-export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from '../../CommentSheet.css-DR3Wcn0F.js';
+export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from '../../CommentSheet.css-BD6XbpU2.js';
 import * as react from 'react';
 import '@xhub-short/contracts';
 

package/dist/components/CommentSheet/index.js

@@ -1 +1 @@
-export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from '../../chunk-GGQNSM6R.js';
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentItemSkeleton, CommentList, CommentListSkeleton, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from '../../chunk-UXNIXHII.js';

package/dist/components/ErrorBoundary/index.js

@@ -1 +1 @@
-export { ErrorBoundary } from '../../chunk-SSJDO24Q.js';
+export { ErrorBoundary } from '../../chunk-YWAPI7JO.js';

package/dist/components/ProgressBar/index.js

@@ -1 +1 @@
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from '../../chunk-5U3NZZGG.js';
+export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from '../../chunk-EBAMBI3O.js';

package/dist/components/Skeleton/index.js

@@ -1 +1 @@
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from '../../chunk-N62QNEY5.js';
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from '../../chunk-PGHLVKXS.js';

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-KGMGUOLY.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-QF7O26KZ.js';

package/dist/components/VideoInfo/index.js

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

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

@@ -446,6 +446,6 @@ declare const FIRST_FRAME_MAX_WIDTH = 360;
  * CSS-in-JS styles injected per component.
  * Uses CSS variables for theming and customization.
  */
-declare const VIDEO_PLAYER_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\u2550\u2550\u2550\u2550\n   VideoPlayer 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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-bg-primary, #000);\n  /* CSS variable z-index defaults */\n  --sv-player-video-z: 1;\n  --sv-player-poster-z: 2;\n  --sv-player-loading-z: 3;\n  --sv-player-error-z: 4;\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\u2550\u2550\u2550\u2550\n   Video Element Wrapper\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video-wrapper {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-video-z);\n  background: var(--sv-bg-primary, #0ff);\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\u2550\u2550\u2550\u2550\n   Video Element\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: var(--sv-player-object-fit, contain);\n  background: transparent;\n  /* Prevent iOS controls */\n  -webkit-playsinline: true;\n}\n\n/* Hide video when loading/error for smooth poster display */\n.sv-video-player--loading .sv-video-player__video,\n.sv-video-player--error .sv-video-player__video {\n  opacity: 0;\n}\n\n/* Smooth transition for video visibility */\n.sv-video-player__video {\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\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\u2550\u2550\u2550\u2550\n   Poster 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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__poster {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-player-poster-z);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n/**\n * Hide poster when video is ready OR playing.\n *\n * Poster visibility rules:\n * - SHOW: During initial loading (--loading)\n * - HIDE: Once video is ready (--ready) - even if paused\n * - HIDE: When playing (--playing)\n * - STAY HIDDEN: During buffering (--buffering) - video already visible\n *\n * pointer-events: none ensures poster doesn't block clicks on video.\n */\n.sv-video-player--ready .sv-video-player__poster,\n.sv-video-player--playing .sv-video-player__poster {\n  opacity: 0;\n  pointer-events: 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\u2550\u2550\u2550\u2550\n    Loading Spinner\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__loading {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-loading-z);\n  background: var(--sv-loading-bg, rgba(0, 0, 0, 0.3));\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--loading .sv-video-player__loading {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Default spinner animation */\n.sv-video-player__spinner {\n  width: var(--sv-spinner-size, 40px);\n  height: var(--sv-spinner-size, 40px);\n  border: 3px solid var(--sv-spinner-color, rgba(255, 255, 255, 0.3));\n  border-top-color: var(--sv-spinner-active-color, #fff);\n  border-radius: 50%;\n  animation: sv-player-spin 0.8s linear infinite;\n}\n\n@keyframes sv-player-spin {\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\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-spacing-md, 12px);\n  z-index: var(--sv-player-error-z);\n  background: var(--sv-error-bg, rgba(0, 0, 0, 0.8));\n  color: var(--sv-error-color, #fff);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--error .sv-video-player__error {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sv-video-player__error-icon {\n  width: var(--sv-error-icon-size, 48px);\n  height: var(--sv-error-icon-size, 48px);\n  color: var(--sv-error-icon-color, rgba(255, 255, 255, 0.7));\n}\n\n.sv-video-player__error-message {\n  font-size: var(--sv-error-font-size, 14px);\n  color: var(--sv-error-text-color, rgba(255, 255, 255, 0.8));\n  text-align: center;\n  max-width: 80%;\n}\n\n.sv-video-player__retry-btn {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-lg, 16px);\n  background: var(--sv-btn-bg, rgba(255, 255, 255, 0.2));\n  border: 1px solid var(--sv-btn-border, rgba(255, 255, 255, 0.3));\n  border-radius: var(--sv-btn-radius, 6px);\n  color: var(--sv-btn-color, #fff);\n  font-size: var(--sv-btn-font-size, 14px);\n  cursor: pointer;\n  transition: background var(--sv-transition-duration, 200ms) ease;\n}\n\n.sv-video-player__retry-btn:hover {\n  background: var(--sv-btn-hover-bg, rgba(255, 255, 255, 0.3));\n}\n\n.sv-video-player__retry-btn:active {\n  transform: scale(0.98);\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\u2550\u2550\u2550\u2550\n   Accessibility - Reduced Motion\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\u2550\u2550\u2550\u2550 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-video-player__video,\n  .sv-video-player__poster,\n  .sv-video-player__loading,\n  .sv-video-player__error {\n    transition: none;\n  }\n\n  .sv-video-player__spinner {\n    animation: none;\n    border-top-color: var(--sv-spinner-active-color, #fff);\n  }\n}\n";
+declare const VIDEO_PLAYER_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\u2550\u2550\u2550\u2550\n   VideoPlayer 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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background: var(--sv-bg-primary, #000);\n  /* CSS variable z-index defaults */\n  --sv-player-video-z: 1;\n  --sv-player-poster-z: 2;\n  --sv-player-loading-z: 3;\n  --sv-player-error-z: 4;\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\u2550\u2550\u2550\u2550\n   Video Element Wrapper\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video-wrapper {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-video-z);\n  background: var(--sv-bg-primary, #000);\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\u2550\u2550\u2550\u2550\n   Video Element\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: var(--sv-player-object-fit, contain);\n  background: transparent;\n  /* Prevent iOS controls */\n  -webkit-playsinline: true;\n}\n\n/* Hide video when loading/error for smooth poster display */\n.sv-video-player--loading .sv-video-player__video,\n.sv-video-player--error .sv-video-player__video {\n  opacity: 0;\n}\n\n/* Smooth transition for video visibility */\n.sv-video-player__video {\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\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\u2550\u2550\u2550\u2550\n   Poster 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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__poster {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-player-poster-z);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n/**\n * Hide poster when video is ready OR playing.\n *\n * Poster visibility rules:\n * - SHOW: During initial loading (--loading)\n * - HIDE: Once video is ready (--ready) - even if paused\n * - HIDE: When playing (--playing)\n * - STAY HIDDEN: During buffering (--buffering) - video already visible\n *\n * pointer-events: none ensures poster doesn't block clicks on video.\n */\n.sv-video-player--ready .sv-video-player__poster,\n.sv-video-player--playing .sv-video-player__poster {\n  opacity: 0;\n  pointer-events: 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\u2550\u2550\u2550\u2550\n    Loading Spinner\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\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__loading {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: var(--sv-player-loading-z);\n  background: var(--sv-loading-bg, rgba(0, 0, 0, 0.3));\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--loading .sv-video-player__loading {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Default spinner animation */\n.sv-video-player__spinner {\n  width: var(--sv-spinner-size, 40px);\n  height: var(--sv-spinner-size, 40px);\n  border: 3px solid var(--sv-spinner-color, rgba(255, 255, 255, 0.3));\n  border-top-color: var(--sv-spinner-active-color, #fff);\n  border-radius: 50%;\n  animation: sv-player-spin 0.8s linear infinite;\n}\n\n@keyframes sv-player-spin {\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\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-player__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-spacing-md, 12px);\n  z-index: var(--sv-player-error-z);\n  background: var(--sv-error-bg, rgba(0, 0, 0, 0.8));\n  color: var(--sv-error-color, #fff);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--sv-transition-duration, 200ms) ease-out;\n}\n\n.sv-video-player--error .sv-video-player__error {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.sv-video-player__error-icon {\n  width: var(--sv-error-icon-size, 48px);\n  height: var(--sv-error-icon-size, 48px);\n  color: var(--sv-error-icon-color, rgba(255, 255, 255, 0.7));\n}\n\n.sv-video-player__error-message {\n  font-size: var(--sv-error-font-size, 14px);\n  color: var(--sv-error-text-color, rgba(255, 255, 255, 0.8));\n  text-align: center;\n  max-width: 80%;\n}\n\n.sv-video-player__retry-btn {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-lg, 16px);\n  background: var(--sv-btn-bg, rgba(255, 255, 255, 0.2));\n  border: 1px solid var(--sv-btn-border, rgba(255, 255, 255, 0.3));\n  border-radius: var(--sv-btn-radius, 6px);\n  color: var(--sv-btn-color, #fff);\n  font-size: var(--sv-btn-font-size, 14px);\n  cursor: pointer;\n  transition: background var(--sv-transition-duration, 200ms) ease;\n}\n\n.sv-video-player__retry-btn:hover {\n  background: var(--sv-btn-hover-bg, rgba(255, 255, 255, 0.3));\n}\n\n.sv-video-player__retry-btn:active {\n  transform: scale(0.98);\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\u2550\u2550\u2550\u2550\n   Accessibility - Reduced Motion\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\u2550\u2550\u2550\u2550 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-video-player__video,\n  .sv-video-player__poster,\n  .sv-video-player__loading,\n  .sv-video-player__error {\n    transition: none;\n  }\n\n  .sv-video-player__spinner {\n    animation: none;\n    border-top-color: var(--sv-spinner-active-color, #fff);\n  }\n}\n";
 
 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, type UseAutoFirstFrameCaptureConfig, type UseFirstFrameCaptureConfig, type UseFirstFrameCaptureReturn, type UseVideoElementConfig, type UseVideoElementReturn, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, type VideoErrorOrigin, VideoPlayerHeadless, type VideoPlayerHeadlessExtendedProps, type VideoSourceType, Z_INDEX, Z_INDEX_CSS_VARS, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement };

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-6LKRB7CM.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-NRQXKZO3.js';

package/dist/components/VideoSlot/index.js

@@ -1 +1 @@
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from '../../chunk-WLJCY7W3.js';
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from '../../chunk-T4RQWGRY.js';

package/dist/components/VirtualSlider/index.js

@@ -1 +1 @@
-export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLIDER_SLOT_ACTIVE_CLASS, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLIDER_SLOT_TRANSITIONING_CLASS, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from '../../chunk-RE62D5GG.js';
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLIDER_SLOT_ACTIVE_CLASS, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLIDER_SLOT_TRANSITIONING_CLASS, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from '../../chunk-OQ7P5XC7.js';

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { PROGRESS_BAR_CSS, ProgressBarHeadless, ProgressBarHeadlessExtendedProps
 export { ACTION_BAR_CSS, ActionBarBookmark, ActionBarComment, ActionBarHeadless, ActionBarHeadlessExtendedProps, ActionBarLike, ActionBarShare, ActionButton, ActionButtonExtendedProps, BookmarkButton, BookmarkButtonProps, CommentButton, CommentButtonProps, LikeButton, LikeButtonProps, ShareButton, ShareButtonProps } from './components/ActionBar/index.js';
 export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorAvatarProps, AuthorDescription, AuthorDescriptionProps, AuthorInfoContext, AuthorInfoContextValue, AuthorInfoHeadless, AuthorInfoHeadlessExtendedProps, AuthorInfoVariant, AuthorName, AuthorNameProps, AvatarSize, FollowButton, FollowButtonProps, FollowButtonSize, useAuthorInfoContext, useOptionalAuthorInfoContext } from './components/AuthorInfo/index.js';
 export { VIDEO_INFO_CSS, VideoAuthorName, VideoAuthorNameProps, VideoCaption, VideoCaptionProps, VideoHashtags, VideoHashtagsProps, VideoInfoContext, VideoInfoContextValue, VideoInfoHeadless, VideoInfoHeadlessExtendedProps, VideoLocation, VideoLocationProps, VideoMusic, VideoMusicProps, useOptionalVideoInfoContext, useVideoInfoContext } from './components/VideoInfo/index.js';
-export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from './CommentSheet.css-DR3Wcn0F.js';
+export { n as COMMENT_SHEET_CSS, f as CommentInput, g as CommentInputProps, h as CommentItemComponent, i as CommentItemProps, d as CommentList, e as CommentListProps, C as CommentSheet, j as CommentSheetContext, l as CommentSheetContextValue, a as CommentSheetHeadless, b as CommentSheetHeadlessProps, m as CommentSheetI18n, R as ReplyTarget, S as SheetHeader, c as SheetHeaderProps, u as useCommentSheetContext, k as useOptionalCommentSheetContext } from './CommentSheet.css-BD6XbpU2.js';
 import 'react/jsx-runtime';
 
 /**
@@ -691,10 +691,22 @@ declare const Layouts: {
  *
  * Features:
  * - Deduplication: Each component's CSS is injected only once
+ * - Persistent by default: CSS stays in DOM after injection (no cleanup overhead)
  * - SSR-safe: Checks for document existence
- * - Cleanup-ready: Returns remove function
  * - Hydration-aware: Checks for existing styles from SSR
  *
+ * ## Why No Auto-Cleanup?
+ *
+ * In a video feed app, components like VideoPlayer, ActionBar, etc. are
+ * continuously mounted/unmounted as user scrolls. Removing and re-injecting
+ * CSS would be wasteful since:
+ * 1. These components will be needed again immediately
+ * 2. CSS injection triggers style recalculation (performance cost)
+ * 3. The CSS payload is small (~5-10KB total for all components)
+ *
+ * CSS is only removed via explicit `removeComponentCSS()` or `removeAllComponentCSS()`
+ * calls, typically only needed for testing cleanup.
+ *
  * @example
  * ```tsx
  * // In component file
@@ -714,14 +726,19 @@ declare const Layouts: {
 /**
  * Inject CSS for a specific component.
  *
+ * CSS is injected once and persists in the DOM. This is optimal for
+ * video feed apps where components are frequently mounted/unmounted.
+ *
  * @param componentId - Unique identifier for the component (e.g., 'video-player')
  * @param css - CSS string to inject
- * @returns Cleanup function to remove the injected styles
+ * @returns Empty cleanup function (CSS persists intentionally)
  */
 declare function injectComponentCSS(componentId: string, css: string): () => void;
 /**
  * Remove CSS for a specific component.
- * Useful for cleanup in tests or component unmount.
+ * Mainly used for testing cleanup.
+ *
+ * Note: In normal app usage, CSS persists and this is rarely needed.
  *
  * @param componentId - Component identifier to remove
  */

package/dist/index.js

@@ -1,19 +1,19 @@
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-DHQJBXQW.js';
-export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, 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, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './chunk-6LKRB7CM.js';
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-WLJCY7W3.js';
-export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from './chunk-DVS7VILE.js';
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-NIFL42PC.js';
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-RKS7YA7Z.js';
+export { BUFFERING_STATE_CLASS, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, 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, Z_INDEX as VIDEO_PLAYER_Z_INDEX, Z_INDEX_CSS_VARS as VIDEO_PLAYER_Z_INDEX_CSS_VARS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement } from './chunk-NRQXKZO3.js';
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-T4RQWGRY.js';
+export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, BookmarkButton, CommentButton, LikeButton, ShareButton } from './chunk-CXPNPSF7.js';
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-K3CETRCY.js';
 export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './chunk-ANCP53F3.js';
-export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-GGQNSM6R.js';
-export { ErrorBoundary } from './chunk-SSJDO24Q.js';
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-5U3NZZGG.js';
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-N62QNEY5.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-KGMGUOLY.js';
-export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './chunk-RE62D5GG.js';
+export { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-UXNIXHII.js';
+export { ErrorBoundary } from './chunk-YWAPI7JO.js';
+export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-EBAMBI3O.js';
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-PGHLVKXS.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-QF7O26KZ.js';
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './chunk-OQ7P5XC7.js';
 export { clsx, clsx2 as cn } from './chunk-EDWS2IPH.js';
 export { formatCount, formatCountWithSeparators, parseFormattedCount } from './chunk-3XPJHUYL.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-UXMA4KJZ.js';
+import { injectComponentCSS } from './chunk-UPCVSGWH.js';
+export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-UPCVSGWH.js';
 import { createContext, useInsertionEffect, useContext, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-short/ui",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.7",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -69,7 +69,7 @@
   ],
   "dependencies": {
     "clsx": "^2.1.0",
-    "@xhub-short/contracts": "0.1.0-beta.5"
+    "@xhub-short/contracts": "0.1.0-beta.7"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -94,7 +94,7 @@
     "typescript": "^5.7.0",
     "vitest": "^2.1.0",
     "@xhub-short/tsconfig": "0.0.0",
-    "@xhub-short/vitest-config": "0.0.1-beta.4"
+    "@xhub-short/vitest-config": "0.0.1-beta.6"
   },
   "scripts": {
     "build": "tsup",