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

package/dist/chunk-3OB3OVYR.js

@@ -0,0 +1,349 @@
+import { PlusIcon } from './chunk-ANCP53F3.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { clsx } from 'clsx';
+import { createContext, useInsertionEffect, useMemo, useState, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var AuthorInfoContext = createContext(null);
+AuthorInfoContext.displayName = "AuthorInfoContext";
+function useAuthorInfoContext() {
+  const context = useContext(AuthorInfoContext);
+  if (!context) {
+    throw new Error(
+      "[AuthorInfo] useAuthorInfoContext must be used within <AuthorInfoHeadless>. Make sure you wrap your component with <AuthorInfoHeadless>."
+    );
+  }
+  return context;
+}
+function useOptionalAuthorInfoContext() {
+  return useContext(AuthorInfoContext);
+}
+function DefaultCheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) });
+}
+function DefaultUserIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) });
+}
+var SIZE_CLASS_MAP = {
+  small: "sv-author-info__avatar--small",
+  large: "sv-author-info__avatar--large",
+  default: ""
+};
+function AuthorAvatar({
+  src,
+  alt,
+  size = "default",
+  showVerified = false,
+  verifiedIcon,
+  onClick,
+  className,
+  children
+}) {
+  const [imgError, setImgError] = useState(false);
+  const context = useOptionalAuthorInfoContext();
+  const avatarSrc = src ?? context?.author.avatar;
+  const avatarAlt = alt ?? context?.author.name ?? "Author avatar";
+  const isVerified = context?.author.isVerified ?? false;
+  const handleClick = onClick ?? context?.openProfile;
+  useEffect(() => {
+    setImgError(false);
+  }, [avatarSrc]);
+  const handleImgError = () => setImgError(true);
+  const sizeClass = SIZE_CLASS_MAP[size];
+  const showImage = avatarSrc && !imgError;
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("sv-author-info__avatar", sizeClass, className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View ${avatarAlt}'s profile` : void 0,
+      children: [
+        children ?? (showImage && avatarSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: avatarSrc,
+            alt: avatarAlt,
+            className: "sv-author-info__avatar-img",
+            loading: "lazy",
+            onError: handleImgError
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "sv-author-info__avatar-placeholder", children: /* @__PURE__ */ jsx(DefaultUserIcon, {}) })),
+        showVerified && isVerified && /* @__PURE__ */ jsx("div", { className: "sv-author-info__verified-badge", "aria-label": "Verified", children: verifiedIcon ?? /* @__PURE__ */ jsx(DefaultCheckIcon, {}) })
+      ]
+    }
+  );
+}
+function AuthorDescription({
+  description,
+  singleLine = false,
+  className,
+  children
+}) {
+  const context = useOptionalAuthorInfoContext();
+  const displayDescription = description ?? context?.author.description;
+  if (!children && !displayDescription) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: clsx(
+        "sv-author-info__description",
+        singleLine && "sv-author-info__description--single-line",
+        className
+      ),
+      children: children ?? displayDescription
+    }
+  );
+}
+
+// src/components/AuthorInfo/AuthorInfo.css.ts
+var AUTHOR_INFO_CSS = `.sv-author-info{display:flex;align-items:center;gap:var(--sv-author-gap,12px);width:100%}.sv-author-info--vertical{flex-direction:column;align-items:flex-start}.sv-author-info--horizontal{flex-direction:row;align-items:center}.sv-author-info--compact{gap:var(--sv-author-gap-compact,8px)}.sv-author-info__avatar{position:relative;flex-shrink:0;width:var(--sv-author-avatar-size,48px);height:var(--sv-author-avatar-size,48px);border-radius:50%;overflow:hidden;background:var(--sv-author-avatar-bg,rgba(255,255,255,.1));cursor:pointer;transition:transform .15s ease}.sv-author-info__avatar:hover{transform:scale(1.05)}.sv-author-info__avatar:active{transform:scale(.98)}.sv-author-info__avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.sv-author-info__avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--sv-author-avatar-placeholder-bg,linear-gradient(135deg,#667eea 0%,#764ba2 100%));color:var(--sv-author-avatar-placeholder-color,#fff);font-size:calc(var(--sv-author-avatar-size,48px)* .4);font-weight:600;text-transform:uppercase}.sv-author-info__avatar-placeholder svg{width:60%;height:60%;opacity:.9}.sv-author-info__avatar--small{width:var(--sv-author-avatar-size-small,32px);height:var(--sv-author-avatar-size-small,32px)}.sv-author-info__avatar--large{width:var(--sv-author-avatar-size-large,64px);height:var(--sv-author-avatar-size-large,64px)}.sv-author-info__verified-badge{position:absolute;bottom:-2px;right:-2px;width:calc(var(--sv-author-avatar-size,48px)* .35);height:calc(var(--sv-author-avatar-size,48px)* .35);min-width:14px;min-height:14px;border-radius:50%;background:var(--sv-verified-badge-bg,#1DA1F2);display:flex;align-items:center;justify-content:center;border:2px solid var(--sv-verified-badge-border,#000)}.sv-author-info__verified-badge svg{width:60%;height:60%;color:var(--sv-verified-badge-color,#fff)}.sv-author-info__content{display:flex;flex-direction:column;gap:var(--sv-author-content-gap,2px);flex:1;min-width:0}.sv-author-info__name{display:flex;align-items:center;gap:var(--sv-author-name-gap,4px);font-size:var(--sv-author-name-size,16px);font-weight:var(--sv-author-name-weight,600);color:var(--sv-author-name-color,#fff);cursor:pointer;transition:opacity .15s ease}.sv-author-info__name:hover{opacity:.8}.sv-author-info__name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-author-info__name--with-at::before{content:'@';opacity:.8}.sv-author-info__name-verified{flex-shrink:0;width:var(--sv-author-name-verified-size,14px);height:var(--sv-author-name-verified-size,14px);color:var(--sv-verified-badge-bg,#1DA1F2)}.sv-author-info__description{font-size:var(--sv-author-desc-size,13px);color:var(--sv-author-desc-color,rgba(255,255,255,.7));line-height:var(--sv-author-desc-line-height,1.4);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:var(--sv-author-desc-lines,2);-webkit-box-orient:vertical}.sv-author-info__description--single-line{-webkit-line-clamp:1;white-space:nowrap;display:block}.sv-author-info__follow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sv-follow-btn-gap,6px);padding:var(--sv-follow-btn-padding,8px 16px);min-width:var(--sv-follow-btn-min-width,88px);border:0;border-radius:var(--sv-follow-btn-radius,4px);font-size:var(--sv-follow-btn-size,14px);font-weight:var(--sv-follow-btn-weight,600);cursor:pointer;transition:all .2s ease;outline:none;user-select:none;-webkit-tap-highlight-color:transparent}.sv-author-info__follow-btn--default{background:var(--sv-follow-btn-bg,#fe2c55);color:var(--sv-follow-btn-color,#fff)}.sv-author-info__follow-btn--default:hover:not(:disabled){background:var(--sv-follow-btn-bg-hover,#f46);transform:scale(1.02)}.sv-author-info__follow-btn--default:active:not(:disabled){transform:scale(.98)}.sv-author-info__follow-btn--following{background:var(--sv-follow-btn-following-bg,transparent);color:var(--sv-follow-btn-following-color,rgba(255,255,255,.9));border:1px solid var(--sv-follow-btn-following-border,rgba(255,255,255,.3))}.sv-author-info__follow-btn--following:hover:not(:disabled){background:var(--sv-follow-btn-following-bg-hover,rgba(255,255,255,.1));border-color:var(--sv-follow-btn-following-border-hover,rgba(255,255,255,.5))}.sv-author-info__follow-btn--pending{opacity:.6;pointer-events:none;cursor:wait}.sv-author-info__follow-btn:disabled{opacity:.5;cursor:not-allowed}.sv-author-info__follow-btn-icon{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);flex-shrink:0}.sv-author-info__follow-btn-spinner{width:var(--sv-follow-btn-icon-size,16px);height:var(--sv-follow-btn-icon-size,16px);border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sv-author-info-spin .6s linear infinite}@keyframes sv-author-info-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sv-author-info__follow-btn--small{padding:var(--sv-follow-btn-padding-small,6px 12px);font-size:var(--sv-follow-btn-size-small,12px);min-width:var(--sv-follow-btn-min-width-small,72px)}.sv-author-info__follow-btn--large{padding:var(--sv-follow-btn-padding-large,10px 20px);font-size:var(--sv-follow-btn-size-large,16px);min-width:var(--sv-follow-btn-min-width-large,100px)}.sv-author-info__follow-btn--icon-only{min-width:unset;padding:var(--sv-follow-btn-icon-padding,8px);border-radius:50%}.sv-author-info--inline{justify-content:space-between}.sv-author-info--inline .sv-author-info__content{flex:1}.sv-author-info--stacked{flex-direction:column;align-items:center;text-align:center}.sv-author-info--stacked .sv-author-info__content{align-items:center}.sv-author-info--overlay{text-shadow:var(--sv-author-overlay-shadow,0 1px 2px rgba(0,0,0,.5))}.sv-author-info--overlay .sv-author-info__avatar{border:2px solid var(--sv-author-overlay-avatar-border,rgba(255,255,255,.5))}.sv-author-info--avatar-badge{position:relative;display:flex;flex-direction:column;align-items:center;width:auto;gap:0}.sv-author-info--avatar-badge .sv-author-info__avatar{width:var(--sv-avatar-badge-size,48px);height:var(--sv-avatar-badge-size,48px);border:2px solid var(--sv-avatar-badge-border,#fff)}.sv-author-info--avatar-badge .sv-author-info__follow-btn{position:absolute;bottom:var(--sv-avatar-badge-btn-bottom,-10px);left:50%;transform:translateX(-50%);min-width:unset;width:var(--sv-avatar-badge-btn-size,24px);height:var(--sv-avatar-badge-btn-size,24px);padding:0;border-radius:50%;background:var(--sv-color-primary,#fe2c55);border:2px solid var(--sv-bg-primary,#000);z-index:1}.sv-author-info--avatar-badge .sv-author-info__follow-btn:hover:not(:disabled){transform:translateX(-50%)scale(1.1)}.sv-author-info--avatar-badge .sv-author-info__follow-btn:active:not(:disabled){transform:translateX(-50%)scale(.95)}.sv-author-info--avatar-badge .sv-author-info__follow-btn-icon{width:var(--sv-avatar-badge-icon-size,14px);height:var(--sv-avatar-badge-icon-size,14px)}.sv-author-info--avatar-badge .sv-author-info__follow-btn--following{display:none}.sv-author-info--avatar-badge .sv-author-info__content{display:none}.sv-author-info--avatar-badge{margin-bottom:var(--sv-avatar-badge-margin,16px)}`;
+function DefaultVerifiedIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z" }) });
+}
+function AuthorName({
+  name,
+  showAtPrefix = false,
+  showVerified = false,
+  verifiedIcon,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalAuthorInfoContext();
+  const displayName = name ?? context?.author.name ?? "Unknown";
+  const isVerified = context?.author.isVerified ?? false;
+  const handleClick = onClick ?? context?.openProfile;
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "sv-author-info__name",
+        showAtPrefix && "sv-author-info__name--with-at",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View ${displayName}'s profile` : void 0,
+      children: [
+        children ?? /* @__PURE__ */ jsx("span", { className: "sv-author-info__name-text", children: displayName }),
+        showVerified && isVerified && /* @__PURE__ */ jsx("span", { className: "sv-author-info__name-verified", "aria-label": "Verified", children: verifiedIcon ?? /* @__PURE__ */ jsx(DefaultVerifiedIcon, {}) })
+      ]
+    }
+  );
+}
+function DefaultFollowIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
+    /* @__PURE__ */ jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
+  ] });
+}
+function DefaultFollowingIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "17 11 19 13 23 9" })
+  ] });
+}
+var SIZE_CLASS_MAP2 = {
+  small: "sv-author-info__follow-btn--small",
+  default: "",
+  large: "sv-author-info__follow-btn--large"
+};
+function ButtonIcon({
+  isPending,
+  isFollowing,
+  followIcon,
+  followingIcon
+}) {
+  if (isPending) {
+    return /* @__PURE__ */ jsx("span", { className: "sv-author-info__follow-btn-spinner" });
+  }
+  const icon = isFollowing ? followingIcon ?? /* @__PURE__ */ jsx(DefaultFollowingIcon, {}) : followIcon ?? /* @__PURE__ */ jsx(DefaultFollowIcon, {});
+  return /* @__PURE__ */ jsx("span", { className: "sv-author-info__follow-btn-icon", children: icon });
+}
+function FollowButton({
+  isFollowing: isFollowingProp,
+  isPending: isPendingProp,
+  onClick,
+  size = "default",
+  iconOnly = false,
+  followIcon,
+  followingIcon,
+  followText = "Follow",
+  followingText = "Following",
+  disabled = false,
+  className,
+  children,
+  followAriaLabel = "Follow",
+  unfollowAriaLabel = "Unfollow"
+}) {
+  const context = useOptionalAuthorInfoContext();
+  const isFollowing = isFollowingProp ?? context?.isFollowing ?? false;
+  const isPending = isPendingProp ?? context?.isFollowPending ?? false;
+  const handleClick = onClick ?? context?.toggleFollow;
+  const isDisabled = disabled || isPending;
+  const stateClass = isFollowing ? "sv-author-info__follow-btn--following" : "sv-author-info__follow-btn--default";
+  const buttonText = isFollowing ? followingText : followText;
+  const handleButtonClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!isDisabled) {
+      handleClick?.();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && !isDisabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick?.();
+    }
+  };
+  const stopPropagation = (e) => e.stopPropagation();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx(
+        "sv-author-info__follow-btn",
+        stateClass,
+        isPending && "sv-author-info__follow-btn--pending",
+        iconOnly && "sv-author-info__follow-btn--icon-only",
+        SIZE_CLASS_MAP2[size],
+        className
+      ),
+      onClick: handleButtonClick,
+      onKeyDown: handleKeyDown,
+      onPointerDown: stopPropagation,
+      onPointerUp: stopPropagation,
+      onTouchStart: stopPropagation,
+      onTouchEnd: stopPropagation,
+      disabled: isDisabled,
+      "aria-pressed": isFollowing,
+      "aria-label": isFollowing ? unfollowAriaLabel : followAriaLabel,
+      "aria-busy": isPending,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ButtonIcon,
+          {
+            isPending,
+            isFollowing,
+            followIcon: followIcon ?? /* @__PURE__ */ jsx(PlusIcon, { size: 14 }),
+            followingIcon
+          }
+        ),
+        !iconOnly && /* @__PURE__ */ jsx("span", { children: buttonText })
+      ] })
+    }
+  );
+}
+var CSS_COMPONENT_ID = "author-info";
+function AuthorInfoContent({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-author-info__content", className), children });
+}
+function AuthorInfoHeadlessRoot({
+  authorState,
+  authorActions,
+  showFollowButton = true,
+  variant = "horizontal",
+  overlay = false,
+  className,
+  children
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS(CSS_COMPONENT_ID, AUTHOR_INFO_CSS);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      author: authorState.author,
+      isFollowing: authorState.isFollowing,
+      isFollowPending: authorState.isFollowPending,
+      toggleFollow: () => {
+        authorActions.toggleFollow();
+      },
+      openProfile: () => {
+        authorActions.openProfile();
+      }
+    }),
+    [authorState, authorActions]
+  );
+  const variantClass = `sv-author-info--${variant}`;
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(AuthorInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "sv-author-info",
+        variantClass,
+        overlay && "sv-author-info--overlay",
+        className
+      ),
+      onClick: stopPropagation,
+      onPointerDown: stopPropagation,
+      onPointerUp: stopPropagation,
+      onTouchStart: stopPropagation,
+      onTouchEnd: stopPropagation,
+      children: children ? children : variant === "avatar-badge" ? (
+        // Default layout for avatar-badge variant
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AuthorAvatar, {}),
+          showFollowButton && /* @__PURE__ */ jsx(FollowButton, { iconOnly: true })
+        ] })
+      ) : (
+        // Default layout when no children provided
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AuthorAvatar, { showVerified: true }),
+          /* @__PURE__ */ jsx(AuthorInfoContent, { children: /* @__PURE__ */ jsx(AuthorName, { showAtPrefix: true, showVerified: true }) }),
+          showFollowButton && /* @__PURE__ */ jsx(FollowButton, {})
+        ] })
+      )
+    }
+  ) });
+}
+var AuthorInfoHeadless = Object.assign(AuthorInfoHeadlessRoot, {
+  /** Avatar sub-component */
+  Avatar: AuthorAvatar,
+  /** Name sub-component */
+  Name: AuthorName,
+  /** Description/bio sub-component */
+  Description: AuthorDescription,
+  /** Follow button sub-component */
+  FollowButton,
+  /** Content wrapper for name + description */
+  Content: AuthorInfoContent
+});
+
+export { AUTHOR_INFO_CSS, AuthorAvatar, AuthorDescription, AuthorInfoContext, AuthorInfoHeadless, AuthorName, FollowButton, useAuthorInfoContext, useOptionalAuthorInfoContext };

package/dist/{chunk-WKX2WBVO.js → chunk-3XPJHUYL.js}

@@ -1,30 +1,3 @@
-// src/utils/lazyGesture.ts
-var gestureModule = null;
-var loadPromise = null;
-async function loadGesture() {
-  if (gestureModule) {
-    return gestureModule;
-  }
-  if (loadPromise) {
-    return loadPromise;
-  }
-  loadPromise = import('./use-gesture-react.esm-3SV4QLEJ.js').then((mod) => {
-    gestureModule = mod;
-    return mod;
-  }).catch((error) => {
-    loadPromise = null;
-    throw error;
-  });
-  return loadPromise;
-}
-function isGestureLoaded() {
-  return gestureModule !== null;
-}
-function preloadGesture() {
-  loadGesture().catch(() => {
-  });
-}
-
 // src/utils/formatCount.ts
 var DEFAULT_SUFFIXES = {
   thousand: "K",
@@ -83,16 +56,5 @@ function parseFormattedCount(formatted) {
       return num;
   }
 }
-function cn(...inputs) {
-  return inputs.filter(Boolean).map((input) => {
-    if (typeof input === "string") {
-      return input;
-    }
-    if (typeof input === "object" && input !== null) {
-      return Object.entries(input).filter(([, value]) => value).map(([key]) => key).join(" ");
-    }
-    return "";
-  }).join(" ").trim();
-}
 
-export { cn, formatCount, formatCountWithSeparators, isGestureLoaded, loadGesture, parseFormattedCount, preloadGesture };
+export { formatCount, formatCountWithSeparators, parseFormattedCount };

package/dist/chunk-4RIMQOBR.js

@@ -0,0 +1,58 @@
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { useInsertionEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Skeleton/Skeleton.css.ts
+var SKELETON_CSS = `.sv-skeleton{display:block;background:var(--sv-skeleton-bg,rgba(255,255,255,.1));border-radius:var(--sv-border-radius-sm,4px)}.sv-skeleton--pulse{animation:sv-skeleton-pulse 1.5s ease-in-out infinite}@keyframes sv-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.sv-skeleton--wave{position:relative;overflow:hidden}.sv-skeleton--wave::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:sv-skeleton-wave 1.5s ease-in-out infinite}@keyframes sv-skeleton-wave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.sv-skeleton-video{width:100%;height:100%;background:var(--sv-bg-primary,#000)}:root[data-theme="light"] .sv-skeleton,.light .sv-skeleton{background:var(--sv-skeleton-bg-light,rgba(0,0,0,.1))}:root[data-theme="light"] .sv-skeleton--wave::after,.light .sv-skeleton--wave::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent)}`;
+function Skeleton({
+  width,
+  height,
+  borderRadius,
+  animation = "pulse",
+  circle = false,
+  className
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("skeleton", SKELETON_CSS);
+  }, []);
+  const style = {};
+  if (width !== void 0) {
+    style.width = typeof width === "number" ? `${width}px` : width;
+  }
+  if (height !== void 0) {
+    style.height = typeof height === "number" ? `${height}px` : height;
+  }
+  if (borderRadius !== void 0) {
+    style.borderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  } else if (circle) {
+    style.borderRadius = "50%";
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx2("sv-skeleton", animation !== "none" && `sv-skeleton--${animation}`, className),
+      style,
+      "aria-hidden": "true"
+    }
+  );
+}
+function SkeletonVideo({
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("sv-skeleton-video", className), children: /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "100%", animation: "wave" }) });
+}
+function SkeletonAvatar({
+  size = 40,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Skeleton, { width: size, height: size, circle: true, className });
+}
+function SkeletonText({
+  width = "100%",
+  className
+}) {
+  return /* @__PURE__ */ jsx(Skeleton, { width, height: 14, borderRadius: 4, className });
+}
+
+export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonVideo };

