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

package/dist/chunk-K3CETRCY.js

@@ -1,737 +0,0 @@
-import { PlusIcon } from './chunk-ANCP53F3.js';
-import { injectComponentCSS } from './chunk-UPCVSGWH.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 = `
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   AUTHOR INFO - Container
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.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);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   AVATAR
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.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, 0.1));
-  cursor: pointer;
-  transition: transform 0.15s ease;
-}
-
-.sv-author-info__avatar:hover {
-  transform: scale(1.05);
-}
-
-.sv-author-info__avatar:active {
-  transform: scale(0.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) * 0.4);
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.sv-author-info__avatar-placeholder svg {
-  width: 60%;
-  height: 60%;
-  opacity: 0.9;
-}
-
-/* Avatar sizes */
-.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);
-}
-
-/* Verified badge */
-.sv-author-info__verified-badge {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: calc(var(--sv-author-avatar-size, 48px) * 0.35);
-  height: calc(var(--sv-author-avatar-size, 48px) * 0.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);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   INFO (Name + Description container)
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-author-info__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-author-content-gap, 2px);
-  flex: 1;
-  min-width: 0; /* Allow text truncation */
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   NAME
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.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 0.15s ease;
-}
-
-.sv-author-info__name:hover {
-  opacity: 0.8;
-}
-
-.sv-author-info__name-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sv-author-info__name--with-at::before {
-  content: '@';
-  opacity: 0.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);
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   DESCRIPTION / BIO
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-author-info__description {
-  font-size: var(--sv-author-desc-size, 13px);
-  color: var(--sv-author-desc-color, rgba(255, 255, 255, 0.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;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   FOLLOW BUTTON
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.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: none;
-  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 0.2s ease;
-  outline: none;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* Not following state (primary CTA) */
-.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, #ff4466);
-  transform: scale(1.02);
-}
-
-.sv-author-info__follow-btn--default:active:not(:disabled) {
-  transform: scale(0.98);
-}
-
-/* Following state (outline) */
-.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, 0.9));
-  border: 1px solid var(--sv-follow-btn-following-border, rgba(255, 255, 255, 0.3));
-}
-
-.sv-author-info__follow-btn--following:hover:not(:disabled) {
-  background: var(--sv-follow-btn-following-bg-hover, rgba(255, 255, 255, 0.1));
-  border-color: var(--sv-follow-btn-following-border-hover, rgba(255, 255, 255, 0.5));
-}
-
-/* Pending state */
-.sv-author-info__follow-btn--pending {
-  opacity: 0.6;
-  pointer-events: none;
-  cursor: wait;
-}
-
-.sv-author-info__follow-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Icon in button */
-.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;
-}
-
-/* Loading spinner */
-.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 0.6s linear infinite;
-}
-
-@keyframes sv-author-info-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Button sizes */
-.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);
-}
-
-/* Icon-only button */
-.sv-author-info__follow-btn--icon-only {
-  min-width: unset;
-  padding: var(--sv-follow-btn-icon-padding, 8px);
-  border-radius: 50%;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   LAYOUT VARIANTS
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-/* Inline variant (avatar + name inline, follow button on right) */
-.sv-author-info--inline {
-  justify-content: space-between;
-}
-
-.sv-author-info--inline .sv-author-info__content {
-  flex: 1;
-}
-
-/* Stacked variant (avatar above name) */
-.sv-author-info--stacked {
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.sv-author-info--stacked .sv-author-info__content {
-  align-items: center;
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   OVERLAY MODE (for use on video)
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-author-info--overlay {
-  /* Text shadow for readability on video */
-  text-shadow: var(--sv-author-overlay-shadow, 0 1px 2px rgba(0, 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, 0.5));
-}
-
-/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-   AVATAR-BADGE VARIANT (TikTok-style avatar with follow badge)
-   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
-
-.sv-author-info--avatar-badge {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: auto;
-  gap: 0;
-}
-
-/* Avatar in badge variant */
-.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);
-}
-
-/* Follow button as overlay badge */
-.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(0.95);
-}
-
-/* Icon size in badge button */
-.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);
-}
-
-/* Hide button when following (TikTok behavior) */
-.sv-author-info--avatar-badge .sv-author-info__follow-btn--following {
-  display: none;
-}
-
-/* Hide content section in badge variant */
-.sv-author-info--avatar-badge .sv-author-info__content {
-  display: none;
-}
-
-/* Add margin bottom for action bar spacing */
-.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 };