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

package/dist/chunk-5Y43HNRG.js

@@ -0,0 +1,296 @@
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { BottomSheetHeadless } from './chunk-UYBQTE4M.js';
+import { clsx } from 'clsx';
+import { memo, useRef, useEffect, useState } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isVideoItem, isImagePost } from '@xhub-short/contracts';
+
+// src/components/Playlist/PlaylistBar.css.ts
+var PLAYLIST_BAR_CSS = `.sv-playlist-bar-container{display:flex;align-items:center;justify-content:space-between;position:fixed;bottom:0;left:12px;right:12px;z-index:60;padding:var(--sv-spacing-sm,8px)var(--sv-spacing-md,12px);background-color:var(--sv-playlist-bar-bg,rgba(255,255,255,.15));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--sv-radius-md,10px);color:var(--sv-text-primary,#fff);font-family:var(--sv-font-family,system-ui,sans-serif);font-size:var(--sv-text-sm,13px);cursor:pointer;user-select:none;overflow:hidden;transition:background-color .2s,opacity .3s cubic-bezier(.4,0,.2,1),transform .3s ease;border:1px solid rgba(255,255,255,.1);box-sizing:border-box;box-shadow:0 4px 12px rgba(0,0,0,.2)}.sv-playlist-bar-container--hidden{opacity:0 !important;pointer-events:none !important}.sv-playlist-bar-container:active{background-color:var(--sv-playlist-bar-bg-active,rgba(255,255,255,.2))}.sv-playlist-bar-content{display:flex;align-items:center;flex:1;min-width:0;gap:var(--sv-spacing-xs,4px)}.sv-playlist-bar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin-right:4px;opacity:.9}.sv-playlist-bar-text{display:flex;align-items:center;overflow:hidden;white-space:nowrap;flex:1}.sv-playlist-bar-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;margin-right:4px;transition:opacity .3s ease,transform .3s ease;display:block}.sv-playlist-bar-title--entering{opacity:0;transform:translateY(5px)}.sv-playlist-bar-title--active{opacity:1;transform:translateY(0)}.sv-playlist-bar-title--exiting{opacity:0;transform:translateY(-5px)}.sv-playlist-bar-label{opacity:.7;font-weight:normal}.sv-playlist-bar-separator{opacity:.4;margin:0 4px}.sv-playlist-bar-counter{font-variant-numeric:tabular-nums;opacity:.7;font-size:.9em;white-space:nowrap}.sv-playlist-bar-arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px;opacity:.6}`;
+injectComponentCSS("sv-playlist-bar", PLAYLIST_BAR_CSS);
+function PlaylistBarHeadless({
+  title,
+  currentIndex,
+  totalItems,
+  onClick,
+  className,
+  style,
+  icon,
+  arrowIcon,
+  onNext,
+  label,
+  isVisible = true
+}) {
+  const [displayTitle, setDisplayTitle] = useState(title);
+  const [animState, setAnimState] = useState("active");
+  useEffect(() => {
+    let timer;
+    if (title !== displayTitle) {
+      setAnimState("exiting");
+      timer = setTimeout(() => {
+        setDisplayTitle(title);
+        setAnimState("entering");
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setAnimState("active");
+          });
+        });
+      }, 300);
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [title, displayTitle]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "sv-playlist-bar-container",
+        !isVisible && "sv-playlist-bar-container--hidden",
+        className
+      ),
+      style,
+      onClick,
+      "aria-label": `Playlist: ${title}, item ${currentIndex} of ${totalItems}`,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          onClick?.();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sv-playlist-bar-content", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "sv-playlist-bar-icon", children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: "sv-playlist-bar-text", children: [
+            label && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "sv-playlist-bar-label", children: label }),
+              /* @__PURE__ */ jsx("span", { className: "sv-playlist-bar-separator", children: "\u2022" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: clsx("sv-playlist-bar-title", `sv-playlist-bar-title--${animState}`), children: displayTitle })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "sv-playlist-bar-separator", children: "|" }),
+          /* @__PURE__ */ jsxs("span", { className: "sv-playlist-bar-counter", children: [
+            currentIndex,
+            "/",
+            totalItems
+          ] })
+        ] }),
+        arrowIcon && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "sv-playlist-bar-next-btn",
+            onClick: (e) => {
+              e.stopPropagation();
+              onNext?.();
+            },
+            "aria-label": "Next video",
+            style: {
+              background: "none",
+              border: "none",
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              cursor: "pointer",
+              color: "inherit"
+            },
+            children: /* @__PURE__ */ jsx("span", { className: "sv-playlist-bar-arrow", children: arrowIcon })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Playlist/PlaylistSheet.css.ts
+var PLAYLIST_SHEET_CSS = `:root{--sv-playlist-sheet-bg:#1a1a1a;--sv-playlist-sheet-text:#fff;--sv-playlist-sheet-item-bg-active:rgba(255,255,255,.1);--sv-playlist-sheet-divider:rgba(255,255,255,.1);--sv-playlist-sheet-thumb-width:80px;--sv-playlist-sheet-thumb-height:106px}.sv-playlist-sheet{--sv-sheet-bg:var(--sv-playlist-sheet-bg);--sv-sheet-handle-bg:rgba(255,255,255,.2);background:var(--sv-sheet-bg);color:var(--sv-playlist-sheet-text);z-index:51}.sv-playlist-sheet-backdrop{z-index:50}.sv-playlist-sheet__header{padding:16px 20px;border-bottom:1px solid var(--sv-playlist-sheet-divider);display:flex;align-items:center;justify-content:space-between}.sv-playlist-sheet__title{font-size:16px;font-weight:600;margin:0}.sv-playlist-sheet__list{padding:8px 0;max-height:55vh;overflow-y:auto}.sv-playlist-sheet__item{display:flex;padding:12px 20px;gap:12px;cursor:pointer;transition:background-color .2s ease;outline:none}.sv-playlist-sheet__item:hover,.sv-playlist-sheet__item:focus{background-color:rgba(255,255,255,.05)}.sv-playlist-sheet__item--active{background-color:var(--sv-playlist-sheet-item-bg-active)}.sv-playlist-sheet__thumb-container{width:var(--sv-playlist-sheet-thumb-width);height:var(--sv-playlist-sheet-thumb-height);flex-shrink:0;background:#000;border-radius:8px;overflow:hidden;position:relative}.sv-playlist-sheet__thumb{width:100%;height:100%;object-fit:cover}.sv-playlist-sheet__duration{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 4px;border-radius:4px}.sv-playlist-sheet__info{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}.sv-playlist-sheet__item-title{font-size:14px;line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.sv-playlist-sheet__item-meta{font-size:12px;color:rgba(255,255,255,.6)}.sv-playlist-sheet__empty{padding:60px 20px;text-align:center;color:rgba(255,255,255,.4);font-size:14px}`;
+injectComponentCSS("sv-playlist-sheet", PLAYLIST_SHEET_CSS);
+function PlaylistSheetHeadlessComponent({
+  isOpen,
+  onClose,
+  items,
+  currentIndex,
+  activeId,
+  onItemSelect,
+  className,
+  translations,
+  headerAccessory,
+  onGestureLock
+}) {
+  const listRef = useRef(null);
+  const activeItemRef = useRef(null);
+  useEffect(() => {
+    if (isOpen && activeItemRef.current) {
+      const timer = setTimeout(() => {
+        activeItemRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    return;
+  }, [isOpen]);
+  const renderThumbnail = (item) => {
+    if (isVideoItem(item)) {
+      return /* @__PURE__ */ jsxs("div", { className: "sv-playlist-sheet__thumb-container", children: [
+        item.poster && /* @__PURE__ */ jsx("img", { src: item.poster, alt: "", className: "sv-playlist-sheet__thumb", loading: "lazy" }),
+        item.duration > 0 && /* @__PURE__ */ jsx("span", { className: "sv-playlist-sheet__duration", children: formatDuration(item.duration) })
+      ] });
+    }
+    if (isImagePost(item)) {
+      return /* @__PURE__ */ jsxs("div", { className: "sv-playlist-sheet__thumb-container", children: [
+        item.images[0] && /* @__PURE__ */ jsx("img", { src: item.images[0], alt: "", className: "sv-playlist-sheet__thumb", loading: "lazy" }),
+        /* @__PURE__ */ jsx("span", { className: "sv-playlist-sheet__duration", children: item.images.length })
+      ] });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "sv-playlist-sheet__thumb-container" });
+  };
+  return /* @__PURE__ */ jsxs(
+    BottomSheetHeadless,
+    {
+      isOpen,
+      onClose,
+      className: clsx("sv-playlist-sheet", className),
+      backdropClassName: "sv-playlist-sheet-backdrop",
+      contentClassName: "sv-playlist-sheet__content",
+      height: "80vh",
+      ariaLabel: translations.title,
+      dragHandleSelector: ".sv-playlist-sheet__header",
+      scrollContainerSelector: ".sv-playlist-sheet__list",
+      onGestureLock,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sv-playlist-sheet__header", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "sv-playlist-sheet__title", children: [
+            translations.title,
+            " (",
+            items.length,
+            ")"
+          ] }),
+          headerAccessory
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "sv-playlist-sheet__list", ref: listRef, children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "sv-playlist-sheet__empty", children: translations.emptyState }) : items.map((item, index) => {
+          const isActive = item.id === activeId || index === currentIndex;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: isActive ? activeItemRef : null,
+              className: clsx("sv-playlist-sheet__item", {
+                "sv-playlist-sheet__item--active": isActive
+              }),
+              onClick: () => onItemSelect(index),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  onItemSelect(index);
+                }
+              },
+              "aria-pressed": isActive,
+              children: [
+                renderThumbnail(item),
+                /* @__PURE__ */ jsxs("div", { className: "sv-playlist-sheet__info", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sv-playlist-sheet__item-title", children: isVideoItem(item) ? item.title : item.caption }),
+                  /* @__PURE__ */ jsxs("span", { className: "sv-playlist-sheet__item-meta", children: [
+                    item.author.name,
+                    isActive && translations.nowPlaying && ` \u2022 ${translations.nowPlaying}`
+                  ] })
+                ] })
+              ]
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+var PlaylistSheetHeadless = memo(PlaylistSheetHeadlessComponent);
+PlaylistSheetHeadless.displayName = "PlaylistSheetHeadless";
+
+// src/components/Playlist/PlaylistCollection.css.ts
+var PLAYLIST_COLLECTION_CSS = `.sv-playlist-collection{height:100%;width:100%;padding:16px;box-sizing:border-box;color:#fff;overflow-y:auto}.sv-playlist-collection__title{font-size:20px;font-weight:bold;margin-bottom:16px;line-height:1.2}.sv-playlist-collection__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:768px){.sv-playlist-collection__grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.sv-playlist-collection__grid{grid-template-columns:repeat(4,1fr)}}.sv-playlist-collection__list{display:flex;flex-direction:column;gap:12px}.sv-playlist-collection__item{display:flex;flex-direction:column;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 150ms cubic-bezier(.2,0,0,1.0)}.sv-playlist-collection__item:active{transform:scale(.98)}.sv-playlist-collection__list .sv-playlist-collection__item{flex-direction:row;align-items:center;gap:12px}.sv-playlist-collection__thumb-wrapper{position:relative;width:100%;aspect-ratio:9 / 16;border-radius:8px;overflow:hidden;background-color:#1a1a1a}.sv-playlist-collection__list .sv-playlist-collection__thumb-wrapper{width:80px;flex-shrink:0}.sv-playlist-collection__thumb{width:100%;height:100%;object-fit:cover}.sv-playlist-collection__item-count{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600}.sv-playlist-collection__info{margin-top:8px;display:flex;flex-direction:column;gap:2px}.sv-playlist-collection__list .sv-playlist-collection__info{margin-top:0;flex:1}.sv-playlist-collection__item-title{font-size:14px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.sv-playlist-collection__item-meta{font-size:12px;color:rgba(255,255,255,.6)}.sv-playlist-collection__skeleton{background:linear-gradient(90deg,#1a1a1a 25%,#262626 50%,#1a1a1a 75%);background-size:200% 100%;animation:sv-skeleton-pulse 1.5s infinite ease-in-out}@keyframes sv-skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}.sv-playlist-collection__skeleton-info{margin-top:8px;display:flex;flex-direction:column;gap:8px}.sv-playlist-collection__skeleton-line{height:12px;border-radius:4px;width:100%}.sv-playlist-collection__skeleton-line--short{width:60%}.sv-playlist-collection__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:16px}.sv-playlist-collection__empty-title{font-size:18px;font-weight:600;color:#fff}.sv-playlist-collection__empty-desc{font-size:14px;color:rgba(255,255,255,.6);max-width:240px}.sv-playlist-collection__empty-button{margin-top:8px}`;
+injectComponentCSS("sv-playlist-collection", PLAYLIST_COLLECTION_CSS);
+function PlaylistCollectionHeadlessComponent({
+  playlists,
+  viewType = "grid",
+  isLoading = false,
+  onSelect,
+  className,
+  translations,
+  renderEmptyButton
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx("sv-playlist-collection", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__title", children: translations.title }),
+      /* @__PURE__ */ jsx("div", { className: clsx(`sv-playlist-collection__${viewType}`), children: [0, 1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsxs("div", { className: "sv-playlist-collection__item", children: [
+        /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__thumb-wrapper sv-playlist-collection__skeleton" }),
+        /* @__PURE__ */ jsxs("div", { className: "sv-playlist-collection__skeleton-info", children: [
+          /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__skeleton-line sv-playlist-collection__skeleton" }),
+          /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__skeleton-line sv-playlist-collection__skeleton-line--short sv-playlist-collection__skeleton" })
+        ] })
+      ] }, `skeleton-${i}`)) })
+    ] });
+  }
+  if (playlists.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: clsx("sv-playlist-collection", className), children: /* @__PURE__ */ jsxs("div", { className: "sv-playlist-collection__empty", children: [
+      /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__empty-title", children: translations.emptyTitle }),
+      /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__empty-desc", children: translations.emptyDesc }),
+      renderEmptyButton ? /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__empty-button", children: renderEmptyButton() }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sv-playlist-collection__empty-button",
+          onClick: () => window.location.reload(),
+          children: translations.retryButton
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx("sv-playlist-collection", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__title", children: translations.title }),
+    /* @__PURE__ */ jsx("div", { className: clsx(`sv-playlist-collection__${viewType}`), children: playlists.map((playlist) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "sv-playlist-collection__item",
+        onClick: () => onSelect(playlist.id),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            onSelect(playlist.id);
+          }
+        },
+        "aria-label": playlist.title,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "sv-playlist-collection__thumb-wrapper", children: [
+            playlist.thumbnail && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: playlist.thumbnail,
+                alt: "",
+                className: "sv-playlist-collection__thumb",
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__item-count", children: translations.itemsCount(playlist.itemCount) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "sv-playlist-collection__info", children: [
+            /* @__PURE__ */ jsx("div", { className: "sv-playlist-collection__item-title", children: playlist.title }),
+            playlist.authorName && /* @__PURE__ */ jsxs("div", { className: "sv-playlist-collection__item-meta", children: [
+              playlist.authorName,
+              " ",
+              playlist.updatedAt ? `\u2022 ${playlist.updatedAt}` : ""
+            ] })
+          ] })
+        ]
+      },
+      playlist.id
+    )) })
+  ] });
+}
+var PlaylistCollectionHeadless = memo(PlaylistCollectionHeadlessComponent);
+PlaylistCollectionHeadless.displayName = "PlaylistCollectionHeadless";
+
+export { PlaylistBarHeadless, PlaylistCollectionHeadless, PlaylistSheetHeadless };

package/dist/chunk-7WXAQHJI.js

@@ -0,0 +1,350 @@
+import { injectComponentCSS } from './chunk-CAWE42LH.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",
+  onClick,
+  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);
+  };
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+  const isClickable = onClick && !expandable;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "sv-video-info__caption",
+        lineClampClass,
+        isClickable && "sv-video-info__caption--clickable",
+        className
+      ),
+      onClick: isClickable ? handleClick : void 0,
+      onKeyDown: isClickable ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.stopPropagation();
+          onClick?.();
+        }
+      } : void 0,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      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 = `.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}" });
+}
+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,
+  isVisible = true,
+  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",
+        !isVisible && "sv-video-info--hidden",
+        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 };