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

package/dist/{chunk-MMTAPG2C.js → chunk-4YDIRPIN.js}

@@ -197,5 +197,11 @@ function VerifiedIcon(props) {
     )
   ] });
 }
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { ...getIconProps({ ...props, fill: "none", stroke: "currentColor" }), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19", strokeWidth: "2.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12", strokeWidth: "2.5", strokeLinecap: "round" })
+  ] });
+}
 
-export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon };
+export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon };

package/dist/{chunk-OXY5JHVJ.js → chunk-ANGBSV7L.js}

@@ -15,7 +15,7 @@ var ACTION_BAR_CSS = (
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--sv-action-bar-gap, 16px);
+  gap: var(--sv-action-bar-gap, 12px);
   padding: var(--sv-action-bar-padding, 8px 0);
 }
 
@@ -77,10 +77,11 @@ var ACTION_BAR_CSS = (
   transform: none;
 }
 
-/* Pending state (API call in progress) */
+/* Pending state - No visual change, debounce handles rapid clicks */
+/* Button remains fully interactive for smooth UX like TikTok/Instagram */
 .sv-action-button--pending {
-  opacity: var(--sv-action-button-pending-opacity, 0.6);
-  pointer-events: none;
+  /* No opacity change - keep button fully visible */
+  /* No pointer-events:none - allow continuous clicks */
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
@@ -323,11 +324,11 @@ function ActionButton({
   const handleClick = useCallback(
     (e) => {
       e.stopPropagation();
-      if (!disabled && !isPending && onClick) {
+      if (!disabled && onClick) {
         onClick();
       }
     },
-    [disabled, isPending, onClick]
+    [disabled, onClick]
   );
   const handlePointerDown = useCallback((e) => {
     e.stopPropagation();
@@ -335,16 +336,25 @@ function ActionButton({
   const handlePointerUp = useCallback((e) => {
     e.stopPropagation();
   }, []);
+  const handleTouchEnd = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (!disabled && onClick) {
+        onClick();
+      }
+    },
+    [disabled, onClick]
+  );
   const handleKeyDown = useCallback(
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        if (!disabled && !isPending && onClick) {
+        if (!disabled && onClick) {
           onClick();
         }
       }
     },
-    [disabled, isPending, onClick]
+    [disabled, onClick]
   );
   const formatter = customFormatCount ?? formatCount;
   const formattedCount = count !== void 0 ? formatter(count) : null;
@@ -368,8 +378,9 @@ function ActionButton({
       onClick: handleClick,
       onPointerDown: handlePointerDown,
       onPointerUp: handlePointerUp,
+      onTouchEnd: handleTouchEnd,
       onKeyDown: handleKeyDown,
-      disabled: disabled || isPending,
+      disabled,
       "aria-label": ariaLabel,
       "aria-pressed": isActive,
       "data-testid": testId,

package/dist/chunk-DHQJBXQW.js

@@ -0,0 +1,562 @@
+import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
+import { clsx } from 'clsx';
+import { createContext, useInsertionEffect, useMemo, useState, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var VideoInfoContext = createContext(void 0);
+function useVideoInfoContext() {
+  const context = useContext(VideoInfoContext);
+  if (context === void 0) {
+    throw new Error("useVideoInfoContext must be used within a VideoInfoHeadless component");
+  }
+  return context;
+}
+function useOptionalVideoInfoContext() {
+  return useContext(VideoInfoContext);
+}
+function DefaultVerifiedIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }) });
+}
+function VideoAuthorName({
+  name,
+  showAtPrefix = true,
+  showVerified = true,
+  isVerified,
+  verifiedIcon,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const authorName = name ?? context?.state.authorName;
+  const verified = isVerified ?? context?.state.isVerified ?? false;
+  const handleClick = onClick ?? context?.actions.openProfile;
+  if (!authorName) {
+    return null;
+  }
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info__author", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View ${authorName}'s profile` : void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "sv-video-info__author-name", children: [
+          showAtPrefix && /* @__PURE__ */ jsx("span", { className: "sv-video-info__author-prefix", children: "@" }),
+          authorName
+        ] }),
+        showVerified && verified && /* @__PURE__ */ jsx("span", { className: "sv-video-info__verified-badge", "aria-label": "Verified", children: verifiedIcon ?? /* @__PURE__ */ jsx(DefaultVerifiedIcon, {}) })
+      ] })
+    }
+  );
+}
+function VideoCaption({
+  caption,
+  maxLines = 2,
+  expandable = false,
+  moreText = "more",
+  lessText = "less",
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const captionText = caption ?? context?.state.caption;
+  if (!captionText) {
+    return null;
+  }
+  const lineClampClass = isExpanded ? "sv-video-info__caption--expanded" : `sv-video-info__caption--lines-${maxLines}`;
+  const handleToggleExpand = (e) => {
+    e.stopPropagation();
+    setIsExpanded(!isExpanded);
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-video-info__caption", lineClampClass, className), children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    captionText,
+    expandable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sv-video-info__caption-more",
+        onClick: handleToggleExpand,
+        children: isExpanded ? lessText : moreText
+      }
+    )
+  ] }) });
+}
+function VideoHashtags({
+  hashtags,
+  clickable = true,
+  onHashtagClick,
+  display = "block",
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const hashtagsArray = hashtags ?? context?.state.hashtags ?? [];
+  const handleClick = onHashtagClick ?? context?.actions.onHashtagClick;
+  if (hashtagsArray.length === 0) {
+    return null;
+  }
+  const handleHashtagClick = (tag) => (e) => {
+    e.stopPropagation();
+    if (clickable && handleClick) {
+      handleClick(tag);
+    }
+  };
+  const handleKeyDown = (tag) => (e) => {
+    if ((e.key === "Enter" || e.key === " ") && clickable && handleClick) {
+      e.preventDefault();
+      handleClick(tag);
+    }
+  };
+  const formatTag = (tag) => tag.startsWith("#") ? tag : `#${tag}`;
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "sv-video-info__hashtags",
+        display === "inline" && "sv-video-info__hashtags--inline",
+        className
+      ),
+      children: hashtagsArray.map((tag) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: clsx(
+            "sv-video-info__hashtag",
+            !clickable && "sv-video-info__hashtag--not-clickable"
+          ),
+          onClick: handleHashtagClick(tag),
+          onKeyDown: handleKeyDown(tag),
+          tabIndex: clickable ? 0 : -1,
+          "aria-label": clickable ? `View hashtag ${tag}` : void 0,
+          children: formatTag(tag)
+        },
+        tag
+      ))
+    }
+  );
+}
+
+// src/components/VideoInfo/VideoInfo.css.ts
+var VIDEO_INFO_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
+ * VideoInfo Container
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.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, 0.5));
+  max-width: 100%;
+  overflow: hidden;
+}
+
+/* Overlay variant (on top of video) */
+.sv-video-info--overlay {
+  pointer-events: none;
+}
+
+.sv-video-info--overlay > * {
+  pointer-events: auto;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Author Name
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-video-info__author {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-video-info-author-gap, 6px);
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.sv-video-info__author:hover {
+  opacity: 0.85;
+}
+
+.sv-video-info__author:active {
+  opacity: 0.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: 0.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: 700;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Caption
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-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;
+}
+
+/* "more" button for expandable caption */
+.sv-video-info__caption-more {
+  background: none;
+  border: none;
+  color: var(--sv-video-info-caption-more-color, rgba(255, 255, 255, 0.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);
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Hashtags
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-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);
+}
+
+/* Inline variant - more compact */
+.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: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+  white-space: nowrap;
+}
+
+.sv-video-info__hashtag:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.sv-video-info__hashtag--not-clickable {
+  cursor: default;
+}
+
+.sv-video-info__hashtag--not-clickable:hover {
+  opacity: 1;
+  text-decoration: none;
+}
+
+/* Inline hashtags (inside caption) */
+.sv-video-info__caption .sv-video-info__hashtag {
+  display: inline;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Location
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-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, 0.9));
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.sv-video-info__location:hover {
+  opacity: 0.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;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Music
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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-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 0.15s ease;
+  overflow: hidden;
+}
+
+.sv-video-info__music:hover {
+  opacity: 0.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;
+  /* Marquee animation for long text */
+}
+
+/* Marquee animation for music text */
+.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}" });
+}
+function VideoLocation({
+  location,
+  icon,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const locationText = location ?? context?.state.location;
+  const handleClick = onClick ?? context?.actions.onLocationClick;
+  if (!locationText) {
+    return null;
+  }
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info__location", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View location: ${locationText}` : void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon ?? /* @__PURE__ */ jsx(DefaultLocationIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sv-video-info__location-text", children: locationText })
+      ] })
+    }
+  );
+}
+function DefaultMusicIcon() {
+  return /* @__PURE__ */ jsx("span", { className: "sv-video-info__music-icon", children: "\u{1F3B5}" });
+}
+function VideoMusic({
+  title,
+  artist,
+  icon,
+  marquee = false,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const musicTitle = title ?? context?.state.music?.title;
+  const musicArtist = artist ?? context?.state.music?.artist;
+  const handleClick = onClick ?? context?.actions.onMusicClick;
+  if (!musicTitle && !musicArtist) {
+    return null;
+  }
+  const displayText = musicArtist ? `${musicTitle} - ${musicArtist}` : musicTitle;
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info__music", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View sound: ${displayText}` : void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon ?? /* @__PURE__ */ jsx(DefaultMusicIcon, {}),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "sv-video-info__music-text",
+              marquee && "sv-video-info__music-text--marquee"
+            ),
+            children: displayText
+          }
+        )
+      ] })
+    }
+  );
+}
+function VideoInfoHeadlessRoot({
+  videoInfoState,
+  videoInfoActions,
+  overlay = false,
+  className,
+  children,
+  testId
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("video-info", VIDEO_INFO_CSS);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      state: videoInfoState,
+      actions: videoInfoActions
+    }),
+    [videoInfoState, videoInfoActions]
+  );
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(VideoInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info", overlay && "sv-video-info--overlay", className),
+      onClick: stopPropagation,
+      onKeyDown: stopPropagation,
+      onPointerDown: stopPropagation,
+      onPointerUp: stopPropagation,
+      onTouchStart: stopPropagation,
+      onTouchEnd: stopPropagation,
+      "data-testid": testId,
+      children: children ?? // Default layout
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(VideoAuthorName, { showAtPrefix: true, showVerified: true }),
+        /* @__PURE__ */ jsx(VideoCaption, { maxLines: 2 }),
+        /* @__PURE__ */ jsx(VideoHashtags, { clickable: true })
+      ] })
+    }
+  ) });
+}
+function VideoInfoContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-video-info__content", className), children });
+}
+var VideoInfoHeadless = Object.assign(VideoInfoHeadlessRoot, {
+  /** Author name with @ prefix and verified badge */
+  AuthorName: VideoAuthorName,
+  /** Video caption/title with line clamping */
+  Caption: VideoCaption,
+  /** Hashtags (inline or block) */
+  Hashtags: VideoHashtags,
+  /** Location info */
+  Location: VideoLocation,
+  /** Music/sound info */
+  Music: VideoMusic,
+  /** Content wrapper */
+  Content: VideoInfoContent
+});
+
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext };