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

package/dist/index.js

@@ -1,19 +1,30 @@
-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-HW4LXTFT.js';
-export { LOADING_ATTR, LOADING_DATASET_KEY, PLAYER_STATE_ATTR, PLAYER_STATE_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 } from './chunk-XAOEHLOX.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-ANGBSV7L.js';
-export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext } from './chunk-2PTMP65P.js';
-export { BookmarkFilledIcon, BookmarkIcon, CloseIcon, CommentIcon, HeartFilledIcon, HeartIcon, MoreIcon, MusicIcon, PauseIcon, PlayIcon, PlusIcon, ShareIcon, UserCheckIcon, UserPlusIcon, VerifiedIcon, VolumeIcon, VolumeMutedIcon } from './chunk-4YDIRPIN.js';
-export { ErrorBoundary } from './chunk-SSJDO24Q.js';
-export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime } from './chunk-YW23IBKF.js';
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-4MN72OZH.js';
-export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './chunk-ZZDQKP4R.js';
-export { cn, formatCount, formatCountWithSeparators, isGestureLoaded, loadGesture, parseFormattedCount, preloadGesture } from './chunk-WKX2WBVO.js';
-export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-DHQJBXQW.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-UXMA4KJZ.js';
+export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition } from './chunk-4TUBNA2X.js';
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext } from './chunk-PBIH2F2Q.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-ZGWSJ6Z5.js';
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLOT_ACTIVE_ATTR as SLIDER_SLOT_ACTIVE_ATTR, SLIDER_SLOT_ACTIVE_CLASS, SLOT_ACTIVE_DATASET_KEY as SLIDER_SLOT_ACTIVE_DATASET_KEY, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLOT_INDEX_ATTR as SLIDER_SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY as SLIDER_SLOT_INDEX_DATASET_KEY, SLIDER_SLOT_TRANSITIONING_CLASS, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition as getSliderIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext } from './chunk-YB7AXTX7.js';
+export { ErrorBoundary } from './chunk-IWSBYOSS.js';
+export { IMAGE_POST_ACTIVE_ATTR, IMAGE_POST_ID_ATTR, IMAGE_POST_SLOT_ACTIVE_CLASS, IMAGE_POST_SLOT_CLASS, IMAGE_POST_SLOT_CLEAN_MODE_CLASS, IMAGE_POST_SLOT_CSS, ImagePostSlotActions, ImagePostSlotBottom, ImagePostSlotCaption, ImagePostSlotHeadless, ImagePostSlotMusic, ImagePostSlotOverlay, ImagePostSlotPlayIndicator, ImagePostSlotReadMore, useImagePostSlotContext, useOptionalImagePostSlotContext } from './chunk-JEY6R4KJ.js';
+export { VideoSlotContext, VideoSlotPlayIndicator, useDoubleTap, useOptionalVideoSlotContext, useVideoSlotContext, useVideoSlotIsActive, useVideoSlotIsPlaying, useVideoSlotPlayer, useVideoSlotResource, useVideoSlotVideo } from './chunk-MFJS65C5.js';
+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-QCKVF2DR.js';
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo } from './chunk-4RIMQOBR.js';
+export { DEFAULT_SPEEDS, SPEED_PICKER_CSS, SpeedPickerHeadless } from './chunk-QCRRF76W.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-CIIZ3IHV.js';
+export { ADVANCE_MENU_CSS, AdvanceMenuHeadless } from './chunk-DXLCQ4FH.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 { COMMENT_SHEET_CSS, CommentInput, CommentItemComponent, CommentList, CommentSheet, CommentSheetContext, CommentSheetHeadless, SheetHeader, useCommentSheetContext, useOptionalCommentSheetContext } from './chunk-KMJ3PQ7M.js';
+export { DETAIL_VIEW_CSS, DetailViewAuthor, DetailViewCaption, DetailViewGallery, DetailViewHeadless, DetailViewMusic, DetailViewStats, useDetailViewContext } from './chunk-FR7UQSZP.js';
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless } from './chunk-Q6MG7AVG.js';
+export { clsx, clsx2 as cn } from './chunk-EDWS2IPH.js';
+export { formatCount, formatCountWithSeparators, parseFormattedCount } from './chunk-3XPJHUYL.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+export { injectComponentCSS, isComponentCSSInjected, removeComponentCSS } from './chunk-CAWE42LH.js';
 import { createContext, useInsertionEffect, useContext, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-export { clsx } from 'clsx';
 
 // src/styles/css-content.ts
 var CSS_CONTENT = `
@@ -22,13 +33,23 @@ var CSS_CONTENT = `
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   FONT LOADING
+   CSS LAYER DECLARATION
+   
+   Declare the 'sv' layer first. All SDK component styles go into this layer.
+   Host app styles WITHOUT @layer automatically have HIGHER priority.
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+@layer sv;
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   FONT LOADING (outside layer - needs to be global)
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
 @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap');
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
    CSS VARIABLES - Light Mode (Default)
+   Outside layer so host app can easily override variables
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
 :root {
@@ -201,9 +222,11 @@ var CSS_CONTENT = `
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   BASE STYLES
+   BASE STYLES - Inside @layer sv for easy host app overrides
    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
+@layer sv {
+
 .sv-root {
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-md);
@@ -598,6 +621,8 @@ var CSS_CONTENT = `
   transform: translateZ(0);
   will-change: transform;
 }
+
+} /* End @layer sv */
 `;
 
 // src/styles/useStyles.ts
@@ -679,6 +704,7 @@ var Components = {
   // Reference only
   VideoSlotHeadless: () => null,
   VideoPlayerHeadless: () => null,
+  CommentSheetHeadless: () => null,
   ErrorBoundary: () => null,
   Skeleton: () => null
 };
@@ -920,13 +946,16 @@ var CustomLayout = Object.assign(CustomLayoutRoot, {
 CustomLayout.displayName = "CustomLayout";
 function DefaultError({
   error,
-  onRetry
+  onRetry,
+  networkErrorText = "No internet connection",
+  genericErrorText = "Video failed to load",
+  retryText = "Tap to retry"
 }) {
   const isNetworkError = error.message.toLowerCase().includes("network");
   return /* @__PURE__ */ jsxs("div", { className: "sv-layout__error", children: [
     /* @__PURE__ */ jsx("span", { className: "sv-layout__error-icon", children: isNetworkError ? "\u{1F4E1}" : "\u26A0\uFE0F" }),
-    /* @__PURE__ */ jsx("span", { className: "sv-layout__error-text", children: isNetworkError ? "No internet connection" : "Video failed to load" }),
-    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "sv-layout__error-retry", onClick: onRetry, children: "Tap to retry" })
+    /* @__PURE__ */ jsx("span", { className: "sv-layout__error-text", children: isNetworkError ? networkErrorText : genericErrorText }),
+    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "sv-layout__error-retry", onClick: onRetry, children: retryText })
   ] });
 }
 var buildClassName = (className) => `sv-layout sv-layout--default ${className ?? ""}`;
@@ -952,7 +981,11 @@ function DefaultLayout(props) {
     error,
     onRetry,
     className,
-    testId
+    testId,
+    // i18n props
+    networkErrorText,
+    genericErrorText,
+    retryText
   } = props;
   useInsertionEffect(() => {
     return injectComponentCSS("layout", LAYOUT_CSS);
@@ -960,7 +993,16 @@ function DefaultLayout(props) {
   const containerClass = buildClassName(className);
   if (error) {
     const errorContent = renderError ? renderError(error, onRetry ?? (() => {
-    })) : /* @__PURE__ */ jsx(DefaultError, { error, onRetry });
+    })) : /* @__PURE__ */ jsx(
+      DefaultError,
+      {
+        error,
+        onRetry,
+        networkErrorText,
+        genericErrorText,
+        retryText
+      }
+    );
     return /* @__PURE__ */ jsx("div", { className: containerClass, "data-testid": testId, children: errorContent });
   }
   const poster = showPoster ? renderPoster?.() : null;
@@ -990,12 +1032,14 @@ var DefaultPlayIcon = () => /* @__PURE__ */ jsx("svg", { "aria-hidden": "true",
 var DefaultPauseIcon = () => /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6zM14 4h4v16h-4z" }) });
 function MinimalError({
   error,
-  onRetry
+  onRetry,
+  errorFallbackText = "Video failed to load",
+  retryText = "Retry"
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "sv-layout__error", children: [
     /* @__PURE__ */ jsx("span", { className: "sv-layout__error-icon", children: "\u26A0\uFE0F" }),
-    /* @__PURE__ */ jsx("span", { className: "sv-layout__error-text", children: error.message || "Video failed to load" }),
-    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "sv-layout__error-retry", onClick: onRetry, children: "Retry" })
+    /* @__PURE__ */ jsx("span", { className: "sv-layout__error-text", children: error.message || errorFallbackText }),
+    onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "sv-layout__error-retry", onClick: onRetry, children: retryText })
   ] });
 }
 function MinimalLayout({
@@ -1024,7 +1068,12 @@ function MinimalLayout({
   onPlayClick,
   // Styling
   className,
-  testId
+  testId,
+  // i18n props
+  errorFallbackText,
+  retryText,
+  playAriaLabel = "Play",
+  pauseAriaLabel = "Pause"
 }) {
   const [isButtonVisible, setIsButtonVisible] = useState(true);
   useInsertionEffect(() => {
@@ -1048,7 +1097,15 @@ function MinimalLayout({
   };
   if (error) {
     return /* @__PURE__ */ jsx("div", { className: `sv-layout sv-layout--minimal ${className ?? ""}`, "data-testid": testId, children: renderError ? renderError(error, onRetry ?? (() => {
-    })) : /* @__PURE__ */ jsx(MinimalError, { error, onRetry }) });
+    })) : /* @__PURE__ */ jsx(
+      MinimalError,
+      {
+        error,
+        onRetry,
+        errorFallbackText,
+        retryText
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxs("div", { className: `sv-layout sv-layout--minimal ${className ?? ""}`, "data-testid": testId, children: [
     renderPlayer?.(),
@@ -1059,7 +1116,7 @@ function MinimalLayout({
         type: "button",
         className: `sv-layout__play-button ${isButtonVisible ? "sv-layout__play-button--visible" : ""}`,
         onClick: handlePlayClick,
-        "aria-label": isPlaying ? "Pause" : "Play",
+        "aria-label": isPlaying ? pauseAriaLabel : playAriaLabel,
         children: isPlaying ? pauseIcon ?? /* @__PURE__ */ jsx(DefaultPauseIcon, {}) : playIcon ?? /* @__PURE__ */ jsx(DefaultPlayIcon, {})
       }
     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xhub-short/ui",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.11",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,49 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./ActionBar": {
+      "types": "./dist/components/ActionBar/index.d.ts",
+      "import": "./dist/components/ActionBar/index.js"
+    },
+    "./AuthorInfo": {
+      "types": "./dist/components/AuthorInfo/index.d.ts",
+      "import": "./dist/components/AuthorInfo/index.js"
+    },
+    "./ErrorBoundary": {
+      "types": "./dist/components/ErrorBoundary/index.d.ts",
+      "import": "./dist/components/ErrorBoundary/index.js"
+    },
+    "./ProgressBar": {
+      "types": "./dist/components/ProgressBar/index.d.ts",
+      "import": "./dist/components/ProgressBar/index.js"
+    },
+    "./Skeleton": {
+      "types": "./dist/components/Skeleton/index.d.ts",
+      "import": "./dist/components/Skeleton/index.js"
+    },
     "./VideoFeed": {
       "types": "./dist/components/VideoFeed/index.d.ts",
       "import": "./dist/components/VideoFeed/index.js"
+    },
+    "./VideoInfo": {
+      "types": "./dist/components/VideoInfo/index.d.ts",
+      "import": "./dist/components/VideoInfo/index.js"
+    },
+    "./VideoPlayer": {
+      "types": "./dist/components/VideoPlayer/index.d.ts",
+      "import": "./dist/components/VideoPlayer/index.js"
+    },
+    "./VideoSlot": {
+      "types": "./dist/components/VideoSlot/index.d.ts",
+      "import": "./dist/components/VideoSlot/index.js"
+    },
+    "./VirtualSlider": {
+      "types": "./dist/components/VirtualSlider/index.d.ts",
+      "import": "./dist/components/VirtualSlider/index.js"
+    },
+    "./icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "import": "./dist/components/icons/index.js"
     }
   },
   "main": "./dist/index.js",
@@ -29,16 +69,20 @@
   ],
   "dependencies": {
     "clsx": "^2.1.0",
-    "@xhub-short/contracts": "0.1.0-beta.1"
-  },
-  "optionalDependencies": {
-    "@use-gesture/react": "^10.3.0",
-    "hls.js": "^1.5.0"
+    "@xhub-short/contracts": "0.1.0-beta.11"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "hls.js": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "hls.js": "^1.5.0"
+  },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",
     "@types/node": "^22.0.0",
@@ -50,7 +94,7 @@
     "typescript": "^5.7.0",
     "vitest": "^2.1.0",
     "@xhub-short/tsconfig": "0.0.0",
-    "@xhub-short/vitest-config": "0.0.1-beta.0"
+    "@xhub-short/vitest-config": "0.1.0-beta.10"
   },
   "scripts": {
     "build": "tsup",