@xhub-short/ui 1.0.0-beta.25 → 1.0.0-beta.26

package/dist/{chunk-26KDWJRI.js → chunk-3OB3OVYR.js}

@@ -111,7 +111,7 @@ function AuthorDescription({
 }
 
 // src/components/AuthorInfo/AuthorInfo.css.ts
-var AUTHOR_INFO_CSS = `.sv-author-info{display:flex;align-items:center;gap:var(--sv-author-gap,12px);width:100%}.sv-author-info--vertical{flex-direction:column;align-items:flex-start}.sv-author-info--horizontal{flex-direction:row;align-items:center}.sv-author-info--compact{gap:var(--sv-author-gap-compact,8px)}.sv-author-info__avatar{position:relative;flex-shrink:0;width:var(--sv-author-avatar-size,48px);height:var(--sv-author-avatar-size,48px);border-radius:50%;overflow:hidden;background:var(--sv-author-avatar-bg,rgba(255,255,255,.1));cursor:pointer;transition:transform .15s ease}.sv-author-info__avatar:hover{transform:scale(1.05)}.sv-author-info__avatar:active{transform:scale(.98)}.sv-author-info__avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.sv-author-info__avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--sv-author-avatar-placeholder-bg,linear-gradient(135deg,#667eea 0%,#764ba2 100%));color:var(--sv-author-avatar-placeholder-color,#fff);font-size:calc(var(--sv-author-avatar-size,48px)* .4);font-weight:600;text-transform:uppercase}.sv-author-info__avatar-placeholder svg{width:60%;height:60%;opacity:.9}.sv-author-info__avatar--small{width:var(--sv-author-avatar-size-small,32px);height:var(--sv-author-avatar-size-small,32px)}.sv-author-info__avatar--large{width:var(--sv-author-avatar-size-large,64px);height:var(--sv-author-avatar-size-large,64px)}.sv-author-info__verified-badge{position:absolute;bottom:-2px;right:-2px;width:calc(var(--sv-author-avatar-size,48px)* .35);height:calc(var(--sv-author-avatar-size,48px)* .35);min-width:14px;min-height:14px;border-radius:50%;background:var(--sv-verified-badge-bg,#1DA1F2);display:flex;align-items:center;justify-content:center;border:2px solid var(--sv-verified-badge-border,#000)}.sv-author-info__verified-badge svg{width:60%;height:60%;color:var(--sv-verified-badge-color,#fff)}.sv-author-info__content{display:flex;flex-direction:column;gap:var(--sv-author-content-gap,2px);flex:1;min-width:0}.sv-author-info__name{display:flex;align-items:center;gap:var(--sv-author-name-gap,4px);font-size:var(--sv-author-name-size,16px);font-weight:var(--sv-author-name-weight,600);color:var(--sv-author-name-color,#fff);cursor:pointer;transition:opacity .15s ease}.sv-author-info__name:hover{opacity:.8}.sv-author-info__name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-author-info__name--with-at::before{content:'@';opacity:.8}.sv-author-info__name-verified{flex-shrink:0;width:var(--sv-author-name-verified-size,14px);height:var(--sv-author-name-verified-size,14px);color:var(--sv-verified-badge-bg,#1DA1F2)}.sv-author-info__description{font-size:var(--sv-author-desc-size,13px);color:var(--sv-author-desc-color,rgba(255,255,255,.7));line-height:var(--sv-author-desc-line-height,1.4);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:var(--sv-author-desc-lines,2);-webkit-box-orient:vertical}.sv-author-info__description--single-line{-webkit-line-clamp:1;white-space:nowrap;display:block}.sv-author-info__follow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sv-follow-btn-gap,6px);padding:var(--sv-follow-btn-padding,8px 16px);min-width:var(--sv-follow-btn-min-width,88px);border:0;border-radius:var(--sv-follow-btn-radius,4px);font-size:var(--sv-follow-btn-size,14px);font-weight:var(--sv-follow-btn-weight,600);cursor:pointer;transition:all .2s ease;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.sv-author-info__follow-btn--default{background:var(--sv-follow-btn-bg,#fe2c55);color:var(--sv-follow-btn-color,#fff)}.sv-author-info__follow-btn--default:hover:not(:disabled){background:var(--sv-follow-btn-bg-hover,#f46);transform:scale(1.02)}.sv-author-info__follow-btn--default:active:not(:disabled){transform:scale(.98)}.sv-author-info__follow-btn--following{background:var(--sv-follow-btn-following-bg,transparent);color:var(--sv-follow-btn-following-color,rgba(255,255,255,.9));border:1px solid var(--sv-follow-btn-following-border,rgba(255,255,255,.3))}.sv-author-info__follow-btn--following:hover:not(:disabled){background:var(--sv-follow-btn-following-bg-hover,rgba(255,255,255,.1));border-color:var(--sv-follow-btn-following-border-hover,rgba(255,255,255,.5))}.sv-author-info__follow-btn--pending{opacity:.6;pointer-events:none;cursor:wait}.sv-author-info__follow-btn:disabled{opacity:.5;cursor:not-allowed}.sv-author-info__follow-btn-icon{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);flex-shrink:0}.sv-author-info__follow-btn-spinner{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sv-author-info-spin .6s linear infinite}@keyframes sv-author-info-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sv-author-info__follow-btn--small{padding:var(--sv-follow-btn-padding-small,6px 12px);font-size:var(--sv-follow-btn-size-small,12px);min-width:var(--sv-follow-btn-min-width-small,72px)}.sv-author-info__follow-btn--large{padding:var(--sv-follow-btn-padding-large,10px 20px);font-size:var(--sv-follow-btn-size-large,16px);min-width:var(--sv-follow-btn-min-width-large,100px)}.sv-author-info__follow-btn--icon-only{min-width:unset;padding:var(--sv-follow-btn-icon-padding,8px);border-radius:50%}.sv-author-info--inline{justify-content:space-between}.sv-author-info--inline .sv-author-info__content{flex:1}.sv-author-info--stacked{flex-direction:column;align-items:center;text-align:center}.sv-author-info--stacked .sv-author-info__content{align-items:center}.sv-author-info--overlay{text-shadow:var(--sv-author-overlay-shadow,0 1px 2px rgba(0,0,0,.5))}.sv-author-info--overlay .sv-author-info__avatar{border:2px solid var(--sv-author-overlay-avatar-border,rgba(255,255,255,.5))}.sv-author-info--avatar-badge{position:relative;display:flex;flex-direction:column;align-items:center;width:auto;gap:0}.sv-author-info--avatar-badge .sv-author-info__avatar{width:var(--sv-avatar-badge-size,48px);height:var(--sv-avatar-badge-size,48px);border:2px solid var(--sv-avatar-badge-border,#fff)}.sv-author-info--avatar-badge .sv-author-info__follow-btn{position:absolute;bottom:var(--sv-avatar-badge-btn-bottom,-10px);left:50%;transform:translateX(-50%);min-width:unset;width:var(--sv-avatar-badge-btn-size,24px);height:var(--sv-avatar-badge-btn-size,24px);padding:0;border-radius:50%;background:var(--sv-color-primary,#fe2c55);border:2px solid var(--sv-bg-primary,#000);z-index:1}.sv-author-info--avatar-badge .sv-author-info__follow-btn:hover:not(:disabled){transform:translateX(-50%)scale(1.1)}.sv-author-info--avatar-badge .sv-author-info__follow-btn:active:not(:disabled){transform:translateX(-50%)scale(.95)}.sv-author-info--avatar-badge .sv-author-info__follow-btn-icon{width:var(--sv-avatar-badge-icon-size,14px);height:var(--sv-avatar-badge-icon-size,14px)}.sv-author-info--avatar-badge .sv-author-info__follow-btn--following{display:none}.sv-author-info--avatar-badge .sv-author-info__content{display:none}.sv-author-info--avatar-badge{margin-bottom:var(--sv-avatar-badge-margin,16px)}`;
+var AUTHOR_INFO_CSS = `.sv-author-info{display:flex;align-items:center;gap:var(--sv-author-gap,12px);width:100%}.sv-author-info--vertical{flex-direction:column;align-items:flex-start}.sv-author-info--horizontal{flex-direction:row;align-items:center}.sv-author-info--compact{gap:var(--sv-author-gap-compact,8px)}.sv-author-info__avatar{position:relative;flex-shrink:0;width:var(--sv-author-avatar-size,48px);height:var(--sv-author-avatar-size,48px);border-radius:50%;overflow:hidden;background:var(--sv-author-avatar-bg,rgba(255,255,255,.1));cursor:pointer;transition:transform .15s ease}.sv-author-info__avatar:hover{transform:scale(1.05)}.sv-author-info__avatar:active{transform:scale(.98)}.sv-author-info__avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.sv-author-info__avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--sv-author-avatar-placeholder-bg,linear-gradient(135deg,#667eea 0%,#764ba2 100%));color:var(--sv-author-avatar-placeholder-color,#fff);font-size:calc(var(--sv-author-avatar-size,48px)* .4);font-weight:600;text-transform:uppercase}.sv-author-info__avatar-placeholder svg{width:60%;height:60%;opacity:.9}.sv-author-info__avatar--small{width:var(--sv-author-avatar-size-small,32px);height:var(--sv-author-avatar-size-small,32px)}.sv-author-info__avatar--large{width:var(--sv-author-avatar-size-large,64px);height:var(--sv-author-avatar-size-large,64px)}.sv-author-info__verified-badge{position:absolute;bottom:-2px;right:-2px;width:calc(var(--sv-author-avatar-size,48px)* .35);height:calc(var(--sv-author-avatar-size,48px)* .35);min-width:14px;min-height:14px;border-radius:50%;background:var(--sv-verified-badge-bg,#1DA1F2);display:flex;align-items:center;justify-content:center;border:2px solid var(--sv-verified-badge-border,#000)}.sv-author-info__verified-badge svg{width:60%;height:60%;color:var(--sv-verified-badge-color,#fff)}.sv-author-info__content{display:flex;flex-direction:column;gap:var(--sv-author-content-gap,2px);flex:1;min-width:0}.sv-author-info__name{display:flex;align-items:center;gap:var(--sv-author-name-gap,4px);font-size:var(--sv-author-name-size,16px);font-weight:var(--sv-author-name-weight,600);color:var(--sv-author-name-color,#fff);cursor:pointer;transition:opacity .15s ease}.sv-author-info__name:hover{opacity:.8}.sv-author-info__name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-author-info__name--with-at::before{content:'@';opacity:.8}.sv-author-info__name-verified{flex-shrink:0;width:var(--sv-author-name-verified-size,14px);height:var(--sv-author-name-verified-size,14px);color:var(--sv-verified-badge-bg,#1DA1F2)}.sv-author-info__description{font-size:var(--sv-author-desc-size,13px);color:var(--sv-author-desc-color,rgba(255,255,255,.7));line-height:var(--sv-author-desc-line-height,1.4);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:var(--sv-author-desc-lines,2);-webkit-box-orient:vertical}.sv-author-info__description--single-line{-webkit-line-clamp:1;white-space:nowrap;display:block}.sv-author-info__follow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sv-follow-btn-gap,6px);padding:var(--sv-follow-btn-padding,8px 16px);min-width:var(--sv-follow-btn-min-width,88px);border:0;border-radius:var(--sv-follow-btn-radius,4px);font-size:var(--sv-follow-btn-size,14px);font-weight:var(--sv-follow-btn-weight,600);cursor:pointer;transition:all .2s ease;outline:none;user-select:none;-webkit-tap-highlight-color:transparent}.sv-author-info__follow-btn--default{background:var(--sv-follow-btn-bg,#fe2c55);color:var(--sv-follow-btn-color,#fff)}.sv-author-info__follow-btn--default:hover:not(:disabled){background:var(--sv-follow-btn-bg-hover,#f46);transform:scale(1.02)}.sv-author-info__follow-btn--default:active:not(:disabled){transform:scale(.98)}.sv-author-info__follow-btn--following{background:var(--sv-follow-btn-following-bg,transparent);color:var(--sv-follow-btn-following-color,rgba(255,255,255,.9));border:1px solid var(--sv-follow-btn-following-border,rgba(255,255,255,.3))}.sv-author-info__follow-btn--following:hover:not(:disabled){background:var(--sv-follow-btn-following-bg-hover,rgba(255,255,255,.1));border-color:var(--sv-follow-btn-following-border-hover,rgba(255,255,255,.5))}.sv-author-info__follow-btn--pending{opacity:.6;pointer-events:none;cursor:wait}.sv-author-info__follow-btn:disabled{opacity:.5;cursor:not-allowed}.sv-author-info__follow-btn-icon{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);flex-shrink:0}.sv-author-info__follow-btn-spinner{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sv-author-info-spin .6s linear infinite}@keyframes sv-author-info-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sv-author-info__follow-btn--small{padding:var(--sv-follow-btn-padding-small,6px 12px);font-size:var(--sv-follow-btn-size-small,12px);min-width:var(--sv-follow-btn-min-width-small,72px)}.sv-author-info__follow-btn--large{padding:var(--sv-follow-btn-padding-large,10px 20px);font-size:var(--sv-follow-btn-size-large,16px);min-width:var(--sv-follow-btn-min-width-large,100px)}.sv-author-info__follow-btn--icon-only{min-width:unset;padding:var(--sv-follow-btn-icon-padding,8px);border-radius:50%}.sv-author-info--inline{justify-content:space-between}.sv-author-info--inline .sv-author-info__content{flex:1}.sv-author-info--stacked{flex-direction:column;align-items:center;text-align:center}.sv-author-info--stacked .sv-author-info__content{align-items:center}.sv-author-info--overlay{text-shadow:var(--sv-author-overlay-shadow,0 1px 2px rgba(0,0,0,.5))}.sv-author-info--overlay .sv-author-info__avatar{border:2px solid var(--sv-author-overlay-avatar-border,rgba(255,255,255,.5))}.sv-author-info--avatar-badge{position:relative;display:flex;flex-direction:column;align-items:center;width:auto;gap:0}.sv-author-info--avatar-badge .sv-author-info__avatar{width:var(--sv-avatar-badge-size,48px);height:var(--sv-avatar-badge-size,48px);border:2px solid var(--sv-avatar-badge-border,#fff)}.sv-author-info--avatar-badge .sv-author-info__follow-btn{position:absolute;bottom:var(--sv-avatar-badge-btn-bottom,-10px);left:50%;transform:translateX(-50%);min-width:unset;width:var(--sv-avatar-badge-btn-size,24px);height:var(--sv-avatar-badge-btn-size,24px);padding:0;border-radius:50%;background:var(--sv-color-primary,#fe2c55);border:2px solid var(--sv-bg-primary,#000);z-index:1}.sv-author-info--avatar-badge .sv-author-info__follow-btn:hover:not(:disabled){transform:translateX(-50%)scale(1.1)}.sv-author-info--avatar-badge .sv-author-info__follow-btn:active:not(:disabled){transform:translateX(-50%)scale(.95)}.sv-author-info--avatar-badge .sv-author-info__follow-btn-icon{width:var(--sv-avatar-badge-icon-size,14px);height:var(--sv-avatar-badge-icon-size,14px)}.sv-author-info--avatar-badge .sv-author-info__follow-btn--following{display:none}.sv-author-info--avatar-badge .sv-author-info__content{display:none}.sv-author-info--avatar-badge{margin-bottom:var(--sv-avatar-badge-margin,16px)}`;
 function DefaultVerifiedIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z" }) });
 }

package/dist/{chunk-4WTGO44D.js → chunk-7WXAQHJI.js}

@@ -181,7 +181,7 @@ function VideoHashtags({
 }
 
 // src/components/VideoInfo/VideoInfo.css.ts
-var VIDEO_INFO_CSS = `.sv-video-info{display:flex;flex-direction:column;gap:var(--sv-video-info-gap,6px);color:var(--sv-video-info-color,#fff);font-family:var(--sv-font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);text-shadow:var(--sv-video-info-text-shadow,0 1px 2px rgba(0,0,0,.5));max-width:100%;overflow:hidden;transition:opacity .3s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-user-select:none}.sv-video-info--hidden{opacity:0;pointer-events:none}.sv-video-info--overlay{pointer-events:none}.sv-video-info--overlay>*{pointer-events:auto}.sv-video-info__author{display:flex;align-items:center;gap:var(--sv-video-info-author-gap,6px);cursor:pointer;transition:opacity .15s ease}.sv-video-info__author:hover{opacity:.85}.sv-video-info__author:active{opacity:.7}.sv-video-info__author-name{font-size:var(--sv-video-info-author-font-size,16px);font-weight:var(--sv-video-info-author-font-weight,700);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.sv-video-info__author-prefix{opacity:.95}.sv-video-info__verified-badge{display:inline-flex;align-items:center;justify-content:center;width:var(--sv-video-info-verified-size,14px);height:var(--sv-video-info-verified-size,14px);background:var(--sv-video-info-verified-bg,#20d5ec);border-radius:50%;flex-shrink:0}.sv-video-info__verified-badge svg,.sv-video-info__verified-badge span{font-size:10px;color:#fff;font-weight:bold}.sv-video-info__caption{font-size:var(--sv-video-info-caption-font-size,14px);line-height:var(--sv-video-info-caption-line-height,1.4);color:var(--sv-video-info-caption-color,#fff);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.sv-video-info__caption--lines-1{-webkit-line-clamp:1}.sv-video-info__caption--lines-2{-webkit-line-clamp:2}.sv-video-info__caption--lines-3{-webkit-line-clamp:3}.sv-video-info__caption--expanded{-webkit-line-clamp:unset}.sv-video-info__caption--clickable{cursor:pointer;transition:opacity .15s ease}.sv-video-info__caption--clickable:hover{opacity:.85}.sv-video-info__caption--clickable:active{opacity:.7}.sv-video-info__caption-more{background:0 0;border:0;color:var(--sv-video-info-caption-more-color,rgba(255,255,255,.7));font-size:var(--sv-video-info-caption-font-size,14px);padding:0;margin-left:4px;cursor:pointer}.sv-video-info__caption-more:hover{color:var(--sv-video-info-caption-color,#fff)}.sv-video-info__hashtags{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sv-video-info-hashtag-gap,6px);font-size:var(--sv-video-info-hashtag-font-size,14px)}.sv-video-info__hashtags--inline{gap:var(--sv-video-info-hashtag-gap-inline,4px)}.sv-video-info__hashtag{display:inline-flex;color:var(--sv-video-info-hashtag-color,#fff);font-weight:var(--sv-video-info-hashtag-font-weight,500);background:0 0;border:0;padding:0;cursor:pointer;transition:opacity .15s ease;white-space:nowrap}.sv-video-info__hashtag:hover{opacity:.8;text-decoration:underline}.sv-video-info__hashtag--not-clickable{cursor:default}.sv-video-info__hashtag--not-clickable:hover{opacity:1;text-decoration:none}.sv-video-info__caption .sv-video-info__hashtag{display:inline}.sv-video-info__location{display:flex;align-items:center;gap:var(--sv-video-info-location-gap,4px);font-size:var(--sv-video-info-location-font-size,13px);color:var(--sv-video-info-location-color,rgba(255,255,255,.9));cursor:pointer;transition:opacity .15s ease}.sv-video-info__location:hover{opacity:.8}.sv-video-info__location-icon{font-size:14px;flex-shrink:0}.sv-video-info__location-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-video-info__music{display:flex;align-items:center;gap:var(--sv-video-info-music-gap,8px);font-size:var(--sv-video-info-music-font-size,13px);color:var(--sv-video-info-music-color,#fff);cursor:pointer;transition:opacity .15s ease;overflow:hidden}.sv-video-info__music:hover{opacity:.8}.sv-video-info__music-icon{font-size:14px;flex-shrink:0}.sv-video-info__music-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-video-info__music-text--marquee{animation:sv-video-info-marquee 8s linear infinite}@keyframes sv-video-info-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`;
+var VIDEO_INFO_CSS = `.sv-video-info{display:flex;flex-direction:column;gap:var(--sv-video-info-gap,6px);color:var(--sv-video-info-color,#fff);font-family:var(--sv-font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);text-shadow:var(--sv-video-info-text-shadow,0 1px 2px rgba(0,0,0,.5));max-width:100%;overflow:hidden;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.sv-video-info--hidden{opacity:0;pointer-events:none}.sv-video-info--overlay{pointer-events:none}.sv-video-info--overlay>*{pointer-events:auto}.sv-video-info__author{display:flex;align-items:center;gap:var(--sv-video-info-author-gap,6px);cursor:pointer;transition:opacity .15s ease}.sv-video-info__author:hover{opacity:.85}.sv-video-info__author:active{opacity:.7}.sv-video-info__author-name{font-size:var(--sv-video-info-author-font-size,16px);font-weight:var(--sv-video-info-author-font-weight,700);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.sv-video-info__author-prefix{opacity:.95}.sv-video-info__verified-badge{display:inline-flex;align-items:center;justify-content:center;width:var(--sv-video-info-verified-size,14px);height:var(--sv-video-info-verified-size,14px);background:var(--sv-video-info-verified-bg,#20d5ec);border-radius:50%;flex-shrink:0}.sv-video-info__verified-badge svg,.sv-video-info__verified-badge span{font-size:10px;color:#fff;font-weight:bold}.sv-video-info__caption{font-size:var(--sv-video-info-caption-font-size,14px);line-height:var(--sv-video-info-caption-line-height,1.4);color:var(--sv-video-info-caption-color,#fff);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.sv-video-info__caption--lines-1{-webkit-line-clamp:1}.sv-video-info__caption--lines-2{-webkit-line-clamp:2}.sv-video-info__caption--lines-3{-webkit-line-clamp:3}.sv-video-info__caption--expanded{-webkit-line-clamp:unset}.sv-video-info__caption--clickable{cursor:pointer;transition:opacity .15s ease}.sv-video-info__caption--clickable:hover{opacity:.85}.sv-video-info__caption--clickable:active{opacity:.7}.sv-video-info__caption-more{background:0 0;border:0;color:var(--sv-video-info-caption-more-color,rgba(255,255,255,.7));font-size:var(--sv-video-info-caption-font-size,14px);padding:0;margin-left:4px;cursor:pointer}.sv-video-info__caption-more:hover{color:var(--sv-video-info-caption-color,#fff)}.sv-video-info__hashtags{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sv-video-info-hashtag-gap,6px);font-size:var(--sv-video-info-hashtag-font-size,14px)}.sv-video-info__hashtags--inline{gap:var(--sv-video-info-hashtag-gap-inline,4px)}.sv-video-info__hashtag{display:inline-flex;color:var(--sv-video-info-hashtag-color,#fff);font-weight:var(--sv-video-info-hashtag-font-weight,500);background:0 0;border:0;padding:0;cursor:pointer;transition:opacity .15s ease;white-space:nowrap}.sv-video-info__hashtag:hover{opacity:.8;text-decoration:underline}.sv-video-info__hashtag--not-clickable{cursor:default}.sv-video-info__hashtag--not-clickable:hover{opacity:1;text-decoration:none}.sv-video-info__caption .sv-video-info__hashtag{display:inline}.sv-video-info__location{display:flex;align-items:center;gap:var(--sv-video-info-location-gap,4px);font-size:var(--sv-video-info-location-font-size,13px);color:var(--sv-video-info-location-color,rgba(255,255,255,.9));cursor:pointer;transition:opacity .15s ease}.sv-video-info__location:hover{opacity:.8}.sv-video-info__location-icon{font-size:14px;flex-shrink:0}.sv-video-info__location-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-video-info__music{display:flex;align-items:center;gap:var(--sv-video-info-music-gap,8px);font-size:var(--sv-video-info-music-font-size,13px);color:var(--sv-video-info-music-color,#fff);cursor:pointer;transition:opacity .15s ease;overflow:hidden}.sv-video-info__music:hover{opacity:.8}.sv-video-info__music-icon{font-size:14px;flex-shrink:0}.sv-video-info__music-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-video-info__music-text--marquee{animation:sv-video-info-marquee 8s linear infinite}@keyframes sv-video-info-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`;
 function DefaultLocationIcon() {
   return /* @__PURE__ */ jsx("span", { className: "sv-video-info__location-icon", children: "\u{1F4CD}" });
 }

package/dist/{chunk-TX3D3C2M.js → chunk-BNI7CYRI.js}

@@ -1,4 +1,4 @@
-import { useDoubleTap, VideoSlotPlayIndicatorInner } from './chunk-VS54DRIS.js';
+import { useDoubleTap, VideoSlotPlayIndicatorInner } from './chunk-MFJS65C5.js';
 import { ImageCarouselHeadless } from './chunk-GSNIZ6DF.js';
 import { clsx2 } from './chunk-EDWS2IPH.js';
 import { injectComponentCSS } from './chunk-CAWE42LH.js';

package/dist/{chunk-OM4L7RE5.js → chunk-JM76QJ4H.js}

@@ -664,6 +664,7 @@ function useVideoElement(config) {
   const [isEnded, setIsEnded] = useState(false);
   const currentSrcRef = useRef(null);
   const retryCountRef = useRef(0);
+  const hasHandledAutoPlayRef = useRef(false);
   const [retryTrigger, setRetryTrigger] = useState(0);
   useEffect(() => {
     const video = videoRef.current;
@@ -678,6 +679,7 @@ function useVideoElement(config) {
     setIsPaused(true);
     setIsEnded(false);
     setError(null);
+    hasHandledAutoPlayRef.current = false;
     if (hlsRef.current) {
       hlsRef.current.destroy();
       hlsRef.current = null;
@@ -730,7 +732,8 @@ function useVideoElement(config) {
       setIsBuffering(false);
       setIsReady(true);
       onCanPlay?.();
-      if (autoPlay) {
+      if (autoPlay && !hasHandledAutoPlayRef.current) {
+        hasHandledAutoPlayRef.current = true;
         video.play().catch(() => {
         });
       }

package/dist/{chunk-C27FC7E2.js → chunk-NJXIYSDZ.js}

@@ -58,7 +58,6 @@ var ACTION_BAR_CSS = (
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
-  -webkit-user-select: none;
   
   /* Transition */
   transition: transform 0.15s ease, opacity 0.15s ease;

package/dist/{chunk-VKTTPODU.js → chunk-VJ744W5N.js}

@@ -1,4 +1,4 @@
-import { useDoubleTap, VideoSlotContext, useVideoSlotContext } from './chunk-VS54DRIS.js';
+import { useDoubleTap, VideoSlotContext, useVideoSlotContext } from './chunk-MFJS65C5.js';
 import { HeartFilledIcon } from './chunk-ANCP53F3.js';
 import { clsx2 } from './chunk-EDWS2IPH.js';
 import { injectComponentCSS } from './chunk-CAWE42LH.js';
@@ -6,7 +6,7 @@ import { memo, useMemo, useState, useCallback, useEffect, useInsertionEffect, us
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/VideoSlot/VideoSlot.css.ts
-var VIDEO_SLOT_CSS = `.sv-video-slot{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--sv-bg-primary,#000);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;will-change:contents;contain:layout style paint}.sv-video-slot--active{z-index:1}.sv-video-slot--loading .sv-video-slot__video{opacity:0}.sv-video-slot--loading .sv-video-slot__poster{opacity:1}.sv-video-slot--playing .sv-video-slot__video{opacity:1}.sv-video-slot--playing .sv-video-slot__poster{opacity:0}.sv-video-slot--paused .sv-video-slot__video{opacity:1}.sv-video-slot--paused .sv-video-slot__poster{opacity:0}.sv-video-slot__poster--hidden{opacity:0;pointer-events:none}.sv-video-slot--error{display:flex;align-items:center;justify-content:center}.sv-video-slot__video-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.sv-video-slot__video{width:100%;height:100%;object-fit:cover;background-color:transparent;transition:opacity var(--sv-transition-duration,300ms)ease-out}.sv-video-slot__video[data-loaded="true"]{opacity:1}.sv-video-slot__poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--sv-bg-primary,#000);z-index:var(--sv-z-poster,3);transition:opacity var(--sv-transition-duration,300ms)ease-out;pointer-events:none}.sv-video-slot__poster-image{width:100%;height:100%;object-fit:cover}.sv-video-slot__poster--first-frame .sv-video-slot__poster-image{image-rendering:auto}.sv-video-slot__poster--skeleton{background:linear-gradient(110deg,var(--sv-skeleton-bg,rgba(255,255,255,.05))0%,var(--sv-skeleton-shimmer,rgba(255,255,255,.1))50%,var(--sv-skeleton-bg,rgba(255,255,255,.05))100%);background-size:200% 100%;animation:sv-slot-skeleton-shimmer 1.5s ease-in-out infinite}@keyframes sv-slot-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.sv-video-slot__overlay{position:absolute;inset:0;z-index:var(--sv-z-overlay,4);background:linear-gradient(to top,rgba(0,0,0,.6)0%,rgba(0,0,0,.3)20%,transparent 40%,transparent 60%,rgba(0,0,0,.2)80%,rgba(0,0,0,.4)100%);pointer-events:none}.sv-video-slot__overlay-top,.sv-video-slot__overlay-bottom,.sv-video-slot__overlay-left,.sv-video-slot__overlay-right,.sv-video-slot__actions,.sv-video-slot__author{pointer-events:none}.sv-video-slot__overlay button,.sv-video-slot__overlay a,.sv-video-slot__overlay [role="button"],.sv-video-slot__overlay input,.sv-video-slot__overlay label,.sv-video-slot__overlay .sv-progress-bar,.sv-video-slot__overlay .sv-author-info,.sv-video-slot__overlay .sv-video-info,.sv-video-slot__overlay .sv-action-bar{pointer-events:auto}.sv-video-slot__actions>*{pointer-events:auto}.sv-video-slot__overlay-top{position:absolute;top:0;left:0;right:0;padding:var(--sv-spacing-md,16px);padding-top:calc(var(--sv-safe-area-top,0)+var(--sv-spacing-md,16px))}.sv-video-slot__overlay-bottom{position:absolute;bottom:0;left:0;right:0;padding:var(--sv-spacing-md,16px);padding-bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-spacing-md,16px));display:flex;flex-direction:column;gap:var(--sv-spacing-sm,8px)}.sv-video-slot__overlay-left{position:absolute;top:50%;left:0;transform:translateY(-50%);padding:var(--sv-spacing-md,16px)}.sv-video-slot__overlay-right{position:absolute;top:50%;right:0;transform:translateY(-50%);padding:var(--sv-spacing-md,16px)}.sv-video-slot__actions{position:absolute;right:var(--sv-spacing-sm,8px);bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-actions-bottom,80px)+var(--sv-playlist-bar-offset,0));display:flex;flex-direction:column;align-items:center;transition:bottom .3s ease-in-out}.sv-video-slot__author{position:absolute;left:var(--sv-spacing-md,16px);bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-author-bottom,100px)+var(--sv-playlist-bar-offset,0));right:80px;max-width:calc(100% - 100px);transition:bottom .3s ease-in-out}.sv-video-slot__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--sv-bg-primary,#000);color:var(--sv-text-secondary,#999);text-align:center;padding:var(--sv-spacing-lg,20px);gap:var(--sv-spacing-md,16px);z-index:var(--sv-z-indicator,3)}.sv-video-slot__error-icon{font-size:48px;opacity:.6}.sv-video-slot__error-message{font-size:var(--sv-font-size-md,14px);max-width:200px}.sv-video-slot__error-retry{padding:var(--sv-spacing-sm,8px)var(--sv-spacing-md,16px);background-color:var(--sv-color-primary,#fe2c55);color:#fff;border:0;border-radius:var(--sv-radius-md,8px);font-size:var(--sv-font-size-sm,12px);font-weight:600;cursor:pointer;transition:background-color 150ms ease}.sv-video-slot__error-retry:hover{background-color:var(--sv-color-primary-hover,#e02850)}.sv-video-slot__error-retry:active{transform:scale(.96)}.sv-video-slot__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--sv-z-slot-spinner,2)}.sv-video-slot__spinner-circle{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--sv-color-primary,#fe2c55);border-radius:50%;animation:sv-slot-spin .8s linear infinite}@keyframes sv-slot-spin{to{transform:rotate(360deg)}}.sv-video-slot__play-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:var(--sv-z-indicator,3);opacity:0;transition:opacity 200ms ease-out;pointer-events:none}.sv-video-slot__play-indicator--visible{opacity:.65}.sv-video-slot__play-indicator--persist{opacity:.65}.sv-video-slot__play-indicator--animating-out{animation:sv-slot-indicator-out var(--sv-indicator-duration,200ms)ease-out forwards}@keyframes sv-slot-indicator-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}100%{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.sv-video-slot__play-indicator-icon{color:#fff;font-size:28px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.sv-video-slot__progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:rgba(255,255,255,.2);z-index:var(--sv-z-progress,4)}.sv-video-slot__progress-bar{height:100%;background-color:var(--sv-color-primary,#fe2c55);transition:width 100ms linear}.sv-video-slot__progress-buffered{position:absolute;top:0;left:0;height:100%;background-color:rgba(255,255,255,.3)}`;
+var VIDEO_SLOT_CSS = `.sv-video-slot{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--sv-bg-primary,#000);touch-action:none;user-select:none;-webkit-user-select:none;will-change:contents;contain:layout style paint}.sv-video-slot--active{z-index:1}.sv-video-slot--loading .sv-video-slot__video{opacity:0}.sv-video-slot--loading .sv-video-slot__poster{opacity:1}.sv-video-slot--playing .sv-video-slot__video{opacity:1}.sv-video-slot--playing .sv-video-slot__poster{opacity:0}.sv-video-slot--paused .sv-video-slot__video{opacity:1}.sv-video-slot--paused .sv-video-slot__poster{opacity:0}.sv-video-slot__poster--hidden{opacity:0;pointer-events:none}.sv-video-slot--error{display:flex;align-items:center;justify-content:center}.sv-video-slot__video-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.sv-video-slot__video{width:100%;height:100%;object-fit:cover;background-color:transparent;transition:opacity var(--sv-transition-duration,300ms)ease-out}.sv-video-slot__video[data-loaded="true"]{opacity:1}.sv-video-slot__poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--sv-bg-primary,#000);z-index:var(--sv-z-poster,3);transition:opacity var(--sv-transition-duration,300ms)ease-out;pointer-events:none}.sv-video-slot__poster-image{width:100%;height:100%;object-fit:cover}.sv-video-slot__poster--first-frame .sv-video-slot__poster-image{image-rendering:auto}.sv-video-slot__poster--skeleton{background:linear-gradient(110deg,var(--sv-skeleton-bg,rgba(255,255,255,.05))0%,var(--sv-skeleton-shimmer,rgba(255,255,255,.1))50%,var(--sv-skeleton-bg,rgba(255,255,255,.05))100%);background-size:200% 100%;animation:sv-slot-skeleton-shimmer 1.5s ease-in-out infinite}@keyframes sv-slot-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.sv-video-slot__overlay{position:absolute;inset:0;z-index:var(--sv-z-overlay,2);background:linear-gradient(to top,rgba(0,0,0,.6)0%,rgba(0,0,0,.3)20%,transparent 40%,transparent 60%,rgba(0,0,0,.2)80%,rgba(0,0,0,.4)100%);pointer-events:none}.sv-video-slot__overlay-top,.sv-video-slot__overlay-bottom,.sv-video-slot__overlay-left,.sv-video-slot__overlay-right,.sv-video-slot__actions,.sv-video-slot__author{pointer-events:none}.sv-video-slot__overlay button,.sv-video-slot__overlay a,.sv-video-slot__overlay [role="button"],.sv-video-slot__overlay input,.sv-video-slot__overlay label,.sv-video-slot__overlay .sv-progress-bar,.sv-video-slot__overlay .sv-author-info,.sv-video-slot__overlay .sv-video-info,.sv-video-slot__overlay .sv-action-bar{pointer-events:auto}.sv-video-slot__overlay-top{position:absolute;top:0;left:0;right:0;padding:var(--sv-spacing-md,16px);padding-top:calc(var(--sv-safe-area-top,0)+var(--sv-spacing-md,16px))}.sv-video-slot__overlay-bottom{position:absolute;bottom:0;left:0;right:0;padding:var(--sv-spacing-md,16px);padding-bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-spacing-md,16px));display:flex;flex-direction:column;gap:var(--sv-spacing-sm,8px)}.sv-video-slot__overlay-left{position:absolute;top:50%;left:0;transform:translateY(-50%);padding:var(--sv-spacing-md,16px)}.sv-video-slot__overlay-right{position:absolute;top:50%;right:0;transform:translateY(-50%);padding:var(--sv-spacing-md,16px)}.sv-video-slot__actions{position:absolute;right:var(--sv-spacing-sm,8px);bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-actions-bottom,80px)+var(--sv-playlist-bar-offset,0));display:flex;flex-direction:column;align-items:center;transition:bottom .3s ease-in-out}.sv-video-slot__author{position:absolute;left:var(--sv-spacing-md,16px);bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-author-bottom,100px)+var(--sv-playlist-bar-offset,0));right:80px;max-width:calc(100% - 100px);transition:bottom .3s ease-in-out}.sv-video-slot__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--sv-bg-primary,#000);color:var(--sv-text-secondary,#999);text-align:center;padding:var(--sv-spacing-lg,20px);gap:var(--sv-spacing-md,16px);z-index:var(--sv-z-indicator,3)}.sv-video-slot__error-icon{font-size:48px;opacity:.6}.sv-video-slot__error-message{font-size:var(--sv-font-size-md,14px);max-width:200px}.sv-video-slot__error-retry{padding:var(--sv-spacing-sm,8px)var(--sv-spacing-md,16px);background-color:var(--sv-color-primary,#fe2c55);color:#fff;border:0;border-radius:var(--sv-radius-md,8px);font-size:var(--sv-font-size-sm,12px);font-weight:600;cursor:pointer;transition:background-color 150ms ease}.sv-video-slot__error-retry:hover{background-color:var(--sv-color-primary-hover,#e02850)}.sv-video-slot__error-retry:active{transform:scale(.96)}.sv-video-slot__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--sv-z-slot-spinner,2)}.sv-video-slot__spinner-circle{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--sv-color-primary,#fe2c55);border-radius:50%;animation:sv-slot-spin .8s linear infinite}@keyframes sv-slot-spin{to{transform:rotate(360deg)}}.sv-video-slot__play-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:var(--sv-z-indicator,3);opacity:0;transition:opacity 200ms ease-out;pointer-events:none}.sv-video-slot__play-indicator--visible{opacity:.65}.sv-video-slot__play-indicator--persist{opacity:.65}.sv-video-slot__play-indicator--animating-out{animation:sv-slot-indicator-out var(--sv-indicator-duration,200ms)ease-out forwards}@keyframes sv-slot-indicator-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}100%{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.sv-video-slot__play-indicator-icon{color:#fff;font-size:28px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.sv-video-slot__progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:rgba(255,255,255,.2);z-index:var(--sv-z-progress,4)}.sv-video-slot__progress-bar{height:100%;background-color:var(--sv-color-primary,#fe2c55);transition:width 100ms linear}.sv-video-slot__progress-buffered{position:absolute;top:0;left:0;height:100%;background-color:rgba(255,255,255,.3)}`;
 
 // src/components/VideoSlot/constants.ts
 var VIDEO_ID_ATTR = "data-video-id";
@@ -188,7 +188,7 @@ function VideoSlotHeadlessBase({
         [PLAYER_STATE_ATTR]: playerStateString,
         [LOADING_ATTR]: playerState.isLoading ? "true" : "false"
       },
-      style: { WebkitUserSelect: "none", WebkitTouchCallout: "none", ...style },
+      style,
       children: [
         restoreFrame && !playerState.isPlaying && !playerState.error && /* @__PURE__ */ jsx(
           "div",

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

@@ -244,6 +244,6 @@ declare const ActionBarHeadless: typeof ActionBarHeadlessRoot & {
  * - --sv-action-count-color: Count text color (default: white)
  * - --sv-action-bar-gap: Gap between action buttons (default: 16px)
  */
-declare const ACTION_BAR_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BAR - Container for action buttons\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-bar {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-action-bar-gap, 12px);\n  padding: var(--sv-action-bar-padding, 8px 0);\n  \n  /* Auto-hide transition */\n  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Hidden state for auto-hide */\n.sv-action-bar--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Horizontal variant */\n.sv-action-bar--horizontal {\n  flex-direction: row;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BUTTON - Individual action button (Like, Comment, Share, etc.)\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-button {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-action-button-gap, 4px);\n  \n  /* Reset button styles */\n  appearance: none;\n  background: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  \n  /* Interaction */\n  outline: none;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  -webkit-user-select: none;\n  \n  /* Transition */\n  transition: transform 0.15s ease, opacity 0.15s ease;\n}\n\n/* Hover state */\n.sv-action-button:hover {\n  transform: scale(1.05);\n}\n\n/* Active (pressed) state */\n.sv-action-button:active {\n  transform: scale(0.95);\n}\n\n/* Focus visible state (keyboard navigation) */\n.sv-action-button:focus-visible {\n  outline: 2px solid var(--sv-focus-ring-color, rgba(255, 255, 255, 0.6));\n  outline-offset: 2px;\n  border-radius: 8px;\n}\n\n/* Disabled state */\n.sv-action-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Pending state - No visual change, debounce handles rapid clicks */\n/* Button remains fully interactive for smooth UX like TikTok/Instagram */\n.sv-action-button--pending {\n  /* No opacity change - keep button fully visible */\n  /* No pointer-events:none - allow continuous clicks */\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BUTTON ICON\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  width: var(--sv-action-button-size, 48px);\n  height: var(--sv-action-button-size, 48px);\n  \n  /* Background circle */\n  border-radius: 50%;\n  \n  /* Icon color */\n  color: var(--sv-action-button-color, white);\n  \n  /* Icon size - applied to SVG children */\n  font-size: var(--sv-action-button-icon-size, 24px);\n  \n  /* Smooth transitions */\n  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;\n}\n\n/* SVG icon sizing */\n.sv-action-button__icon svg {\n  width: var(--sv-action-button-icon-size, 24px);\n  height: var(--sv-action-button-icon-size, 24px);\n  fill: currentColor;\n}\n\n\n/* Active state - icon filled */\n.sv-action-button--active .sv-action-button__icon {\n  color: var(--sv-action-button-active-color, #fe2c55);\n}\n\n/* Like animation (pop effect) */\n.sv-action-button--like-animate .sv-action-button__icon {\n  animation: sv-like-pop 0.3s ease;\n}\n\n@keyframes sv-like-pop {\n  0% {\n    transform: scale(1);\n  }\n  25% {\n    transform: scale(1.2);\n  }\n  50% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BUTTON COUNT\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-button__count {\n  font-size: var(--sv-action-count-font-size, 12px);\n  font-weight: 600;\n  color: var(--sv-action-count-color, white);\n  \n  /* Prevent layout shift on number change */\n  min-width: 2ch;\n  text-align: center;\n  \n  /* Text shadow for readability on video */\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  \n  /* Line height */\n  line-height: 1.2;\n  \n  /* Transition for count updates */\n  transition: transform 0.15s ease;\n}\n\n/* Count update animation */\n.sv-action-button--count-update .sv-action-button__count {\n  animation: sv-count-bounce 0.3s ease;\n}\n\n@keyframes sv-count-bounce {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.15);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/* Hide count when zero */\n.sv-action-button__count--hidden {\n  visibility: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * VARIANTS\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Minimal variant - no background */\n.sv-action-button--minimal .sv-action-button__icon {\n  background: transparent;\n}\n\n.sv-action-button--minimal:hover .sv-action-button__icon {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n/* Compact variant - smaller size */\n.sv-action-button--compact {\n  gap: 2px;\n}\n\n.sv-action-button--compact .sv-action-button__icon {\n  width: var(--sv-action-button-size-compact, 40px);\n  height: var(--sv-action-button-size-compact, 40px);\n}\n\n.sv-action-button--compact .sv-action-button__count {\n  font-size: var(--sv-action-count-font-size-compact, 11px);\n}\n\n/* Large variant */\n.sv-action-button--large .sv-action-button__icon {\n  width: var(--sv-action-button-size-large, 56px);\n  height: var(--sv-action-button-size-large, 56px);\n}\n\n.sv-action-button--large .sv-action-button__icon svg {\n  width: var(--sv-action-button-icon-size-large, 28px);\n  height: var(--sv-action-button-icon-size-large, 28px);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * SPECIFIC BUTTON TYPES\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Like button - red when active */\n.sv-action-button--like.sv-action-button--active .sv-action-button__icon {\n  color: var(--sv-like-color, #fe2c55);\n}\n\n/* Bookmark button - yellow when active */\n.sv-action-button--bookmark.sv-action-button--active .sv-action-button__icon {\n  color: var(--sv-bookmark-color, #ffc107);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * RESPONSIVE\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Small screens - slightly smaller buttons */\n@media (max-width: 375px) {\n  .sv-action-button__icon {\n    width: 44px;\n    height: 44px;\n  }\n  \n  .sv-action-button__icon svg {\n    width: 22px;\n    height: 22px;\n  }\n  \n  .sv-action-button__count {\n    font-size: 11px;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACCESSIBILITY\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n  .sv-action-button,\n  .sv-action-button__icon,\n  .sv-action-button__count {\n    transition: none;\n    animation: none;\n  }\n}\n";
+declare const ACTION_BAR_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BAR - Container for action buttons\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-bar {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--sv-action-bar-gap, 12px);\n  padding: var(--sv-action-bar-padding, 8px 0);\n  \n  /* Auto-hide transition */\n  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Hidden state for auto-hide */\n.sv-action-bar--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Horizontal variant */\n.sv-action-bar--horizontal {\n  flex-direction: row;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BUTTON - Individual action button (Like, Comment, Share, etc.)\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-button {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-action-button-gap, 4px);\n  \n  /* Reset button styles */\n  appearance: none;\n  background: transparent;\n  border: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  \n  /* Interaction */\n  outline: none;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  \n  /* Transition */\n  transition: transform 0.15s ease, opacity 0.15s ease;\n}\n\n/* Hover state */\n.sv-action-button:hover {\n  transform: scale(1.05);\n}\n\n/* Active (pressed) state */\n.sv-action-button:active {\n  transform: scale(0.95);\n}\n\n/* Focus visible state (keyboard navigation) */\n.sv-action-button:focus-visible {\n  outline: 2px solid var(--sv-focus-ring-color, rgba(255, 255, 255, 0.6));\n  outline-offset: 2px;\n  border-radius: 8px;\n}\n\n/* Disabled state */\n.sv-action-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Pending state - No visual change, debounce handles rapid clicks */\n/* Button remains fully interactive for smooth UX like TikTok/Instagram */\n.sv-action-button--pending {\n  /* No opacity change - keep button fully visible */\n  /* No pointer-events:none - allow continuous clicks */\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BUTTON ICON\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  width: var(--sv-action-button-size, 48px);\n  height: var(--sv-action-button-size, 48px);\n  \n  /* Background circle */\n  border-radius: 50%;\n  \n  /* Icon color */\n  color: var(--sv-action-button-color, white);\n  \n  /* Icon size - applied to SVG children */\n  font-size: var(--sv-action-button-icon-size, 24px);\n  \n  /* Smooth transitions */\n  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;\n}\n\n/* SVG icon sizing */\n.sv-action-button__icon svg {\n  width: var(--sv-action-button-icon-size, 24px);\n  height: var(--sv-action-button-icon-size, 24px);\n  fill: currentColor;\n}\n\n\n/* Active state - icon filled */\n.sv-action-button--active .sv-action-button__icon {\n  color: var(--sv-action-button-active-color, #fe2c55);\n}\n\n/* Like animation (pop effect) */\n.sv-action-button--like-animate .sv-action-button__icon {\n  animation: sv-like-pop 0.3s ease;\n}\n\n@keyframes sv-like-pop {\n  0% {\n    transform: scale(1);\n  }\n  25% {\n    transform: scale(1.2);\n  }\n  50% {\n    transform: scale(0.95);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACTION BUTTON COUNT\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-action-button__count {\n  font-size: var(--sv-action-count-font-size, 12px);\n  font-weight: 600;\n  color: var(--sv-action-count-color, white);\n  \n  /* Prevent layout shift on number change */\n  min-width: 2ch;\n  text-align: center;\n  \n  /* Text shadow for readability on video */\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n  \n  /* Line height */\n  line-height: 1.2;\n  \n  /* Transition for count updates */\n  transition: transform 0.15s ease;\n}\n\n/* Count update animation */\n.sv-action-button--count-update .sv-action-button__count {\n  animation: sv-count-bounce 0.3s ease;\n}\n\n@keyframes sv-count-bounce {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.15);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/* Hide count when zero */\n.sv-action-button__count--hidden {\n  visibility: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * VARIANTS\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Minimal variant - no background */\n.sv-action-button--minimal .sv-action-button__icon {\n  background: transparent;\n}\n\n.sv-action-button--minimal:hover .sv-action-button__icon {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n/* Compact variant - smaller size */\n.sv-action-button--compact {\n  gap: 2px;\n}\n\n.sv-action-button--compact .sv-action-button__icon {\n  width: var(--sv-action-button-size-compact, 40px);\n  height: var(--sv-action-button-size-compact, 40px);\n}\n\n.sv-action-button--compact .sv-action-button__count {\n  font-size: var(--sv-action-count-font-size-compact, 11px);\n}\n\n/* Large variant */\n.sv-action-button--large .sv-action-button__icon {\n  width: var(--sv-action-button-size-large, 56px);\n  height: var(--sv-action-button-size-large, 56px);\n}\n\n.sv-action-button--large .sv-action-button__icon svg {\n  width: var(--sv-action-button-icon-size-large, 28px);\n  height: var(--sv-action-button-icon-size-large, 28px);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * SPECIFIC BUTTON TYPES\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Like button - red when active */\n.sv-action-button--like.sv-action-button--active .sv-action-button__icon {\n  color: var(--sv-like-color, #fe2c55);\n}\n\n/* Bookmark button - yellow when active */\n.sv-action-button--bookmark.sv-action-button--active .sv-action-button__icon {\n  color: var(--sv-bookmark-color, #ffc107);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * RESPONSIVE\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Small screens - slightly smaller buttons */\n@media (max-width: 375px) {\n  .sv-action-button__icon {\n    width: 44px;\n    height: 44px;\n  }\n  \n  .sv-action-button__icon svg {\n    width: 22px;\n    height: 22px;\n  }\n  \n  .sv-action-button__count {\n    font-size: 11px;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACCESSIBILITY\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n  .sv-action-button,\n  .sv-action-button__icon,\n  .sv-action-button__count {\n    transition: none;\n    animation: none;\n  }\n}\n";
 
 export { ACTION_BAR_CSS, CompoundBookmark as ActionBarBookmark, CompoundComment as ActionBarComment, ActionBarHeadless, type ActionBarHeadlessExtendedProps, CompoundLike as ActionBarLike, CompoundShare as ActionBarShare, ActionButton, type ActionButtonExtendedProps, BookmarkButton, type BookmarkButtonProps, CommentButton, type CommentButtonProps, LikeButton, type LikeButtonProps, ShareButton, type ShareButtonProps };

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-C27FC7E2.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-NJXIYSDZ.js';

package/dist/components/ArticleSlot/index.js

@@ -1 +1 @@
-export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotBottom, ArticleSlotCaption, ArticleSlotHeadless, ArticleSlotMusic, ArticleSlotOverlay, ArticleSlotPlayIndicator, ArticleSlotReadMore, ARTICLE_ACTIVE_ATTR as IMAGE_POST_ACTIVE_ATTR, ARTICLE_ID_ATTR as IMAGE_POST_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS as IMAGE_POST_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS as IMAGE_POST_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS as IMAGE_POST_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS as IMAGE_POST_SLOT_CSS, ArticleSlotActions as ImagePostSlotActions, ArticleSlotBottom as ImagePostSlotBottom, ArticleSlotCaption as ImagePostSlotCaption, ArticleSlotHeadless as ImagePostSlotHeadless, ArticleSlotMusic as ImagePostSlotMusic, ArticleSlotOverlay as ImagePostSlotOverlay, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, ArticleSlotReadMore as ImagePostSlotReadMore, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext } from '../../chunk-TX3D3C2M.js';
+export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotBottom, ArticleSlotCaption, ArticleSlotHeadless, ArticleSlotMusic, ArticleSlotOverlay, ArticleSlotPlayIndicator, ArticleSlotReadMore, ARTICLE_ACTIVE_ATTR as IMAGE_POST_ACTIVE_ATTR, ARTICLE_ID_ATTR as IMAGE_POST_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS as IMAGE_POST_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS as IMAGE_POST_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS as IMAGE_POST_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS as IMAGE_POST_SLOT_CSS, ArticleSlotActions as ImagePostSlotActions, ArticleSlotBottom as ImagePostSlotBottom, ArticleSlotCaption as ImagePostSlotCaption, ArticleSlotHeadless as ImagePostSlotHeadless, ArticleSlotMusic as ImagePostSlotMusic, ArticleSlotOverlay as ImagePostSlotOverlay, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, ArticleSlotReadMore as ImagePostSlotReadMore, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext } from '../../chunk-BNI7CYRI.js';

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

@@ -273,6 +273,6 @@ declare function useOptionalAuthorInfoContext(): AuthorInfoContextValue | null;
  * - --sv-author-desc-color: Description text color
  * - --sv-follow-btn-*: Follow button styling
  */
-declare const AUTHOR_INFO_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUTHOR INFO - Container\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-author-gap, 12px);\n  width: 100%;\n}\n\n.sv-author-info--vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.sv-author-info--horizontal {\n  flex-direction: row;\n  align-items: center;\n}\n\n.sv-author-info--compact {\n  gap: var(--sv-author-gap-compact, 8px);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AVATAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__avatar {\n  position: relative;\n  flex-shrink: 0;\n  width: var(--sv-author-avatar-size, 48px);\n  height: var(--sv-author-avatar-size, 48px);\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--sv-author-avatar-bg, rgba(255, 255, 255, 0.1));\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.sv-author-info__avatar:hover {\n  transform: scale(1.05);\n}\n\n.sv-author-info__avatar:active {\n  transform: scale(0.98);\n}\n\n.sv-author-info__avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.sv-author-info__avatar-placeholder {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-author-avatar-placeholder-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));\n  color: var(--sv-author-avatar-placeholder-color, #fff);\n  font-size: calc(var(--sv-author-avatar-size, 48px) * 0.4);\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.sv-author-info__avatar-placeholder svg {\n  width: 60%;\n  height: 60%;\n  opacity: 0.9;\n}\n\n/* Avatar sizes */\n.sv-author-info__avatar--small {\n  width: var(--sv-author-avatar-size-small, 32px);\n  height: var(--sv-author-avatar-size-small, 32px);\n}\n\n.sv-author-info__avatar--large {\n  width: var(--sv-author-avatar-size-large, 64px);\n  height: var(--sv-author-avatar-size-large, 64px);\n}\n\n/* Verified badge */\n.sv-author-info__verified-badge {\n  position: absolute;\n  bottom: -2px;\n  right: -2px;\n  width: calc(var(--sv-author-avatar-size, 48px) * 0.35);\n  height: calc(var(--sv-author-avatar-size, 48px) * 0.35);\n  min-width: 14px;\n  min-height: 14px;\n  border-radius: 50%;\n  background: var(--sv-verified-badge-bg, #1DA1F2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--sv-verified-badge-border, #000);\n}\n\n.sv-author-info__verified-badge svg {\n  width: 60%;\n  height: 60%;\n  color: var(--sv-verified-badge-color, #fff);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   INFO (Name + Description container)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-author-content-gap, 2px);\n  flex: 1;\n  min-width: 0; /* Allow text truncation */\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   NAME\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__name {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-author-name-gap, 4px);\n  font-size: var(--sv-author-name-size, 16px);\n  font-weight: var(--sv-author-name-weight, 600);\n  color: var(--sv-author-name-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-author-info__name:hover {\n  opacity: 0.8;\n}\n\n.sv-author-info__name-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-author-info__name--with-at::before {\n  content: '@';\n  opacity: 0.8;\n}\n\n.sv-author-info__name-verified {\n  flex-shrink: 0;\n  width: var(--sv-author-name-verified-size, 14px);\n  height: var(--sv-author-name-verified-size, 14px);\n  color: var(--sv-verified-badge-bg, #1DA1F2);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   DESCRIPTION / BIO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__description {\n  font-size: var(--sv-author-desc-size, 13px);\n  color: var(--sv-author-desc-color, rgba(255, 255, 255, 0.7));\n  line-height: var(--sv-author-desc-line-height, 1.4);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: var(--sv-author-desc-lines, 2);\n  -webkit-box-orient: vertical;\n}\n\n.sv-author-info__description--single-line {\n  -webkit-line-clamp: 1;\n  white-space: nowrap;\n  display: block;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FOLLOW BUTTON\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__follow-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-follow-btn-gap, 6px);\n  padding: var(--sv-follow-btn-padding, 8px 16px);\n  min-width: var(--sv-follow-btn-min-width, 88px);\n  border: none;\n  border-radius: var(--sv-follow-btn-radius, 4px);\n  font-size: var(--sv-follow-btn-size, 14px);\n  font-weight: var(--sv-follow-btn-weight, 600);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  outline: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Not following state (primary CTA) */\n.sv-author-info__follow-btn--default {\n  background: var(--sv-follow-btn-bg, #fe2c55);\n  color: var(--sv-follow-btn-color, #fff);\n}\n\n.sv-author-info__follow-btn--default:hover:not(:disabled) {\n  background: var(--sv-follow-btn-bg-hover, #ff4466);\n  transform: scale(1.02);\n}\n\n.sv-author-info__follow-btn--default:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n/* Following state (outline) */\n.sv-author-info__follow-btn--following {\n  background: var(--sv-follow-btn-following-bg, transparent);\n  color: var(--sv-follow-btn-following-color, rgba(255, 255, 255, 0.9));\n  border: 1px solid var(--sv-follow-btn-following-border, rgba(255, 255, 255, 0.3));\n}\n\n.sv-author-info__follow-btn--following:hover:not(:disabled) {\n  background: var(--sv-follow-btn-following-bg-hover, rgba(255, 255, 255, 0.1));\n  border-color: var(--sv-follow-btn-following-border-hover, rgba(255, 255, 255, 0.5));\n}\n\n/* Pending state */\n.sv-author-info__follow-btn--pending {\n  opacity: 0.6;\n  pointer-events: none;\n  cursor: wait;\n}\n\n.sv-author-info__follow-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Icon in button */\n.sv-author-info__follow-btn-icon {\n  width: var(--sv-follow-btn-icon-size, 16px);\n  height: var(--sv-follow-btn-icon-size, 16px);\n  flex-shrink: 0;\n}\n\n/* Loading spinner */\n.sv-author-info__follow-btn-spinner {\n  width: var(--sv-follow-btn-icon-size, 16px);\n  height: var(--sv-follow-btn-icon-size, 16px);\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: sv-author-info-spin 0.6s linear infinite;\n}\n\n@keyframes sv-author-info-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Button sizes */\n.sv-author-info__follow-btn--small {\n  padding: var(--sv-follow-btn-padding-small, 6px 12px);\n  font-size: var(--sv-follow-btn-size-small, 12px);\n  min-width: var(--sv-follow-btn-min-width-small, 72px);\n}\n\n.sv-author-info__follow-btn--large {\n  padding: var(--sv-follow-btn-padding-large, 10px 20px);\n  font-size: var(--sv-follow-btn-size-large, 16px);\n  min-width: var(--sv-follow-btn-min-width-large, 100px);\n}\n\n/* Icon-only button */\n.sv-author-info__follow-btn--icon-only {\n  min-width: unset;\n  padding: var(--sv-follow-btn-icon-padding, 8px);\n  border-radius: 50%;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LAYOUT VARIANTS\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Inline variant (avatar + name inline, follow button on right) */\n.sv-author-info--inline {\n  justify-content: space-between;\n}\n\n.sv-author-info--inline .sv-author-info__content {\n  flex: 1;\n}\n\n/* Stacked variant (avatar above name) */\n.sv-author-info--stacked {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\n.sv-author-info--stacked .sv-author-info__content {\n  align-items: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   OVERLAY MODE (for use on video)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info--overlay {\n  /* Text shadow for readability on video */\n  text-shadow: var(--sv-author-overlay-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));\n}\n\n.sv-author-info--overlay .sv-author-info__avatar {\n  border: 2px solid var(--sv-author-overlay-avatar-border, rgba(255, 255, 255, 0.5));\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AVATAR-BADGE VARIANT (TikTok-style avatar with follow badge)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info--avatar-badge {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: auto;\n  gap: 0;\n}\n\n/* Avatar in badge variant */\n.sv-author-info--avatar-badge .sv-author-info__avatar {\n  width: var(--sv-avatar-badge-size, 48px);\n  height: var(--sv-avatar-badge-size, 48px);\n  border: 2px solid var(--sv-avatar-badge-border, #fff);\n}\n\n/* Follow button as overlay badge */\n.sv-author-info--avatar-badge .sv-author-info__follow-btn {\n  position: absolute;\n  bottom: var(--sv-avatar-badge-btn-bottom, -10px);\n  left: 50%;\n  transform: translateX(-50%);\n  min-width: unset;\n  width: var(--sv-avatar-badge-btn-size, 24px);\n  height: var(--sv-avatar-badge-btn-size, 24px);\n  padding: 0;\n  border-radius: 50%;\n  background: var(--sv-color-primary, #fe2c55);\n  border: 2px solid var(--sv-bg-primary, #000);\n  z-index: 1;\n}\n\n.sv-author-info--avatar-badge .sv-author-info__follow-btn:hover:not(:disabled) {\n  transform: translateX(-50%) scale(1.1);\n}\n\n.sv-author-info--avatar-badge .sv-author-info__follow-btn:active:not(:disabled) {\n  transform: translateX(-50%) scale(0.95);\n}\n\n/* Icon size in badge button */\n.sv-author-info--avatar-badge .sv-author-info__follow-btn-icon {\n  width: var(--sv-avatar-badge-icon-size, 14px);\n  height: var(--sv-avatar-badge-icon-size, 14px);\n}\n\n/* Hide button when following (TikTok behavior) */\n.sv-author-info--avatar-badge .sv-author-info__follow-btn--following {\n  display: none;\n}\n\n/* Hide content section in badge variant */\n.sv-author-info--avatar-badge .sv-author-info__content {\n  display: none;\n}\n\n/* Add margin bottom for action bar spacing */\n.sv-author-info--avatar-badge {\n  margin-bottom: var(--sv-avatar-badge-margin, 16px);\n}\n";
+declare const AUTHOR_INFO_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUTHOR INFO - Container\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-author-gap, 12px);\n  width: 100%;\n}\n\n.sv-author-info--vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.sv-author-info--horizontal {\n  flex-direction: row;\n  align-items: center;\n}\n\n.sv-author-info--compact {\n  gap: var(--sv-author-gap-compact, 8px);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AVATAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__avatar {\n  position: relative;\n  flex-shrink: 0;\n  width: var(--sv-author-avatar-size, 48px);\n  height: var(--sv-author-avatar-size, 48px);\n  border-radius: 50%;\n  overflow: hidden;\n  background: var(--sv-author-avatar-bg, rgba(255, 255, 255, 0.1));\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.sv-author-info__avatar:hover {\n  transform: scale(1.05);\n}\n\n.sv-author-info__avatar:active {\n  transform: scale(0.98);\n}\n\n.sv-author-info__avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.sv-author-info__avatar-placeholder {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-author-avatar-placeholder-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));\n  color: var(--sv-author-avatar-placeholder-color, #fff);\n  font-size: calc(var(--sv-author-avatar-size, 48px) * 0.4);\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.sv-author-info__avatar-placeholder svg {\n  width: 60%;\n  height: 60%;\n  opacity: 0.9;\n}\n\n/* Avatar sizes */\n.sv-author-info__avatar--small {\n  width: var(--sv-author-avatar-size-small, 32px);\n  height: var(--sv-author-avatar-size-small, 32px);\n}\n\n.sv-author-info__avatar--large {\n  width: var(--sv-author-avatar-size-large, 64px);\n  height: var(--sv-author-avatar-size-large, 64px);\n}\n\n/* Verified badge */\n.sv-author-info__verified-badge {\n  position: absolute;\n  bottom: -2px;\n  right: -2px;\n  width: calc(var(--sv-author-avatar-size, 48px) * 0.35);\n  height: calc(var(--sv-author-avatar-size, 48px) * 0.35);\n  min-width: 14px;\n  min-height: 14px;\n  border-radius: 50%;\n  background: var(--sv-verified-badge-bg, #1DA1F2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--sv-verified-badge-border, #000);\n}\n\n.sv-author-info__verified-badge svg {\n  width: 60%;\n  height: 60%;\n  color: var(--sv-verified-badge-color, #fff);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   INFO (Name + Description container)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-author-content-gap, 2px);\n  flex: 1;\n  min-width: 0; /* Allow text truncation */\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   NAME\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__name {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-author-name-gap, 4px);\n  font-size: var(--sv-author-name-size, 16px);\n  font-weight: var(--sv-author-name-weight, 600);\n  color: var(--sv-author-name-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-author-info__name:hover {\n  opacity: 0.8;\n}\n\n.sv-author-info__name-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sv-author-info__name--with-at::before {\n  content: '@';\n  opacity: 0.8;\n}\n\n.sv-author-info__name-verified {\n  flex-shrink: 0;\n  width: var(--sv-author-name-verified-size, 14px);\n  height: var(--sv-author-name-verified-size, 14px);\n  color: var(--sv-verified-badge-bg, #1DA1F2);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   DESCRIPTION / BIO\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__description {\n  font-size: var(--sv-author-desc-size, 13px);\n  color: var(--sv-author-desc-color, rgba(255, 255, 255, 0.7));\n  line-height: var(--sv-author-desc-line-height, 1.4);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: var(--sv-author-desc-lines, 2);\n  -webkit-box-orient: vertical;\n}\n\n.sv-author-info__description--single-line {\n  -webkit-line-clamp: 1;\n  white-space: nowrap;\n  display: block;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FOLLOW BUTTON\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info__follow-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sv-follow-btn-gap, 6px);\n  padding: var(--sv-follow-btn-padding, 8px 16px);\n  min-width: var(--sv-follow-btn-min-width, 88px);\n  border: none;\n  border-radius: var(--sv-follow-btn-radius, 4px);\n  font-size: var(--sv-follow-btn-size, 14px);\n  font-weight: var(--sv-follow-btn-weight, 600);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  outline: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Not following state (primary CTA) */\n.sv-author-info__follow-btn--default {\n  background: var(--sv-follow-btn-bg, #fe2c55);\n  color: var(--sv-follow-btn-color, #fff);\n}\n\n.sv-author-info__follow-btn--default:hover:not(:disabled) {\n  background: var(--sv-follow-btn-bg-hover, #ff4466);\n  transform: scale(1.02);\n}\n\n.sv-author-info__follow-btn--default:active:not(:disabled) {\n  transform: scale(0.98);\n}\n\n/* Following state (outline) */\n.sv-author-info__follow-btn--following {\n  background: var(--sv-follow-btn-following-bg, transparent);\n  color: var(--sv-follow-btn-following-color, rgba(255, 255, 255, 0.9));\n  border: 1px solid var(--sv-follow-btn-following-border, rgba(255, 255, 255, 0.3));\n}\n\n.sv-author-info__follow-btn--following:hover:not(:disabled) {\n  background: var(--sv-follow-btn-following-bg-hover, rgba(255, 255, 255, 0.1));\n  border-color: var(--sv-follow-btn-following-border-hover, rgba(255, 255, 255, 0.5));\n}\n\n/* Pending state */\n.sv-author-info__follow-btn--pending {\n  opacity: 0.6;\n  pointer-events: none;\n  cursor: wait;\n}\n\n.sv-author-info__follow-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Icon in button */\n.sv-author-info__follow-btn-icon {\n  width: var(--sv-follow-btn-icon-size, 16px);\n  height: var(--sv-follow-btn-icon-size, 16px);\n  flex-shrink: 0;\n}\n\n/* Loading spinner */\n.sv-author-info__follow-btn-spinner {\n  width: var(--sv-follow-btn-icon-size, 16px);\n  height: var(--sv-follow-btn-icon-size, 16px);\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: sv-author-info-spin 0.6s linear infinite;\n}\n\n@keyframes sv-author-info-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Button sizes */\n.sv-author-info__follow-btn--small {\n  padding: var(--sv-follow-btn-padding-small, 6px 12px);\n  font-size: var(--sv-follow-btn-size-small, 12px);\n  min-width: var(--sv-follow-btn-min-width-small, 72px);\n}\n\n.sv-author-info__follow-btn--large {\n  padding: var(--sv-follow-btn-padding-large, 10px 20px);\n  font-size: var(--sv-follow-btn-size-large, 16px);\n  min-width: var(--sv-follow-btn-min-width-large, 100px);\n}\n\n/* Icon-only button */\n.sv-author-info__follow-btn--icon-only {\n  min-width: unset;\n  padding: var(--sv-follow-btn-icon-padding, 8px);\n  border-radius: 50%;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   LAYOUT VARIANTS\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* Inline variant (avatar + name inline, follow button on right) */\n.sv-author-info--inline {\n  justify-content: space-between;\n}\n\n.sv-author-info--inline .sv-author-info__content {\n  flex: 1;\n}\n\n/* Stacked variant (avatar above name) */\n.sv-author-info--stacked {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\n.sv-author-info--stacked .sv-author-info__content {\n  align-items: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   OVERLAY MODE (for use on video)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info--overlay {\n  /* Text shadow for readability on video */\n  text-shadow: var(--sv-author-overlay-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));\n}\n\n.sv-author-info--overlay .sv-author-info__avatar {\n  border: 2px solid var(--sv-author-overlay-avatar-border, rgba(255, 255, 255, 0.5));\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AVATAR-BADGE VARIANT (TikTok-style avatar with follow badge)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-author-info--avatar-badge {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: auto;\n  gap: 0;\n}\n\n/* Avatar in badge variant */\n.sv-author-info--avatar-badge .sv-author-info__avatar {\n  width: var(--sv-avatar-badge-size, 48px);\n  height: var(--sv-avatar-badge-size, 48px);\n  border: 2px solid var(--sv-avatar-badge-border, #fff);\n}\n\n/* Follow button as overlay badge */\n.sv-author-info--avatar-badge .sv-author-info__follow-btn {\n  position: absolute;\n  bottom: var(--sv-avatar-badge-btn-bottom, -10px);\n  left: 50%;\n  transform: translateX(-50%);\n  min-width: unset;\n  width: var(--sv-avatar-badge-btn-size, 24px);\n  height: var(--sv-avatar-badge-btn-size, 24px);\n  padding: 0;\n  border-radius: 50%;\n  background: var(--sv-color-primary, #fe2c55);\n  border: 2px solid var(--sv-bg-primary, #000);\n  z-index: 1;\n}\n\n.sv-author-info--avatar-badge .sv-author-info__follow-btn:hover:not(:disabled) {\n  transform: translateX(-50%) scale(1.1);\n}\n\n.sv-author-info--avatar-badge .sv-author-info__follow-btn:active:not(:disabled) {\n  transform: translateX(-50%) scale(0.95);\n}\n\n/* Icon size in badge button */\n.sv-author-info--avatar-badge .sv-author-info__follow-btn-icon {\n  width: var(--sv-avatar-badge-icon-size, 14px);\n  height: var(--sv-avatar-badge-icon-size, 14px);\n}\n\n/* Hide button when following (TikTok behavior) */\n.sv-author-info--avatar-badge .sv-author-info__follow-btn--following {\n  display: none;\n}\n\n/* Hide content section in badge variant */\n.sv-author-info--avatar-badge .sv-author-info__content {\n  display: none;\n}\n\n/* Add margin bottom for action bar spacing */\n.sv-author-info--avatar-badge {\n  margin-bottom: var(--sv-avatar-badge-margin, 16px);\n}\n";
 
 export { AUTHOR_INFO_CSS, AuthorAvatar, type AuthorAvatarProps, AuthorDescription, type AuthorDescriptionProps, AuthorInfoContext, type AuthorInfoContextValue, AuthorInfoHeadless, type AuthorInfoHeadlessExtendedProps, type AuthorInfoVariant, AuthorName, type AuthorNameProps, type AvatarSize, FollowButton, type FollowButtonProps, type FollowButtonSize, useAuthorInfoContext, useOptionalAuthorInfoContext };

package/dist/components/AuthorInfo/index.js

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

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

@@ -159,6 +159,6 @@ declare function useOptionalVideoInfoContext(): VideoInfoContextValue | undefine
  * - Location (optional)
  * - Music info (optional)
  */
-declare const VIDEO_INFO_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * VideoInfo Container\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-video-info-gap, 6px);\n  color: var(--sv-video-info-color, #fff);\n  font-family: var(--sv-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n  text-shadow: var(--sv-video-info-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));\n  max-width: 100%;\n  overflow: hidden;\n  \n  /* Auto-hide transition */\n  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  /* Prevent text selection in webview */\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n/* Hidden state for auto-hide */\n.sv-video-info--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Overlay variant (on top of video) */\n.sv-video-info--overlay {\n  pointer-events: none;\n}\n\n.sv-video-info--overlay > * {\n  pointer-events: auto;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Author Name\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__author {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-author-gap, 6px);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__author:hover {\n  opacity: 0.85;\n}\n\n.sv-video-info__author:active {\n  opacity: 0.7;\n}\n\n.sv-video-info__author-name {\n  font-size: var(--sv-video-info-author-font-size, 16px);\n  font-weight: var(--sv-video-info-author-font-weight, 700);\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.sv-video-info__author-prefix {\n  opacity: 0.95;\n}\n\n.sv-video-info__verified-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sv-video-info-verified-size, 14px);\n  height: var(--sv-video-info-verified-size, 14px);\n  background: var(--sv-video-info-verified-bg, #20d5ec);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.sv-video-info__verified-badge svg,\n.sv-video-info__verified-badge span {\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Caption\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__caption {\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  line-height: var(--sv-video-info-caption-line-height, 1.4);\n  color: var(--sv-video-info-caption-color, #fff);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n}\n\n.sv-video-info__caption--lines-1 {\n  -webkit-line-clamp: 1;\n}\n\n.sv-video-info__caption--lines-2 {\n  -webkit-line-clamp: 2;\n}\n\n.sv-video-info__caption--lines-3 {\n  -webkit-line-clamp: 3;\n}\n\n.sv-video-info__caption--expanded {\n  -webkit-line-clamp: unset;\n}\n\n/* Clickable caption (for opening detail view) */\n.sv-video-info__caption--clickable {\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__caption--clickable:hover {\n  opacity: 0.85;\n}\n\n.sv-video-info__caption--clickable:active {\n  opacity: 0.7;\n}\n\n/* \"more\" button for expandable caption */\n.sv-video-info__caption-more {\n  background: none;\n  border: none;\n  color: var(--sv-video-info-caption-more-color, rgba(255, 255, 255, 0.7));\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  padding: 0;\n  margin-left: 4px;\n  cursor: pointer;\n}\n\n.sv-video-info__caption-more:hover {\n  color: var(--sv-video-info-caption-color, #fff);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Hashtags\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__hashtags {\n  display: inline-flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--sv-video-info-hashtag-gap, 6px);\n  font-size: var(--sv-video-info-hashtag-font-size, 14px);\n}\n\n/* Inline variant - more compact */\n.sv-video-info__hashtags--inline {\n  gap: var(--sv-video-info-hashtag-gap-inline, 4px);\n}\n\n.sv-video-info__hashtag {\n  display: inline-flex;\n  color: var(--sv-video-info-hashtag-color, #fff);\n  font-weight: var(--sv-video-info-hashtag-font-weight, 500);\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  white-space: nowrap;\n}\n\n.sv-video-info__hashtag:hover {\n  opacity: 0.8;\n  text-decoration: underline;\n}\n\n.sv-video-info__hashtag--not-clickable {\n  cursor: default;\n}\n\n.sv-video-info__hashtag--not-clickable:hover {\n  opacity: 1;\n  text-decoration: none;\n}\n\n/* Inline hashtags (inside caption) */\n.sv-video-info__caption .sv-video-info__hashtag {\n  display: inline;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Location\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__location {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-location-gap, 4px);\n  font-size: var(--sv-video-info-location-font-size, 13px);\n  color: var(--sv-video-info-location-color, rgba(255, 255, 255, 0.9));\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__location:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__location-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__location-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Music\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__music {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-music-gap, 8px);\n  font-size: var(--sv-video-info-music-font-size, 13px);\n  color: var(--sv-video-info-music-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  overflow: hidden;\n}\n\n.sv-video-info__music:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__music-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__music-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* Marquee animation for long text */\n}\n\n/* Marquee animation for music text */\n.sv-video-info__music-text--marquee {\n  animation: sv-video-info-marquee 8s linear infinite;\n}\n\n@keyframes sv-video-info-marquee {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n";
+declare const VIDEO_INFO_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * VideoInfo Container\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-video-info-gap, 6px);\n  color: var(--sv-video-info-color, #fff);\n  font-family: var(--sv-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n  text-shadow: var(--sv-video-info-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.5));\n  max-width: 100%;\n  overflow: hidden;\n  \n  /* Auto-hide transition */\n  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Hidden state for auto-hide */\n.sv-video-info--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Overlay variant (on top of video) */\n.sv-video-info--overlay {\n  pointer-events: none;\n}\n\n.sv-video-info--overlay > * {\n  pointer-events: auto;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Author Name\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__author {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-author-gap, 6px);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__author:hover {\n  opacity: 0.85;\n}\n\n.sv-video-info__author:active {\n  opacity: 0.7;\n}\n\n.sv-video-info__author-name {\n  font-size: var(--sv-video-info-author-font-size, 16px);\n  font-weight: var(--sv-video-info-author-font-weight, 700);\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n.sv-video-info__author-prefix {\n  opacity: 0.95;\n}\n\n.sv-video-info__verified-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sv-video-info-verified-size, 14px);\n  height: var(--sv-video-info-verified-size, 14px);\n  background: var(--sv-video-info-verified-bg, #20d5ec);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.sv-video-info__verified-badge svg,\n.sv-video-info__verified-badge span {\n  font-size: 10px;\n  color: #fff;\n  font-weight: 700;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Caption\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__caption {\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  line-height: var(--sv-video-info-caption-line-height, 1.4);\n  color: var(--sv-video-info-caption-color, #fff);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n}\n\n.sv-video-info__caption--lines-1 {\n  -webkit-line-clamp: 1;\n}\n\n.sv-video-info__caption--lines-2 {\n  -webkit-line-clamp: 2;\n}\n\n.sv-video-info__caption--lines-3 {\n  -webkit-line-clamp: 3;\n}\n\n.sv-video-info__caption--expanded {\n  -webkit-line-clamp: unset;\n}\n\n/* Clickable caption (for opening detail view) */\n.sv-video-info__caption--clickable {\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__caption--clickable:hover {\n  opacity: 0.85;\n}\n\n.sv-video-info__caption--clickable:active {\n  opacity: 0.7;\n}\n\n/* \"more\" button for expandable caption */\n.sv-video-info__caption-more {\n  background: none;\n  border: none;\n  color: var(--sv-video-info-caption-more-color, rgba(255, 255, 255, 0.7));\n  font-size: var(--sv-video-info-caption-font-size, 14px);\n  padding: 0;\n  margin-left: 4px;\n  cursor: pointer;\n}\n\n.sv-video-info__caption-more:hover {\n  color: var(--sv-video-info-caption-color, #fff);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Hashtags\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__hashtags {\n  display: inline-flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--sv-video-info-hashtag-gap, 6px);\n  font-size: var(--sv-video-info-hashtag-font-size, 14px);\n}\n\n/* Inline variant - more compact */\n.sv-video-info__hashtags--inline {\n  gap: var(--sv-video-info-hashtag-gap-inline, 4px);\n}\n\n.sv-video-info__hashtag {\n  display: inline-flex;\n  color: var(--sv-video-info-hashtag-color, #fff);\n  font-weight: var(--sv-video-info-hashtag-font-weight, 500);\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  white-space: nowrap;\n}\n\n.sv-video-info__hashtag:hover {\n  opacity: 0.8;\n  text-decoration: underline;\n}\n\n.sv-video-info__hashtag--not-clickable {\n  cursor: default;\n}\n\n.sv-video-info__hashtag--not-clickable:hover {\n  opacity: 1;\n  text-decoration: none;\n}\n\n/* Inline hashtags (inside caption) */\n.sv-video-info__caption .sv-video-info__hashtag {\n  display: inline;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Location\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__location {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-location-gap, 4px);\n  font-size: var(--sv-video-info-location-font-size, 13px);\n  color: var(--sv-video-info-location-color, rgba(255, 255, 255, 0.9));\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n}\n\n.sv-video-info__location:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__location-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__location-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Music\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-info__music {\n  display: flex;\n  align-items: center;\n  gap: var(--sv-video-info-music-gap, 8px);\n  font-size: var(--sv-video-info-music-font-size, 13px);\n  color: var(--sv-video-info-music-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s ease;\n  overflow: hidden;\n}\n\n.sv-video-info__music:hover {\n  opacity: 0.8;\n}\n\n.sv-video-info__music-icon {\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.sv-video-info__music-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* Marquee animation for long text */\n}\n\n/* Marquee animation for music text */\n.sv-video-info__music-text--marquee {\n  animation: sv-video-info-marquee 8s linear infinite;\n}\n\n@keyframes sv-video-info-marquee {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n";
 
 export { VIDEO_INFO_CSS, VideoAuthorName, type VideoAuthorNameProps, VideoCaption, type VideoCaptionProps, VideoHashtags, type VideoHashtagsProps, VideoInfoContext, type VideoInfoContextValue, VideoInfoHeadless, type VideoInfoHeadlessExtendedProps, VideoLocation, type VideoLocationProps, VideoMusic, type VideoMusicProps, useOptionalVideoInfoContext, useVideoInfoContext };

package/dist/components/VideoInfo/index.js

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

package/dist/components/VideoPlayer/index.js

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

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

@@ -599,7 +599,7 @@ declare const Z_INDEX_CSS_VARS: {
  * - Avoids global selectors
  * - Follows BEM-like naming: sv-video-slot__[element]--[modifier]
  */
-declare const VIDEO_SLOT_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Z-INDEX LAYERING CONTRACT\n * \n * Override these variables to customize layer stacking:\n * --sv-z-poster:       Poster/Thumbnail layer (default: 3)\n * --sv-z-slot-spinner: Loading spinner layer (default: 2)\n * --sv-z-indicator:    Error/Play indicator layer (default: 4)\n * --sv-z-progress:     Progress bar layer (default: 5)\n *\n * Layer Stack (bottom to top):\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502  z-index: 5 - Progress Bar (topmost)        \u2502\n * \u2502  z-index: 4 - Error UI / Play Indicator     \u2502\n * \u2502  z-index: 3 - Poster / Thumbnail            \u2502\n * \u2502  z-index: 2 - Loading Spinner               \u2502\n * \u2502  z-index: 1 - Video Element                 \u2502\n * \u2502  z-index: 0 - Slot Container (base)         \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 * VideoSlot - Container for individual video in feed\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--sv-bg-primary, #000);\n  /* Touch optimization */\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-touch-callout: none;\n  /* GPU acceleration */\n  will-change: contents;\n  contain: layout style paint;\n}\n\n/* Active slot (currently visible) */\n.sv-video-slot--active {\n  z-index: 1;\n}\n\n/* Loading state */\n.sv-video-slot--loading .sv-video-slot__video {\n  opacity: 0;\n}\n\n.sv-video-slot--loading .sv-video-slot__poster {\n  opacity: 1;\n}\n\n/* Playing state */\n.sv-video-slot--playing .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--playing .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Paused state - keep poster hidden (show paused video frame, not poster) */\n.sv-video-slot--paused .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--paused .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Hidden poster (explicit class applied by VideoSlotPoster component) */\n.sv-video-slot__poster--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Error state */\n.sv-video-slot--error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * 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 */\n\n.sv-video-slot__video-container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sv-video-slot__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  background-color: transparent;\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n}\n\n/* Video loaded but not playing yet */\n.sv-video-slot__video[data-loaded=\"true\"] {\n  opacity: 1;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Poster / Thumbnail / First Frame\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__poster {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  /* Poster should be ABOVE spinner (z-index: 2) so thumbnail shows instead of spinner */\n  z-index: var(--sv-z-poster, 3);\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n  pointer-events: none;\n}\n\n.sv-video-slot__poster-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* First frame (client-captured) */\n.sv-video-slot__poster--first-frame .sv-video-slot__poster-image {\n  image-rendering: auto;\n}\n\n/* Skeleton placeholder */\n.sv-video-slot__poster--skeleton {\n  background: linear-gradient(\n    110deg,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 0%,\n    var(--sv-skeleton-shimmer, rgba(255, 255, 255, 0.1)) 50%,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 100%\n  );\n  background-size: 200% 100%;\n  animation: sv-slot-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes sv-slot-skeleton-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Overlay Container\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__overlay {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-z-overlay, 4);\n  /* Gradient background for better text visibility */\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.6) 0%,\n    rgba(0, 0, 0, 0.3) 20%,\n    transparent 40%,\n    transparent 60%,\n    rgba(0, 0, 0, 0.2) 80%,\n    rgba(0, 0, 0, 0.4) 100%\n  );\n  pointer-events: none;\n}\n\n/* \n * Overlay sections should NOT block clicks (pass-through to container for play/pause)\n * Only actual interactive elements (buttons, links) inside sections should receive clicks.\n * \n * DO NOT use: .sv-video-slot__overlay > * { pointer-events: auto; }\n * This would make entire sections block clicks even on \"empty\" areas.\n */\n.sv-video-slot__overlay-top,\n.sv-video-slot__overlay-bottom,\n.sv-video-slot__overlay-left,\n.sv-video-slot__overlay-right,\n.sv-video-slot__actions,\n.sv-video-slot__author {\n  pointer-events: none;\n}\n\n/* Only interactive elements inside overlay sections should receive clicks */\n.sv-video-slot__overlay button,\n.sv-video-slot__overlay a,\n.sv-video-slot__overlay [role=\"button\"],\n.sv-video-slot__overlay input,\n.sv-video-slot__overlay label,\n.sv-video-slot__overlay .sv-progress-bar,\n.sv-video-slot__overlay .sv-author-info,\n.sv-video-slot__overlay .sv-video-info,\n.sv-video-slot__overlay .sv-action-bar {\n  pointer-events: auto;\n}\n\n/* Allow ALL children inside actions container to receive clicks.\n * This enables custom toolbar elements from web clients (e.g., config buttons)\n * to be interactive without needing specific class whitelisting. */\n.sv-video-slot__actions > * {\n  pointer-events: auto;\n}\n\n/* Overlay sections */\n.sv-video-slot__overlay-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: var(--sv-spacing-md, 16px);\n  padding-top: calc(var(--sv-safe-area-top, 0px) + var(--sv-spacing-md, 16px));\n}\n\n.sv-video-slot__overlay-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0px;\n  padding: var(--sv-spacing-md, 16px);\n  padding-bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-spacing-md, 16px));\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-sm, 8px);\n}\n\n.sv-video-slot__overlay-left {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n.sv-video-slot__overlay-right {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n/* Action bar (typically right side) */\n.sv-video-slot__actions {\n  position: absolute;\n  right: var(--sv-spacing-sm, 8px);\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-actions-bottom, 80px) + var(--sv-playlist-bar-offset, 0px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  transition: bottom 0.3s ease-in-out;\n}\n\n/* Author info (above bottom section, left side) */\n.sv-video-slot__author {\n  position: absolute;\n  left: var(--sv-spacing-md, 16px);\n  /* Position above .sv-video-slot__overlay-bottom (which has ~80px content) */\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-author-bottom, 100px) + var(--sv-playlist-bar-offset, 0px));\n  right: 80px; /* Leave space for actions */\n  max-width: calc(100% - 100px); /* Don't overlap with actions */\n  transition: bottom 0.3s ease-in-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\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 */\n\n.sv-video-slot__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  color: var(--sv-text-secondary, #999);\n  text-align: center;\n  padding: var(--sv-spacing-lg, 20px);\n  gap: var(--sv-spacing-md, 16px);\n  z-index: var(--sv-z-indicator, 3);\n}\n\n.sv-video-slot__error-icon {\n  font-size: 48px;\n  opacity: 0.6;\n}\n\n.sv-video-slot__error-message {\n  font-size: var(--sv-font-size-md, 14px);\n  max-width: 200px;\n}\n\n.sv-video-slot__error-retry {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);\n  background-color: var(--sv-color-primary, #fe2c55);\n  color: #fff;\n  border: none;\n  border-radius: var(--sv-radius-md, 8px);\n  font-size: var(--sv-font-size-sm, 12px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 150ms ease;\n}\n\n.sv-video-slot__error-retry:hover {\n  background-color: var(--sv-color-primary-hover, #e02850);\n}\n\n.sv-video-slot__error-retry:active {\n  transform: scale(0.96);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Loading 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 */\n\n.sv-video-slot__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  /* Use slot-specific z-index (not global --sv-z-overlay which may conflict) */\n  z-index: var(--sv-z-slot-spinner, 2);\n}\n\n.sv-video-slot__spinner-circle {\n  width: 40px;\n  height: 40px;\n  border: 3px solid rgba(255, 255, 255, 0.2);\n  border-top-color: var(--sv-color-primary, #fe2c55);\n  border-radius: 50%;\n  animation: sv-slot-spin 0.8s linear infinite;\n}\n\n@keyframes sv-slot-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Play/Pause Visual Indicator\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__play-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 64px;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: var(--sv-z-indicator, 3);\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n  pointer-events: none;\n}\n\n/* Show indicator */\n.sv-video-slot__play-indicator--visible {\n  opacity: 0.65;\n}\n\n/* Persist mode: stay visible, no animation */\n.sv-video-slot__play-indicator--persist {\n  opacity: 0.65;\n}\n\n/* Animating out: scale up + fade out */\n.sv-video-slot__play-indicator--animating-out {\n  animation: sv-slot-indicator-out var(--sv-indicator-duration, 200ms) ease-out forwards;\n}\n\n@keyframes sv-slot-indicator-out {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(1.5);\n  }\n}\n\n.sv-video-slot__play-indicator-icon {\n  color: #fff;\n  font-size: 28px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Progress Bar\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  z-index: var(--sv-z-progress, 4);\n}\n\n.sv-video-slot__progress-bar {\n  height: 100%;\n  background-color: var(--sv-color-primary, #fe2c55);\n  transition: width 100ms linear;\n}\n\n.sv-video-slot__progress-buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n}\n";
+declare const VIDEO_SLOT_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Z-INDEX LAYERING CONTRACT\n * \n * Override these variables to customize layer stacking:\n * --sv-z-poster:       Poster/Thumbnail layer (default: 3)\n * --sv-z-slot-spinner: Loading spinner layer (default: 2)\n * --sv-z-indicator:    Error/Play indicator layer (default: 4)\n * --sv-z-progress:     Progress bar layer (default: 5)\n *\n * Layer Stack (bottom to top):\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502  z-index: 5 - Progress Bar (topmost)        \u2502\n * \u2502  z-index: 4 - Error UI / Play Indicator     \u2502\n * \u2502  z-index: 3 - Poster / Thumbnail            \u2502\n * \u2502  z-index: 2 - Loading Spinner               \u2502\n * \u2502  z-index: 1 - Video Element                 \u2502\n * \u2502  z-index: 0 - Slot Container (base)         \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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 * VideoSlot - Container for individual video in feed\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--sv-bg-primary, #000);\n  /* Touch optimization */\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n  /* GPU acceleration */\n  will-change: contents;\n  contain: layout style paint;\n}\n\n/* Active slot (currently visible) */\n.sv-video-slot--active {\n  z-index: 1;\n}\n\n/* Loading state */\n.sv-video-slot--loading .sv-video-slot__video {\n  opacity: 0;\n}\n\n.sv-video-slot--loading .sv-video-slot__poster {\n  opacity: 1;\n}\n\n/* Playing state */\n.sv-video-slot--playing .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--playing .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Paused state - keep poster hidden (show paused video frame, not poster) */\n.sv-video-slot--paused .sv-video-slot__video {\n  opacity: 1;\n}\n\n.sv-video-slot--paused .sv-video-slot__poster {\n  opacity: 0;\n}\n\n/* Hidden poster (explicit class applied by VideoSlotPoster component) */\n.sv-video-slot__poster--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Error state */\n.sv-video-slot--error {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * 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 */\n\n.sv-video-slot__video-container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sv-video-slot__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  background-color: transparent;\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n}\n\n/* Video loaded but not playing yet */\n.sv-video-slot__video[data-loaded=\"true\"] {\n  opacity: 1;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Poster / Thumbnail / First Frame\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__poster {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  /* Poster should be ABOVE spinner (z-index: 2) so thumbnail shows instead of spinner */\n  z-index: var(--sv-z-poster, 3);\n  /* Smooth fade transition */\n  transition: opacity var(--sv-transition-duration, 300ms) ease-out;\n  pointer-events: none;\n}\n\n.sv-video-slot__poster-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* First frame (client-captured) */\n.sv-video-slot__poster--first-frame .sv-video-slot__poster-image {\n  image-rendering: auto;\n}\n\n/* Skeleton placeholder */\n.sv-video-slot__poster--skeleton {\n  background: linear-gradient(\n    110deg,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 0%,\n    var(--sv-skeleton-shimmer, rgba(255, 255, 255, 0.1)) 50%,\n    var(--sv-skeleton-bg, rgba(255, 255, 255, 0.05)) 100%\n  );\n  background-size: 200% 100%;\n  animation: sv-slot-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes sv-slot-skeleton-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Overlay Container\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__overlay {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-z-overlay, 2);\n  /* Gradient background for better text visibility */\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.6) 0%,\n    rgba(0, 0, 0, 0.3) 20%,\n    transparent 40%,\n    transparent 60%,\n    rgba(0, 0, 0, 0.2) 80%,\n    rgba(0, 0, 0, 0.4) 100%\n  );\n  pointer-events: none;\n}\n\n/* \n * Overlay sections should NOT block clicks (pass-through to container for play/pause)\n * Only actual interactive elements (buttons, links) inside sections should receive clicks.\n * \n * DO NOT use: .sv-video-slot__overlay > * { pointer-events: auto; }\n * This would make entire sections block clicks even on \"empty\" areas.\n */\n.sv-video-slot__overlay-top,\n.sv-video-slot__overlay-bottom,\n.sv-video-slot__overlay-left,\n.sv-video-slot__overlay-right,\n.sv-video-slot__actions,\n.sv-video-slot__author {\n  pointer-events: none;\n}\n\n/* Only interactive elements inside overlay sections should receive clicks */\n.sv-video-slot__overlay button,\n.sv-video-slot__overlay a,\n.sv-video-slot__overlay [role=\"button\"],\n.sv-video-slot__overlay input,\n.sv-video-slot__overlay label,\n.sv-video-slot__overlay .sv-progress-bar,\n.sv-video-slot__overlay .sv-author-info,\n.sv-video-slot__overlay .sv-video-info,\n.sv-video-slot__overlay .sv-action-bar {\n  pointer-events: auto;\n}\n\n/* Overlay sections */\n.sv-video-slot__overlay-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: var(--sv-spacing-md, 16px);\n  padding-top: calc(var(--sv-safe-area-top, 0px) + var(--sv-spacing-md, 16px));\n}\n\n.sv-video-slot__overlay-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0px;\n  padding: var(--sv-spacing-md, 16px);\n  padding-bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-spacing-md, 16px));\n  display: flex;\n  flex-direction: column;\n  gap: var(--sv-spacing-sm, 8px);\n}\n\n.sv-video-slot__overlay-left {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n.sv-video-slot__overlay-right {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  padding: var(--sv-spacing-md, 16px);\n}\n\n/* Action bar (typically right side) */\n.sv-video-slot__actions {\n  position: absolute;\n  right: var(--sv-spacing-sm, 8px);\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-actions-bottom, 80px) + var(--sv-playlist-bar-offset, 0px));\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  transition: bottom 0.3s ease-in-out;\n}\n\n/* Author info (above bottom section, left side) */\n.sv-video-slot__author {\n  position: absolute;\n  left: var(--sv-spacing-md, 16px);\n  /* Position above .sv-video-slot__overlay-bottom (which has ~80px content) */\n  bottom: calc(var(--sv-safe-area-bottom, 0px) + var(--sv-author-bottom, 100px) + var(--sv-playlist-bar-offset, 0px));\n  right: 80px; /* Leave space for actions */\n  max-width: calc(100% - 100px); /* Don't overlap with actions */\n  transition: bottom 0.3s ease-in-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\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 */\n\n.sv-video-slot__error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sv-bg-primary, #000);\n  color: var(--sv-text-secondary, #999);\n  text-align: center;\n  padding: var(--sv-spacing-lg, 20px);\n  gap: var(--sv-spacing-md, 16px);\n  z-index: var(--sv-z-indicator, 3);\n}\n\n.sv-video-slot__error-icon {\n  font-size: 48px;\n  opacity: 0.6;\n}\n\n.sv-video-slot__error-message {\n  font-size: var(--sv-font-size-md, 14px);\n  max-width: 200px;\n}\n\n.sv-video-slot__error-retry {\n  padding: var(--sv-spacing-sm, 8px) var(--sv-spacing-md, 16px);\n  background-color: var(--sv-color-primary, #fe2c55);\n  color: #fff;\n  border: none;\n  border-radius: var(--sv-radius-md, 8px);\n  font-size: var(--sv-font-size-sm, 12px);\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 150ms ease;\n}\n\n.sv-video-slot__error-retry:hover {\n  background-color: var(--sv-color-primary-hover, #e02850);\n}\n\n.sv-video-slot__error-retry:active {\n  transform: scale(0.96);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Loading 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 */\n\n.sv-video-slot__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  /* Use slot-specific z-index (not global --sv-z-overlay which may conflict) */\n  z-index: var(--sv-z-slot-spinner, 2);\n}\n\n.sv-video-slot__spinner-circle {\n  width: 40px;\n  height: 40px;\n  border: 3px solid rgba(255, 255, 255, 0.2);\n  border-top-color: var(--sv-color-primary, #fe2c55);\n  border-radius: 50%;\n  animation: sv-slot-spin 0.8s linear infinite;\n}\n\n@keyframes sv-slot-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Play/Pause Visual Indicator\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__play-indicator {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 64px;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  z-index: var(--sv-z-indicator, 3);\n  opacity: 0;\n  transition: opacity 200ms ease-out;\n  pointer-events: none;\n}\n\n/* Show indicator */\n.sv-video-slot__play-indicator--visible {\n  opacity: 0.65;\n}\n\n/* Persist mode: stay visible, no animation */\n.sv-video-slot__play-indicator--persist {\n  opacity: 0.65;\n}\n\n/* Animating out: scale up + fade out */\n.sv-video-slot__play-indicator--animating-out {\n  animation: sv-slot-indicator-out var(--sv-indicator-duration, 200ms) ease-out forwards;\n}\n\n@keyframes sv-slot-indicator-out {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(1.5);\n  }\n}\n\n.sv-video-slot__play-indicator-icon {\n  color: #fff;\n  font-size: 28px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * Progress Bar\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-video-slot__progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  z-index: var(--sv-z-progress, 4);\n}\n\n.sv-video-slot__progress-bar {\n  height: 100%;\n  background-color: var(--sv-color-primary, #fe2c55);\n  transition: width 100ms linear;\n}\n\n.sv-video-slot__progress-buffered {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n}\n";
 
 /**
  * VideoSlotLikeAnimation CSS Styles

package/dist/components/VideoSlot/index.js

@@ -1,2 +1,2 @@
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, 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, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from '../../chunk-VKTTPODU.js';
-export { VideoSlotContext, VideoSlotPlayIndicator, VideoSlotPlayIndicatorInner, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from '../../chunk-VS54DRIS.js';
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, 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, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from '../../chunk-VJ744W5N.js';
+export { VideoSlotContext, VideoSlotPlayIndicator, VideoSlotPlayIndicatorInner, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from '../../chunk-MFJS65C5.js';

package/dist/index.d.ts

@@ -24,7 +24,6 @@ export { REPORT_SHEET_CSS, ReportSheetHeadless, ReportSheetHeadlessProps, Report
 export { Skeleton, SkeletonAnimation, SkeletonAvatar, SkeletonProps, SkeletonText, SkeletonVideo } from './components/Skeleton/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 { V as VideoSlotPlayIndicator, a as VideoSlotPlayIndicatorProps } from './VideoSlotPlayIndicator-DPs8Xt5C.js';
-export { ZOOMABLE_CONTAINER_CSS, ZoomableContainer, ZoomableContainerProps } from './components/ZoomableContainer/index.js';
 import 'react/jsx-runtime';
 
 /**
@@ -433,92 +432,6 @@ interface UseDoubleTapReturn {
  */
 declare function useDoubleTap({ containerRef, onSingleTap, onDoubleTap, onLongPress, doubleTapDelay, longPressDelay, disabled, movementThreshold, }: UseDoubleTapConfig): UseDoubleTapReturn;
 
-/**
- * usePinchZoom - Hook for free pinch-to-zoom gesture
- *
- * Features:
- * - Multi-touch pinch to zoom (1x - 3x)
- * - Free zoom: release fingers, zoom stays
- * - Pan support when zoomed (single finger drag)
- * - Boundary clamping (no pan outside viewport)
- * - Smooth reset animation
- * - No state updates during gesture (refs only, 60fps)
- *
- * Usage:
- * ```tsx
- * function ZoomableVideo({ children }) {
- *   const containerRef = useRef<HTMLDivElement>(null);
- *   const { contentStyle, handlers, isZoomed, resetZoom } = usePinchZoom({
- *     containerRef,
- *     minScale: 1,
- *     maxScale: 3,
- *   });
- *
- *   return (
- *     <div ref={containerRef} {...handlers} style={contentStyle}>
- *       {children}
- *     </div>
- *   );
- * }
- * ```
- *
- * @packageDocumentation
- */
-/** Configuration for usePinchZoom hook */
-interface UsePinchZoomConfig {
-    /** Container element ref */
-    containerRef: React.RefObject<HTMLElement | null>;
-    /** Minimum scale (default: 1) */
-    minScale?: number;
-    /** Maximum scale (default: 3) */
-    maxScale?: number;
-    /** Whether zoom is disabled (default: false) */
-    disabled?: boolean;
-    /** Called when zoom starts (2 fingers down) */
-    onZoomStart?: () => void;
-    /** Called when zoom ends (fingers up) */
-    onZoomEnd?: (scale: number) => void;
-    /** Called when zoom resets */
-    onZoomReset?: () => void;
-}
-/** Return value from usePinchZoom hook */
-interface UsePinchZoomReturn {
-    /** Touch event handlers to spread on the zoomable element */
-    handlers: {
-        onTouchStart: (e: React.TouchEvent) => void;
-        onTouchMove: (e: React.TouchEvent) => void;
-        onTouchEnd: (e: React.TouchEvent) => void;
-    };
-    /** Current CSS transform style for the content */
-    contentStyle: React.CSSProperties;
-    /** Whether content is currently zoomed (scale > 1) */
-    isZoomed: boolean;
-    /** Whether a pinch gesture is in progress */
-    isPinching: boolean;
-    /** Reset zoom to 1x with animation */
-    resetZoom: () => void;
-    /** Current scale value */
-    scale: number;
-}
-/**
- * usePinchZoom - Free pinch-to-zoom gesture hook
- *
- * ## How it works:
- *
- * 1. When 2 fingers touch → record initial distance + current scale
- * 2. On move → calculate new scale from distance ratio
- * 3. On release → keep current scale (free zoom)
- * 4. When zoomed (scale > 1), single finger drag → pan
- * 5. Pan is clamped to viewport boundaries
- * 6. Call resetZoom() to animate back to 1x
- *
- * ## Performance:
- * - Uses refs during gesture (no re-renders mid-gesture)
- * - Uses requestAnimationFrame for smooth updates
- * - Only triggers state update on gesture end
- */
-declare function usePinchZoom({ containerRef, minScale, maxScale, disabled, onZoomStart, onZoomEnd, onZoomReset, }: UsePinchZoomConfig): UsePinchZoomReturn;
-
 /**
  * CustomLayout - Fully Composable Layout
  *
@@ -955,4 +868,4 @@ declare function formatCountWithSeparators(count: number, locale?: string): stri
  */
 declare function parseFormattedCount(formatted: string): number;
 
-export { CSS_CONTENT, CSS_VAR_PREFIX, type CacheStats, Components, CustomLayout, type CustomLayoutProps, DefaultLayout, type DefaultLayoutProps, type FirstFrameCacheConfig, type FormatCountOptions, Layouts, MinimalLayout, type MinimalLayoutProps, type TapPosition, type Theme, type UseDoubleTapConfig, type UseDoubleTapReturn, type UsePinchZoomConfig, type UsePinchZoomReturn, areStylesInjected, createFirstFrameCache, firstFrameCache, formatCount, formatCountWithSeparators, getTheme, injectComponentCSS, injectSDKStyles, isComponentCSSInjected, isDarkMode, parseFormattedCount, removeComponentCSS, removeStyles, setTheme, useCustomLayout, useDoubleTap, usePinchZoom, useStyles };
+export { CSS_CONTENT, CSS_VAR_PREFIX, type CacheStats, Components, CustomLayout, type CustomLayoutProps, DefaultLayout, type DefaultLayoutProps, type FirstFrameCacheConfig, type FormatCountOptions, Layouts, MinimalLayout, type MinimalLayoutProps, type TapPosition, type Theme, type UseDoubleTapConfig, type UseDoubleTapReturn, areStylesInjected, createFirstFrameCache, firstFrameCache, formatCount, formatCountWithSeparators, getTheme, injectComponentCSS, injectSDKStyles, isComponentCSSInjected, isDarkMode, parseFormattedCount, removeComponentCSS, removeStyles, setTheme, useCustomLayout, useDoubleTap, useStyles };

package/dist/index.js

@@ -1,9 +1,8 @@
 export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-4RIMQOBR.js';
 export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless } from './chunk-QCRRF76W.js';
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-4WTGO44D.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-OM4L7RE5.js';
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, 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, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from './chunk-VKTTPODU.js';
-export { ZOOMABLE_CONTAINER_CSS, ZoomableContainer } from './chunk-TJCPW4AO.js';
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-7WXAQHJI.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-JM76QJ4H.js';
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, ReportedVideoOverlay, 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, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS } from './chunk-VJ744W5N.js';
 export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewCaption, DetailViewGallery, DetailViewHeadless, DetailViewMusic, DetailViewStats, useDetailViewContext } from './chunk-BADA7OLG.js';
 export { ErrorBoundary } from './chunk-IWSBYOSS.js';
 export { FEED_CLASS_PREFIX, FEED_CSS, FeedContext, FeedHeadless, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, FEED_CLASS_PREFIX as VIDEO_FEED_CLASS_PREFIX, FEED_CSS as VIDEO_FEED_CSS, FeedContext as VideoFeedContext, FeedHeadless as VideoFeedHeadless, getSlotIndexFromPosition, useFeedContext, useFeedPosition, useOptionalFeedContext, useOptionalFeedContext as useOptionalVideoFeedContext, useFeedContext as useVideoFeedContext, useFeedPosition as useVideoFeedPosition } from './chunk-BEJAJFV6.js';
@@ -12,13 +11,12 @@ export { PlaylistBarHeadless, PlaylistCollectionHeadless, PlaylistSheetHeadless
 export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-VXW7AOGM.js';
 export { QUALITY_PICKER_CSS, QualityPickerHeadless } from './chunk-DR7KR7OT.js';
 export { REPORT_SHEET_CSS, ReportSheetHeadless, injectReportSheetCSS } from './chunk-DGKMO3AE.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-C27FC7E2.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-NJXIYSDZ.js';
 export { ADVANCE_MENU_CSS, AdvanceMenuHeadless } from './chunk-HXQPEZRG.js';
-export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotBottom, ArticleSlotCaption, ArticleSlotHeadless, ArticleSlotMusic, ArticleSlotOverlay, ArticleSlotPlayIndicator, ArticleSlotReadMore, ARTICLE_ACTIVE_ATTR as IMAGE_POST_ACTIVE_ATTR, ARTICLE_ID_ATTR as IMAGE_POST_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS as IMAGE_POST_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS as IMAGE_POST_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS as IMAGE_POST_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS as IMAGE_POST_SLOT_CSS, ArticleSlotActions as ImagePostSlotActions, ArticleSlotBottom as ImagePostSlotBottom, ArticleSlotCaption as ImagePostSlotCaption, ArticleSlotHeadless as ImagePostSlotHeadless, ArticleSlotMusic as ImagePostSlotMusic, ArticleSlotOverlay as ImagePostSlotOverlay, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, ArticleSlotReadMore as ImagePostSlotReadMore, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext } from './chunk-TX3D3C2M.js';
-export { VideoSlotContext, VideoSlotPlayIndicator, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-VS54DRIS.js';
-export { usePinchZoom } from './chunk-UTLVQ3FL.js';
+export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotBottom, ArticleSlotCaption, ArticleSlotHeadless, ArticleSlotMusic, ArticleSlotOverlay, ArticleSlotPlayIndicator, ArticleSlotReadMore, ARTICLE_ACTIVE_ATTR as IMAGE_POST_ACTIVE_ATTR, ARTICLE_ID_ATTR as IMAGE_POST_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS as IMAGE_POST_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS as IMAGE_POST_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS as IMAGE_POST_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS as IMAGE_POST_SLOT_CSS, ArticleSlotActions as ImagePostSlotActions, ArticleSlotBottom as ImagePostSlotBottom, ArticleSlotCaption as ImagePostSlotCaption, ArticleSlotHeadless as ImagePostSlotHeadless, ArticleSlotMusic as ImagePostSlotMusic, ArticleSlotOverlay as ImagePostSlotOverlay, ArticleSlotPlayIndicator as ImagePostSlotPlayIndicator, ArticleSlotReadMore as ImagePostSlotReadMore, useArticleSlotContext, useArticleSlotContext as useImagePostSlotContext, useOptionalArticleSlotContext, useOptionalArticleSlotContext as useOptionalImagePostSlotContext } from './chunk-BNI7CYRI.js';
+export { VideoSlotContext, VideoSlotPlayIndicator, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-MFJS65C5.js';
 export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless } from './chunk-GSNIZ6DF.js';
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-26KDWJRI.js';
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-3OB3OVYR.js';
 export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './chunk-ANCP53F3.js';
 export { CLEAN_MODE_OVERLAY_CSS, CleanModeOverlayHeadless, injectCleanModeOverlayCSS } from './chunk-QUEJHA24.js';
 export { clsx, clsx2 as cn } from './chunk-EDWS2IPH.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-short/ui",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.26",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -73,7 +73,7 @@
   ],
   "dependencies": {
     "clsx": "^2.1.0",
-    "@xhub-short/contracts": "1.0.0-beta.25"
+    "@xhub-short/contracts": "1.0.0-beta.26"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -97,8 +97,8 @@
     "tsup": "^8.3.0",
     "typescript": "^5.7.0",
     "vitest": "^2.1.0",
-    "@xhub-short/tsconfig": "0.1.0-beta.3",
-    "@xhub-short/vitest-config": "0.1.0-beta.14"
+    "@xhub-short/vitest-config": "0.1.0-beta.13",
+    "@xhub-short/tsconfig": "0.0.1-beta.2"
   },
   "scripts": {
     "build": "tsup",

package/dist/chunk-TJCPW4AO.js

@@ -1,105 +0,0 @@
-import { usePinchZoom } from './chunk-UTLVQ3FL.js';
-import { clsx2 } from './chunk-EDWS2IPH.js';
-import { injectComponentCSS } from './chunk-CAWE42LH.js';
-import { memo, useInsertionEffect, useRef, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-// src/components/ZoomableContainer/ZoomableContainer.css.ts
-var ZOOMABLE_CONTAINER_CSS = (
-  /* 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
- * ZoomableContainer
- * Wraps content to enable pinch-to-zoom gesture
- * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-zoomable-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  /* Prevent browser's default pinch-zoom on the container */
-  touch-action: pan-y;
-}
-
-/* When zoomed, take full touch control */
-.sv-zoomable-container--zoomed {
-  touch-action: none;
-}
-
-/* Content wrapper that receives the transform */
-.sv-zoomable-container__content {
-  width: 100%;
-  height: 100%;
-  transform-origin: center center;
-}
-
-/* GPU acceleration during gesture */
-.sv-zoomable-container--active .sv-zoomable-container__content {
-  will-change: transform;
-}
-`
-);
-function ZoomableContainerBase({
-  children,
-  resetOnChange,
-  minScale = 1,
-  maxScale = 3,
-  disabled = false,
-  onZoomStart,
-  onZoomEnd,
-  onZoomReset,
-  onZoomedChange,
-  className,
-  testId
-}) {
-  useInsertionEffect(() => {
-    return injectComponentCSS("zoomable-container", ZOOMABLE_CONTAINER_CSS);
-  }, []);
-  const containerRef = useRef(null);
-  const { handlers, contentStyle, isZoomed, isPinching, resetZoom, scale } = usePinchZoom({
-    containerRef,
-    minScale,
-    maxScale,
-    disabled,
-    onZoomStart,
-    onZoomEnd,
-    onZoomReset
-  });
-  const prevResetValueRef = useRef(resetOnChange);
-  useEffect(() => {
-    if (prevResetValueRef.current !== resetOnChange) {
-      prevResetValueRef.current = resetOnChange;
-      resetZoom();
-    }
-  }, [resetOnChange, resetZoom]);
-  const prevIsZoomedRef = useRef(false);
-  useEffect(() => {
-    if (prevIsZoomedRef.current !== isZoomed) {
-      prevIsZoomedRef.current = isZoomed;
-      onZoomedChange?.(isZoomed);
-    }
-  }, [isZoomed, onZoomedChange]);
-  const containerClasses = clsx2(
-    "sv-zoomable-container",
-    isZoomed && "sv-zoomable-container--zoomed",
-    (isPinching || isZoomed) && "sv-zoomable-container--active",
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: containerClasses,
-      "data-testid": testId,
-      "data-zoomed": isZoomed ? "true" : "false",
-      "data-scale": scale.toFixed(2),
-      ...handlers,
-      children: /* @__PURE__ */ jsx("div", { className: "sv-zoomable-container__content", style: contentStyle, children })
-    }
-  );
-}
-var ZoomableContainer = memo(ZoomableContainerBase);
-ZoomableContainer.displayName = "ZoomableContainer";
-
-export { ZOOMABLE_CONTAINER_CSS, ZoomableContainer };

package/dist/chunk-UTLVQ3FL.js

@@ -1,244 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-
-// src/hooks/usePinchZoom.ts
-var DEFAULT_MIN_SCALE = 1;
-var DEFAULT_MAX_SCALE = 3;
-var PINCH_THRESHOLD = 5;
-var ZOOM_THRESHOLD = 1.05;
-var RESET_ANIMATION_MS = 200;
-function getTouchDistance(t1, t2) {
-  const dx = t1.clientX - t2.clientX;
-  const dy = t1.clientY - t2.clientY;
-  return Math.sqrt(dx * dx + dy * dy);
-}
-function getTouchMidpoint(t1, t2) {
-  return {
-    x: (t1.clientX + t2.clientX) / 2,
-    y: (t1.clientY + t2.clientY) / 2
-  };
-}
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function usePinchZoom({
-  containerRef,
-  minScale = DEFAULT_MIN_SCALE,
-  maxScale = DEFAULT_MAX_SCALE,
-  disabled = false,
-  onZoomStart,
-  onZoomEnd,
-  onZoomReset
-}) {
-  const [scale, setScale] = useState(1);
-  const [translateX, setTranslateX] = useState(0);
-  const [translateY, setTranslateY] = useState(0);
-  const [isPinching, setIsPinching] = useState(false);
-  const isAnimatingRef = useRef(false);
-  const scaleRef = useRef(1);
-  const txRef = useRef(0);
-  const tyRef = useRef(0);
-  const initialDistanceRef = useRef(0);
-  const baseScaleRef = useRef(1);
-  const pinchActivatedRef = useRef(false);
-  const lastPanRef = useRef(null);
-  const isPanningRef = useRef(false);
-  const contentElementRef = useRef(null);
-  const rafRef = useRef(null);
-  const applyTransform = useCallback(
-    (s, tx, ty) => {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-      rafRef.current = requestAnimationFrame(() => {
-        const el = contentElementRef.current ?? containerRef.current?.firstElementChild;
-        if (el instanceof HTMLElement) {
-          contentElementRef.current = el;
-          el.style.transform = `scale(${s}) translate(${tx}px, ${ty}px)`;
-        }
-        rafRef.current = null;
-      });
-    },
-    [containerRef]
-  );
-  const clampTranslation = useCallback(
-    (tx, ty, currentScale) => {
-      if (currentScale <= 1) return { x: 0, y: 0 };
-      const container = containerRef.current;
-      if (!container) return { x: tx, y: ty };
-      const rect = container.getBoundingClientRect();
-      const maxTx = (currentScale - 1) * rect.width / (2 * currentScale);
-      const maxTy = (currentScale - 1) * rect.height / (2 * currentScale);
-      return {
-        x: clamp(tx, -maxTx, maxTx),
-        y: clamp(ty, -maxTy, maxTy)
-      };
-    },
-    [containerRef]
-  );
-  const handleTouchStart = useCallback(
-    (e) => {
-      if (disabled) return;
-      const touches = e.touches;
-      if (touches.length === 2) {
-        const t0 = touches[0];
-        const t1 = touches[1];
-        if (!t0 || !t1) return;
-        e.preventDefault();
-        const distance = getTouchDistance(t0, t1);
-        initialDistanceRef.current = distance;
-        baseScaleRef.current = scaleRef.current;
-        pinchActivatedRef.current = false;
-        isPanningRef.current = false;
-        lastPanRef.current = null;
-        setIsPinching(true);
-        onZoomStart?.();
-        return;
-      }
-      if (touches.length === 1 && scaleRef.current > ZOOM_THRESHOLD) {
-        const t0 = touches[0];
-        if (!t0) return;
-        e.preventDefault();
-        isPanningRef.current = true;
-        lastPanRef.current = {
-          x: t0.clientX,
-          y: t0.clientY
-        };
-      }
-    },
-    [disabled, onZoomStart]
-  );
-  const handleTouchMove = useCallback(
-    (e) => {
-      if (disabled) return;
-      const touches = e.touches;
-      if (touches.length === 2) {
-        const t0 = touches[0];
-        const t1 = touches[1];
-        if (!t0 || !t1) return;
-        e.preventDefault();
-        const distance = getTouchDistance(t0, t1);
-        if (!pinchActivatedRef.current && Math.abs(distance - initialDistanceRef.current) < PINCH_THRESHOLD) {
-          return;
-        }
-        pinchActivatedRef.current = true;
-        const ratio = distance / initialDistanceRef.current;
-        const newScale = clamp(baseScaleRef.current * ratio, minScale, maxScale);
-        const container = containerRef.current;
-        if (container) {
-          const rect = container.getBoundingClientRect();
-          const midpoint = getTouchMidpoint(t0, t1);
-          const centerX = rect.left + rect.width / 2;
-          const centerY = rect.top + rect.height / 2;
-          const offsetX = (midpoint.x - centerX) / newScale;
-          const offsetY = (midpoint.y - centerY) / newScale;
-          const scaleDelta = newScale - scaleRef.current;
-          const newTx = txRef.current - offsetX * scaleDelta / newScale;
-          const newTy = tyRef.current - offsetY * scaleDelta / newScale;
-          const clamped = clampTranslation(newTx, newTy, newScale);
-          txRef.current = clamped.x;
-          tyRef.current = clamped.y;
-        }
-        scaleRef.current = newScale;
-        applyTransform(newScale, txRef.current, tyRef.current);
-        return;
-      }
-      if (touches.length === 1 && isPanningRef.current && lastPanRef.current) {
-        const t0 = touches[0];
-        if (!t0) return;
-        e.preventDefault();
-        const dx = (t0.clientX - lastPanRef.current.x) / scaleRef.current;
-        const dy = (t0.clientY - lastPanRef.current.y) / scaleRef.current;
-        lastPanRef.current = {
-          x: t0.clientX,
-          y: t0.clientY
-        };
-        const newTx = txRef.current + dx;
-        const newTy = tyRef.current + dy;
-        const clamped = clampTranslation(newTx, newTy, scaleRef.current);
-        txRef.current = clamped.x;
-        tyRef.current = clamped.y;
-        applyTransform(scaleRef.current, clamped.x, clamped.y);
-      }
-    },
-    [disabled, minScale, maxScale, containerRef, applyTransform, clampTranslation]
-  );
-  const handleTouchEnd = useCallback(
-    (e) => {
-      if (disabled) return;
-      const touches = e.touches;
-      if (touches.length === 0) {
-        isPanningRef.current = false;
-        lastPanRef.current = null;
-        if (scaleRef.current < ZOOM_THRESHOLD) {
-          scaleRef.current = 1;
-          txRef.current = 0;
-          tyRef.current = 0;
-          applyTransform(1, 0, 0);
-        }
-        setScale(scaleRef.current);
-        setTranslateX(txRef.current);
-        setTranslateY(tyRef.current);
-        setIsPinching(false);
-        onZoomEnd?.(scaleRef.current);
-        return;
-      }
-      if (touches.length === 1 && scaleRef.current > ZOOM_THRESHOLD) {
-        const t0 = touches[0];
-        if (!t0) return;
-        isPanningRef.current = true;
-        lastPanRef.current = {
-          x: t0.clientX,
-          y: t0.clientY
-        };
-        setIsPinching(false);
-      }
-    },
-    [disabled, applyTransform, onZoomEnd]
-  );
-  const resetZoom = useCallback(() => {
-    if (scaleRef.current <= 1 && txRef.current === 0 && tyRef.current === 0) {
-      return;
-    }
-    isAnimatingRef.current = true;
-    scaleRef.current = 1;
-    txRef.current = 0;
-    tyRef.current = 0;
-    setScale(1);
-    setTranslateX(0);
-    setTranslateY(0);
-    const el = contentElementRef.current ?? containerRef.current?.firstElementChild;
-    if (el instanceof HTMLElement) {
-      el.style.transition = `transform ${RESET_ANIMATION_MS}ms ease-out`;
-      el.style.transform = "scale(1) translate(0px, 0px)";
-      setTimeout(() => {
-        el.style.transition = "";
-        isAnimatingRef.current = false;
-      }, RESET_ANIMATION_MS);
-    } else {
-      isAnimatingRef.current = false;
-    }
-    onZoomReset?.();
-  }, [containerRef, onZoomReset]);
-  const isZoomed = scale > ZOOM_THRESHOLD;
-  const contentStyle = {
-    transform: scale !== 1 || translateX !== 0 || translateY !== 0 ? `scale(${scale}) translate(${translateX}px, ${translateY}px)` : void 0,
-    transformOrigin: "center center",
-    willChange: isZoomed || isPinching ? "transform" : void 0,
-    touchAction: isZoomed ? "none" : void 0
-  };
-  const handlers = {
-    onTouchStart: handleTouchStart,
-    onTouchMove: handleTouchMove,
-    onTouchEnd: handleTouchEnd
-  };
-  return {
-    handlers,
-    contentStyle,
-    isZoomed,
-    isPinching,
-    resetZoom,
-    scale
-  };
-}
-
-export { usePinchZoom };

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

@@ -1,39 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface ZoomableContainerProps {
-    /** Content to make zoomable */
-    children: ReactNode;
-    /** When this value changes, zoom resets to 1x (e.g., video index) */
-    resetOnChange?: unknown;
-    /** Minimum scale (default: 1) */
-    minScale?: number;
-    /** Maximum scale (default: 3) */
-    maxScale?: number;
-    /** Whether zoom is disabled (default: false) */
-    disabled?: boolean;
-    /** Called when zoom gesture starts */
-    onZoomStart?: () => void;
-    /** Called when zoom gesture ends */
-    onZoomEnd?: (scale: number) => void;
-    /** Called when zoom resets */
-    onZoomReset?: () => void;
-    /** Called when zoomed state changes (for parent to disable tap/swipe) */
-    onZoomedChange?: (isZoomed: boolean) => void;
-    /** Additional class name */
-    className?: string;
-    /** Test ID */
-    testId?: string;
-}
-declare function ZoomableContainerBase({ children, resetOnChange, minScale, maxScale, disabled, onZoomStart, onZoomEnd, onZoomReset, onZoomedChange, className, testId, }: ZoomableContainerProps): React.ReactElement;
-declare const ZoomableContainer: react.MemoExoticComponent<typeof ZoomableContainerBase>;
-
-/**
- * ZoomableContainer CSS
- *
- * Styles for the pinch-to-zoom container.
- * Uses CSS-in-TS pattern consistent with other components.
- */
-declare const ZOOMABLE_CONTAINER_CSS = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ZoomableContainer\n * Wraps content to enable pinch-to-zoom gesture\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.sv-zoomable-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Prevent browser's default pinch-zoom on the container */\n  touch-action: pan-y;\n}\n\n/* When zoomed, take full touch control */\n.sv-zoomable-container--zoomed {\n  touch-action: none;\n}\n\n/* Content wrapper that receives the transform */\n.sv-zoomable-container__content {\n  width: 100%;\n  height: 100%;\n  transform-origin: center center;\n}\n\n/* GPU acceleration during gesture */\n.sv-zoomable-container--active .sv-zoomable-container__content {\n  will-change: transform;\n}\n";
-
-export { ZOOMABLE_CONTAINER_CSS, ZoomableContainer, type ZoomableContainerProps };

package/dist/components/ZoomableContainer/index.js

@@ -1 +0,0 @@
-export { ZOOMABLE_CONTAINER_CSS, ZoomableContainer } from '../../chunk-TJCPW4AO.js';