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

package/dist/chunk-FR7UQSZP.js

@@ -0,0 +1,570 @@
+import { ImageCarouselHeadless } from './chunk-Q6MG7AVG.js';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { createContext, memo, useInsertionEffect, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/DetailView/DetailView.css.ts
+var DETAIL_VIEW_CSS = `.sv-detail-view{position:fixed;inset:0;z-index:var(--sv-detail-view-z-index,1000);background:var(--sv-detail-view-bg,#000);overflow:hidden;touch-action:none}.sv-detail-view--entering{animation:sv-detail-view-enter .3s cubic-bezier(.32,.72,0,1)forwards}.sv-detail-view--exiting{animation:sv-detail-view-exit .3s cubic-bezier(.32,.72,0,1)forwards}.sv-detail-view--dragging{transition:none}@keyframes sv-detail-view-enter{from{opacity:0;transform:translateY(100%)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes sv-detail-view-exit{from{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(100%)scale(.9)}}.sv-detail-view__backdrop{position:absolute;inset:0;background:var(--sv-detail-view-backdrop-bg,rgba(0,0,0,.8));opacity:1;transition:opacity .3s ease}.sv-detail-view--exiting .sv-detail-view__backdrop{opacity:0}.sv-detail-view__container{position:absolute;inset:0;display:flex;flex-direction:column;will-change:transform}.sv-detail-view__header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:var(--sv-detail-view-header-padding,12px 16px);background:var(--sv-detail-view-header-bg,rgba(0,0,0,.8));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.sv-detail-view__back-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--sv-detail-view-back-bg,rgba(255,255,255,.1));color:var(--sv-detail-view-back-color,#fff);cursor:pointer;transition:background .2s ease}.sv-detail-view__back-button:hover{background:var(--sv-detail-view-back-hover-bg,rgba(255,255,255,.2))}.sv-detail-view__back-button svg{width:24px;height:24px}.sv-detail-view__title{font-size:var(--sv-detail-view-title-font-size,16px);font-weight:600;color:var(--sv-detail-view-title-color,#fff)}.sv-detail-view__actions{display:flex;gap:8px}.sv-detail-view__drag-indicator{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:5px;background:var(--sv-detail-view-drag-indicator-bg,rgba(255,255,255,.3));border-radius:3px;z-index:20}.sv-detail-view__scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;padding-bottom:70px}.sv-detail-view__content{min-height:100%}.sv-detail-view__gallery{position:relative;width:100%;aspect-ratio:1;background:var(--sv-detail-view-gallery-bg,#111);overflow:hidden}.sv-detail-view__gallery-image{width:100%;height:100%;object-fit:contain}.sv-detail-view__gallery-pagination{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px 12px;background:rgba(0,0,0,.5);border-radius:20px}.sv-detail-view__gallery-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);border:0;padding:0;cursor:pointer;transition:all .2s ease}.sv-detail-view__gallery-dot--active{background:#fff;transform:scale(1.2)}.sv-detail-view__author{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--sv-detail-view-border-color,rgba(255,255,255,.1))}.sv-detail-view__author-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}.sv-detail-view__author-info{flex:1}.sv-detail-view__author-name{font-size:15px;font-weight:600;color:var(--sv-detail-view-text-color,#fff)}.sv-detail-view__author-date{font-size:13px;color:var(--sv-detail-view-secondary-color,rgba(255,255,255,.6));margin-top:2px}.sv-detail-view__follow-button{padding:8px 20px;background:var(--sv-detail-view-follow-bg,#fe2c55);border:0;border-radius:4px;font-size:14px;font-weight:600;color:#fff;cursor:pointer;transition:opacity .2s ease}.sv-detail-view__follow-button:hover{opacity:.9}.sv-detail-view__follow-button--following{background:var(--sv-detail-view-following-bg,rgba(255,255,255,.1));color:var(--sv-detail-view-following-color,#fff)}.sv-detail-view__caption{padding:16px;font-size:var(--sv-detail-view-caption-font-size,15px);line-height:1.5;color:var(--sv-detail-view-text-color,#fff);white-space:pre-wrap;word-break:break-word}.sv-detail-view__hashtag{color:var(--sv-detail-view-hashtag-color,#4dabff);cursor:pointer}.sv-detail-view__hashtag:hover{text-decoration:underline}.sv-detail-view__stats{display:flex;gap:24px;padding:16px 0;border-top:1px solid var(--sv-detail-view-border-color,rgba(255,255,255,.1))}.sv-detail-view__stat{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--sv-detail-view-secondary-color,rgba(255,255,255,.6))}.sv-detail-view__stat-value{font-weight:600;color:var(--sv-detail-view-text-color,#fff)}.sv-detail-view__action-bar{position:sticky;bottom:0;display:flex;justify-content:space-around;padding:12px 16px;background:var(--sv-detail-view-action-bar-bg,rgba(0,0,0,.9));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--sv-detail-view-border-color,rgba(255,255,255,.1))}.sv-detail-view__action{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;border:0;background:transparent;color:var(--sv-detail-view-action-color,#fff);cursor:pointer;transition:opacity .2s ease}.sv-detail-view__action:hover{opacity:.8}.sv-detail-view__action--active{color:var(--sv-detail-view-action-active-color,#fe2c55)}.sv-detail-view__action svg{width:24px;height:24px}.sv-detail-view__action-label{font-size:12px}.sv-detail-view__music{display:flex;align-items:center;gap:12px;padding:12px;margin:0 16px 16px;background:var(--sv-detail-view-music-bg,rgba(255,255,255,.05));border-radius:8px;border:0;width:calc(100% - 32px);cursor:pointer;text-align:left}.sv-detail-view__music-cover{width:48px;height:48px;border-radius:4px;object-fit:cover}.sv-detail-view__music-info{flex:1;overflow:hidden}.sv-detail-view__music-title{font-size:14px;font-weight:500;color:var(--sv-detail-view-text-color,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-detail-view__music-artist{font-size:12px;color:var(--sv-detail-view-secondary-color,rgba(255,255,255,.6));margin-top:2px}.sv-detail-view__music-icon{width:24px;height:24px;color:var(--sv-detail-view-secondary-color,rgba(255,255,255,.6))}.sv-detail-view__header-author{display:flex;align-items:center;gap:10px;flex:1;min-width:0;margin-left:12px}.sv-detail-view__header-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.sv-detail-view__header-name{font-size:15px;font-weight:600;color:var(--sv-detail-view-text-color,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-detail-view__follow-btn{padding:6px 16px;font-size:13px;font-weight:600;border:0;border-radius:4px;background:var(--sv-detail-view-follow-bg,#fe2c55);color:#fff;cursor:pointer;transition:background .2s ease,opacity .2s ease;flex-shrink:0}.sv-detail-view__follow-btn:hover{opacity:.9}.sv-detail-view__follow-btn--following{background:var(--sv-detail-view-following-bg,rgba(255,255,255,.12));color:var(--sv-detail-view-text-color,#fff)}.sv-detail-view__bottom-bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--sv-detail-view-bottom-bar-bg,rgba(0,0,0,.95));border-top:1px solid var(--sv-detail-view-border-color,rgba(255,255,255,.1));z-index:20}.sv-detail-view__comment-input{flex:1;display:flex;align-items:center;background:var(--sv-detail-view-input-bg,rgba(255,255,255,.08));border-radius:18px;min-width:0;overflow:hidden}.sv-detail-view__bottom-bar .sv-detail-view__comment-input input,.sv-detail-view__comment-field,input.sv-detail-view__comment-field{flex:1;width:100%;height:auto;padding:10px 14px;margin:0;border:0;border-radius:0;background:transparent;background-color:transparent;font-family:inherit;font-size:14px;line-height:1.4;color:var(--sv-detail-view-text-color,#fff);outline:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.sv-detail-view__bottom-bar .sv-detail-view__comment-input input::placeholder,.sv-detail-view__comment-field::placeholder,input.sv-detail-view__comment-field::placeholder{color:var(--sv-detail-view-placeholder-color,rgba(255,255,255,.5));opacity:1}.sv-detail-view__bottom-bar .sv-detail-view__comment-input input:focus,.sv-detail-view__comment-field:focus,input.sv-detail-view__comment-field:focus{outline:none;box-shadow:none;border:0}.sv-detail-view__bottom-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sv-detail-view__action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:40px;padding:4px 6px;background:0 0;border:0;color:var(--sv-detail-view-text-color,#fff);cursor:pointer;transition:transform .15s ease,color .15s ease}.sv-detail-view__action-btn:hover{transform:scale(1.05)}.sv-detail-view__action-btn:active{transform:scale(.95)}.sv-detail-view__action-btn--active{color:var(--sv-detail-view-active-color,#fe2c55)}.sv-detail-view__action-btn svg{width:22px;height:22px}.sv-detail-view__action-count{font-size:11px;margin-top:2px;color:var(--sv-detail-view-secondary-color,rgba(255,255,255,.7))}.sv-detail-view__action-btn--active .sv-detail-view__action-count{color:var(--sv-detail-view-active-color,#fe2c55)}.sv-detail-view:focus-visible{outline:2px solid var(--sv-detail-view-focus-color,#4dabff);outline-offset:-2px}.sv-detail-view__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 injectDetailViewCSS() {
+  if (cssInjected) return void 0;
+  cssInjected = true;
+  return injectComponentCSS("detail-view", DETAIL_VIEW_CSS);
+}
+var DetailViewContext = createContext(null);
+function useDetailViewContext() {
+  const context = useContext(DetailViewContext);
+  if (!context) {
+    throw new Error("useDetailViewContext must be used within DetailViewHeadless");
+  }
+  return context;
+}
+function BackIcon() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) });
+}
+function HeartIcon({ filled = false }) {
+  return filled ? /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "#fe2c55", children: /* @__PURE__ */ jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }) : /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" }) });
+}
+function CommentIcon() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) });
+}
+function BookmarkIcon({ filled = false }) {
+  return filled ? /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z" }) }) : /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" }) });
+}
+function ShareIcon() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13" }) });
+}
+var DEFAULT_ANIMATION_DURATION = 300;
+var DEFAULT_SWIPE_THRESHOLD = 0.3;
+function formatCount(count) {
+  if (count >= 1e6) {
+    return `${(count / 1e6).toFixed(1)}M`;
+  }
+  if (count >= 1e3) {
+    return `${(count / 1e3).toFixed(1)}K`;
+  }
+  return count.toString();
+}
+function DetailViewHeadlessBase({
+  isOpen,
+  onClose,
+  imagePost,
+  initialImageIndex = 0,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  enableSwipeToClose = true,
+  swipeCloseThreshold = DEFAULT_SWIPE_THRESHOLD,
+  headerTitle = "Post",
+  showDragIndicator = false,
+  // Action states
+  isLiked = false,
+  isBookmarked = false,
+  isFollowing = false,
+  // Action callbacks
+  onLike,
+  onComment,
+  onShare,
+  onBookmark,
+  onFollow,
+  // Bottom bar customization
+  renderBottomBar,
+  hideBottomBar = false,
+  className,
+  children
+}) {
+  useInsertionEffect(() => {
+    return injectDetailViewCSS();
+  }, []);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [viewState, setViewState] = useState("entering");
+  const [currentImageIndex, setCurrentImageIndex] = useState(initialImageIndex);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartRef = useRef(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (isOpen && !isVisible) {
+      setIsVisible(true);
+      setIsAnimating(true);
+      setViewState("entering");
+      setCurrentImageIndex(initialImageIndex);
+      const timer = setTimeout(() => {
+        setViewState("visible");
+        setIsAnimating(false);
+      }, animationDuration);
+      return () => clearTimeout(timer);
+    }
+    if (!isOpen && isVisible) {
+      setIsAnimating(true);
+      setViewState("exiting");
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+        setIsAnimating(false);
+        setViewState("entering");
+        setDragOffset(0);
+      }, animationDuration);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [isOpen, isVisible, animationDuration, initialImageIndex]);
+  useEffect(() => {
+    if (isVisible) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+    return void 0;
+  }, [isVisible]);
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const handlePointerDown = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (!enableSwipeToClose) return;
+      const target = e.target;
+      const isInteractive = target.tagName === "BUTTON" || target.tagName === "A" || target.tagName === "INPUT" || target.closest("button") || target.closest("a") || target.closest('[role="button"]');
+      if (isInteractive) return;
+      dragStartRef.current = {
+        y: e.clientY,
+        time: Date.now()
+      };
+      setIsDragging(true);
+    },
+    [enableSwipeToClose]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (!isDragging || !dragStartRef.current) return;
+      const dy = e.clientY - dragStartRef.current.y;
+      if (dy > 0) {
+        setDragOffset(dy);
+      }
+    },
+    [isDragging]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (!isDragging || !dragStartRef.current) return;
+      const container = containerRef.current;
+      if (!container) {
+        setIsDragging(false);
+        setDragOffset(0);
+        dragStartRef.current = null;
+        return;
+      }
+      const containerHeight = container.offsetHeight;
+      const threshold = containerHeight * swipeCloseThreshold;
+      const velocity = dragOffset / (Date.now() - dragStartRef.current.time);
+      if (dragOffset > threshold || velocity > 0.5) {
+        handleClose();
+      }
+      setIsDragging(false);
+      setDragOffset(0);
+      dragStartRef.current = null;
+    },
+    [isDragging, dragOffset, swipeCloseThreshold, handleClose]
+  );
+  const stopEventPropagation = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  useEffect(() => {
+    if (!isVisible) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible, handleClose]);
+  const contextValue = useMemo(
+    () => ({
+      imagePost,
+      currentImageIndex,
+      setCurrentImageIndex,
+      close: handleClose,
+      isAnimating,
+      actions: {
+        onLike,
+        onComment,
+        onShare,
+        onBookmark,
+        onFollow
+      },
+      states: {
+        isLiked,
+        isBookmarked,
+        isFollowing
+      }
+    }),
+    [
+      imagePost,
+      currentImageIndex,
+      handleClose,
+      isAnimating,
+      onLike,
+      onComment,
+      onShare,
+      onBookmark,
+      onFollow,
+      isLiked,
+      isBookmarked,
+      isFollowing
+    ]
+  );
+  if (!isVisible) return null;
+  const containerStyle = isDragging ? {
+    transform: `translateY(${dragOffset}px)`,
+    opacity: 1 - dragOffset / (containerRef.current?.offsetHeight ?? 1) / 2
+  } : void 0;
+  return /* @__PURE__ */ jsx(DetailViewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx2(
+        "sv-detail-view",
+        viewState === "entering" && "sv-detail-view--entering",
+        viewState === "exiting" && "sv-detail-view--exiting",
+        isDragging && "sv-detail-view--dragging",
+        className
+      ),
+      "aria-modal": "true",
+      "aria-label": `Detail view for post by ${imagePost.author?.name ?? "Unknown"}`,
+      onClick: stopEventPropagation,
+      onPointerDown: stopEventPropagation,
+      onPointerMove: stopEventPropagation,
+      onPointerUp: stopEventPropagation,
+      onPointerCancel: stopEventPropagation,
+      onTouchStart: stopEventPropagation,
+      onTouchMove: stopEventPropagation,
+      onTouchEnd: stopEventPropagation,
+      onTouchCancel: stopEventPropagation,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sv-detail-view__backdrop", onClick: handleClose }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "sv-detail-view__container",
+            style: containerStyle,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerLeave: handlePointerUp,
+            children: [
+              showDragIndicator && /* @__PURE__ */ jsx("div", { className: "sv-detail-view__drag-indicator" }),
+              /* @__PURE__ */ jsxs("header", { className: "sv-detail-view__header", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "sv-detail-view__back-button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleClose();
+                    },
+                    onPointerDown: (e) => e.stopPropagation(),
+                    "aria-label": "Back",
+                    children: /* @__PURE__ */ jsx(BackIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "sv-detail-view__header-author", children: [
+                  imagePost.author?.avatar && /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: imagePost.author.avatar,
+                      alt: imagePost.author.name,
+                      className: "sv-detail-view__header-avatar"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "sv-detail-view__header-name", children: imagePost.author?.name ?? headerTitle })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "sv-detail-view__scroll", children: /* @__PURE__ */ jsx("div", { className: "sv-detail-view__content", children }) }),
+              !hideBottomBar && (renderBottomBar ? renderBottomBar() : /* @__PURE__ */ jsx(
+                DetailViewDefaultBottomBar,
+                {
+                  imagePost,
+                  isLiked,
+                  isBookmarked,
+                  onLike,
+                  onComment,
+                  onShare,
+                  onBookmark
+                }
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+var DetailViewHeadless = memo(DetailViewHeadlessBase);
+DetailViewHeadless.displayName = "DetailViewHeadless";
+function DetailViewGallery({
+  enableZoom = true,
+  className
+}) {
+  const { imagePost, currentImageIndex, setCurrentImageIndex } = useDetailViewContext();
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-detail-view__gallery", className), children: /* @__PURE__ */ jsx(
+    ImageCarouselHeadless,
+    {
+      images: imagePost.images,
+      currentIndex: currentImageIndex,
+      onIndexChange: setCurrentImageIndex,
+      showIndicators: imagePost.images.length > 1,
+      indicatorStyle: "dots",
+      enableZoom,
+      lazyLoad: false
+    }
+  ) });
+}
+function DetailViewAuthor({
+  isFollowing = false,
+  onFollowClick,
+  showFollowButton = true,
+  formatDate = (date) => new Date(date).toLocaleDateString(),
+  followLabel = "Follow",
+  followingLabel = "Following",
+  className
+}) {
+  const { imagePost } = useDetailViewContext();
+  const author = imagePost.author;
+  if (!author) return null;
+  return /* @__PURE__ */ jsxs("div", { className: clsx2("sv-detail-view__author", className), children: [
+    author.avatar && /* @__PURE__ */ jsx("img", { src: author.avatar, alt: author.name, className: "sv-detail-view__author-avatar" }),
+    /* @__PURE__ */ jsxs("div", { className: "sv-detail-view__author-info", children: [
+      /* @__PURE__ */ jsx("div", { className: "sv-detail-view__author-name", children: author.name }),
+      imagePost.createdAt && /* @__PURE__ */ jsx("div", { className: "sv-detail-view__author-date", children: formatDate(imagePost.createdAt) })
+    ] }),
+    showFollowButton && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx2(
+          "sv-detail-view__follow-button",
+          isFollowing && "sv-detail-view__follow-button--following"
+        ),
+        onClick: onFollowClick,
+        children: isFollowing ? followingLabel : followLabel
+      }
+    )
+  ] });
+}
+function DetailViewCaption({
+  renderHashtag,
+  className
+}) {
+  const { imagePost } = useDetailViewContext();
+  if (!imagePost.caption) return null;
+  const parts = imagePost.caption.split(/(#\w+)/g);
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-detail-view__caption", className), children: parts.map((part, index) => {
+    if (part.startsWith("#")) {
+      return renderHashtag ? renderHashtag(part) : (
+        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+        /* @__PURE__ */ jsx("span", { className: "sv-detail-view__hashtag", children: part }, index)
+      );
+    }
+    return part;
+  }) });
+}
+function DetailViewStats({
+  formatNumber = (n) => n.toLocaleString(),
+  labels = {},
+  className
+}) {
+  const { imagePost } = useDetailViewContext();
+  const stats = imagePost.stats;
+  const { likes = "likes", comments = "comments", shares = "shares" } = labels;
+  return /* @__PURE__ */ jsxs("div", { className: clsx2("sv-detail-view__stats", className), children: [
+    stats.likes !== void 0 && /* @__PURE__ */ jsxs("div", { className: "sv-detail-view__stat", children: [
+      /* @__PURE__ */ jsx("span", { className: "sv-detail-view__stat-value", children: formatNumber(stats.likes) }),
+      /* @__PURE__ */ jsx("span", { children: likes })
+    ] }),
+    stats.comments !== void 0 && /* @__PURE__ */ jsxs("div", { className: "sv-detail-view__stat", children: [
+      /* @__PURE__ */ jsx("span", { className: "sv-detail-view__stat-value", children: formatNumber(stats.comments) }),
+      /* @__PURE__ */ jsx("span", { children: comments })
+    ] }),
+    stats.shares !== void 0 && /* @__PURE__ */ jsxs("div", { className: "sv-detail-view__stat", children: [
+      /* @__PURE__ */ jsx("span", { className: "sv-detail-view__stat-value", children: formatNumber(stats.shares) }),
+      /* @__PURE__ */ jsx("span", { children: shares })
+    ] })
+  ] });
+}
+function DetailViewMusic({
+  music,
+  isPlaying = false,
+  onClick,
+  className
+}) {
+  if (!music) return null;
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: clsx2("sv-detail-view__music", className), onClick, children: [
+    music.cover && /* @__PURE__ */ jsx("img", { src: music.cover, alt: music.title, className: "sv-detail-view__music-cover" }),
+    /* @__PURE__ */ jsxs("div", { className: "sv-detail-view__music-info", children: [
+      /* @__PURE__ */ jsx("div", { className: "sv-detail-view__music-title", children: music.title }),
+      /* @__PURE__ */ jsx("div", { className: "sv-detail-view__music-artist", children: music.artist })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": "true",
+        className: "sv-detail-view__music-icon",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        children: isPlaying ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16" }),
+          /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16" })
+        ] }) : /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+      }
+    )
+  ] });
+}
+function DetailViewDefaultBottomBar({
+  imagePost,
+  isLiked,
+  isBookmarked,
+  onLike,
+  onComment,
+  onShare,
+  onBookmark
+}) {
+  return /* @__PURE__ */ jsxs(DetailViewBottomBar, { children: [
+    /* @__PURE__ */ jsx(DetailViewCommentInput, { placeholder: "Add a comment..." }),
+    /* @__PURE__ */ jsxs(DetailViewActions, { children: [
+      /* @__PURE__ */ jsx(
+        DetailViewActionButton,
+        {
+          type: "like",
+          isActive: isLiked,
+          count: imagePost.stats.likes,
+          onClick: onLike
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DetailViewActionButton,
+        {
+          type: "comment",
+          count: imagePost.stats.comments,
+          onClick: onComment
+        }
+      ),
+      /* @__PURE__ */ jsx(DetailViewActionButton, { type: "bookmark", isActive: isBookmarked, onClick: onBookmark }),
+      /* @__PURE__ */ jsx(DetailViewActionButton, { type: "share", count: imagePost.stats.shares, onClick: onShare })
+    ] })
+  ] });
+}
+function DetailViewBottomBar({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: clsx2("sv-detail-view__bottom-bar", className),
+      onPointerDown: (e) => e.stopPropagation(),
+      children
+    }
+  );
+}
+function DetailViewCommentInput({
+  placeholder = "Add a comment...",
+  onSubmit,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-detail-view__comment-input", className), children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      className: "sv-detail-view__comment-field",
+      placeholder,
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter" && e.currentTarget.value.trim()) {
+          onSubmit?.(e.currentTarget.value.trim());
+          e.currentTarget.value = "";
+        }
+      },
+      onClick: (e) => e.stopPropagation()
+    }
+  ) });
+}
+function DetailViewActions({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-detail-view__bottom-actions", className), children });
+}
+function DetailViewActionButton({
+  type,
+  icon,
+  isActive = false,
+  count,
+  onClick,
+  ariaLabel,
+  className,
+  children
+}) {
+  const renderIcon = () => {
+    if (icon) return icon;
+    switch (type) {
+      case "like":
+        return /* @__PURE__ */ jsx(HeartIcon, { filled: isActive });
+      case "comment":
+        return /* @__PURE__ */ jsx(CommentIcon, {});
+      case "bookmark":
+        return /* @__PURE__ */ jsx(BookmarkIcon, { filled: isActive });
+      case "share":
+        return /* @__PURE__ */ jsx(ShareIcon, {});
+      default:
+        return null;
+    }
+  };
+  const getAriaLabel = () => {
+    if (ariaLabel) return ariaLabel;
+    switch (type) {
+      case "like":
+        return isActive ? "Unlike" : "Like";
+      case "comment":
+        return "Comment";
+      case "bookmark":
+        return isActive ? "Remove bookmark" : "Bookmark";
+      case "share":
+        return "Share";
+      default:
+        return void 0;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: clsx2(
+        "sv-detail-view__action-btn",
+        isActive && "sv-detail-view__action-btn--active",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.();
+      },
+      "aria-label": getAriaLabel(),
+      children: [
+        renderIcon(),
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "sv-detail-view__action-count", children: formatCount(count) }),
+        children
+      ]
+    }
+  );
+}
+var DetailViewIcons = {
+  Back: BackIcon,
+  Heart: HeartIcon,
+  Comment: CommentIcon,
+  Bookmark: BookmarkIcon,
+  Share: ShareIcon
+};
+
+export { DETAIL_VIEW_CSS, DetailViewActionButton, DetailViewActions, DetailViewAuthor, DetailViewBottomBar, DetailViewCaption, DetailViewCommentInput, DetailViewGallery, DetailViewHeadless, DetailViewIcons, DetailViewMusic, DetailViewStats, formatCount, useDetailViewContext };

package/dist/chunk-IWSBYOSS.js

@@ -0,0 +1,91 @@
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { useInsertionEffect, Component } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ErrorBoundary/ErrorBoundary.css.ts
+var ERROR_BOUNDARY_CSS = `.sv-error-boundary{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--sv-bg-primary,#000);color:var(--sv-text-primary,#fff);font-family:var(--sv-font-family,'Urbanist',sans-serif)}.sv-error-boundary--error .sv-error-boundary__content{display:flex;flex-direction:column;align-items:center;gap:var(--sv-spacing-md,16px);padding:var(--sv-spacing-lg,24px);text-align:center}.sv-error-boundary__icon{font-size:48px}.sv-error-boundary__message{font-size:var(--sv-font-size-md,14px);color:var(--sv-text-secondary,#999)}.sv-error-boundary__retry{padding:var(--sv-spacing-sm,8px)var(--sv-spacing-lg,24px);border:0;border-radius:var(--sv-border-radius-md,8px);background:var(--sv-color-primary,#fe2c55);color:#fff;font-size:var(--sv-font-size-sm,13px);font-weight:var(--sv-font-weight-medium,500);cursor:pointer;transition:opacity .2s ease}.sv-error-boundary__retry:hover{opacity:.9}.sv-error-boundary__retry:active{opacity:.8}.sv-error-boundary--toast{position:relative}.sv-error-boundary__toast{position:absolute;bottom:var(--sv-spacing-xl,32px);left:50%;transform:translateX(-50%);padding:var(--sv-spacing-sm,8px)var(--sv-spacing-md,16px);border-radius:var(--sv-border-radius-md,8px);background:rgba(0,0,0,.8);color:#fff;font-size:var(--sv-font-size-sm,13px);white-space:nowrap;animation:sv-toast-fade-in .3s ease}@keyframes sv-toast-fade-in{from{opacity:0;transform:translateX(-50%)translateY(10px)}to{opacity:1;transform:translateX(-50%)translateY(0)}}.sv-error-boundary--loading{background:var(--sv-bg-primary,#000)}.sv-error-boundary__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-spinner .8s linear infinite}@keyframes sv-spinner{to{transform:rotate(360deg)}}`;
+var ErrorBoundaryInternal = class extends Component {
+  constructor(props) {
+    super(props);
+    this.skipTimeoutId = null;
+    this.reset = () => {
+      const { onReset } = this.props;
+      this.clearSkipTimeout();
+      this.setState({ hasError: false, error: null, errorInfo: null });
+      onReset?.();
+    };
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    const { onError, mode = "show-error", skipDelay = 1e3 } = this.props;
+    this.setState({ errorInfo });
+    onError?.(error, errorInfo);
+    if (!this.skipTimeoutId && (mode === "auto-skip" || mode === "auto-skip-with-toast")) {
+      this.skipTimeoutId = setTimeout(() => {
+        this.handleSkip();
+      }, skipDelay);
+    }
+  }
+  componentWillUnmount() {
+    this.clearSkipTimeout();
+  }
+  /**
+   * Handle skip action with error safeguard
+   * Wraps onSkip in try/finally to ensure reset() is always called
+   */
+  handleSkip() {
+    const { onSkip } = this.props;
+    try {
+      onSkip?.();
+    } finally {
+      this.reset();
+    }
+  }
+  clearSkipTimeout() {
+    if (this.skipTimeoutId) {
+      clearTimeout(this.skipTimeoutId);
+      this.skipTimeoutId = null;
+    }
+  }
+  render() {
+    const {
+      children,
+      fallback,
+      mode = "show-error",
+      toastMessage = "Video unavailable, skipping..."
+    } = this.props;
+    const { hasError, error, errorInfo } = this.state;
+    if (!hasError) {
+      return children;
+    }
+    if (fallback) {
+      if (typeof fallback === "function") {
+        return fallback(error ?? new Error("Unknown error"), errorInfo, this.reset);
+      }
+      return fallback;
+    }
+    if (mode === "auto-skip-with-toast") {
+      return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--toast", children: /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__toast", children: toastMessage }) });
+    }
+    if (mode === "auto-skip") {
+      return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--loading" });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "sv-error-boundary sv-error-boundary--error", children: /* @__PURE__ */ jsxs("div", { className: "sv-error-boundary__content", children: [
+      /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsx("div", { className: "sv-error-boundary__message", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "sv-error-boundary__retry", onClick: this.reset, children: "Try Again" })
+    ] }) });
+  }
+};
+function ErrorBoundary(props) {
+  const { cssKey = "sv-error-boundary" } = props;
+  useInsertionEffect(() => {
+    return injectComponentCSS(cssKey, ERROR_BOUNDARY_CSS);
+  }, [cssKey]);
+  return /* @__PURE__ */ jsx(ErrorBoundaryInternal, { ...props });
+}
+
+export { ErrorBoundary };