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

package/dist/{chunk-FNXTPQ6L.js → chunk-IC2KUU4V.js}

@@ -1,8 +1,8 @@
+import { useBottomSheetContext, BottomSheetHeadless } from './chunk-UYBQTE4M.js';
 import { clsx } from 'clsx';
 import { createContext, memo, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// src/components/CommentSheet/CommentSheetHeadless.tsx
 var CommentSheetContext = createContext(void 0);
 function useCommentSheetContext() {
   const context = useContext(CommentSheetContext);
@@ -1065,1100 +1065,7 @@ var CommentList = memo(function CommentList2({
 CommentList.displayName = "CommentList";
 
 // src/components/CommentSheet/CommentSheet.css.ts
-var COMMENT_SHEET_CSS = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   CSS VARIABLES (Light Theme)
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-:root {
-  /* Primary colors */
-  --sv-comment-primary: #164d8e;
-  --sv-comment-primary-light: #1354ae;
-  --sv-comment-primary-dark: #003477;
-  
-  /* Contrast colors */
-  --sv-comment-bg: #ffffff;
-  --sv-comment-text: #121212;
-  --sv-comment-text-secondary: #6b7271;
-  --sv-comment-border: rgba(18, 18, 18, 0.08);
-  
-  /* Accent colors */
-  --sv-comment-like-color: #ff434e;
-  --sv-comment-verified-color: #1ea031;
-  --sv-comment-mention-color: #164d8e;
-  
-  /* Component specific */
-  --sv-comment-avatar-bg: #e5e6e6;
-  --sv-comment-input-border: #a3a3a3;
-  --sv-comment-reply-line: #e5e6e6;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   BACKDROP & CONTAINER
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-sheet-backdrop {
-  position: fixed;
-  inset: 0;
-  background: var(--sv-comment-backdrop-bg, rgba(0, 0, 0, 0.5));
-  z-index: var(--sv-comment-sheet-z-index, 1000);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,
-              visibility 0s linear var(--sv-comment-animation-duration, 400ms);
-}
-
-.sv-comment-sheet-backdrop--open {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transition: opacity var(--sv-comment-animation-duration, 400ms) ease,
-              visibility 0s linear 0s;
-}
-
-/* Keyframes for slide animations */
-@keyframes sv-sheet-slide-up {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes sv-sheet-slide-down {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
-}
-
-.sv-comment-sheet {
-  position: fixed;
-  margin: 16px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--sv-comment-bg, #ffffff);
-  border-radius: var(--sv-comment-sheet-radius, 24px);
-  z-index: var(--sv-comment-sheet-z-index, 1001);
-  display: flex;
-  flex-direction: column;
-  max-height: var(--sv-comment-sheet-height, 55vh);
-  transform: translateY(100%);
-  overflow: hidden;
-  touch-action: pan-y;
-  isolation: isolate;
-  pointer-events: none;
-  will-change: transform;
-}
-
-.sv-comment-sheet--open {
-  transform: translateY(0);
-  pointer-events: auto;
-  animation: sv-sheet-slide-up var(--sv-comment-animation-duration, 400ms) 
-             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
-}
-
-.sv-comment-sheet--open.sv-comment-sheet--closing {
-  pointer-events: none;
-  animation: sv-sheet-slide-down var(--sv-comment-animation-duration, 400ms) 
-             var(--sv-comment-animation-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards !important;
-}
-
-/* CRITICAL: Disable VirtualSlider/VideoFeed swipe when CommentSheet is open */
-body.sv-comment-sheet-open .sv-slider,
-body.sv-comment-sheet-open .sv-video-feed {
-  pointer-events: none !important;
-  touch-action: none !important;
-}
-
-body.sv-comment-sheet-open .sv-comment-sheet,
-body.sv-comment-sheet-open .sv-comment-sheet-backdrop {
-  touch-action: auto !important;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   HEADER
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-sheet__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid var(--sv-comment-border);
-  flex-shrink: 0;
-  position: relative;
-  cursor: grab;
-  touch-action: none;
-}
-
-.sv-comment-sheet__header:active {
-  cursor: grabbing;
-}
-
-.sv-comment-sheet__header-handle {
-  position: absolute;
-  top: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 36px;
-  height: 4px;
-  background: var(--sv-comment-text-secondary);
-  border-radius: 2px;
-  opacity: 0.3;
-}
-
-.sv-comment-sheet__header-left {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.sv-comment-sheet__title {
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--sv-comment-text);
-  opacity: 0.9;
-  margin: 0;
-}
-
-.sv-comment-sheet__sort-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--sv-comment-text);
-}
-
-.sv-comment-sheet__sort-btn svg {
-  width: 20px;
-  height: 20px;
-}
-
-.sv-comment-sheet__close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 100px;
-  background: linear-gradient(180deg, var(--sv-comment-primary-light) 0%, var(--sv-comment-primary-dark) 100%);
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-
-.sv-comment-sheet__close-btn:hover {
-  opacity: 0.9;
-}
-
-.sv-comment-sheet__close-btn svg {
-  width: 20px;
-  height: 20px;
-  color: #ffffff;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   COMMENT LIST
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-sheet__list {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 8px 16px 28px 16px;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: contain;
-  touch-action: pan-y;
-}
-
-.sv-comment-sheet__list::-webkit-scrollbar {
-  width: 0px;
-}
-
-.sv-comment-sheet__list::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.0);
-  border-radius: 0px;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   COMMENT ITEM
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-item {
-  display: flex;
-  gap: 6px;
-  padding: 16px 0;
-  position: relative;
-}
-
-.sv-comment-item--pending {
-  opacity: 0.6;
-}
-
-.sv-comment-item--pinned {
-  background: var(--sv-comment-bg);
-}
-
-.sv-comment-item__avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 120px;
-  flex-shrink: 0;
-  object-fit: cover;
-  background: var(--sv-comment-avatar-bg);
-}
-
-.sv-comment-item__content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.sv-comment-item__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-}
-
-.sv-comment-item__header-left {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-}
-
-.sv-comment-item__pin-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--sv-comment-primary);
-}
-
-.sv-comment-item__author {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--sv-comment-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sv-comment-item__verified {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  color: var(--sv-comment-verified-color);
-}
-
-.sv-comment-item__badge {
-  font-size: 10px;
-  padding: 2px 6px;
-  background: var(--sv-comment-primary);
-  color: #ffffff;
-  border-radius: 4px;
-  flex-shrink: 0;
-}
-
-.sv-comment-item__menu-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--sv-comment-text-secondary);
-}
-
-.sv-comment-item__menu-btn svg {
-  width: 20px;
-  height: 20px;
-}
-
-.sv-comment-item__text {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--sv-comment-text);
-  word-break: break-word;
-  margin: 0;
-  padding-right: 16px;
-}
-
-/* Text collapse */
-.sv-comment-item__text--collapsed {
-  display: -webkit-box;
-  -webkit-line-clamp: var(--sv-comment-max-lines, 3);
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.sv-comment-item__expand-btn {
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 12px;
-  color: var(--sv-comment-text-secondary);
-  cursor: pointer;
-  margin-top: 4px;
-}
-
-.sv-comment-item__expand-btn:hover {
-  color: var(--sv-comment-text);
-}
-
-/* Actions row */
-.sv-comment-item__actions {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.sv-comment-item__time {
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--sv-comment-text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sv-comment-item__action-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--sv-comment-text-secondary);
-  cursor: pointer;
-  transition: color 0.15s ease;
-}
-
-.sv-comment-item__action-btn:hover {
-  color: var(--sv-comment-text);
-}
-
-.sv-comment-item__action-btn--active {
-  color: var(--sv-comment-like-color);
-}
-
-.sv-comment-item__action-btn--active:hover {
-  color: var(--sv-comment-like-color);
-}
-
-.sv-comment-item__action-icon {
-  width: 20px;
-  height: 20px;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   REPLIES
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-replies {
-  margin-top: 12px;
-  position: relative;
-}
-
-/* Vertical connecting line */
-.sv-comment-item--has-replies::before {
-  content: '';
-  position: absolute;
-  left: 20px;
-  top: 56px;
-  bottom: 0;
-  width: 1px;
-  background: var(--sv-comment-reply-line);
-}
-
-.sv-comment-replies__toggle {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  background: none;
-  border: none;
-  padding: 4px 0;
-  cursor: pointer;
-}
-
-.sv-comment-replies__toggle-line {
-  width: 24px;
-  height: 1px;
-  background: #a3a3a3;
-  margin-right: 0;
-}
-
-.sv-comment-replies__toggle-text {
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--sv-comment-text-secondary);
-  white-space: nowrap;
-}
-
-.sv-comment-replies__toggle-icon {
-  width: 20px;
-  height: 20px;
-  color: var(--sv-comment-text-secondary);
-}
-
-.sv-comment-replies__list {
-  margin-top: 12px;
-}
-
-.sv-comment-reply {
-  display: flex;
-  gap: 6px;
-  padding: 0 0 12px 0;
-  position: relative;
-}
-
-.sv-comment-reply__avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 100px;
-  flex-shrink: 0;
-  object-fit: cover;
-  background: var(--sv-comment-avatar-bg);
-}
-
-.sv-comment-reply__mention {
-  color: var(--sv-comment-mention-color);
-  font-weight: 500;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   INPUT AREA
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-sheet__input-area {
-  padding: 0 16px 36px 16px;
-  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;
-  justify-content: space-between;
-  padding: 4px 0;
-  margin-bottom: 8px;
-  font-size: 12px;
-  color: var(--sv-comment-text-secondary);
-}
-
-.sv-comment-sheet__reply-to-author-name {
-  font-size: 12px;
-  color: var(--sv-comment-text);
-  font-weight: 500;
-}
-
-.sv-comment-sheet__reply-to-clear {
-  background: none;
-  border: none;
-  padding: 4px;
-  color: var(--sv-comment-text-secondary);
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.sv-comment-sheet__input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 44px;
-  padding: 16px;
-  background: var(--sv-comment-bg);
-  border: 1px solid var(--sv-comment-input-border);
-  border-radius: 12px;
-  backdrop-filter: blur(50px);
-}
-
-.sv-comment-sheet__input-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.sv-comment-sheet__media-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.sv-comment-sheet__media-btn svg {
-  width: 20px;
-  height: 20px;
-}
-
-.sv-comment-sheet__input {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 12px;
-  font-style: italic;
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--sv-comment-text);
-  padding: 0;
-  min-width: 0;
-}
-
-.sv-comment-sheet__input::placeholder {
-  color: var(--sv-comment-text-secondary);
-}
-
-.sv-comment-sheet__input:not(:placeholder-shown) {
-  font-style: normal;
-}
-
-.sv-comment-sheet__emoji-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.sv-comment-sheet__emoji-btn svg {
-  width: 20px;
-  height: 20px;
-  color: var(--sv-comment-primary);
-}
-
-/* Hidden emoji bar (can be toggled) */
-.sv-comment-sheet__emoji-bar {
-  display: none;
-  gap: 8px;
-  padding: 8px 0;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.sv-comment-sheet__emoji-bar--visible {
-  display: flex;
-}
-
-.sv-comment-sheet__emoji-bar::-webkit-scrollbar {
-  display: none;
-}
-
-.sv-comment-sheet__emoji-bar-btn {
-  background: none;
-  border: none;
-  padding: 4px;
-  font-size: 20px;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.15s ease;
-}
-
-.sv-comment-sheet__emoji-bar-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   STATES
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-sheet__loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-  color: var(--sv-comment-text-secondary);
-}
-
-.sv-comment-sheet__loading-spinner {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
-  border-top-color: var(--sv-comment-primary);
-  border-radius: 50%;
-  animation: sv-comment-spin 0.8s linear infinite;
-}
-
-@keyframes sv-comment-spin {
-  to { transform: rotate(360deg); }
-}
-
-.sv-comment-sheet__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-  text-align: center;
-}
-
-.sv-comment-sheet__empty-icon {
-  font-size: 48px;
-  margin-bottom: 12px;
-}
-
-.sv-comment-sheet__empty-text {
-  color: var(--sv-comment-text-secondary);
-  font-size: 14px;
-}
-
-.sv-comment-sheet__error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 32px;
-  text-align: center;
-  color: var(--sv-comment-like-color);
-}
-
-.sv-comment-sheet__error-btn {
-  margin-top: 12px;
-  padding: 8px 16px;
-  background: rgba(0, 0, 0, 0.05);
-  border: none;
-  border-radius: 8px;
-  color: var(--sv-comment-text);
-  cursor: pointer;
-}
-
-/* Load more */
-.sv-comment-sheet__load-more {
-  display: flex;
-  justify-content: center;
-  padding: 12px;
-}
-
-.sv-comment-sheet__load-more-btn {
-  background: none;
-  border: none;
-  padding: 8px 16px;
-  color: var(--sv-comment-text-secondary);
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.sv-comment-sheet__load-more-btn:hover {
-  color: var(--sv-comment-text);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   COMMENT MENU (Dropdown)
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-menu {
-  position: relative;
-}
-
-.sv-comment-menu__trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  color: var(--sv-comment-text-secondary);
-  border-radius: 4px;
-  transition: background 0.15s ease;
-}
-
-.sv-comment-menu__trigger:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.sv-comment-menu__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.sv-comment-menu__dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-  min-width: 140px;
-  background: var(--sv-comment-bg);
-  border: 1px solid var(--sv-comment-border);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 10;
-  overflow: hidden;
-  animation: sv-menu-fade-in 0.15s ease;
-}
-
-@keyframes sv-menu-fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.sv-comment-menu__item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--sv-comment-text);
-  text-align: left;
-  transition: background 0.15s ease;
-}
-
-.sv-comment-menu__item:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.sv-comment-menu__item--danger {
-  color: var(--sv-comment-like-color);
-}
-
-.sv-comment-menu__item--danger:hover {
-  background: rgba(255, 67, 78, 0.08);
-}
-
-.sv-comment-menu__item-icon {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   DELETE CONFIRMATION DIALOG
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-comment-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: var(--sv-comment-modal-z-index, 1100);
-  animation: sv-dialog-overlay-fade-in 0.2s ease;
-}
-
-@keyframes sv-dialog-overlay-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.sv-comment-dialog {
-  background: var(--sv-comment-bg);
-  border-radius: 16px;
-  padding: 24px;
-  max-width: 300px;
-  width: calc(100% - 48px);
-  text-align: center;
-  animation: sv-dialog-scale-in 0.2s ease;
-}
-
-@keyframes sv-dialog-scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-.sv-comment-dialog__title {
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 17px;
-  font-weight: 600;
-  color: var(--sv-comment-text);
-  margin: 0 0 8px 0;
-}
-
-.sv-comment-dialog__message {
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 14px;
-  color: var(--sv-comment-text-secondary);
-  margin: 0 0 20px 0;
-  line-height: 1.4;
-}
-
-.sv-comment-dialog__actions {
-  display: flex;
-  gap: 12px;
-}
-
-.sv-comment-dialog__btn {
-  flex: 1;
-  padding: 12px 16px;
-  border: none;
-  border-radius: 10px;
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 15px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: opacity 0.15s ease;
-}
-
-.sv-comment-dialog__btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.sv-comment-dialog__btn--cancel {
-  background: rgba(0, 0, 0, 0.06);
-  color: var(--sv-comment-text);
-}
-
-.sv-comment-dialog__btn--cancel:hover:not(:disabled) {
-  background: rgba(0, 0, 0, 0.1);
-}
-
-.sv-comment-dialog__btn--danger {
-  background: var(--sv-comment-like-color);
-  color: #ffffff;
-}
-
-.sv-comment-dialog__btn--danger:hover:not(:disabled) {
-  opacity: 0.9;
-}
-
-/* Legacy classes (keep for backwards compatibility) */
-.sv-comment-delete-confirm {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: var(--sv-comment-modal-z-index, 1100);
-}
-
-.sv-comment-delete-confirm__dialog {
-  background: var(--sv-comment-bg);
-  border-radius: 12px;
-  padding: 16px;
-  max-width: 280px;
-  text-align: center;
-}
-
-.sv-comment-delete-confirm__title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--sv-comment-text);
-  margin-bottom: 8px;
-}
-
-.sv-comment-delete-confirm__text {
-  font-size: 14px;
-  color: var(--sv-comment-text-secondary);
-  margin-bottom: 16px;
-}
-
-.sv-comment-delete-confirm__actions {
-  display: flex;
-  gap: 8px;
-}
-
-.sv-comment-delete-confirm__btn {
-  flex: 1;
-  padding: 8px 12px;
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.sv-comment-delete-confirm__btn--cancel {
-  background: rgba(0, 0, 0, 0.05);
-  color: var(--sv-comment-text);
-}
-
-.sv-comment-delete-confirm__btn--delete {
-  background: var(--sv-comment-like-color);
-  color: #ffffff;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   SKELETON LOADING
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-@keyframes sv-skeleton-shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-
-.sv-comment-skeleton-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.sv-comment-skeleton {
-  animation: sv-skeleton-fade-in 0.3s ease;
-}
-
-@keyframes sv-skeleton-fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.sv-comment-skeleton__avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.04) 25%,
-    rgba(0, 0, 0, 0.08) 50%,
-    rgba(0, 0, 0, 0.04) 75%
-  );
-  background-size: 200% 100%;
-  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
-}
-
-.sv-comment-skeleton__content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.sv-comment-skeleton__header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.sv-comment-skeleton__author {
-  width: 80px;
-  height: 14px;
-  border-radius: 4px;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.04) 25%,
-    rgba(0, 0, 0, 0.08) 50%,
-    rgba(0, 0, 0, 0.04) 75%
-  );
-  background-size: 200% 100%;
-  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
-  animation-delay: 0.1s;
-}
-
-.sv-comment-skeleton__time {
-  width: 40px;
-  height: 12px;
-  border-radius: 4px;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.04) 25%,
-    rgba(0, 0, 0, 0.08) 50%,
-    rgba(0, 0, 0, 0.04) 75%
-  );
-  background-size: 200% 100%;
-  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
-  animation-delay: 0.15s;
-}
-
-.sv-comment-skeleton__text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.sv-comment-skeleton__line {
-  height: 14px;
-  border-radius: 4px;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.04) 25%,
-    rgba(0, 0, 0, 0.08) 50%,
-    rgba(0, 0, 0, 0.04) 75%
-  );
-  background-size: 200% 100%;
-  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
-}
-
-.sv-comment-skeleton__line--full {
-  width: 100%;
-  animation-delay: 0.2s;
-}
-
-.sv-comment-skeleton__line--medium {
-  width: 65%;
-  animation-delay: 0.25s;
-}
-
-.sv-comment-skeleton__actions {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-top: 4px;
-}
-
-.sv-comment-skeleton__action {
-  width: 50px;
-  height: 12px;
-  border-radius: 4px;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.04) 25%,
-    rgba(0, 0, 0, 0.08) 50%,
-    rgba(0, 0, 0, 0.04) 75%
-  );
-  background-size: 200% 100%;
-  animation: sv-skeleton-shimmer 1.5s ease-in-out infinite;
-  animation-delay: 0.3s;
-}
-`;
+var COMMENT_SHEET_CSS = `:root{--sv-comment-primary:#164d8e;--sv-comment-primary-light:#1354ae;--sv-comment-primary-dark:#003477;--sv-comment-bg:#fff;--sv-comment-text:#121212;--sv-comment-text-secondary:#6b7271;--sv-comment-border:rgba(18,18,18,.08);--sv-comment-like-color:#ff434e;--sv-comment-verified-color:#1ea031;--sv-comment-mention-color:#164d8e;--sv-comment-avatar-bg:#e5e6e6;--sv-comment-input-border:#a3a3a3;--sv-comment-reply-line:#e5e6e6}.sv-comment-sheet{--sv-sheet-bg:var(--sv-comment-bg,#fff);--sv-sheet-border-radius:var(--sv-comment-sheet-radius,24px);--sv-sheet-animation-duration:var(--sv-comment-animation-duration,400ms);--sv-sheet-animation-easing:var(--sv-comment-animation-easing,cubic-bezier(.32,.72,0,1));margin:16px;border-radius:var(--sv-comment-sheet-radius,24px)}.sv-comment-sheet-backdrop{--sv-sheet-backdrop-bg:var(--sv-comment-backdrop-bg,rgba(0,0,0,.5))}.sv-comment-sheet__inner{display:flex;flex-direction:column;height:100%}.sv-comment-sheet .sv-bottom-sheet__content{overflow:visible;display:flex;flex-direction:column;flex:1}.sv-comment-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--sv-comment-border);flex-shrink:0;position:relative;cursor:grab;touch-action:none}.sv-comment-sheet__header:active{cursor:grabbing}.sv-comment-sheet__header-handle{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;background:var(--sv-comment-text-secondary);border-radius:2px;opacity:.3}.sv-comment-sheet__header-left{display:flex;align-items:center;gap:2px}.sv-comment-sheet__title{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:18px;font-weight:600;line-height:1.4;color:var(--sv-comment-text);opacity:.9;margin:0}.sv-comment-sheet__sort-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;color:var(--sv-comment-text)}.sv-comment-sheet__sort-btn svg{width:20px;height:20px}.sv-comment-sheet__close-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:100px;background:linear-gradient(180deg,var(--sv-comment-primary-light)0%,var(--sv-comment-primary-dark)100%);cursor:pointer;transition:opacity .15s ease}.sv-comment-sheet__close-btn:hover{opacity:.9}.sv-comment-sheet__close-btn svg{width:20px;height:20px;color:#fff}.sv-comment-sheet__list{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 16px 28px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}.sv-comment-sheet__list::-webkit-scrollbar{width:0}.sv-comment-sheet__list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.0);border-radius:0}.sv-comment-item{display:flex;gap:6px;padding:16px 0;position:relative}.sv-comment-item--pending{opacity:.6}.sv-comment-item--pinned{background:var(--sv-comment-bg)}.sv-comment-item__avatar{width:40px;height:40px;border-radius:120px;flex-shrink:0;object-fit:cover;background:var(--sv-comment-avatar-bg)}.sv-comment-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.sv-comment-item__header{display:flex;align-items:center;justify-content:space-between;gap:4px}.sv-comment-item__header-left{display:flex;align-items:center;gap:4px;min-width:0}.sv-comment-item__pin-icon{width:16px;height:16px;flex-shrink:0;color:var(--sv-comment-primary)}.sv-comment-item__author{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:600;line-height:1.4;color:var(--sv-comment-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-comment-item__verified{width:12px;height:12px;flex-shrink:0;color:var(--sv-comment-verified-color)}.sv-comment-item__badge{font-size:10px;padding:2px 6px;background:var(--sv-comment-primary);color:#fff;border-radius:4px;flex-shrink:0}.sv-comment-item__menu-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;color:var(--sv-comment-text-secondary)}.sv-comment-item__menu-btn svg{width:20px;height:20px}.sv-comment-item__text{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:normal;line-height:1.4;color:var(--sv-comment-text);word-break:break-word;margin:0;padding-right:16px}.sv-comment-item__text--collapsed{display:-webkit-box;-webkit-line-clamp:var(--sv-comment-max-lines,3);-webkit-box-orient:vertical;overflow:hidden}.sv-comment-item__expand-btn{background:0 0;border:0;padding:0;font-size:12px;color:var(--sv-comment-text-secondary);cursor:pointer;margin-top:4px}.sv-comment-item__expand-btn:hover{color:var(--sv-comment-text)}.sv-comment-item__actions{display:flex;align-items:center;gap:16px}.sv-comment-item__time{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:500;line-height:1.2;color:var(--sv-comment-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-comment-item__action-btn{display:flex;align-items:center;gap:4px;background:0 0;border:0;padding:0;font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-weight:500;line-height:1.2;color:var(--sv-comment-text-secondary);cursor:pointer;transition:color .15s ease}.sv-comment-item__action-btn:hover{color:var(--sv-comment-text)}.sv-comment-item__action-btn--active{color:var(--sv-comment-like-color)}.sv-comment-item__action-btn--active:hover{color:var(--sv-comment-like-color)}.sv-comment-item__action-icon{width:20px;height:20px}.sv-comment-replies{margin-top:12px;position:relative}.sv-comment-item--has-replies::before{content:'';position:absolute;left:20px;top:56px;bottom:0;width:1px;background:var(--sv-comment-reply-line)}.sv-comment-replies__toggle{display:flex;align-items:center;gap:0;background:0 0;border:0;padding:4px 0;cursor:pointer}.sv-comment-replies__toggle-line{width:24px;height:1px;background:#a3a3a3;margin-right:0}.sv-comment-replies__toggle-text{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px;font-weight:600;line-height:1.4;color:var(--sv-comment-text-secondary);white-space:nowrap}.sv-comment-replies__toggle-icon{width:20px;height:20px;color:var(--sv-comment-text-secondary)}.sv-comment-replies__list{margin-top:12px}.sv-comment-reply{display:flex;gap:6px;padding:0 0 12px 0;position:relative}.sv-comment-reply__avatar{width:24px;height:24px;border-radius:100px;flex-shrink:0;object-fit:cover;background:var(--sv-comment-avatar-bg)}.sv-comment-reply__mention{color:var(--sv-comment-mention-color);font-weight:500}.sv-comment-sheet__input-area{padding:0 16px 36px 16px;flex-shrink:0}.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 .15s ease}.sv-comment-input-guest:hover{background:rgba(22,77,142,.05)}.sv-comment-input-guest:active{background:rgba(22,77,142,.1)}.sv-comment-sheet__reply-to{display:flex;align-items:center;justify-content:space-between;padding:4px 0;margin-bottom:8px;font-size:12px;color:var(--sv-comment-text-secondary)}.sv-comment-sheet__reply-to-author-name{font-size:12px;color:var(--sv-comment-text);font-weight:500}.sv-comment-sheet__reply-to-clear{background:0 0;border:0;padding:4px;color:var(--sv-comment-text-secondary);cursor:pointer;font-size:12px}.sv-comment-sheet__input-wrapper{display:flex;align-items:center;gap:8px;height:44px;padding:16px;background:var(--sv-comment-bg);border:1px solid var(--sv-comment-input-border);border-radius:12px;backdrop-filter:blur(50px)}.sv-comment-sheet__input-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.sv-comment-sheet__media-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;flex-shrink:0}.sv-comment-sheet__media-btn svg{width:20px;height:20px}.sv-comment-sheet__input{flex:1;background:0 0;border:0;outline:none;resize:none;font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;font-style:italic;font-weight:normal;line-height:1.4;color:var(--sv-comment-text);padding:0;min-width:0}.sv-comment-sheet__input::placeholder{color:var(--sv-comment-text-secondary)}.sv-comment-sheet__input:not(:placeholder-shown){font-style:normal}.sv-comment-sheet__emoji-btn{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:0;cursor:pointer;flex-shrink:0}.sv-comment-sheet__emoji-btn svg{width:20px;height:20px;color:var(--sv-comment-primary)}.sv-comment-sheet__emoji-bar{display:none;gap:8px;padding:8px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}.sv-comment-sheet__emoji-bar--visible{display:flex}.sv-comment-sheet__emoji-bar::-webkit-scrollbar{display:none}.sv-comment-sheet__emoji-bar-btn{background:0 0;border:0;padding:4px;font-size:20px;cursor:pointer;border-radius:4px;transition:background .15s ease}.sv-comment-sheet__emoji-bar-btn:hover{background:rgba(0,0,0,.05)}.sv-comment-sheet__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;color:var(--sv-comment-text-secondary)}.sv-comment-sheet__loading-spinner{width:24px;height:24px;border:2px solid rgba(0,0,0,.1);border-top-color:var(--sv-comment-primary);border-radius:50%;animation:sv-comment-spin .8s linear infinite}@keyframes sv-comment-spin{to{transform:rotate(360deg)}}.sv-comment-sheet__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}.sv-comment-sheet__empty-icon{font-size:48px;margin-bottom:12px}.sv-comment-sheet__empty-text{color:var(--sv-comment-text-secondary);font-size:14px}.sv-comment-sheet__error{display:flex;flex-direction:column;align-items:center;padding:32px;text-align:center;color:var(--sv-comment-like-color)}.sv-comment-sheet__error-btn{margin-top:12px;padding:8px 16px;background:rgba(0,0,0,.05);border:0;border-radius:8px;color:var(--sv-comment-text);cursor:pointer}.sv-comment-sheet__load-more{display:flex;justify-content:center;padding:12px}.sv-comment-sheet__load-more-btn{background:0 0;border:0;padding:8px 16px;color:var(--sv-comment-text-secondary);cursor:pointer;font-size:13px}.sv-comment-sheet__load-more-btn:hover{color:var(--sv-comment-text)}.sv-comment-menu{position:relative}.sv-comment-menu__trigger{display:flex;align-items:center;justify-content:center;background:0 0;border:0;padding:4px;cursor:pointer;color:var(--sv-comment-text-secondary);border-radius:4px;transition:background .15s ease}.sv-comment-menu__trigger:hover{background:rgba(0,0,0,.05)}.sv-comment-menu__icon{width:20px;height:20px}.sv-comment-menu__dropdown{position:absolute;top:100%;right:0;margin-top:4px;min-width:140px;background:var(--sv-comment-bg);border:1px solid var(--sv-comment-border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:10;overflow:hidden;animation:sv-menu-fade-in .15s ease}@keyframes sv-menu-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sv-comment-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:0 0;border:0;cursor:pointer;font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;color:var(--sv-comment-text);text-align:left;transition:background .15s ease}.sv-comment-menu__item:hover{background:rgba(0,0,0,.05)}.sv-comment-menu__item--danger{color:var(--sv-comment-like-color)}.sv-comment-menu__item--danger:hover{background:rgba(255,67,78,.08)}.sv-comment-menu__item-icon{width:18px;height:18px;flex-shrink:0}.sv-comment-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:var(--sv-comment-modal-z-index,1100);animation:sv-dialog-overlay-fade-in .2s ease}@keyframes sv-dialog-overlay-fade-in{from{opacity:0}to{opacity:1}}.sv-comment-dialog{background:var(--sv-comment-bg);border-radius:16px;padding:24px;max-width:300px;width:calc(100% - 48px);text-align:center;animation:sv-dialog-scale-in .2s ease}@keyframes sv-dialog-scale-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sv-comment-dialog__title{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px;font-weight:600;color:var(--sv-comment-text);margin:0 0 8px 0}.sv-comment-dialog__message{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;color:var(--sv-comment-text-secondary);margin:0 0 20px 0;line-height:1.4}.sv-comment-dialog__actions{display:flex;gap:12px}.sv-comment-dialog__btn{flex:1;padding:12px 16px;border:0;border-radius:10px;font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s ease}.sv-comment-dialog__btn:disabled{opacity:.6;cursor:not-allowed}.sv-comment-dialog__btn--cancel{background:rgba(0,0,0,.06);color:var(--sv-comment-text)}.sv-comment-dialog__btn--cancel:hover:not(:disabled){background:rgba(0,0,0,.1)}.sv-comment-dialog__btn--danger{background:var(--sv-comment-like-color);color:#fff}.sv-comment-dialog__btn--danger:hover:not(:disabled){opacity:.9}.sv-comment-delete-confirm{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:var(--sv-comment-modal-z-index,1100)}.sv-comment-delete-confirm__dialog{background:var(--sv-comment-bg);border-radius:12px;padding:16px;max-width:280px;text-align:center}.sv-comment-delete-confirm__title{font-size:16px;font-weight:600;color:var(--sv-comment-text);margin-bottom:8px}.sv-comment-delete-confirm__text{font-size:14px;color:var(--sv-comment-text-secondary);margin-bottom:16px}.sv-comment-delete-confirm__actions{display:flex;gap:8px}.sv-comment-delete-confirm__btn{flex:1;padding:8px 12px;border:0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.sv-comment-delete-confirm__btn--cancel{background:rgba(0,0,0,.05);color:var(--sv-comment-text)}.sv-comment-delete-confirm__btn--delete{background:var(--sv-comment-like-color);color:#fff}@keyframes sv-skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.sv-comment-skeleton-list{display:flex;flex-direction:column}.sv-comment-skeleton{animation:sv-skeleton-fade-in .3s ease}@keyframes sv-skeleton-fade-in{from{opacity:0}to{opacity:1}}.sv-comment-skeleton__avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite}.sv-comment-skeleton__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.sv-comment-skeleton__header{display:flex;align-items:center;gap:12px}.sv-comment-skeleton__author{width:80px;height:14px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite;animation-delay:.1s}.sv-comment-skeleton__time{width:40px;height:12px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite;animation-delay:.15s}.sv-comment-skeleton__text{display:flex;flex-direction:column;gap:4px}.sv-comment-skeleton__line{height:14px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite}.sv-comment-skeleton__line--full{width:100%;animation-delay:.2s}.sv-comment-skeleton__line--medium{width:65%;animation-delay:.25s}.sv-comment-skeleton__actions{display:flex;align-items:center;gap:16px;margin-top:4px}.sv-comment-skeleton__action{width:50px;height:12px;border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.04)25%,rgba(0,0,0,.08)50%,rgba(0,0,0,.04)75%);background-size:200% 100%;animation:sv-skeleton-shimmer 1.5s ease-in-out infinite;animation-delay:.3s}`;
 function AngleDownIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
     "path",
@@ -2208,7 +1115,8 @@ var SheetHeader = memo(function SheetHeader2({
   sortAriaLabel = "Sort comments",
   closeAriaLabel = "Close comments"
 }) {
-  const { state, onClose, initialCount } = useCommentSheetContext();
+  const { state, initialCount } = useCommentSheetContext();
+  const { onClose } = useBottomSheetContext();
   const totalCount = state.totalCount > 0 ? state.totalCount : initialCount ?? 0;
   return /* @__PURE__ */ jsxs("div", { className: clsx("sv-comment-sheet__header", className), children: [
     showHandle && /* @__PURE__ */ jsx("div", { className: "sv-comment-sheet__header-handle" }),
@@ -2258,7 +1166,6 @@ var DEFAULT_CONFIG = {
   pageSize: 20,
   replyPageSize: 10,
   cacheTTL: 5 * 60 * 1e3,
-  // 5 minutes
   repliesAutoExpandThreshold: 1,
   repliesCollapseLimit: 3,
   textMaxLines: 3,
@@ -2266,7 +1173,6 @@ var DEFAULT_CONFIG = {
   enableOptimisticUI: true,
   requireDeleteConfirm: true
 };
-var ANIMATION_DURATION = 400;
 var DEFAULT_I18N = {
   expandText: "See more",
   collapseText: "See less",
@@ -2290,206 +1196,20 @@ var CommentSheetHeadless = memo(function CommentSheetHeadless2({
   closeOnEscape = true,
   enableDragToDismiss = true,
   dragCloseThreshold = 150,
-  i18n: i18nOverride
+  i18n: i18nOverride,
+  onGestureLock
 }) {
   useEffect(() => {
     injectCSS();
   }, []);
-  const sheetRef = useRef(null);
-  const dragStartY = useRef(0);
-  const currentTranslateY = useRef(0);
-  const isDragging = useRef(false);
-  const [isClosing, setIsClosing] = useState(false);
-  const isDragClosingRef = useRef(false);
-  const closeTimeoutRef = useRef(null);
-  const openedAtRef = useRef(0);
+  const [replyTarget, setReplyTarget] = useState(null);
   const config = useMemo(() => ({ ...DEFAULT_CONFIG, ...configOverride }), [configOverride]);
   const i18n = useMemo(() => ({ ...DEFAULT_I18N, ...i18nOverride }), [i18nOverride]);
-  const handleClose = useCallback(() => {
-    if (isClosing) return;
-    const timeSinceOpen = Date.now() - openedAtRef.current;
-    if (timeSinceOpen < 100) return;
-    setIsClosing(true);
-    closeTimeoutRef.current = setTimeout(() => {
-      setIsClosing(false);
-      onClose();
-    }, ANIMATION_DURATION);
-  }, [isClosing, onClose]);
-  useEffect(() => {
-    return () => {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (isOpen) {
-      openedAtRef.current = Date.now();
-      setIsClosing(false);
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-        closeTimeoutRef.current = null;
-      }
-    }
-  }, [isOpen]);
-  const [replyTarget, setReplyTarget] = useState(null);
   useEffect(() => {
     if (!isOpen) {
       setReplyTarget(null);
     }
   }, [isOpen]);
-  useEffect(() => {
-    if (!closeOnEscape || !isOpen) return;
-    const handleEscapeKey = (e) => {
-      if (e.key === "Escape") {
-        handleClose();
-      }
-    };
-    document.addEventListener("keydown", handleEscapeKey);
-    return () => document.removeEventListener("keydown", handleEscapeKey);
-  }, [closeOnEscape, isOpen, handleClose]);
-  const handleBackdropClick = useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (closeOnBackdropClick && e.target === e.currentTarget) {
-        handleClose();
-      }
-    },
-    [closeOnBackdropClick, handleClose]
-  );
-  useEffect(() => {
-    if (!isOpen) return;
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    document.body.classList.add("sv-comment-sheet-open");
-    const blockTouchMove = (e) => {
-      const target = e.target;
-      const isInsideSheet = target.closest(".sv-comment-sheet");
-      if (!isInsideSheet) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-    document.addEventListener("touchmove", blockTouchMove, { passive: false, capture: true });
-    return () => {
-      document.body.style.overflow = originalOverflow;
-      document.body.classList.remove("sv-comment-sheet-open");
-      document.removeEventListener("touchmove", blockTouchMove, { capture: true });
-    };
-  }, [isOpen]);
-  const dragSourceRef = useRef(null);
-  const isListAtTop = useCallback(() => {
-    const list = sheetRef.current?.querySelector(".sv-comment-sheet__list");
-    if (!list) return true;
-    return list.scrollTop <= 0;
-  }, []);
-  useEffect(() => {
-    if (!isOpen || !sheetRef.current) return;
-    sheetRef.current.style.transform = "";
-    sheetRef.current.style.transition = "";
-    sheetRef.current.style.animation = "";
-    currentTranslateY.current = 0;
-    isDragging.current = false;
-    dragSourceRef.current = null;
-    isDragClosingRef.current = false;
-  }, [isOpen]);
-  const getDragSource = useCallback(
-    (target) => {
-      const isInput = target.closest(".sv-comment-sheet__input-container");
-      if (isInput) return null;
-      const isHeader = target.closest(".sv-comment-sheet__header");
-      if (isHeader) return "header";
-      const isList = target.closest(".sv-comment-sheet__list");
-      if (isList && isListAtTop()) return "overscroll";
-      return null;
-    },
-    [isListAtTop]
-  );
-  const animateClose = useCallback(
-    (sheet) => {
-      isDragClosingRef.current = true;
-      setIsClosing(true);
-      sheet.style.transition = `transform ${ANIMATION_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`;
-      sheet.style.transform = "translateY(100%)";
-      closeTimeoutRef.current = setTimeout(() => {
-        sheet.style.transition = "";
-        sheet.style.transform = "";
-        sheet.style.animation = "";
-        isDragClosingRef.current = false;
-        setIsClosing(false);
-        onClose();
-      }, ANIMATION_DURATION);
-    },
-    [onClose]
-  );
-  const animateSnapBack = useCallback((sheet) => {
-    sheet.style.transition = `transform ${ANIMATION_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`;
-    sheet.style.transform = "translateY(0)";
-    setTimeout(() => {
-      sheet.style.transition = "";
-      sheet.style.transform = "";
-    }, ANIMATION_DURATION);
-  }, []);
-  useEffect(() => {
-    const sheet = sheetRef.current;
-    if (!sheet || !isOpen || !enableDragToDismiss) return;
-    const onTouchStart = (e) => {
-      e.stopPropagation();
-      const source = getDragSource(e.target);
-      if (!source) return;
-      dragSourceRef.current = source;
-      isDragging.current = true;
-      dragStartY.current = e.touches[0]?.clientY ?? 0;
-      currentTranslateY.current = 0;
-      sheet.style.animation = "none";
-      sheet.style.transition = "none";
-      void sheet.offsetHeight;
-    };
-    const onTouchMove = (e) => {
-      e.stopPropagation();
-      const clientY = e.touches[0]?.clientY ?? 0;
-      const deltaY = clientY - dragStartY.current;
-      if (dragSourceRef.current === "overscroll" && (deltaY <= 0 || !isListAtTop())) {
-        isDragging.current = false;
-        return;
-      }
-      if (!isDragging.current) return;
-      currentTranslateY.current = Math.max(0, deltaY);
-      if (currentTranslateY.current > 0) {
-        e.preventDefault();
-      }
-      sheet.style.transform = `translateY(${currentTranslateY.current}px)`;
-    };
-    const onTouchEnd = (e) => {
-      e.stopPropagation();
-      dragSourceRef.current = null;
-      if (!isDragging.current) return;
-      isDragging.current = false;
-      const dragDistance = currentTranslateY.current;
-      currentTranslateY.current = 0;
-      if (dragDistance > dragCloseThreshold) {
-        animateClose(sheet);
-      } else if (dragDistance > 0) {
-        animateSnapBack(sheet);
-      }
-    };
-    sheet.addEventListener("touchstart", onTouchStart, { passive: false });
-    sheet.addEventListener("touchmove", onTouchMove, { passive: false });
-    sheet.addEventListener("touchend", onTouchEnd, { passive: false });
-    return () => {
-      sheet.removeEventListener("touchstart", onTouchStart);
-      sheet.removeEventListener("touchmove", onTouchMove);
-      sheet.removeEventListener("touchend", onTouchEnd);
-    };
-  }, [
-    isOpen,
-    enableDragToDismiss,
-    dragCloseThreshold,
-    isListAtTop,
-    getDragSource,
-    animateClose,
-    animateSnapBack
-  ]);
   const contextValue = useMemo(
     () => ({
       state,
@@ -2497,70 +1217,41 @@ var CommentSheetHeadless = memo(function CommentSheetHeadless2({
       videoId,
       config,
       isOpen,
-      onClose: handleClose,
-      // Use animated close handler
+      onClose,
       replyTarget,
       setReplyTarget,
       initialCount,
       i18n
     }),
-    [state, actions, videoId, config, isOpen, handleClose, replyTarget, initialCount, i18n]
+    [state, actions, videoId, config, isOpen, onClose, replyTarget, initialCount, i18n]
   );
   const defaultChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SheetHeader, {}),
     /* @__PURE__ */ jsx(CommentList, {}),
     /* @__PURE__ */ jsx(CommentInput, {})
   ] });
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-  return /* @__PURE__ */ jsxs(CommentSheetContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(
-          "sv-comment-sheet-backdrop",
-          isOpen && !isClosing && "sv-comment-sheet-backdrop--open",
-          backdropClassName
-        ),
-        onClick: handleBackdropClick,
-        onKeyDown: handleKeyDown,
-        onPointerDown: (e) => e.stopPropagation(),
-        onPointerUp: (e) => e.stopPropagation(),
-        onTouchStart: (e) => e.stopPropagation(),
-        onTouchMove: (e) => e.stopPropagation(),
-        onTouchEnd: (e) => e.stopPropagation(),
-        role: "presentation"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: sheetRef,
-        className: clsx(
-          "sv-comment-sheet",
-          isOpen && "sv-comment-sheet--open",
-          // Keep --open while closing for proper animation
-          isClosing && !isDragClosingRef.current && "sv-comment-sheet--closing",
-          // Skip CSS animation for drag close
-          className
-        ),
-        "aria-label": "Comments",
-        "aria-hidden": !isOpen,
-        onKeyDown: handleKeyDown,
-        tabIndex: isOpen ? 0 : -1,
-        onClick: (e) => e.stopPropagation(),
-        onPointerDown: (e) => e.stopPropagation(),
-        onPointerUp: (e) => e.stopPropagation(),
-        children: children ?? defaultChildren
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(CommentSheetContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    BottomSheetHeadless,
+    {
+      isOpen,
+      onClose,
+      height: "var(--sv-comment-sheet-height, 55vh)",
+      className: clsx("sv-comment-sheet", className),
+      backdropClassName: clsx("sv-comment-sheet-backdrop", backdropClassName),
+      contentClassName: "sv-comment-sheet__content",
+      closeOnBackdropClick,
+      closeOnEscape,
+      showDragHandle: false,
+      enableDragToDismiss,
+      dragCloseThreshold,
+      ariaLabel: "Comments",
+      dragHandleSelector: ".sv-comment-sheet__header",
+      scrollContainerSelector: ".sv-comment-sheet__list",
+      dragExcludeSelector: ".sv-comment-sheet__input-container",
+      onGestureLock,
+      children: children ?? defaultChildren
+    }
+  ) });
 });
 CommentSheetHeadless.displayName = "CommentSheetHeadless";
 var CommentSheet = Object.assign(CommentSheetHeadless, {