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

package/dist/chunk-BEJAJFV6.js

@@ -0,0 +1,191 @@
+import { VirtualSlider } from './chunk-YB7AXTX7.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { createContext, useContext, useInsertionEffect, useRef, useMemo, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Feed/Feed.css.ts
+var FEED_CSS = `.sv-feed{position:relative;width:100%;height:100%;overflow:hidden;background:var(--sv-bg-primary,#000);touch-action:pan-y;user-select:none;-webkit-user-select:none}.sv-feed__container{position:relative;width:100%;height:100%;will-change:transform}.sv-feed__container--snapping{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.sv-feed__container--swiping{transition:none}.sv-feed__slot{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.sv-feed__slot--active{z-index:2}.sv-feed__slot--adjacent{z-index:1;pointer-events:none}.sv-feed__slot--transitioning{transition:transform .175s cubic-bezier(.25,.46,.45,.94),opacity .2s ease}.sv-feed__loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--sv-spacing-md,16px);color:var(--sv-text-secondary,#999)}.sv-feed__loading-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--sv-color-primary,#fe2c55);border-radius:50%;animation:sv-feed-spinner .8s linear infinite}@keyframes sv-feed-spinner{to{transform:rotate(360deg)}}.sv-feed__loading-text{font-size:var(--sv-font-size-sm,13px);font-family:var(--sv-font-family,'Urbanist',sans-serif)}.sv-feed__empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--sv-text-secondary,#999);font-family:var(--sv-font-family,'Urbanist',sans-serif)}.sv-feed__empty-icon{font-size:48px;margin-bottom:var(--sv-spacing-md,16px)}.sv-feed__empty-text{font-size:var(--sv-font-size-md,14px)}.sv-feed__end{position:absolute;bottom:calc(var(--sv-spacing-xl,32px)+env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);z-index:10;padding:var(--sv-spacing-sm,8px)var(--sv-spacing-md,16px);background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--sv-border-radius-md,8px);color:var(--sv-text-secondary,#999);font-size:var(--sv-font-size-sm,13px);font-family:var(--sv-font-family,'Urbanist',sans-serif);pointer-events:none;animation:sv-feed-end-fade-in .3s ease-out}@keyframes sv-feed-end-fade-in{from{opacity:0;transform:translateX(-50%)translateY(10px)}to{opacity:1;transform:translateX(-50%)translateY(0)}}@media(prefers-reduced-motion:reduce){.sv-feed__container--snapping{transition:none}.sv-feed__loading-spinner{animation:none}}`;
+var FeedContext = createContext(null);
+function useFeedContext() {
+  const context = useContext(FeedContext);
+  if (!context) {
+    throw new Error("useFeedContext must be used within a Feed");
+  }
+  return context;
+}
+function useOptionalFeedContext() {
+  return useContext(FeedContext);
+}
+function FeedLoading({ text = "Loading..." }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-feed__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-feed__loading-spinner" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-feed__loading-text", children: text })
+  ] });
+}
+function FeedEmpty({ text = "No content" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-feed__empty", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-feed__empty-icon", children: "\u{1F4ED}" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-feed__empty-text", children: text })
+  ] });
+}
+function FeedEnd({ text = "You've reached the end" }) {
+  return /* @__PURE__ */ jsx("div", { className: "sv-feed__end", "aria-live": "polite", children: text });
+}
+function FeedHeadless({
+  feedState,
+  swipeState,
+  height,
+  className,
+  renderSlot,
+  onIndexChange,
+  onEndReached,
+  endReachedThreshold = 2,
+  bufferSize = 1,
+  renderEmpty,
+  renderLoading,
+  renderEnd,
+  loadingText = "Loading...",
+  emptyText = "No content",
+  endText = "You've reached the end",
+  disableInlineTransforms = false
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("sv-feed", FEED_CSS);
+  }, []);
+  const { items, isLoading, hasMore } = feedState;
+  const { activeIndex, isSwiping, dragOffset, goToIndex } = swipeState;
+  const containerHeightRef = useRef(
+    typeof window !== "undefined" ? window.innerHeight : 800
+  );
+  const contextValue = useMemo(
+    () => ({
+      items,
+      videos: items,
+      // Backward compatibility
+      activeIndex: Math.max(0, Math.min(items.length - 1, activeIndex)),
+      isSwiping,
+      dragOffset,
+      containerHeight: containerHeightRef.current,
+      goToIndex,
+      totalCount: items.length
+    }),
+    [items, activeIndex, isSwiping, dragOffset, goToIndex]
+  );
+  const keyExtractor = useCallback((item) => item.id, []);
+  const renderItem = useCallback(
+    (item, index, isActive) => {
+      return renderSlot(item, index, isActive);
+    },
+    [renderSlot]
+  );
+  const loadingComponent = useMemo(
+    () => renderLoading?.(loadingText) || /* @__PURE__ */ jsx(FeedLoading, { text: loadingText }),
+    [loadingText]
+  );
+  const emptyComponent = useMemo(
+    () => renderEmpty?.(emptyText) || /* @__PURE__ */ jsx(FeedEmpty, { text: emptyText }),
+    [emptyText]
+  );
+  const endComponent = useMemo(() => renderEnd?.(endText) || /* @__PURE__ */ jsx(FeedEnd, { text: endText }), [endText]);
+  const sliderProps = {
+    // Required
+    items,
+    keyExtractor,
+    renderItem,
+    // Swipe state
+    activeIndex,
+    isSwiping,
+    dragOffset,
+    goToIndex,
+    // Callbacks
+    onIndexChange,
+    onEndReached,
+    endReachedThreshold,
+    bufferSize,
+    // Loading states
+    isLoading,
+    hasMore,
+    // Custom UI (video-specific styling)
+    loadingComponent,
+    emptyComponent,
+    endComponent,
+    // Styling - use sv-feed classes instead of sv-slider
+    height,
+    className: clsx2("sv-feed", className),
+    disableInlineTransforms
+  };
+  return /* @__PURE__ */ jsx(FeedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(VirtualSlider, { ...sliderProps }) });
+}
+FeedHeadless.displayName = "FeedHeadless";
+function useFeedPosition(options) {
+  const {
+    totalCount,
+    activeIndex,
+    containerHeight,
+    dragOffset,
+    isSwiping,
+    isResizing = false,
+    bufferSize = 1
+  } = options;
+  return useMemo(() => {
+    if (totalCount === 0) {
+      return {
+        slots: [],
+        scrollOffset: 0,
+        isAtStart: true,
+        isAtLastIndex: true,
+        clampedActiveIndex: 0
+      };
+    }
+    const clampedActiveIndex = Math.max(0, Math.min(totalCount - 1, activeIndex));
+    const slots = [];
+    const startIndex = Math.max(0, clampedActiveIndex - bufferSize);
+    const endIndex = Math.min(totalCount - 1, clampedActiveIndex + bufferSize);
+    const baseOffset = -clampedActiveIndex * containerHeight;
+    const scrollOffset = baseOffset + dragOffset;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const signedDistance = i - clampedActiveIndex;
+      const distance = Math.abs(signedDistance);
+      const isActive = i === clampedActiveIndex;
+      const top = i * containerHeight;
+      const transform = `translateY(${top + scrollOffset}px)`;
+      let opacity = 1;
+      if (!isActive && !isResizing) {
+        opacity = isSwiping ? 0.7 : 0.3;
+      }
+      slots.push({
+        index: i,
+        top,
+        isActive,
+        distance,
+        signedDistance,
+        transform,
+        opacity
+      });
+    }
+    return {
+      slots,
+      scrollOffset,
+      isAtStart: clampedActiveIndex === 0,
+      isAtLastIndex: clampedActiveIndex >= totalCount - 1,
+      clampedActiveIndex
+    };
+  }, [totalCount, activeIndex, containerHeight, dragOffset, isSwiping, isResizing, bufferSize]);
+}
+function getSlotIndexFromPosition(yPosition, containerHeight, totalCount) {
+  if (totalCount === 0 || containerHeight === 0) {
+    return 0;
+  }
+  const rawIndex = Math.round(-yPosition / containerHeight);
+  return Math.max(0, Math.min(totalCount - 1, rawIndex));
+}
+
+// src/components/Feed/constants.ts
+var SLOT_INDEX_ATTR = "data-slot-index";
+var SLOT_ACTIVE_ATTR = "data-slot-active";
+var SLOT_INDEX_DATASET_KEY = "slotIndex";
+var SLOT_ACTIVE_DATASET_KEY = "slotActive";
+var FEED_CLASS_PREFIX = "sv-feed";
+
+export { FEED_CLASS_PREFIX, FEED_CSS, FeedContext, FeedHeadless, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, getSlotIndexFromPosition, useFeedContext, useFeedPosition, useOptionalFeedContext };

