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

package/dist/chunk-SSJDO24Q.js

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