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

package/dist/{chunk-XAOEHLOX.js → chunk-XDIH66C4.js}

@@ -1,7 +1,7 @@
-import { HeartFilledIcon } from './chunk-4YDIRPIN.js';
-import { cn } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-import { createContext, memo, useEffect, useRef, useCallback, useContext, useInsertionEffect, useState, useMemo } from 'react';
+import { PauseIcon, PlayIcon, HeartFilledIcon } from './chunk-ANCP53F3.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { createContext, memo, useMemo, useState, useCallback, useEffect, useRef, useInsertionEffect, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DEFAULT_DOUBLE_TAP_DELAY = 300;
@@ -21,6 +21,7 @@ function useDoubleTap({
   const lastPositionRef = useRef({ x: 50, y: 50 });
   const lastExecutionTimeRef = useRef(0);
   const pointerStartRef = useRef(null);
+  const cumulativeMovementRef = useRef(0);
   useEffect(() => {
     return () => {
       if (tapTimeoutRef.current) {
@@ -72,6 +73,9 @@ function useDoubleTap({
   }, [disabled, doubleTapDelay, onSingleTap, onDoubleTap]);
   const isSwipe = useCallback(
     (clientX, clientY) => {
+      if (cumulativeMovementRef.current > movementThreshold * 2) {
+        return true;
+      }
       const start = pointerStartRef.current;
       if (!start) return false;
       const dx = Math.abs(clientX - start.x);
@@ -101,6 +105,11 @@ function useDoubleTap({
   const handlePointerDown = useCallback((e) => {
     if (e.button !== 0) return;
     pointerStartRef.current = { x: e.clientX, y: e.clientY };
+    cumulativeMovementRef.current = 0;
+  }, []);
+  const handlePointerMove = useCallback((e) => {
+    if (!pointerStartRef.current) return;
+    cumulativeMovementRef.current += Math.abs(e.movementX) + Math.abs(e.movementY);
   }, []);
   const handlePointerUp = useCallback(
     (e) => {
@@ -120,6 +129,7 @@ function useDoubleTap({
   return {
     handlers: {
       onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
       onClick: handleClick
     },
@@ -133,17 +143,18 @@ var VIDEO_SLOT_CSS = `
  * Z-INDEX LAYERING CONTRACT
  * 
  * Override these variables to customize layer stacking:
- * --sv-z-poster:    Poster/Video layer (default: 1)
- * --sv-z-overlay:   Overlay/Spinner layer (default: 2)
- * --sv-z-indicator: Error/Play indicator layer (default: 3)
- * --sv-z-progress:  Progress bar layer (default: 4)
+ * --sv-z-poster:       Poster/Thumbnail layer (default: 3)
+ * --sv-z-slot-spinner: Loading spinner layer (default: 2)
+ * --sv-z-indicator:    Error/Play indicator layer (default: 4)
+ * --sv-z-progress:     Progress bar layer (default: 5)
  *
  * Layer Stack (bottom to top):
  * \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
- * \u2502  z-index: 4 - Progress Bar (topmost)        \u2502
- * \u2502  z-index: 3 - Error UI / Play Indicator     \u2502
- * \u2502  z-index: 2 - Overlay / Spinner             \u2502
- * \u2502  z-index: 1 - Poster / Video                \u2502
+ * \u2502  z-index: 5 - Progress Bar (topmost)        \u2502
+ * \u2502  z-index: 4 - Error UI / Play Indicator     \u2502
+ * \u2502  z-index: 3 - Poster / Thumbnail            \u2502
+ * \u2502  z-index: 2 - Loading Spinner               \u2502
+ * \u2502  z-index: 1 - Video Element                 \u2502
  * \u2502  z-index: 0 - Slot Container (base)         \u2502
  * \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
  * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
@@ -249,7 +260,8 @@ var VIDEO_SLOT_CSS = `
   align-items: center;
   justify-content: center;
   background-color: var(--sv-bg-primary, #000);
-  z-index: var(--sv-z-poster, 1);
+  /* Poster should be ABOVE spinner (z-index: 2) so thumbnail shows instead of spinner */
+  z-index: var(--sv-z-poster, 3);
   /* Smooth fade transition */
   transition: opacity var(--sv-transition-duration, 300ms) ease-out;
   pointer-events: none;
@@ -453,7 +465,8 @@ var VIDEO_SLOT_CSS = `
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: var(--sv-z-overlay, 2);
+  /* Use slot-specific z-index (not global --sv-z-overlay which may conflict) */
+  z-index: var(--sv-z-slot-spinner, 2);
 }
 
 .sv-video-slot__spinner-circle {
@@ -485,20 +498,29 @@ var VIDEO_SLOT_CSS = `
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   z-index: var(--sv-z-indicator, 3);
   opacity: 0;
-  transition: opacity 200ms ease;
+  transition: opacity 200ms ease-out;
   pointer-events: none;
 }
 
+/* Show indicator */
 .sv-video-slot__play-indicator--visible {
-  opacity: 1;
-  animation: sv-slot-play-indicator 400ms ease-out forwards;
+  opacity: 0.65;
 }
 
-@keyframes sv-slot-play-indicator {
+/* Persist mode: stay visible, no animation */
+.sv-video-slot__play-indicator--persist {
+  opacity: 0.65;
+}
+
+/* Animating out: scale up + fade out */
+.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);
@@ -512,6 +534,11 @@ var VIDEO_SLOT_CSS = `
 .sv-video-slot__play-indicator-icon {
   color: #fff;
   font-size: 28px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
@@ -628,23 +655,25 @@ var SLOT_PAUSED_CLASS = "sv-video-slot--paused";
 var Z_INDEX = {
   /** Base layer - slot container */
   SLOT: 0,
-  /** Poster image and video element */
-  POSTER: 1,
-  /** Overlay content and loading spinner */
-  OVERLAY: 2,
+  /** Video element */
+  VIDEO: 1,
+  /** Loading spinner */
+  SPINNER: 2,
+  /** Poster/thumbnail (above spinner so thumbnail shows during loading) */
+  POSTER: 3,
   /** Error UI and play/pause indicator */
-  INDICATOR: 3,
+  INDICATOR: 4,
   /** Progress bar (always on top) */
-  PROGRESS: 4
+  PROGRESS: 5
 };
 var Z_INDEX_CSS_VARS = {
   POSTER: "--sv-z-poster",
-  OVERLAY: "--sv-z-overlay",
+  SPINNER: "--sv-z-slot-spinner",
   INDICATOR: "--sv-z-indicator",
   PROGRESS: "--sv-z-progress"
 };
 var ANIMATION_SELECTOR = '[data-like-animation="true"]';
-function VideoSlotHeadless({
+function VideoSlotHeadlessBase({
   video,
   resourceState,
   playerState,
@@ -660,7 +689,8 @@ function VideoSlotHeadless({
   onTap,
   onDoubleTap,
   renderError,
-  renderLoading
+  renderLoading,
+  restoreFrame
 }) {
   useInsertionEffect(() => {
     return injectComponentCSS("video-slot", VIDEO_SLOT_CSS);
@@ -669,6 +699,7 @@ function VideoSlotHeadless({
   const animationElementRef = useRef(null);
   const prevVideoIdRef = useRef(video.id);
   const [firstFrame, setFirstFrame] = useState(null);
+  const [lastUserToggleTime, setLastUserToggleTime] = useState(0);
   if (prevVideoIdRef.current !== video.id) {
     prevVideoIdRef.current = video.id;
     animationElementRef.current = null;
@@ -702,6 +733,7 @@ function VideoSlotHeadless({
     return animationElement?.__showWhenAlreadyLiked ?? true;
   }, [getAnimationElement]);
   const handleSingleTap = useCallback(() => {
+    setLastUserToggleTime(Date.now());
     if (onTap) {
       onTap();
     } else {
@@ -732,9 +764,11 @@ function VideoSlotHeadless({
       playerState,
       playerControls,
       firstFrame,
-      setFirstFrame
+      setFirstFrame,
+      lastUserToggleTime,
+      setLastUserToggleTime
     }),
-    [video, resourceState, playerState, playerControls, firstFrame]
+    [video, resourceState, playerState, playerControls, firstFrame, lastUserToggleTime]
   );
   const stateClasses = useMemo(() => {
     const classes = [SLOT_CLASS];
@@ -764,7 +798,7 @@ function VideoSlotHeadless({
     "div",
     {
       ref: containerRef,
-      className: cn(...stateClasses, className),
+      className: clsx2(...stateClasses, className),
       ...tapHandlers,
       ...{
         [VIDEO_ID_ATTR]: video.id,
@@ -773,8 +807,26 @@ function VideoSlotHeadless({
         [LOADING_ATTR]: playerState.isLoading ? "true" : "false"
       },
       children: [
+        restoreFrame && !playerState.isPlaying && !playerState.error && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sv-video-slot__restore-frame",
+            style: {
+              position: "absolute",
+              inset: 0,
+              zIndex: 5,
+              // Above video, below overlay
+              backgroundImage: `url(${restoreFrame})`,
+              backgroundSize: "contain",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              backgroundColor: "#000"
+            },
+            "aria-hidden": "true"
+          }
+        ),
         playerState.error && (renderError ? renderError(playerState.error, handleRetry) : /* @__PURE__ */ jsx(DefaultErrorUI, { error: playerState.error, onRetry: handleRetry })),
-        playerState.isLoading && !playerState.error && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx(DefaultLoadingUI, {})),
+        playerState.isLoading && !playerState.error && !restoreFrame && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx(DefaultLoadingUI, {})),
         children
       ]
     }
@@ -830,23 +882,28 @@ function DefaultErrorUI({
 function DefaultLoadingUI() {
   return /* @__PURE__ */ jsx("div", { className: "sv-video-slot__spinner", children: /* @__PURE__ */ jsx("div", { className: "sv-video-slot__spinner-circle", "aria-label": "Loading video" }) });
 }
+var VideoSlotHeadless = memo(VideoSlotHeadlessBase);
 VideoSlotHeadless.displayName = "VideoSlotHeadless";
-function VideoSlotPoster({
+var VideoSlotPosterInner = memo(function VideoSlotPosterInner2({
   className,
   forceSkeleton = false,
   posterUrl,
   loading = "eager",
   alt,
-  onError
+  onError,
+  videoPoster,
+  videoTitle,
+  firstFrame,
+  isLoading,
+  currentTime
 }) {
-  const { video, firstFrame, playerState } = useVideoSlotContext();
   const imageSource = useMemo(() => {
     if (forceSkeleton) return null;
     if (posterUrl) return posterUrl;
     if (firstFrame) return firstFrame;
-    if (video.poster) return video.poster;
+    if (videoPoster) return videoPoster;
     return null;
-  }, [forceSkeleton, posterUrl, firstFrame, video.poster]);
+  }, [forceSkeleton, posterUrl, firstFrame, videoPoster]);
   const sourceKey = imageSource ?? "skeleton";
   const [errorForSource, setErrorForSource] = useState(null);
   const imageError = errorForSource === sourceKey;
@@ -860,12 +917,12 @@ function VideoSlotPoster({
     if (imageSource === firstFrame) return "first-frame";
     return "poster";
   }, [showSkeleton, imageSource, firstFrame]);
-  const imageAlt = alt ?? video.title ?? "";
-  const isVisible = playerState.isLoading && playerState.currentTime === 0;
+  const imageAlt = alt ?? videoTitle ?? "";
+  const isVisible = isLoading && currentTime === 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
+      className: clsx2(
         "sv-video-slot__poster",
         `sv-video-slot__poster--${posterType}`,
         !isVisible && "sv-video-slot__poster--hidden",
@@ -888,20 +945,35 @@ function VideoSlotPoster({
       )
     }
   );
+});
+VideoSlotPosterInner.displayName = "VideoSlotPosterInner";
+function VideoSlotPoster(props) {
+  const { video, firstFrame, playerState } = useVideoSlotContext();
+  return /* @__PURE__ */ jsx(
+    VideoSlotPosterInner,
+    {
+      ...props,
+      videoPoster: video.poster,
+      videoTitle: video.title,
+      firstFrame,
+      isLoading: playerState.isLoading,
+      currentTime: playerState.currentTime
+    }
+  );
 }
+VideoSlotPoster.displayName = "VideoSlotPoster";
 function VideoSlotSkeleton({
   className
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("sv-video-slot__poster", "sv-video-slot__poster--skeleton", className),
+      className: clsx2("sv-video-slot__poster", "sv-video-slot__poster--skeleton", className),
       "aria-hidden": "true",
       children: /* @__PURE__ */ jsx("div", { className: "sv-video-slot__poster-skeleton" })
     }
   );
 }
-VideoSlotPoster.displayName = "VideoSlotPoster";
 VideoSlotSkeleton.displayName = "VideoSlotSkeleton";
 function VideoSlotOverlayRoot({
   children,
@@ -911,7 +983,7 @@ function VideoSlotOverlayRoot({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(
+      className: clsx2(
         "sv-video-slot__overlay",
         noGradient && "sv-video-slot__overlay--no-gradient",
         className
@@ -924,37 +996,37 @@ function VideoSlotOverlayTop({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("sv-video-slot__overlay-top", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-top", className), children });
 }
 function VideoSlotOverlayBottom({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("sv-video-slot__overlay-bottom", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-bottom", className), children });
 }
 function VideoSlotOverlayLeft({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("sv-video-slot__overlay-left", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-left", className), children });
 }
 function VideoSlotOverlayRight({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("sv-video-slot__overlay-right", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__overlay-right", className), children });
 }
 function VideoSlotOverlayActions({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("sv-video-slot__actions", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__actions", className), children });
 }
 function VideoSlotOverlayAuthor({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("sv-video-slot__author", className), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-video-slot__author", className), children });
 }
 VideoSlotOverlayRoot.displayName = "VideoSlotOverlay";
 VideoSlotOverlayTop.displayName = "VideoSlotOverlay.Top";
@@ -1214,7 +1286,7 @@ var SingleHeart = memo(function SingleHeart2({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("sv-like-heart", `sv-like-heart--${animation}`),
+      className: clsx2("sv-like-heart", `sv-like-heart--${animation}`),
       style: {
         "--sv-heart-x": `${heart.x}%`,
         "--sv-heart-y": `${heart.y}%`,
@@ -1303,7 +1375,7 @@ function VideoSlotLikeAnimation({
     "div",
     {
       ref: containerRef,
-      className: cn("sv-like-animation-container", className),
+      className: clsx2("sv-like-animation-container", className),
       "data-like-animation": "true",
       "aria-hidden": "true",
       children: hearts.map((heart) => /* @__PURE__ */ jsx(
@@ -1322,5 +1394,126 @@ function VideoSlotLikeAnimation({
   );
 }
 VideoSlotLikeAnimation.displayName = "VideoSlotLikeAnimation";
+function DefaultPlayIcon({ size }) {
+  return /* @__PURE__ */ jsx(PlayIcon, { size });
+}
+function DefaultPauseIcon({ size }) {
+  return /* @__PURE__ */ jsx(PauseIcon, { size });
+}
+var VideoSlotPlayIndicatorInner = memo(function VideoSlotPlayIndicatorInner2({
+  playIcon,
+  pauseIcon,
+  size = 48,
+  duration = 600,
+  persistWhenPaused = true,
+  className,
+  testId,
+  lastUserToggleTime,
+  isPlaying
+}) {
+  const [showIndicator, setShowIndicator] = useState(false);
+  const [isPersisting, setIsPersisting] = useState(false);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+  const [iconType, setIconType] = useState("play");
+  const hideTimeoutRef = useRef(null);
+  const lastHandledToggleTimeRef = useRef(0);
+  const isPlayingRef = useRef(isPlaying);
+  isPlayingRef.current = isPlaying;
+  const persistWhenPausedRef = useRef(persistWhenPaused);
+  persistWhenPausedRef.current = persistWhenPaused;
+  const prevIsPlayingRef = useRef(isPlaying);
+  const clearHideTimeout = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+  };
+  useEffect(() => {
+    const wasPlaying = prevIsPlayingRef.current;
+    prevIsPlayingRef.current = isPlaying;
+    if (!wasPlaying && isPlaying && isPersisting) {
+      const timeSinceLastToggle = Date.now() - lastUserToggleTime;
+      const isAutoResume = timeSinceLastToggle > 100;
+      if (isAutoResume) {
+        if (hideTimeoutRef.current) {
+          clearTimeout(hideTimeoutRef.current);
+          hideTimeoutRef.current = null;
+        }
+        setShowIndicator(false);
+        setIsPersisting(false);
+        setIsAnimatingOut(false);
+      }
+    }
+  }, [isPlaying, isPersisting, lastUserToggleTime]);
+  useEffect(() => {
+    if (lastUserToggleTime === 0 || lastUserToggleTime === lastHandledToggleTimeRef.current) {
+      return;
+    }
+    lastHandledToggleTimeRef.current = lastUserToggleTime;
+    if (isPersisting && isPlaying) {
+      setIconType("pause");
+      setIsPersisting(false);
+      setIsAnimatingOut(true);
+      clearHideTimeout();
+      hideTimeoutRef.current = setTimeout(() => {
+        setShowIndicator(false);
+        setIsAnimatingOut(false);
+        hideTimeoutRef.current = null;
+      }, duration);
+      return;
+    }
+    setShowIndicator(true);
+    setIsPersisting(false);
+    setIsAnimatingOut(false);
+    setIconType("play");
+    clearHideTimeout();
+    hideTimeoutRef.current = setTimeout(() => {
+      const currentIsPlaying = isPlayingRef.current;
+      const shouldPersist = persistWhenPausedRef.current;
+      if (shouldPersist && !currentIsPlaying) {
+        setIsPersisting(true);
+        return;
+      }
+      setShowIndicator(false);
+      hideTimeoutRef.current = null;
+    }, duration);
+    return clearHideTimeout;
+  }, [lastUserToggleTime, duration, isPersisting, isPlaying]);
+  if (!showIndicator && !isPersisting) return null;
+  const iconToShow = iconType === "pause" ? pauseIcon ?? /* @__PURE__ */ jsx(DefaultPauseIcon, { size }) : playIcon ?? /* @__PURE__ */ jsx(DefaultPlayIcon, { size });
+  const indicatorClass = [
+    "sv-video-slot__play-indicator",
+    showIndicator && "sv-video-slot__play-indicator--visible",
+    isPersisting && "sv-video-slot__play-indicator--persist",
+    isAnimatingOut && "sv-video-slot__play-indicator--animating-out",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: indicatorClass,
+      style: { "--sv-indicator-duration": `${duration}ms` },
+      "aria-hidden": "true",
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx("span", { className: "sv-video-slot__play-indicator-icon", children: iconToShow })
+    }
+  );
+});
+VideoSlotPlayIndicatorInner.displayName = "VideoSlotPlayIndicatorInner";
+function VideoSlotPlayIndicator(props) {
+  const context = useOptionalVideoSlotContext();
+  if (!context) return null;
+  const lastUserToggleTime = context.lastUserToggleTime ?? 0;
+  const isPlaying = context.playerState?.isPlaying ?? false;
+  return /* @__PURE__ */ jsx(
+    VideoSlotPlayIndicatorInner,
+    {
+      ...props,
+      lastUserToggleTime,
+      isPlaying
+    }
+  );
+}
+VideoSlotPlayIndicator.displayName = "VideoSlotPlayIndicator";
 
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo };
+export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_DATASET_KEY, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY, SLOT_CLASS, SLOT_ERROR_CLASS, SLOT_LOADING_CLASS, SLOT_PAUSED_CLASS, SLOT_PLAYING_CLASS, VIDEO_ID_ATTR, VIDEO_ID_DATASET_KEY, VIDEO_SLOT_CSS, VIDEO_SLOT_LIKE_ANIMATION_CSS, VideoSlotContext, VideoSlotHeadless, VideoSlotLikeAnimation, VideoSlotOverlay, VideoSlotPlayIndicator, VideoSlotPoster, VideoSlotSkeleton, Z_INDEX, Z_INDEX_CSS_VARS, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo };

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-ANGBSV7L.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-AC2IFAJR.js';

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

@@ -137,6 +137,10 @@ interface FollowButtonProps {
     className?: string;
     /** Children (for fully custom content) */
     children?: ReactNode;
+    /** Aria-label for follow state (default: "Follow") */
+    followAriaLabel?: string;
+    /** Aria-label for unfollow state (default: "Unfollow") */
+    unfollowAriaLabel?: string;
 }
 /**
  * FollowButton - Follow/unfollow toggle button
@@ -155,7 +159,7 @@ interface FollowButtonProps {
  *   <AuthorInfoHeadless.FollowButton size="small" />
  * </AuthorInfoHeadless>
  */
-declare function FollowButton({ isFollowing: isFollowingProp, isPending: isPendingProp, onClick, size, iconOnly, followIcon, followingIcon, followText, followingText, disabled, className, children, }: FollowButtonProps): react_jsx_runtime.JSX.Element;
+declare function FollowButton({ isFollowing: isFollowingProp, isPending: isPendingProp, onClick, size, iconOnly, followIcon, followingIcon, followText, followingText, disabled, className, children, followAriaLabel, unfollowAriaLabel, }: FollowButtonProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Layout variant for AuthorInfo

package/dist/components/AuthorInfo/index.js

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

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

@@ -0,0 +1,67 @@
+/**
+ * BlurhashPlaceholderHeadless - Blur placeholder from blurhash string
+ *
+ * Lazy loads the blurhash decoder and caches decoded images.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Props for BlurhashPlaceholderHeadless
+ */
+interface BlurhashPlaceholderHeadlessProps {
+    /** Blurhash string to decode */
+    blurhash: string;
+    /** Width of decoded image (default: 32) */
+    width?: number;
+    /** Height of decoded image (default: 32) */
+    height?: number;
+    /** Punch factor for color intensity (default: 1) */
+    punch?: number;
+    /** Whether to hide (fade out) */
+    isHidden?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * BlurhashPlaceholderHeadless - Display decoded blurhash as placeholder
+ *
+ * @example
+ * ```tsx
+ * <BlurhashPlaceholderHeadless
+ *   blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
+ *   width={32}
+ *   height={32}
+ *   isHidden={isVideoReady}
+ * />
+ * ```
+ */
+declare function BlurhashPlaceholderHeadless({ blurhash, width, height, punch, isHidden, className, testId, }: BlurhashPlaceholderHeadlessProps): React.ReactElement | null;
+/**
+ * Clear the blurhash image cache
+ */
+declare function clearBlurhashCache(): void;
+/**
+ * Get cache size
+ */
+declare function getBlurhashCacheSize(): number;
+/**
+ * Preload a blurhash into cache
+ *
+ * @example
+ * ```ts
+ * // Preload blurhash before component renders
+ * await preloadBlurhash('LEHV6nWB2yk8pyo0adR*.7kCMdnj');
+ * ```
+ */
+declare function preloadBlurhash(blurhash: string, width?: number, height?: number, punch?: number): Promise<string | null>;
+
+/**
+ * BlurhashPlaceholder CSS
+ *
+ * Styles for blurhash placeholder images.
+ */
+declare const BLURHASH_PLACEHOLDER_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 * BLURHASH PLACEHOLDER\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-blurhash-placeholder {\n  position: absolute;\n  inset: 0;\n  z-index: var(--sv-z-placeholder, 1);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  transition: opacity 200ms ease-out;\n}\n\n.sv-blurhash-placeholder--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Canvas used for decoding - always hidden */\n.sv-blurhash-placeholder__canvas {\n  display: none !important;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * REDUCE MOTION\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (prefers-reduced-motion: reduce) {\n  .sv-blurhash-placeholder {\n    transition: none;\n  }\n}\n";
+
+export { BLURHASH_PLACEHOLDER_CSS, BlurhashPlaceholderHeadless, type BlurhashPlaceholderHeadlessProps, clearBlurhashCache, getBlurhashCacheSize, preloadBlurhash };