package/dist/chunk-BNI7CYRI.js

@@ -0,0 +1,334 @@
+import { useDoubleTap, VideoSlotPlayIndicatorInner } from './chunk-MFJS65C5.js';
+import { ImageCarouselHeadless } from './chunk-GSNIZ6DF.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { createContext, memo, useInsertionEffect, useState, useRef, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ArticleSlot/ArticleSlot.css.ts
+var ARTICLE_SLOT_CSS = `.sv-article-slot{position:relative;width:100%;height:100%;overflow:hidden;background:var(--sv-article-bg,#000);touch-action:pan-y;user-select:none;-webkit-user-select:none}.sv-article-slot--active{z-index:1}.sv-article-slot__images{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.sv-article-slot__overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;z-index:2}.sv-article-slot__overlay>*{pointer-events:auto}.sv-article-slot__gradient{position:absolute;left:0;right:0;pointer-events:none}.sv-article-slot__gradient--top{top:0;height:120px;background:linear-gradient(to bottom,rgba(0,0,0,.5)0%,rgba(0,0,0,.3)50%,transparent 100%)}.sv-article-slot__gradient--bottom{bottom:0;height:200px;background:linear-gradient(to top,rgba(0,0,0,.7)0%,rgba(0,0,0,.4)50%,transparent 100%)}.sv-article-slot__top-bar{position:absolute;top:0;left:0;right:0;padding:var(--sv-article-top-padding,16px);display:flex;justify-content:space-between;align-items:flex-start;z-index:10}.sv-article-slot__counter{padding:4px 10px;background:var(--sv-article-counter-bg,rgba(0,0,0,.6));border-radius:12px;font-size:var(--sv-article-counter-font-size,12px);font-weight:500;color:var(--sv-article-counter-color,#fff)}.sv-article-slot__badge{padding:4px 8px;background:var(--sv-article-badge-bg,rgba(255,255,255,.2));border-radius:4px;font-size:var(--sv-article-badge-font-size,11px);font-weight:500;color:var(--sv-article-badge-color,#fff);text-transform:uppercase;letter-spacing:.5px}.sv-article-slot__bottom{position:absolute;bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-playlist-bar-offset,0));left:0;right:var(--sv-article-action-bar-width,72px);padding:var(--sv-article-bottom-padding,16px);display:flex;flex-direction:column;gap:12px;z-index:5;transition:bottom .3s ease-in-out}.sv-article-slot__author{display:flex;align-items:center;gap:10px}.sv-article-slot__author-avatar{width:var(--sv-article-avatar-size,40px);height:var(--sv-article-avatar-size,40px);border-radius:50%;object-fit:cover;border:2px solid var(--sv-article-avatar-border,rgba(255,255,255,.3))}.sv-article-slot__author-name{font-size:var(--sv-article-author-font-size,15px);font-weight:600;color:var(--sv-article-author-color,#fff);text-shadow:0 1px 2px rgba(0,0,0,.5)}.sv-article-slot__caption{font-size:var(--sv-article-caption-font-size,14px);line-height:1.4;color:var(--sv-article-caption-color,#fff);text-shadow:0 1px 2px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:var(--sv-article-caption-lines,2);-webkit-box-orient:vertical;overflow:hidden}.sv-article-slot__caption--expanded{-webkit-line-clamp:unset;overflow:visible}.sv-article-slot__read-more{display:inline-flex;align-items:center;gap:4px;padding:8px 16px;background:var(--sv-article-read-more-bg,rgba(255,255,255,.2));border:0;border-radius:20px;font-size:var(--sv-article-read-more-font-size,13px);font-weight:500;color:var(--sv-article-read-more-color,#fff);cursor:pointer;transition:background .2s ease;width:fit-content}.sv-article-slot__read-more:hover{background:var(--sv-article-read-more-hover-bg,rgba(255,255,255,.3))}.sv-article-slot__read-more svg{width:16px;height:16px}.sv-article-slot__actions{position:absolute;right:0;bottom:calc(var(--sv-safe-area-bottom,0)+var(--sv-playlist-bar-offset,0));width:var(--sv-article-action-bar-width,72px);padding:var(--sv-article-actions-padding,16px 8px);display:flex;flex-direction:column;align-items:center;gap:20px;z-index:5;transition:bottom .3s ease-in-out}.sv-article-slot__music{overflow:hidden;aspect-ratio:1/1;background:transparent;width:fit-content;height:fit-content;border:0}.sv-article-slot__music-cover{width:44px;height:44px;object-fit:cover;border-radius:999px;border:2px solid var(--sv-article-music-border,rgba(255,255,255,.3))}.sv-article-slot__music-cover--playing{animation:sv-music-rotate 4s linear infinite}@keyframes sv-music-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sv-article-slot__like-animation{position:absolute;inset:0;pointer-events:none;z-index:20}.sv-article-slot--clean-mode .sv-article-slot__overlay,.sv-article-slot--clean-mode .sv-article-slot__top-bar,.sv-article-slot--clean-mode .sv-article-slot__bottom,.sv-article-slot--clean-mode .sv-article-slot__actions,.sv-article-slot--clean-mode .sv-article-slot__gradient{opacity:0;transition:opacity .3s ease}.sv-article-slot--loading .sv-article-slot__skeleton{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.05)25%,rgba(255,255,255,.1)50%,rgba(255,255,255,.05)75%);background-size:200% 100%;animation:sv-article-shimmer 1.5s infinite}@keyframes sv-article-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.sv-article-slot:focus-visible{outline:2px solid var(--sv-article-focus-color,#4dabff);outline-offset:-2px}.sv-article-slot__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`;
+var cssInjected = false;
+function injectArticleSlotCSS() {
+  if (cssInjected) return void 0;
+  cssInjected = true;
+  return injectComponentCSS("article-slot", ARTICLE_SLOT_CSS);
+}
+var ARTICLE_SLOT_CLASS = "sv-article-slot";
+var ARTICLE_SLOT_ACTIVE_CLASS = "sv-article-slot--active";
+var ARTICLE_SLOT_CLEAN_MODE_CLASS = "sv-article-slot--clean-mode";
+var ARTICLE_ID_ATTR = "data-article-id";
+var ARTICLE_ACTIVE_ATTR = "data-active";
+var ArticleSlotContext = createContext(null);
+function useArticleSlotContext() {
+  const context = useContext(ArticleSlotContext);
+  if (!context) {
+    throw new Error("useArticleSlotContext must be used within ArticleSlotHeadless");
+  }
+  return context;
+}
+function useOptionalArticleSlotContext() {
+  return useContext(ArticleSlotContext);
+}
+var ANIMATION_SELECTOR = '[data-like-animation="true"]';
+function ArticleSlotHeadlessBase({
+  article,
+  isActive = false,
+  currentImageIndex: controlledIndex,
+  onImageIndexChange,
+  music,
+  isMusicPlaying = false,
+  onToggleMusic,
+  lastMusicToggleTime: controlledToggleTime,
+  isCleanMode = false,
+  onTap,
+  onDoubleTap,
+  onLongPress,
+  onReadMoreClick,
+  disableTap = false,
+  enableZoom = false,
+  renderPlaceholder,
+  showCounter = true,
+  showIndicators = true,
+  className,
+  onSwipeDirectionChange,
+  children,
+  style
+}) {
+  useInsertionEffect(() => {
+    return injectArticleSlotCSS();
+  }, []);
+  const [internalIndex, setInternalIndex] = useState(0);
+  const currentIndex = controlledIndex ?? internalIndex;
+  const [internalToggleTime, setInternalToggleTime] = useState(0);
+  const lastMusicToggleTime = controlledToggleTime ?? internalToggleTime;
+  const containerRef = useRef(null);
+  const totalImages = article.images.length;
+  const handleImageIndexChange = useCallback(
+    (index) => {
+      setInternalIndex(index);
+      onImageIndexChange?.(index);
+    },
+    [onImageIndexChange]
+  );
+  const goToImage = useCallback(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(totalImages - 1, index));
+      handleImageIndexChange(clampedIndex);
+    },
+    [totalImages, handleImageIndexChange]
+  );
+  const nextImage = useCallback(() => {
+    if (currentIndex < totalImages - 1) {
+      goToImage(currentIndex + 1);
+    }
+  }, [currentIndex, totalImages, goToImage]);
+  const prevImage = useCallback(() => {
+    if (currentIndex > 0) {
+      goToImage(currentIndex - 1);
+    }
+  }, [currentIndex, goToImage]);
+  const toggleMusic = useCallback(() => {
+    if (controlledToggleTime === void 0) {
+      setInternalToggleTime(Date.now());
+    }
+    onToggleMusic?.();
+  }, [onToggleMusic, controlledToggleTime]);
+  const expandCaption = useCallback(() => {
+    onReadMoreClick?.();
+  }, [onReadMoreClick]);
+  const triggerLikeAnimation = useCallback((position) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const animationEl = container.querySelector(ANIMATION_SELECTOR);
+    if (!animationEl) return;
+    const ref = animationEl.__likeAnimation;
+    if (ref?.triggerHeart) {
+      ref.triggerHeart(position.x, position.y);
+    }
+  }, []);
+  const { handlers: doubleTapHandlers } = useDoubleTap({
+    containerRef,
+    disabled: disableTap,
+    onSingleTap: onTap,
+    onDoubleTap: (position) => {
+      triggerLikeAnimation(position);
+      onDoubleTap?.();
+    },
+    onLongPress: onLongPress ? () => onLongPress() : void 0,
+    longPressDelay: 500
+  });
+  const contextValue = useMemo(
+    () => ({
+      article,
+      currentImageIndex: currentIndex,
+      totalImages,
+      isActive,
+      isCleanMode,
+      lastMusicToggleTime,
+      music,
+      isMusicPlaying,
+      toggleMusic,
+      goToImage,
+      nextImage,
+      prevImage,
+      expandCaption
+    }),
+    [
+      article,
+      currentIndex,
+      totalImages,
+      isActive,
+      isCleanMode,
+      lastMusicToggleTime,
+      music,
+      isMusicPlaying,
+      toggleMusic,
+      goToImage,
+      nextImage,
+      prevImage,
+      expandCaption
+    ]
+  );
+  const containerClassName = clsx2(
+    ARTICLE_SLOT_CLASS,
+    isActive && ARTICLE_SLOT_ACTIVE_CLASS,
+    isCleanMode && ARTICLE_SLOT_CLEAN_MODE_CLASS,
+    className
+  );
+  return /* @__PURE__ */ jsx(ArticleSlotContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClassName,
+      ...{ [ARTICLE_ID_ATTR]: article.id },
+      ...{ [ARTICLE_ACTIVE_ATTR]: isActive ? "true" : "false" },
+      ...doubleTapHandlers,
+      "aria-label": `Article by ${article.author?.name ?? "Unknown"}, ${totalImages} images`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sv-article-slot__images", children: /* @__PURE__ */ jsx(
+          ImageCarouselHeadless,
+          {
+            images: article.images,
+            currentIndex,
+            onIndexChange: handleImageIndexChange,
+            showIndicators: showIndicators && totalImages > 1,
+            indicatorStyle: "dots",
+            enableZoom,
+            lazyLoad: true,
+            renderPlaceholder,
+            onSwipeDirectionChange
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "sv-article-slot__gradient sv-article-slot__gradient--top" }),
+        /* @__PURE__ */ jsx("div", { className: "sv-article-slot__gradient sv-article-slot__gradient--bottom" }),
+        showCounter && totalImages > 1 && /* @__PURE__ */ jsx("div", { className: "sv-article-slot__top-bar", children: /* @__PURE__ */ jsxs("div", { className: "sv-article-slot__counter", children: [
+          currentIndex + 1,
+          "/",
+          totalImages
+        ] }) }),
+        typeof children === "function" ? children(contextValue) : children
+      ]
+    }
+  ) });
+}
+var ArticleSlotHeadless = memo(ArticleSlotHeadlessBase);
+ArticleSlotHeadless.displayName = "ArticleSlotHeadless";
+function ArticleSlotOverlay({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-article-slot__overlay", className), children });
+}
+function ArticleSlotBottom({
+  children,
+  className,
+  onClick
+}) {
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    /* @__PURE__ */ jsx("div", { className: clsx2("sv-article-slot__bottom", className), onClick, children })
+  );
+}
+function ArticleSlotActions({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-article-slot__actions", className), children });
+}
+function ArticleSlotCaption({
+  maxLines = 2,
+  expanded = false,
+  className
+}) {
+  const { article } = useArticleSlotContext();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: clsx2(
+        "sv-article-slot__caption",
+        expanded && "sv-article-slot__caption--expanded",
+        className
+      ),
+      style: { WebkitLineClamp: expanded ? "unset" : maxLines },
+      children: article.caption
+    }
+  );
+}
+function ArticleSlotReadMore({
+  label = "Read More",
+  className,
+  onClick
+}) {
+  const { expandCaption } = useArticleSlotContext();
+  const handleClick = useCallback(() => {
+    onClick?.() ?? expandCaption();
+  }, [onClick, expandCaption]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx2("sv-article-slot__read-more", className),
+      onClick: handleClick,
+      children: [
+        label,
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "9 6 15 12 9 18" }) })
+      ]
+    }
+  );
+}
+function MusicCoverFallback({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "22", fill: "#1a1a1a", stroke: "#333", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "18", fill: "none", stroke: "#2a2a2a", strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "14", fill: "none", stroke: "#2a2a2a", strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "10", fill: "none", stroke: "#2a2a2a", strokeWidth: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "6", fill: "#ff4757" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "2", fill: "#1a1a1a" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M26 21v5.5c0 1.38-1.12 2.5-2.5 2.5S21 27.88 21 26.5s1.12-2.5 2.5-2.5c.41 0 .79.1 1.13.27V21h1.37z",
+            fill: "white"
+          }
+        )
+      ]
+    }
+  );
+}
+function ArticleSlotMusic({
+  className,
+  onClick,
+  fallbackCover
+}) {
+  const { music, isMusicPlaying } = useArticleSlotContext();
+  const [hasError, setHasError] = useState(false);
+  if (!music) return null;
+  const coverClassName = clsx2(
+    "sv-article-slot__music-cover",
+    isMusicPlaying && "sv-article-slot__music-cover--playing"
+  );
+  const renderFallback = () => {
+    if (fallbackCover) {
+      return /* @__PURE__ */ jsx("span", { className: coverClassName, children: fallbackCover });
+    }
+    return /* @__PURE__ */ jsx(MusicCoverFallback, { className: coverClassName });
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx2("sv-article-slot__music", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.();
+      },
+      children: music.cover && !hasError ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: music.cover,
+          alt: "",
+          className: coverClassName,
+          onError: () => setHasError(true)
+        }
+      ) : renderFallback()
+    }
+  );
+}
+function ArticleSlotPlayIndicator(props) {
+  const context = useOptionalArticleSlotContext();
+  if (!context || !context.music) return null;
+  return /* @__PURE__ */ jsx(
+    VideoSlotPlayIndicatorInner,
+    {
+      ...props,
+      lastUserToggleTime: context.lastMusicToggleTime,
+      isPlaying: context.isMusicPlaying
+    }
+  );
+}
+ArticleSlotPlayIndicator.displayName = "ArticleSlotPlayIndicator";
+
+export { ARTICLE_ACTIVE_ATTR, ARTICLE_ID_ATTR, ARTICLE_SLOT_ACTIVE_CLASS, ARTICLE_SLOT_CLASS, ARTICLE_SLOT_CLEAN_MODE_CLASS, ARTICLE_SLOT_CSS, ArticleSlotActions, ArticleSlotBottom, ArticleSlotCaption, ArticleSlotHeadless, ArticleSlotMusic, ArticleSlotOverlay, ArticleSlotPlayIndicator, ArticleSlotReadMore, useArticleSlotContext, useOptionalArticleSlotContext };

package/dist/{chunk-UPCVSGWH.js → chunk-CAWE42LH.js}

@@ -1,7 +1,8 @@
 // src/utils/injectComponentCSS.ts
 var injectedStyles = /* @__PURE__ */ new Set();
 var STYLE_ID_PREFIX = "sv-styles-";
-function injectComponentCSS(componentId, css) {
+function injectComponentCSS(componentId, css, options = {}) {
+  const { layered = true } = options;
   if (typeof document === "undefined") {
     return () => {
     };
@@ -20,7 +21,9 @@ function injectComponentCSS(componentId, css) {
   const style = document.createElement("style");
   style.id = styleId;
   style.setAttribute("data-sv-component", componentId);
-  style.textContent = css;
+  style.textContent = layered ? `@layer sv {
+${css}
+}` : css;
   document.head.appendChild(style);
   injectedStyles.add(componentId);
   return () => {