package/dist/chunk-4TUBNA2X.js

@@ -0,0 +1,180 @@
+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/VideoFeed/VideoFeed.css.ts
+var VIDEO_FEED_CSS = `.sv-video-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-video-feed__container{position:relative;width:100%;height:100%;will-change:transform}.sv-video-feed__container--snapping{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.sv-video-feed__container--swiping{transition:none}.sv-video-feed__slot{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.sv-video-feed__slot--active{z-index:2}.sv-video-feed__slot--adjacent{z-index:1;pointer-events:none}.sv-video-feed__slot--transitioning{transition:transform .175s cubic-bezier(.25,.46,.45,.94),opacity .2s ease}.sv-video-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-video-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-video-feed__loading-text{font-size:var(--sv-font-size-sm,13px);font-family:var(--sv-font-family,'Urbanist',sans-serif)}.sv-video-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-video-feed__empty-icon{font-size:48px;margin-bottom:var(--sv-spacing-md,16px)}.sv-video-feed__empty-text{font-size:var(--sv-font-size-md,14px)}.sv-video-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-video-feed__container--snapping{transition:none}.sv-video-feed__loading-spinner{animation:none}}`;
+var VideoFeedContext = createContext(null);
+function useVideoFeedContext() {
+  const context = useContext(VideoFeedContext);
+  if (!context) {
+    throw new Error("useVideoFeedContext must be used within a VideoFeed");
+  }
+  return context;
+}
+function useOptionalVideoFeedContext() {
+  return useContext(VideoFeedContext);
+}
+function VideoFeedLoading({ text = "Loading..." }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-video-feed__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__loading-spinner" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__loading-text", children: text })
+  ] });
+}
+function VideoFeedEmpty({ text = "No videos" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-video-feed__empty", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__empty-icon", children: "\u{1F4ED}" }),
+    /* @__PURE__ */ jsx("div", { className: "sv-video-feed__empty-text", children: text })
+  ] });
+}
+function VideoFeedEnd({ text = "You've reached the end" }) {
+  return /* @__PURE__ */ jsx("div", { className: "sv-video-feed__end", "aria-live": "polite", children: text });
+}
+function VideoFeedHeadless({
+  feedState,
+  swipeState,
+  height,
+  className,
+  renderSlot,
+  onIndexChange,
+  onEndReached,
+  endReachedThreshold = 2,
+  bufferSize = 1,
+  loadingText = "Loading...",
+  emptyText = "No videos",
+  endText = "You've reached the end",
+  disableInlineTransforms = false
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("sv-video-feed", VIDEO_FEED_CSS);
+  }, []);
+  const { videos, isLoading, hasMore } = feedState;
+  const { activeIndex, isSwiping, dragOffset, goToIndex } = swipeState;
+  const containerHeightRef = useRef(
+    typeof window !== "undefined" ? window.innerHeight : 800
+  );
+  const contextValue = useMemo(
+    () => ({
+      videos,
+      activeIndex: Math.max(0, Math.min(videos.length - 1, activeIndex)),
+      isSwiping,
+      dragOffset,
+      containerHeight: containerHeightRef.current,
+      goToIndex,
+      totalCount: videos.length
+    }),
+    [videos, activeIndex, isSwiping, dragOffset, goToIndex]
+  );
+  const keyExtractor = useCallback((video) => video.id, []);
+  const renderItem = useCallback(
+    (video, index, isActive) => {
+      return renderSlot(video, index, isActive);
+    },
+    [renderSlot]
+  );
+  const loadingComponent = useMemo(() => /* @__PURE__ */ jsx(VideoFeedLoading, { text: loadingText }), [loadingText]);
+  const emptyComponent = useMemo(() => /* @__PURE__ */ jsx(VideoFeedEmpty, { text: emptyText }), [emptyText]);
+  const endComponent = useMemo(() => /* @__PURE__ */ jsx(VideoFeedEnd, { text: endText }), [endText]);
+  const sliderProps = {
+    // Required
+    items: videos,
+    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-video-feed classes instead of sv-slider
+    height,
+    className: clsx2("sv-video-feed", className),
+    disableInlineTransforms
+  };
+  return /* @__PURE__ */ jsx(VideoFeedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(VirtualSlider, { ...sliderProps }) });
+}
+VideoFeedHeadless.displayName = "VideoFeedHeadless";
+function useVideoFeedPosition(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/VideoFeed/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 VIDEO_FEED_CLASS_PREFIX = "sv-video-feed";
+
+export { SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIDEO_FEED_CLASS_PREFIX, VIDEO_FEED_CSS, VideoFeedContext, VideoFeedHeadless, getSlotIndexFromPosition, useOptionalVideoFeedContext, useVideoFeedContext, useVideoFeedPosition };