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

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

@@ -0,0 +1,311 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImagePost, MusicInfo } from '@xhub-short/contracts';
+
+interface DetailViewContextValue {
+    /** The image post data */
+    imagePost: ImagePost;
+    /** Current image index */
+    currentImageIndex: number;
+    /** Set current image index */
+    setCurrentImageIndex: (index: number) => void;
+    /** Close detail view */
+    close: () => void;
+    /** Whether view is animating */
+    isAnimating: boolean;
+    /** Actions */
+    actions: {
+        onLike?: () => void;
+        onComment?: () => void;
+        onShare?: () => void;
+        onBookmark?: () => void;
+        onFollow?: () => void;
+    };
+    /** States */
+    states: {
+        isLiked: boolean;
+        isBookmarked: boolean;
+        isFollowing: boolean;
+    };
+}
+/**
+ * Hook to access DetailView context
+ * @throws if used outside DetailViewHeadless
+ */
+declare function useDetailViewContext(): DetailViewContextValue;
+declare function BackIcon(): react_jsx_runtime.JSX.Element;
+declare function HeartIcon({ filled }: {
+    filled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function CommentIcon(): react_jsx_runtime.JSX.Element;
+declare function BookmarkIcon({ filled }: {
+    filled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ShareIcon(): react_jsx_runtime.JSX.Element;
+interface DetailViewHeadlessProps {
+    /** Whether the detail view is open */
+    isOpen: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** The image post to display */
+    imagePost: ImagePost;
+    /** Initial image index */
+    initialImageIndex?: number;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Enable swipe down to close */
+    enableSwipeToClose?: boolean;
+    /** Swipe threshold (percentage) to trigger close */
+    swipeCloseThreshold?: number;
+    /** Custom header title (fallback if no author) */
+    headerTitle?: string;
+    /** Show drag indicator */
+    showDragIndicator?: boolean;
+    /** Whether post is liked */
+    isLiked?: boolean;
+    /** Whether post is bookmarked */
+    isBookmarked?: boolean;
+    /** Whether following author */
+    isFollowing?: boolean;
+    /** Like button handler */
+    onLike?: () => void;
+    /** Comment button handler */
+    onComment?: () => void;
+    /** Share button handler */
+    onShare?: () => void;
+    /** Bookmark button handler */
+    onBookmark?: () => void;
+    /** Follow button handler */
+    onFollow?: () => void;
+    /**
+     * Custom bottom bar renderer.
+     * When provided, replaces the entire default bottom bar.
+     * Use compound components (DetailViewBottomBar, DetailViewActionButton, etc.)
+     * to build custom layouts.
+     *
+     * @example
+     * ```tsx
+     * <DetailViewHeadless
+     *   renderBottomBar={() => (
+     *     <DetailViewBottomBar>
+     *       <DetailViewActionButton type="like" />
+     *       <DetailViewActionButton type="share" />
+     *     </DetailViewBottomBar>
+     *   )}
+     * />
+     * ```
+     */
+    renderBottomBar?: () => ReactNode;
+    /**
+     * Hide the default bottom bar completely.
+     * Use when you want to render your own bottom bar via children.
+     */
+    hideBottomBar?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Children */
+    children?: ReactNode;
+}
+declare function formatCount(count: number): string;
+declare function DetailViewHeadlessBase({ isOpen, onClose, imagePost, initialImageIndex, animationDuration, enableSwipeToClose, swipeCloseThreshold, headerTitle, showDragIndicator, isLiked, isBookmarked, isFollowing, onLike, onComment, onShare, onBookmark, onFollow, renderBottomBar, hideBottomBar, className, children, }: DetailViewHeadlessProps): ReactElement | null;
+declare const DetailViewHeadless: react.MemoExoticComponent<typeof DetailViewHeadlessBase>;
+/**
+ * Image Gallery for detail view
+ */
+interface DetailViewGalleryProps {
+    /** Enable zoom on images */
+    enableZoom?: boolean;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewGallery({ enableZoom, className, }: DetailViewGalleryProps): ReactElement;
+/**
+ * Author section for detail view
+ */
+interface DetailViewAuthorProps {
+    /** Whether user is following this author */
+    isFollowing?: boolean;
+    /** Follow button click handler */
+    onFollowClick?: () => void;
+    /** Show follow button */
+    showFollowButton?: boolean;
+    /** Format date function */
+    formatDate?: (date: Date | string) => string;
+    /** Follow button label */
+    followLabel?: string;
+    /** Following button label */
+    followingLabel?: string;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewAuthor({ isFollowing, onFollowClick, showFollowButton, formatDate, followLabel, followingLabel, className, }: DetailViewAuthorProps): ReactElement | null;
+/**
+ * Caption display for detail view
+ */
+interface DetailViewCaptionProps {
+    /** Render hashtags as links */
+    renderHashtag?: (hashtag: string) => ReactNode;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewCaption({ renderHashtag, className, }: DetailViewCaptionProps): ReactElement | null;
+/**
+ * Stats display for detail view
+ */
+interface DetailViewStatsProps {
+    /** Format number function */
+    formatNumber?: (num: number) => string;
+    /** Labels */
+    labels?: {
+        likes?: string;
+        comments?: string;
+        shares?: string;
+        views?: string;
+    };
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewStats({ formatNumber, labels, className, }: DetailViewStatsProps): ReactElement;
+/**
+ * Music bar for detail view
+ */
+interface DetailViewMusicProps {
+    /** Music info */
+    music?: MusicInfo;
+    /** Whether music is playing */
+    isPlaying?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewMusic({ music, isPlaying, onClick, className, }: DetailViewMusicProps): ReactElement | null;
+/**
+ * Bottom bar container
+ *
+ * Use this to wrap custom bottom bar content.
+ * Handles event propagation and styling.
+ *
+ * @example
+ * ```tsx
+ * <DetailViewHeadless
+ *   renderBottomBar={() => (
+ *     <DetailViewBottomBar>
+ *       <DetailViewCommentInput />
+ *       <DetailViewActions>
+ *         <DetailViewActionButton type="like" />
+ *         <DetailViewActionButton type="share" />
+ *       </DetailViewActions>
+ *     </DetailViewBottomBar>
+ *   )}
+ * />
+ * ```
+ */
+interface DetailViewBottomBarProps {
+    /** Children */
+    children?: ReactNode;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewBottomBar({ children, className, }: DetailViewBottomBarProps): ReactElement;
+/**
+ * Comment input for bottom bar
+ *
+ * @example
+ * ```tsx
+ * <DetailViewCommentInput
+ *   placeholder="Write a comment..."
+ *   onSubmit={(value) => submitComment(value)}
+ * />
+ * ```
+ */
+interface DetailViewCommentInputProps {
+    /** Placeholder text */
+    placeholder?: string;
+    /** Called when user submits comment (presses Enter) */
+    onSubmit?: (value: string) => void;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewCommentInput({ placeholder, onSubmit, className, }: DetailViewCommentInputProps): ReactElement;
+/**
+ * Actions container for bottom bar
+ *
+ * @example
+ * ```tsx
+ * <DetailViewActions>
+ *   <DetailViewActionButton type="like" />
+ *   <DetailViewActionButton type="comment" />
+ * </DetailViewActions>
+ * ```
+ */
+interface DetailViewActionsProps {
+    /** Children (action buttons) */
+    children?: ReactNode;
+    /** Class name */
+    className?: string;
+}
+declare function DetailViewActions({ children, className }: DetailViewActionsProps): ReactElement;
+/**
+ * Action button types
+ */
+type DetailViewActionType = 'like' | 'comment' | 'bookmark' | 'share';
+/**
+ * Single action button for bottom bar
+ *
+ * Can be used with predefined types (like, comment, bookmark, share)
+ * or with custom icon/content.
+ *
+ * @example
+ * ```tsx
+ * // Using predefined type
+ * <DetailViewActionButton type="like" isActive={isLiked} count={123} onClick={handleLike} />
+ *
+ * // Using custom icon
+ * <DetailViewActionButton icon={<MyCustomIcon />} onClick={handleCustomAction} />
+ * ```
+ */
+interface DetailViewActionButtonProps {
+    /** Predefined action type */
+    type?: DetailViewActionType;
+    /** Custom icon (overrides type) */
+    icon?: ReactNode;
+    /** Whether button is active (e.g., liked, bookmarked) */
+    isActive?: boolean;
+    /** Count to display */
+    count?: number;
+    /** Click handler */
+    onClick?: () => void;
+    /** Aria label */
+    ariaLabel?: string;
+    /** Class name */
+    className?: string;
+    /** Children (additional content) */
+    children?: ReactNode;
+}
+declare function DetailViewActionButton({ type, icon, isActive, count, onClick, ariaLabel, className, children, }: DetailViewActionButtonProps): ReactElement;
+/**
+ * Export icons for host apps that want to build custom bottom bars
+ * but still use consistent icons.
+ */
+declare const DetailViewIcons: {
+    Back: typeof BackIcon;
+    Heart: typeof HeartIcon;
+    Comment: typeof CommentIcon;
+    Bookmark: typeof BookmarkIcon;
+    Share: typeof ShareIcon;
+};
+
+/**
+ * DetailView CSS - Injected at runtime
+ *
+ * Features:
+ * - Full-screen detail view
+ * - Expand/collapse animation
+ * - Scrollable content
+ * - Back gesture (swipe down)
+ */
+declare const DETAIL_VIEW_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   DETAIL VIEW - Container\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-detail-view {\n  position: fixed;\n  inset: 0;\n  z-index: var(--sv-detail-view-z-index, 1000);\n  background: var(--sv-detail-view-bg, #000);\n  overflow: hidden;\n  touch-action: none;\n}\n\n/* States */\n.sv-detail-view--entering {\n  animation: sv-detail-view-enter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n\n.sv-detail-view--exiting {\n  animation: sv-detail-view-exit 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n\n.sv-detail-view--dragging {\n  transition: none;\n}\n\n@keyframes sv-detail-view-enter {\n  from {\n    opacity: 0;\n    transform: translateY(100%) scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes sv-detail-view-exit {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%) scale(0.9);\n  }\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   BACKDROP\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-detail-view__backdrop {\n  position: absolute;\n  inset: 0;\n  background: var(--sv-detail-view-backdrop-bg, rgba(0, 0, 0, 0.8));\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n.sv-detail-view--exiting .sv-detail-view__backdrop {\n  opacity: 0;\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   CONTENT CONTAINER\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-detail-view__container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  will-change: transform;\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   HEADER\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-detail-view__header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--sv-detail-view-header-padding, 12px 16px);\n  background: var(--sv-detail-view-header-bg, rgba(0, 0, 0, 0.8));\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n\n.sv-detail-view__back-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: var(--sv-detail-view-back-bg, rgba(255, 255, 255, 0.1));\n  color: var(--sv-detail-view-back-color, #fff);\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\n.sv-detail-view__back-button:hover {\n  background: var(--sv-detail-view-back-hover-bg, rgba(255, 255, 255, 0.2));\n}\n\n.sv-detail-view__back-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n.sv-detail-view__title {\n  font-size: var(--sv-detail-view-title-font-size, 16px);\n  font-weight: 600;\n  color: var(--sv-detail-view-title-color, #fff);\n}\n\n.sv-detail-view__actions {\n  display: flex;\n  gap: 8px;\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   DRAG INDICATOR\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-detail-view__drag-indicator {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 36px;\n  height: 5px;\n  background: var(--sv-detail-view-drag-indicator-bg, rgba(255, 255, 255, 0.3));\n  border-radius: 3px;\n  z-index: 20;\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   SCROLL CONTENT\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-detail-view__scroll {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior-y: contain;\n  /* Allow vertical scroll but block horizontal (prevents Feed swipe) */\n  touch-action: pan-y;\n  /* Padding bottom for bottom bar */\n  padding-bottom: 70px;\n}\n\n.sv-detail-view__content {\n  min-height: 100%;\n  /* No horizontal padding - gallery should be full width */\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   IMAGE GALLERY\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-detail-view__gallery {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1;\n  background: var(--sv-detail-view-gallery-bg, #111);\n  overflow: hidden;\n}\n\n.sv-detail-view__gallery-image {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Gallery pagination */\n.sv-detail-view__gallery-pagination {\n  position: absolute;\n  bottom: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 6px;\n  padding: 6px 12px;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 20px;\n}\n\n.sv-detail-view__gallery-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.5);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.sv-detail-view__gallery-dot--active {\n  background: #fff;\n  transform: scale(1.2);\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   AUTHOR SECTION\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-detail-view__author {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 0;\n  border-bottom: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n}\n\n.sv-detail-view__author-avatar {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.sv-detail-view__author-info {\n  flex: 1;\n}\n\n.sv-detail-view__author-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--sv-detail-view-text-color, #fff);\n}\n\n.sv-detail-view__author-date {\n  font-size: 13px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\n  margin-top: 2px;\n}\n\n.sv-detail-view__follow-button {\n  padding: 8px 20px;\n  background: var(--sv-detail-view-follow-bg, #fe2c55);\n  border: none;\n  border-radius: 4px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n}\n\n.sv-detail-view__follow-button:hover {\n  opacity: 0.9;\n}\n\n.sv-detail-view__follow-button--following {\n  background: var(--sv-detail-view-following-bg, rgba(255, 255, 255, 0.1));\n  color: var(--sv-detail-view-following-color, #fff);\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   CAPTION SECTION\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-detail-view__caption {\n  padding: 16px;\n  font-size: var(--sv-detail-view-caption-font-size, 15px);\n  line-height: 1.5;\n  color: var(--sv-detail-view-text-color, #fff);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Hashtags in caption */\n.sv-detail-view__hashtag {\n  color: var(--sv-detail-view-hashtag-color, #4dabff);\n  cursor: pointer;\n}\n\n.sv-detail-view__hashtag:hover {\n  text-decoration: underline;\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   STATS SECTION\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-detail-view__stats {\n  display: flex;\n  gap: 24px;\n  padding: 16px 0;\n  border-top: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n}\n\n.sv-detail-view__stat {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\n}\n\n.sv-detail-view__stat-value {\n  font-weight: 600;\n  color: var(--sv-detail-view-text-color, #fff);\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   ACTION BAR (Bottom)\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-detail-view__action-bar {\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: space-around;\n  padding: 12px 16px;\n  background: var(--sv-detail-view-action-bar-bg, rgba(0, 0, 0, 0.9));\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border-top: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n}\n\n.sv-detail-view__action {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 16px;\n  border: none;\n  background: transparent;\n  color: var(--sv-detail-view-action-color, #fff);\n  cursor: pointer;\n  transition: opacity 0.2s ease;\n}\n\n.sv-detail-view__action:hover {\n  opacity: 0.8;\n}\n\n.sv-detail-view__action--active {\n  color: var(--sv-detail-view-action-active-color, #fe2c55);\n}\n\n.sv-detail-view__action svg {\n  width: 24px;\n  height: 24px;\n}\n\n.sv-detail-view__action-label {\n  font-size: 12px;\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   MUSIC BAR\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-detail-view__music {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  margin: 0 16px 16px;\n  background: var(--sv-detail-view-music-bg, rgba(255, 255, 255, 0.05));\n  border-radius: 8px;\n  border: none;\n  width: calc(100% - 32px);\n  cursor: pointer;\n  text-align: left;\n}\n\n.sv-detail-view__music-cover {\n  width: 48px;\n  height: 48px;\n  border-radius: 4px;\n  object-fit: cover;\n}\n\n.sv-detail-view__music-info {\n  flex: 1;\n  overflow: hidden;\n}\n\n.sv-detail-view__music-title {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--sv-detail-view-text-color, #fff);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-detail-view__music-artist {\n  font-size: 12px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\n  margin-top: 2px;\n}\n\n.sv-detail-view__music-icon {\n  width: 24px;\n  height: 24px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.6));\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   HEADER - Author Info (Plan Layout)\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-detail-view__header-author {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n  margin-left: 12px;\n}\n\n.sv-detail-view__header-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.sv-detail-view__header-name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--sv-detail-view-text-color, #fff);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sv-detail-view__follow-btn {\n  padding: 6px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  border: none;\n  border-radius: 4px;\n  background: var(--sv-detail-view-follow-bg, #fe2c55);\n  color: #fff;\n  cursor: pointer;\n  transition: background 0.2s ease, opacity 0.2s ease;\n  flex-shrink: 0;\n}\n\n.sv-detail-view__follow-btn:hover {\n  opacity: 0.9;\n}\n\n.sv-detail-view__follow-btn--following {\n  background: var(--sv-detail-view-following-bg, rgba(255, 255, 255, 0.12));\n  color: var(--sv-detail-view-text-color, #fff);\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   BOTTOM ACTION BAR (Plan Layout)\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-detail-view__bottom-bar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  padding-bottom: max(10px, env(safe-area-inset-bottom));\n  background: var(--sv-detail-view-bottom-bar-bg, rgba(0, 0, 0, 0.95));\n  border-top: 1px solid var(--sv-detail-view-border-color, rgba(255, 255, 255, 0.1));\n  z-index: 20;\n}\n\n.sv-detail-view__comment-input {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  background: var(--sv-detail-view-input-bg, rgba(255, 255, 255, 0.08));\n  border-radius: 18px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.sv-detail-view__bottom-bar .sv-detail-view__comment-input input,\n.sv-detail-view__comment-field,\ninput.sv-detail-view__comment-field {\n  flex: 1;\n  width: 100%;\n  height: auto;\n  padding: 10px 14px;\n  margin: 0;\n  border: none;\n  border-radius: 0;\n  background: transparent;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: 14px;\n  line-height: 1.4;\n  color: var(--sv-detail-view-text-color, #fff);\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.sv-detail-view__bottom-bar .sv-detail-view__comment-input input::placeholder,\n.sv-detail-view__comment-field::placeholder,\ninput.sv-detail-view__comment-field::placeholder {\n  color: var(--sv-detail-view-placeholder-color, rgba(255, 255, 255, 0.5));\n  opacity: 1;\n}\n\n.sv-detail-view__bottom-bar .sv-detail-view__comment-input input:focus,\n.sv-detail-view__comment-field:focus,\ninput.sv-detail-view__comment-field:focus {\n  outline: none;\n  box-shadow: none;\n  border: none;\n}\n\n.sv-detail-view__bottom-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.sv-detail-view__action-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-width: 40px;\n  padding: 4px 6px;\n  background: none;\n  border: none;\n  color: var(--sv-detail-view-text-color, #fff);\n  cursor: pointer;\n  transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.sv-detail-view__action-btn:hover {\n  transform: scale(1.05);\n}\n\n.sv-detail-view__action-btn:active {\n  transform: scale(0.95);\n}\n\n.sv-detail-view__action-btn--active {\n  color: var(--sv-detail-view-active-color, #fe2c55);\n}\n\n.sv-detail-view__action-btn svg {\n  width: 22px;\n  height: 22px;\n}\n\n.sv-detail-view__action-count {\n  font-size: 11px;\n  margin-top: 2px;\n  color: var(--sv-detail-view-secondary-color, rgba(255, 255, 255, 0.7));\n}\n\n.sv-detail-view__action-btn--active .sv-detail-view__action-count {\n  color: var(--sv-detail-view-active-color, #fe2c55);\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   ACCESSIBILITY\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-detail-view:focus-visible {\n  outline: 2px solid var(--sv-detail-view-focus-color, #4dabff);\n  outline-offset: -2px;\n}\n\n.sv-detail-view__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+
+export { DETAIL_VIEW_CSS, DetailViewActionButton, type DetailViewActionButtonProps, type DetailViewActionType, DetailViewActions, type DetailViewActionsProps, DetailViewAuthor, type DetailViewAuthorProps, DetailViewBottomBar, type DetailViewBottomBarProps, DetailViewCaption, type DetailViewCaptionProps, DetailViewCommentInput, type DetailViewCommentInputProps, type DetailViewContextValue, DetailViewGallery, type DetailViewGalleryProps, DetailViewHeadless, type DetailViewHeadlessProps, DetailViewIcons, DetailViewMusic, type DetailViewMusicProps, DetailViewStats, type DetailViewStatsProps, formatCount as formatDetailViewCount, useDetailViewContext };

package/dist/components/DetailView/index.js

@@ -0,0 +1 @@
+export { DETAIL_VIEW_CSS, DetailViewActionButton, DetailViewActions, DetailViewAuthor, DetailViewBottomBar, DetailViewCaption, DetailViewCommentInput, DetailViewGallery, DetailViewHeadless, DetailViewIcons, DetailViewMusic, DetailViewStats, formatCount as formatDetailViewCount, useDetailViewContext } from '../../chunk-FR7UQSZP.js';

package/dist/components/ErrorBoundary/index.js

@@ -1 +1 @@
-export { ErrorBoundary } from '../../chunk-SSJDO24Q.js';
+export { ErrorBoundary } from '../../chunk-IWSBYOSS.js';

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

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+interface ImageCarouselProps {
+    /** Array of image URLs */
+    images: string[];
+    /** Current active index (controlled) */
+    currentIndex?: number;
+    /** Called when index changes */
+    onIndexChange?: (index: number) => void;
+    /** Show pagination indicators */
+    showIndicators?: boolean;
+    /** Indicator style: 'dots' or 'counter' (e.g., "1/5") */
+    indicatorStyle?: 'dots' | 'counter';
+    /** Show navigation arrows (desktop) */
+    showArrows?: boolean;
+    /** Enable pinch-to-zoom */
+    enableZoom?: boolean;
+    /** Maximum zoom scale */
+    maxZoomScale?: number;
+    /** Lazy load images (only load visible + adjacent) */
+    lazyLoad?: boolean;
+    /** Custom image renderer */
+    renderImage?: (url: string, index: number, isLoaded: boolean) => ReactNode;
+    /** Custom placeholder renderer */
+    renderPlaceholder?: (index: number) => ReactNode;
+    /** Swipe threshold (percentage of width) */
+    swipeThreshold?: number;
+    /** Called when zoom state changes */
+    onZoomChange?: (isZoomed: boolean) => void;
+    /** Called when swipe direction is locked (to allow/block scroll) */
+    onSwipeDirectionChange?: (direction: 'horizontal' | 'vertical' | null) => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function ImageCarouselHeadlessBase({ images, currentIndex: controlledIndex, onIndexChange, showIndicators, indicatorStyle, showArrows, enableZoom, maxZoomScale, lazyLoad, renderImage, renderPlaceholder, swipeThreshold, onZoomChange, onSwipeDirectionChange, className, }: ImageCarouselProps): ReactElement;
+declare const ImageCarouselHeadless: react.MemoExoticComponent<typeof ImageCarouselHeadlessBase>;
+
+/**
+ * ImageCarousel CSS - Injected at runtime
+ *
+ * Features:
+ * - Horizontal swipe carousel
+ * - Pagination indicators (dots)
+ * - Smooth transitions
+ * - Touch-friendly design
+ */
+declare const IMAGE_CAROUSEL_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   IMAGE CAROUSEL - Container\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-image-carousel {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  touch-action: pan-y pinch-zoom;\n  user-select: none;\n  -webkit-user-select: none;\n  background: var(--sv-carousel-bg, #000);\n}\n\n/* Dragging state - only for styling, does not block scroll */\n.sv-image-carousel--dragging {\n  /* Do not set touch-action: none here - to detect direction */\n  -webkit-user-drag: none;\n}\n\n/* Direction-locked states */\n.sv-image-carousel--swiping-horizontal {\n  /* When swiping horizontally, block scroll, prevent overscroll */\n  touch-action: none !important;\n  overscroll-behavior: contain;\n}\n\n.sv-image-carousel--swiping-vertical {\n  /* When swiping vertically, allow scroll, block carousel swipe */\n  touch-action: pan-y;\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   TRACK - Horizontal sliding container\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-image-carousel-track {\n  display: flex;\n  height: 100%;\n  will-change: transform;\n  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.sv-image-carousel-track--dragging {\n  transition: none;\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   SLIDE - Individual image container\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-image-carousel-slide {\n  flex: 0 0 100%;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\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   IMAGE\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-image-carousel-image {\n  max-width: 100%;\n  max-height: 100%;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  pointer-events: none;\n  transition: transform 0.2s ease-out;\n}\n\n.sv-image-carousel-image--loading {\n  opacity: 0;\n}\n\n.sv-image-carousel-image--loaded {\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n/* Zoomed image */\n.sv-image-carousel-image--zoomed {\n  cursor: grab;\n  pointer-events: auto;\n}\n\n.sv-image-carousel-image--zoomed:active {\n  cursor: grabbing;\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   PLACEHOLDER / SKELETON\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-image-carousel-placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-carousel-placeholder-bg, rgba(255, 255, 255, 0.1));\n}\n\n.sv-image-carousel-skeleton {\n  width: 60%;\n  height: 60%;\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0.05) 25%,\n    rgba(255, 255, 255, 0.1) 50%,\n    rgba(255, 255, 255, 0.05) 75%\n  );\n  background-size: 200% 100%;\n  animation: sv-carousel-shimmer 1.5s infinite;\n  border-radius: 8px;\n}\n\n@keyframes sv-carousel-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\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   PAGINATION INDICATORS (Dots)\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-image-carousel-indicators {\n  position: absolute;\n  bottom: var(--sv-carousel-indicators-bottom, 16px);\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: var(--sv-carousel-indicators-gap, 6px);\n  padding: 6px 12px;\n  border-radius: 20px;\n  z-index: 10;\n}\n\n.sv-image-carousel-dot {\n  width: var(--sv-carousel-dot-size, 6px);\n  height: var(--sv-carousel-dot-size, 6px);\n  border-radius: 50%;\n  background: var(--sv-carousel-dot-color, rgba(255, 255, 255, 0.5));\n  transition: all 0.2s ease;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n}\n\n.sv-image-carousel-dot:hover {\n  background: var(--sv-carousel-dot-hover, rgba(255, 255, 255, 0.7));\n}\n\n.sv-image-carousel-dot--active {\n  background: var(--sv-carousel-dot-active, #fff);\n  transform: scale(1.2);\n}\n\n/* Compact mode for many images (> 5) */\n.sv-image-carousel-indicators--compact .sv-image-carousel-dot {\n  width: 4px;\n  height: 4px;\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   COUNTER (Alternative to dots)\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-image-carousel-counter {\n  position: absolute;\n  top: var(--sv-carousel-counter-top, 16px);\n  right: var(--sv-carousel-counter-right, 16px);\n  padding: 4px 10px;\n  background: var(--sv-carousel-counter-bg, rgba(0, 0, 0, 0.6));\n  border-radius: 12px;\n  font-size: var(--sv-carousel-counter-font-size, 12px);\n  font-weight: 500;\n  color: var(--sv-carousel-counter-color, #fff);\n  z-index: 10;\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   NAVIGATION ARROWS (Optional)\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-image-carousel-nav {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--sv-carousel-nav-bg, rgba(0, 0, 0, 0.4));\n  border: none;\n  border-radius: 50%;\n  color: var(--sv-carousel-nav-color, #fff);\n  cursor: pointer;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.sv-image-carousel:hover .sv-image-carousel-nav {\n  opacity: 1;\n}\n\n.sv-image-carousel-nav:hover {\n  background: var(--sv-carousel-nav-hover-bg, rgba(0, 0, 0, 0.6));\n}\n\n.sv-image-carousel-nav:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.sv-image-carousel-nav--prev {\n  left: 12px;\n}\n\n.sv-image-carousel-nav--next {\n  right: 12px;\n}\n\n.sv-image-carousel-nav svg {\n  width: 20px;\n  height: 20px;\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   ZOOM OVERLAY\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-image-carousel-zoom-container {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  touch-action: none;\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   ACCESSIBILITY\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-image-carousel:focus-visible {\n  outline: 2px solid var(--sv-carousel-focus-color, #4dabff);\n  outline-offset: 2px;\n}\n\n.sv-image-carousel-dot:focus-visible {\n  outline: 2px solid var(--sv-carousel-focus-color, #4dabff);\n  outline-offset: 2px;\n}\n\n/* Screen reader only */\n.sv-image-carousel-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless, type ImageCarouselProps };

package/dist/components/ImageCarousel/index.js

@@ -0,0 +1 @@
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless } from '../../chunk-Q6MG7AVG.js';