@slopmachine/react 0.7.0 → 0.8.1

package/src/components/SlopText.tsx

@@ -1,276 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import {
-  buildTextUrl,
-  renderMarkdown,
-  type SlopTextOptions,
-} from "@slopmachine/core";
-
-export interface SlopTextProps
-  extends
-    Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
-    SlopTextOptions {
-  /**
-   * Optional loading component to show while the text is being generated
-   */
-  fallback?: React.ReactNode;
-  /**
-   * Optional error component to show if the text generation fails
-   */
-  errorFallback?: React.ReactNode;
-}
-
-/**
- * Renders text generated by Slop Machine.
- *
- * This component automatically constructs the correct URL for the Slop Machine API,
- * fetches the generated text, and displays it with optional loading and error states.
- *
- * @example
- * ```tsx
- * // Using a Bucket
- * <SlopText
- *   bucketId="my-text-bucket"
- *   fallback={<div>Loading story...</div>}
- *   errorFallback={<div>Failed to load story</div>}
- *   className="text-lg text-gray-800"
- * />
- *
- * // Using a Pipeline with runtime prompt
- * <SlopText
- *   pipelineId="pipe_live_abc123"
- *   prompt="Write a whimsical haiku about quantum physics"
- *   metadata={{ userId: "123" }}
- * />
- * ```
- *
- * @version 0.7.0
- */
-export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
-  (
-    {
-      bucketId,
-      pipelineId,
-      siloId,
-      prompt,
-      metadata,
-      version,
-      resultId,
-      model,
-      variables,
-      baseUrl,
-      attachments,
-      fallback,
-      errorFallback,
-      ...props
-    },
-    ref,
-  ) => {
-    const [text, setText] = useState<string | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<Error | null>(null);
-
-    const rawUrl = useMemo(
-      () =>
-        buildTextUrl({
-          bucketId,
-          pipelineId,
-          siloId,
-          prompt,
-          metadata,
-          version,
-          resultId,
-          model,
-          variables,
-          baseUrl,
-          attachments,
-        }),
-      [
-        bucketId,
-        pipelineId,
-        siloId,
-        prompt,
-        JSON.stringify(metadata),
-        version,
-        resultId,
-        model,
-        JSON.stringify(variables),
-        baseUrl,
-        JSON.stringify(attachments),
-      ],
-    );
-
-    useEffect(() => {
-      let isMounted = true;
-
-      const fetchText = async () => {
-        try {
-          setLoading(true);
-          setError(null);
-
-          // Fetch the URL to get the content, following redirects automatically
-          const response = await fetch(rawUrl, { cache: "no-store" });
-          if (!response.ok) {
-            let errorMessage = response.statusText;
-            try {
-              const errorText = await response.text();
-              const errorData = JSON.parse(errorText);
-              if (errorData.error) {
-                errorMessage = errorData.error;
-              }
-            } catch (e) {
-              // Ignore JSON parse errors if the response isn't JSON
-            }
-            throw new Error(`Failed to fetch text: ${errorMessage}`);
-          }
-          const content = await response.text();
-          if (isMounted) {
-            setText(content);
-          }
-        } catch (err) {
-          if (isMounted) {
-            const finalError =
-              err instanceof Error ? err : new Error("Failed to generate text");
-            console.error(finalError);
-            setError(finalError);
-          }
-        } finally {
-          if (isMounted) {
-            setLoading(false);
-          }
-        }
-      };
-
-      fetchText();
-
-      return () => {
-        isMounted = false;
-      };
-    }, [rawUrl]);
-
-    if (error && errorFallback) {
-      return <>{errorFallback}</>;
-    }
-
-    if (loading) {
-      if (fallback) {
-        return <>{fallback}</>;
-      }
-      return (
-        <div className={props.className} style={props.style}>
-          <style>{`
-            @keyframes slop-shimmer {
-              0% { background-position: 200% 0; }
-              100% { background-position: -200% 0; }
-            }
-            @keyframes slop-spin {
-              from { transform: rotate(0deg); }
-              to { transform: rotate(360deg); }
-            }
-          `}</style>
-          <div
-            className="slop-wrapper relative overflow-hidden w-full"
-            style={{
-              position: "relative",
-              overflow: "hidden",
-              width: "100%",
-              minHeight: "100px",
-            }}
-          >
-            {/* Loading overlay */}
-            <div
-              className="absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300"
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 10,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: "var(--muted, #f3f4f6)",
-              }}
-            >
-              <div
-                className="flex flex-col items-center gap-2"
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: "0.5rem",
-                }}
-              >
-                <svg
-                  className="spinner size-6 text-muted-foreground"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  style={{
-                    width: "24px",
-                    height: "24px",
-                    color: "var(--muted-foreground, #6b7280)",
-                    animation: "slop-spin 1s linear infinite",
-                  }}
-                >
-                  <circle
-                    className="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="4"
-                    style={{ opacity: 0.25 }}
-                  />
-                  <path
-                    className="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    style={{ opacity: 0.75 }}
-                  />
-                </svg>
-                <span
-                  className="text-xs text-muted-foreground"
-                  style={{
-                    fontSize: "0.75rem",
-                    color: "var(--muted-foreground, #6b7280)",
-                  }}
-                >
-                  Loading...
-                </span>
-              </div>
-            </div>
-
-            {/* Shimmer effect underneath */}
-            <div
-              className="shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted"
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background:
-                  "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
-                backgroundSize: "200% 100%",
-                animation: "slop-shimmer 2s ease-in-out infinite",
-              }}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        {...props}
-        dangerouslySetInnerHTML={{
-          __html: text ? renderMarkdown(text) : "",
-        }}
-      />
-    );
-  },
-);
-
-SlopText.displayName = "SlopText";

