@xhub-short/ui 0.1.0-beta.0

package/dist/chunk-SSJDO24Q.js

@@ -0,0 +1,204 @@
+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 };