package/src/components/SlopVideo.tsx

@@ -1,373 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-import {
-  buildVideoUrl,
-  createRenderUrlMonitor,
-  type SlopMachineError,
-  type SlopVideoOptions,
-  type VideoAspectRatio,
-} from "@slopmachine/core";
-import { ErrorOverlay, type SlopErrorFallback } from "./ErrorOverlay";
-
-// Utility for Tailwind classes
-function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export interface SlopVideoProps
-  extends
-    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "src">,
-    Omit<SlopVideoOptions, "aspectRatio"> {
-  /**
-   * The aspect ratio of the generated video. Defaults to "16:9".
-   */
-  aspectRatio?: VideoAspectRatio;
-  /**
-   * Custom React node to display while the video is loading.
-   * If not provided, a default spinner and shimmer effect will be shown.
-   */
-  loader?: React.ReactNode;
-  /**
-   * Content to display if the video fails to generate or load.
-   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.
-   * If not provided, a default error message is shown in place of the video.
-   */
-  errorFallback?: SlopErrorFallback;
-  /**
-   * Called once per URL when the video fails to generate or load.
-   * `error.status` holds the HTTP status when the API reported the failure.
-   */
-  onGenerationError?: (error: SlopMachineError) => void;
-}
-
-/**
- * Renders a video generated by Slop Machine.
- *
- * This component automatically constructs the correct URL for the Slop Machine API,
- * displays a loading skeleton or custom loader while fetching, and handles errors.
- *
- * @example
- * ```tsx
- * // Using a Bucket
- * <SlopVideo
- *   bucketId="my-bucket"
- *   resultId="some-result"
- *   aspectRatio="16:9"
- *   className="rounded-lg"
- *   autoPlay
- *   loop
- *   muted
- * />
- *
- * // Using a Pipeline with runtime prompt
- * <SlopVideo
- *   pipelineId="pipe_live_abc123"
- *   prompt="Drone shot of a cyberpunk city in rain"
- *   aspectRatio="16:9"
- *   metadata={{ campaign: "spring_launch" }}
- * />
- * ```
- *
- * @version 0.7.0
- */
-export const SlopVideo: React.FC<SlopVideoProps> = ({
-  bucketId,
-  pipelineId,
-  siloId,
-  prompt,
-  metadata,
-  className,
-  aspectRatio = "16:9",
-  version,
-  resultId,
-  variables = {},
-  duration,
-  baseUrl,
-  original,
-  attachments,
-  loader,
-  errorFallback,
-  onGenerationError,
-  autoPlay = true,
-  loop = true,
-  muted = true,
-  playsInline = true,
-  onLoadedData,
-  onError,
-  ...props
-}) => {
-  // Construct API URL
-  const rawSrc = useMemo(
-    () =>
-      buildVideoUrl({
-        bucketId,
-        pipelineId,
-        siloId,
-        prompt,
-        metadata,
-        aspectRatio,
-        version,
-        resultId,
-        variables,
-        duration,
-        baseUrl,
-        original,
-        attachments,
-      }),
-    [
-      bucketId,
-      pipelineId,
-      siloId,
-      prompt,
-      metadata,
-      aspectRatio,
-      version,
-      resultId,
-      variables,
-      duration,
-      baseUrl,
-      original,
-      attachments,
-    ],
-  );
-
-  const [src, setSrc] = useState(rawSrc);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setSrc(rawSrc);
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [rawSrc]);
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<SlopMachineError | null>(null);
-  const [currentSrc, setCurrentSrc] = useState(src);
-  const videoRef = useRef<HTMLVideoElement>(null);
-  if (src !== currentSrc) {
-    setCurrentSrc(src);
-    setIsLoading(true);
-    setError(null);
-  }
-
-  // Keep the latest callback without re-running effects when it changes identity
-  const onGenerationErrorRef = useRef(onGenerationError);
-  useEffect(() => {
-    onGenerationErrorRef.current = onGenerationError;
-  });
-
-  // Shares one URL check between the HEAD probe and the media element's error event
-  const monitor = useMemo(
-    () =>
-      createRenderUrlMonitor((err) => {
-        console.error("SlopVideo error:", err.status ?? "", err.message);
-        setIsLoading(false);
-        setError(err);
-        onGenerationErrorRef.current?.(err);
-      }),
-    [],
-  );
-
-  useEffect(() => {
-    if (!src) return;
-    monitor.watch(src);
-    return () => monitor.stop();
-  }, [src, monitor]);
-
-  return (
-    <>
-      <style>{`
-        @keyframes slop-shimmer {
-          0% {
-            background-position: 200% 0;
-          }
-          100% {
-            background-position: -200% 0;
-          }
-        }
-        @keyframes slop-spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `}</style>
-      <div className={className} style={props.style}>
-        <div
-          className="slop-wrapper relative overflow-hidden w-full h-full"
-          style={{
-            aspectRatio: String(aspectRatio).replace(":", "/"),
-            position: "relative",
-            overflow: "hidden",
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          {/* Loading UI */}
-          {loader ? (
-            <div
-              className={cn(
-                "absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300",
-                isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
-              )}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 10,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                opacity: isLoading ? 1 : 0,
-                pointerEvents: isLoading ? "auto" : "none",
-                transition: "opacity 300ms ease-in-out",
-              }}
-            >
-              {loader}
-            </div>
-          ) : (
-            <>
-              {/* Loading overlay */}
-              <div
-                className={cn(
-                  "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
-                  isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
-                )}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  zIndex: 10,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: "var(--muted, #f3f4f6)",
-                  opacity: isLoading ? 1 : 0,
-                  pointerEvents: isLoading ? "auto" : "none",
-                  transition: "opacity 300ms ease-in-out",
-                }}
-              >
-                <div
-                  className="flex flex-col items-center gap-2"
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                  }}
-                >
-                  <svg
-                    className="spinner size-6 text-muted-foreground"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    style={{
-                      width: "24px",
-                      height: "24px",
-                      color: "var(--muted-foreground, #6b7280)",
-                      animation: "slop-spin 1s linear infinite",
-                    }}
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                      style={{ opacity: 0.25 }}
-                    />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      style={{ opacity: 0.75 }}
-                    />
-                  </svg>
-                  <span
-                    className="text-xs text-muted-foreground"
-                    style={{
-                      fontSize: "0.75rem",
-                      color: "var(--muted-foreground, #6b7280)",
-                    }}
-                  >
-                    Loading...
-                  </span>
-                </div>
-              </div>
-
-              {/* Shimmer effect underneath */}
-              <div
-                className={cn(
-                  "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
-                  isLoading ? "opacity-100" : "opacity-0",
-                )}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  background:
-                    "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
-                  backgroundSize: "200% 100%",
-                  animation: "slop-shimmer 2s ease-in-out infinite",
-                  opacity: isLoading ? 1 : 0,
-                  transition: "opacity 300ms",
-                }}
-              />
-            </>
-          )}
-
-          {error && (
-            <ErrorOverlay
-              error={error}
-              errorFallback={errorFallback}
-              label="Failed to load video"
-            />
-          )}
-
-          {/* Video */}
-          <video
-            key={src}
-            ref={videoRef}
-            src={src}
-            autoPlay={autoPlay}
-            loop={loop}
-            muted={muted}
-            playsInline={playsInline}
-            {...props}
-            onLoadedData={(e) => {
-              setIsLoading(false);
-              onLoadedData?.(e);
-            }}
-            onError={(e) => {
-              monitor.mediaFailed(src, "Failed to load video");
-              onError?.(e);
-            }}
-            aria-hidden={error ? true : props["aria-hidden"]}
-            className={cn(
-              "h-full w-full object-cover transition-opacity duration-500",
-              isLoading || error ? "opacity-0" : "opacity-100",
-            )}
-            style={{
-              height: "100%",
-              width: "100%",
-              objectFit: "cover",
-              transition: "opacity 500ms",
-              opacity: isLoading || error ? 0 : 1,
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-};

package/src/index.ts

@@ -1,23 +0,0 @@
-export { SlopImage, type SlopImageProps } from "./components/SlopImage";
-export { SlopVideo, type SlopVideoProps } from "./components/SlopVideo";
-export { SlopText, type SlopTextProps } from "./components/SlopText";
-export type { SlopErrorFallback } from "./components/ErrorOverlay";
-
-export type {
-  ImageAspectRatio,
-  VideoAspectRatio,
-  SlopImageOptions,
-  SlopVideoOptions,
-  SlopTextOptions,
-  ResultRating,
-  RateResultOptions,
-  RateResultResponse,
-} from "@slopmachine/core";
-
-export {
-  preloadImage,
-  preloadVideo,
-  preloadText,
-  rateResult,
-  SlopMachineError,
-} from "@slopmachine/core";

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "declaration": true,
-    "declarationMap": true,
-    "baseUrl": "."
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsup.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["cjs", "esm"],
-  dts: true,
-  sourcemap: true,
-  clean: true,
-  external: ["react", "react-dom"],
-});