@slopmachine/react 0.1.10 → 0.1.13

package/Agents.md

@@ -0,0 +1,34 @@
+# React SDK Conventions
+
+This document outlines the coding conventions and patterns used in the `@slopmachine/react` SDK. Future agents should adhere to these guidelines when making modifications or adding new components.
+
+## Dependencies and Styling
+
+- **Class Merging:** Use `clsx` and `tailwind-merge` to construct and merge Tailwind CSS classes. A utility function `cn(...inputs: ClassValue[])` is typically used for this purpose.
+- **Styling Approach:** Components use Tailwind CSS classes for styling. However, to ensure components remain robust even if the consumer's environment doesn't perfectly process all Tailwind classes, always include equivalent inline `style` properties as a fallback.
+- **CSS Variables:** Use standard CSS variables for theme-related colors (e.g., `var(--muted, #f3f4f6)`).
+- **Custom Animations/Styles:** If complex animations or specific scoped styles are needed that go beyond Tailwind utility classes, inject them using a scoped `<style>` block within the component.
+- **Core Logic:** Import shared logic, utilities, and base types from `@slopmachine/core`.
+
+## Component Structure
+
+- **Functional Components:** Define components as Functional Components (e.g., `React.FC<Props>`).
+- **Prop Forwarding:** Spread the remaining props (`...props`) onto the primary underlying DOM element to allow consumers to pass standard HTML attributes (like `aria-` attributes, data attributes, etc.).
+
+## Prop Typing
+
+- **Interfaces:** Define an explicit `Props` interface for each component.
+- **Extending Standard Attributes:** Extend the appropriate React HTML attributes interface (e.g., `React.ImgHTMLAttributes<HTMLImageElement>`).
+- **Overriding Attributes:** Use `Omit` to exclude standard attributes that are managed internally by the component or replaced by custom SDK options (e.g., `Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">`).
+- **Shared Types:** Extend or incorporate types from `@slopmachine/core` (like `SlopImageOptions`).
+
+## IntelliSense and Documentation
+
+- **JSDoc Comments:** Always include descriptive JSDoc comments for components and their props to provide rich IntelliSense in IDEs.
+- **Component Documentation:** Component JSDoc blocks should describe what the component does and include a clear `@example` block demonstrating usage, and optionally a `@version` tag if applicable.
+- **Prop Documentation:** Every custom prop in a component's interface should have a JSDoc comment explaining its purpose, default behavior, and any edge cases. This is crucial for developer experience when consuming the SDK.
+
+## Exporting Patterns
+
+- **Named Exports:** Use named exports for components and interfaces (e.g., `export const ComponentName = ...`). Avoid default exports.
+- **Entry Point:** Ensure components and their prop types are exported from the package's main entry point if they are meant for public consumption.

package/README.md

@@ -14,7 +14,7 @@ pnpm add @slopmachine/react
 
 ## Demo
 
-https://slopmachine-dev.github.io/slopmachine-sdk/
+https://slopmachine-dev.github.io/slopmachine-sdk/demo-react/
 
 ## Usage
 

package/dist/index.d.mts

@@ -1,9 +1,68 @@
 import React from 'react';
-import { SlopImageOptions } from '@slopmachine/core';
+import { SlopImageOptions, ImageAspectRatio, SlopVideoOptions, VideoAspectRatio } from '@slopmachine/core';
+export { ImageAspectRatio, SlopImageOptions, SlopVideoOptions, VideoAspectRatio } from '@slopmachine/core';
 
-interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopImageOptions {
+interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, Omit<SlopImageOptions, "aspectRatio"> {
+    /**
+     * The aspect ratio of the generated image. Defaults to "1:1".
+     */
+    aspectRatio?: ImageAspectRatio;
+    /**
+     * Custom React node to display while the image is loading.
+     * If not provided, a default spinner and shimmer effect will be shown.
+     */
     loader?: React.ReactNode;
 }
+/**
+ * Renders an image 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
+ * <SlopImage
+ *   bucketId="my-bucket"
+ *   resultId="some-result"
+ *   aspectRatio="16:9"
+ *   className="rounded-lg"
+ * />
+ * ```
+ *
+ * @version 0.1.13
+ */
 declare const SlopImage: React.FC<SlopImageProps>;
 
-export { SlopImage };
+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;
+}
+/**
+ * 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
+ * <SlopVideo
+ *   bucketId="my-bucket"
+ *   resultId="some-result"
+ *   aspectRatio="16:9"
+ *   className="rounded-lg"
+ *   autoPlay
+ *   loop
+ *   muted
+ * />
+ * ```
+ */
+declare const SlopVideo: React.FC<SlopVideoProps>;
+
+export { SlopImage, type SlopImageProps, SlopVideo, type SlopVideoProps };

package/dist/index.d.ts

@@ -1,9 +1,68 @@
 import React from 'react';
-import { SlopImageOptions } from '@slopmachine/core';
+import { SlopImageOptions, ImageAspectRatio, SlopVideoOptions, VideoAspectRatio } from '@slopmachine/core';
+export { ImageAspectRatio, SlopImageOptions, SlopVideoOptions, VideoAspectRatio } from '@slopmachine/core';
 
-interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopImageOptions {
+interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, Omit<SlopImageOptions, "aspectRatio"> {
+    /**
+     * The aspect ratio of the generated image. Defaults to "1:1".
+     */
+    aspectRatio?: ImageAspectRatio;
+    /**
+     * Custom React node to display while the image is loading.
+     * If not provided, a default spinner and shimmer effect will be shown.
+     */
     loader?: React.ReactNode;
 }
+/**
+ * Renders an image 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
+ * <SlopImage
+ *   bucketId="my-bucket"
+ *   resultId="some-result"
+ *   aspectRatio="16:9"
+ *   className="rounded-lg"
+ * />
+ * ```
+ *
+ * @version 0.1.13
+ */
 declare const SlopImage: React.FC<SlopImageProps>;
 
-export { SlopImage };
+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;
+}
+/**
+ * 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
+ * <SlopVideo
+ *   bucketId="my-bucket"
+ *   resultId="some-result"
+ *   aspectRatio="16:9"
+ *   className="rounded-lg"
+ *   autoPlay
+ *   loop
+ *   muted
+ * />
+ * ```
+ */
+declare const SlopVideo: React.FC<SlopVideoProps>;
+
+export { SlopImage, type SlopImageProps, SlopVideo, type SlopVideoProps };

package/dist/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  SlopImage: () => SlopImage
+  SlopImage: () => SlopImage,
+  SlopVideo: () => SlopVideo
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -117,15 +118,17 @@ var SlopImage = ({
           }
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: props.style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: cn("relative overflow-hidden", className),
+        className: "slop-wrapper relative overflow-hidden w-full h-full",
         style: {
           aspectRatio: String(aspectRatio).replace(":", "/"),
           backgroundColor: "var(--muted, #f3f4f6)",
           position: "relative",
-          overflow: "hidden"
+          overflow: "hidden",
+          width: "100%",
+          height: "100%"
         },
         children: [
           loader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -285,10 +288,288 @@ var SlopImage = ({
           )
         ]
       }
-    )
+    ) })
+  ] });
+};
+
+// src/components/SlopVideo.tsx
+var import_react2 = require("react");
+var import_clsx2 = require("clsx");
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_core2 = require("@slopmachine/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function cn2(...inputs) {
+  return (0, import_tailwind_merge2.twMerge)((0, import_clsx2.clsx)(inputs));
+}
+var SlopVideo = ({
+  bucketId,
+  className,
+  aspectRatio = "16:9",
+  version,
+  resultId,
+  model,
+  variables = {},
+  duration,
+  baseUrl,
+  loader,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  playsInline = true,
+  ...props
+}) => {
+  const rawSrc = (0, import_react2.useMemo)(
+    () => (0, import_core2.buildVideoUrl)({
+      bucketId,
+      aspectRatio,
+      version,
+      resultId,
+      variables,
+      duration,
+      baseUrl,
+      model
+    }),
+    [
+      bucketId,
+      aspectRatio,
+      version,
+      resultId,
+      variables,
+      duration,
+      baseUrl,
+      model
+    ]
+  );
+  const [src, setSrc] = (0, import_react2.useState)(rawSrc);
+  (0, import_react2.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setSrc(rawSrc);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [rawSrc]);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const [currentSrc, setCurrentSrc] = (0, import_react2.useState)(src);
+  const videoRef = (0, import_react2.useRef)(null);
+  if (src !== currentSrc) {
+    setCurrentSrc(src);
+    setIsLoading(true);
+  }
+  (0, import_react2.useEffect)(() => {
+    if (!src) return;
+    fetch(src, { method: "HEAD" }).then(async (res) => {
+      if (!res.ok) {
+        try {
+          const errRes = await fetch(src);
+          const errJson = await errRes.json();
+          console.error("SlopVideo error:", res.status, errJson.error);
+        } catch (e) {
+        }
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      console.error(`Error fetching video from ${src}:`, err);
+      setIsLoading(false);
+    });
+  }, [src]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+        @keyframes slop-shimmer {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: -200% 0;
+          }
+        }
+        @keyframes slop-spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style: props.style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: "slop-wrapper relative overflow-hidden w-full h-full",
+        style: {
+          aspectRatio: String(aspectRatio).replace(":", "/"),
+          backgroundColor: "var(--muted, #f3f4f6)",
+          position: "relative",
+          overflow: "hidden",
+          width: "100%",
+          height: "100%"
+        },
+        children: [
+          loader ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: cn2(
+                "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"
+              },
+              children: loader
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: cn2(
+                  "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"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    className: "flex flex-col items-center gap-2",
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: "0.5rem"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                        "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"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "circle",
+                              {
+                                className: "opacity-25",
+                                cx: "12",
+                                cy: "12",
+                                r: "10",
+                                stroke: "currentColor",
+                                strokeWidth: "4",
+                                style: { opacity: 0.25 }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "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 }
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "span",
+                        {
+                          className: "text-xs text-muted-foreground",
+                          style: {
+                            fontSize: "0.75rem",
+                            color: "var(--muted-foreground, #6b7280)"
+                          },
+                          children: "Loading..."
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: cn2(
+                  "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"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "video",
+            {
+              ref: videoRef,
+              src,
+              autoPlay,
+              loop,
+              muted,
+              playsInline,
+              onLoadedData: () => setIsLoading(false),
+              onError: () => setIsLoading(false),
+              className: cn2(
+                "h-full w-full object-cover transition-opacity duration-500",
+                isLoading ? "opacity-0" : "opacity-100"
+              ),
+              style: {
+                height: "100%",
+                width: "100%",
+                objectFit: "cover",
+                transition: "opacity 500ms",
+                opacity: isLoading ? 0 : 1
+              },
+              ...props
+            },
+            src
+          )
+        ]
+      }
+    ) })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  SlopImage
+  SlopImage,
+  SlopVideo
 });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/SlopImage.tsx","../src/components/SlopVideo.tsx"],"sourcesContent":["export { SlopImage, type SlopImageProps } from \"./components/SlopImage\";\nexport { SlopVideo, type SlopVideoProps } from \"./components/SlopVideo\";\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n} from \"@slopmachine/core\";\n","import React, { useMemo, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildImageUrl,\n  type SlopImageOptions,\n  type ImageAspectRatio,\n} from \"@slopmachine/core\";\n\n// Utility for Tailwind classes\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport interface SlopImageProps\n  extends\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\">,\n    Omit<SlopImageOptions, \"aspectRatio\"> {\n  /**\n   * The aspect ratio of the generated image. Defaults to \"1:1\".\n   */\n  aspectRatio?: ImageAspectRatio;\n  /**\n   * Custom React node to display while the image is loading.\n   * If not provided, a default spinner and shimmer effect will be shown.\n   */\n  loader?: React.ReactNode;\n}\n\n/**\n * Renders an image generated by Slop Machine.\n *\n * This component automatically constructs the correct URL for the Slop Machine API,\n * displays a loading skeleton or custom loader while fetching, and handles errors.\n *\n * @example\n * ```tsx\n * <SlopImage\n *   bucketId=\"my-bucket\"\n *   resultId=\"some-result\"\n *   aspectRatio=\"16:9\"\n *   className=\"rounded-lg\"\n * />\n * ```\n *\n * @version 0.1.13\n */\nexport const SlopImage: React.FC<SlopImageProps> = ({\n  bucketId,\n  className,\n  aspectRatio = \"1:1\",\n  version,\n  resultId,\n  model,\n  variables = {},\n  baseUrl,\n  loader,\n  ...props\n}) => {\n  // Construct API URL\n  const rawSrc = useMemo(\n    () =>\n      buildImageUrl({\n        bucketId,\n        aspectRatio,\n        version,\n        resultId,\n        variables,\n        baseUrl,\n        model,\n      }),\n    [bucketId, aspectRatio, version, resultId, variables, baseUrl, model],\n  );\n\n  const [src, setSrc] = useState(rawSrc);\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => {\n      setSrc(rawSrc);\n    }, 100);\n    return () => clearTimeout(timer);\n  }, [rawSrc]);\n\n  const alt = \"Generated image\";\n\n  const [isLoading, setIsLoading] = useState(true);\n  const [currentSrc, setCurrentSrc] = useState(src);\n\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n  }\n\n  React.useEffect(() => {\n    if (!src) return;\n\n    fetch(src, { method: \"HEAD\" })\n      .then(async (res) => {\n        if (!res.ok) {\n          // console.error(\n          //   `Failed to load image from ${src}. Status: ${res.status} ${res.statusText}`,\n          // );\n          try {\n            const errRes = await fetch(src);\n            const errJson = await errRes.json();\n            console.error(\"SlopImage error:\", res.status, errJson.error);\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          setIsLoading(false);\n        }\n      })\n      .catch((err) => {\n        console.error(`Error fetching image from ${src}:`, err);\n        setIsLoading(false);\n      });\n  }, [src]);\n\n  return (\n    <>\n      <style>{`\n        @keyframes slop-shimmer {\n          0% {\n            background-position: 200% 0;\n          }\n          100% {\n            background-position: -200% 0;\n          }\n        }\n        @keyframes slop-spin {\n          from {\n            transform: rotate(0deg);\n          }\n          to {\n            transform: rotate(360deg);\n          }\n        }\n      `}</style>\n      <div className={className} style={props.style}>\n        <div\n          className=\"slop-wrapper relative overflow-hidden w-full h-full\"\n          style={{\n            aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\n            backgroundColor: \"var(--muted, #f3f4f6)\",\n            position: \"relative\",\n            overflow: \"hidden\",\n            width: \"100%\",\n            height: \"100%\",\n          }}\n        >\n          {/* Loading UI */}\n          {loader ? (\n            <div\n              className={cn(\n                \"absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300\",\n                isLoading ? \"opacity-100\" : \"opacity-0 pointer-events-none\",\n              )}\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: 0,\n                right: 0,\n                bottom: 0,\n                zIndex: 10,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                opacity: isLoading ? 1 : 0,\n                pointerEvents: isLoading ? \"auto\" : \"none\",\n                transition: \"opacity 300ms ease-in-out\",\n              }}\n            >\n              {loader}\n            </div>\n          ) : (\n            <>\n              {/* Loading overlay */}\n              <div\n                className={cn(\n                  \"absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300\",\n                  isLoading ? \"opacity-100\" : \"opacity-0 pointer-events-none\",\n                )}\n                style={{\n                  position: \"absolute\",\n                  top: 0,\n                  left: 0,\n                  right: 0,\n                  bottom: 0,\n                  zIndex: 10,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  backgroundColor: \"var(--muted, #f3f4f6)\",\n                  opacity: isLoading ? 1 : 0,\n                  pointerEvents: isLoading ? \"auto\" : \"none\",\n                  transition: \"opacity 300ms ease-in-out\",\n                }}\n              >\n                <div\n                  className=\"flex flex-col items-center gap-2\"\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    alignItems: \"center\",\n                    gap: \"0.5rem\",\n                  }}\n                >\n                  <svg\n                    className=\"spinner size-6 text-muted-foreground\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    style={{\n                      width: \"24px\",\n                      height: \"24px\",\n                      color: \"var(--muted-foreground, #6b7280)\",\n                      animation: \"slop-spin 1s linear infinite\",\n                    }}\n                  >\n                    <circle\n                      className=\"opacity-25\"\n                      cx=\"12\"\n                      cy=\"12\"\n                      r=\"10\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"4\"\n                      style={{ opacity: 0.25 }}\n                    />\n                    <path\n                      className=\"opacity-75\"\n                      fill=\"currentColor\"\n                      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\"\n                      style={{ opacity: 0.75 }}\n                    />\n                  </svg>\n                  <span\n                    className=\"text-xs text-muted-foreground\"\n                    style={{\n                      fontSize: \"0.75rem\",\n                      color: \"var(--muted-foreground, #6b7280)\",\n                    }}\n                  >\n                    Loading...\n                  </span>\n                </div>\n              </div>\n\n              {/* Shimmer effect underneath */}\n              <div\n                className={cn(\n                  \"shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted\",\n                  isLoading ? \"opacity-100\" : \"opacity-0\",\n                )}\n                style={{\n                  position: \"absolute\",\n                  top: 0,\n                  left: 0,\n                  right: 0,\n                  bottom: 0,\n                  background:\n                    \"linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)\",\n                  backgroundSize: \"200% 100%\",\n                  animation: \"slop-shimmer 2s ease-in-out infinite\",\n                  opacity: isLoading ? 1 : 0,\n                  transition: \"opacity 300ms\",\n                }}\n              />\n            </>\n          )}\n\n          {/* Image */}\n          <img\n            key={src}\n            src={src}\n            alt={alt}\n            onLoad={() => setIsLoading(false)}\n            onError={() => setIsLoading(false)}\n            className={cn(\n              \"h-full w-full object-cover transition-opacity duration-500\",\n              isLoading ? \"opacity-0\" : \"opacity-100\",\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit: \"cover\",\n              transition: \"opacity 500ms\",\n              opacity: isLoading ? 0 : 1,\n            }}\n            {...props}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useMemo, useState, useRef, useEffect } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildVideoUrl,\n  type SlopVideoOptions,\n  type VideoAspectRatio,\n} from \"@slopmachine/core\";\n\n// Utility for Tailwind classes\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport interface SlopVideoProps\n  extends\n    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, \"src\">,\n    Omit<SlopVideoOptions, \"aspectRatio\"> {\n  /**\n   * The aspect ratio of the generated video. Defaults to \"16:9\".\n   */\n  aspectRatio?: VideoAspectRatio;\n  /**\n   * Custom React node to display while the video is loading.\n   * If not provided, a default spinner and shimmer effect will be shown.\n   */\n  loader?: React.ReactNode;\n}\n\n/**\n * Renders a video generated by Slop Machine.\n *\n * This component automatically constructs the correct URL for the Slop Machine API,\n * displays a loading skeleton or custom loader while fetching, and handles errors.\n *\n * @example\n * ```tsx\n * <SlopVideo\n *   bucketId=\"my-bucket\"\n *   resultId=\"some-result\"\n *   aspectRatio=\"16:9\"\n *   className=\"rounded-lg\"\n *   autoPlay\n *   loop\n *   muted\n * />\n * ```\n */\nexport const SlopVideo: React.FC<SlopVideoProps> = ({\n  bucketId,\n  className,\n  aspectRatio = \"16:9\",\n  version,\n  resultId,\n  model,\n  variables = {},\n  duration,\n  baseUrl,\n  loader,\n  autoPlay = true,\n  loop = true,\n  muted = true,\n  playsInline = true,\n  ...props\n}) => {\n  // Construct API URL\n  const rawSrc = useMemo(\n    () =>\n      buildVideoUrl({\n        bucketId,\n        aspectRatio,\n        version,\n        resultId,\n        variables,\n        duration,\n        baseUrl,\n        model,\n      }),\n    [\n      bucketId,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      duration,\n      baseUrl,\n      model,\n    ],\n  );\n\n  const [src, setSrc] = useState(rawSrc);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setSrc(rawSrc);\n    }, 100);\n    return () => clearTimeout(timer);\n  }, [rawSrc]);\n\n  const [isLoading, setIsLoading] = useState(true);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n  }\n\n  useEffect(() => {\n    if (!src) return;\n\n    fetch(src, { method: \"HEAD\" })\n      .then(async (res) => {\n        if (!res.ok) {\n          try {\n            const errRes = await fetch(src);\n            const errJson = await errRes.json();\n            console.error(\"SlopVideo error:\", res.status, errJson.error);\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          setIsLoading(false);\n        }\n      })\n      .catch((err) => {\n        console.error(`Error fetching video from ${src}:`, err);\n        setIsLoading(false);\n      });\n  }, [src]);\n\n  return (\n    <>\n      <style>{`\n        @keyframes slop-shimmer {\n          0% {\n            background-position: 200% 0;\n          }\n          100% {\n            background-position: -200% 0;\n          }\n        }\n        @keyframes slop-spin {\n          from {\n            transform: rotate(0deg);\n          }\n          to {\n            transform: rotate(360deg);\n          }\n        }\n      `}</style>\n      <div className={className} style={props.style}>\n        <div\n          className=\"slop-wrapper relative overflow-hidden w-full h-full\"\n          style={{\n            aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\n            backgroundColor: \"var(--muted, #f3f4f6)\",\n            position: \"relative\",\n            overflow: \"hidden\",\n            width: \"100%\",\n            height: \"100%\",\n          }}\n        >\n          {/* Loading UI */}\n          {loader ? (\n            <div\n              className={cn(\n                \"absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300\",\n                isLoading ? \"opacity-100\" : \"opacity-0 pointer-events-none\",\n              )}\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: 0,\n                right: 0,\n                bottom: 0,\n                zIndex: 10,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                opacity: isLoading ? 1 : 0,\n                pointerEvents: isLoading ? \"auto\" : \"none\",\n                transition: \"opacity 300ms ease-in-out\",\n              }}\n            >\n              {loader}\n            </div>\n          ) : (\n            <>\n              {/* Loading overlay */}\n              <div\n                className={cn(\n                  \"absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300\",\n                  isLoading ? \"opacity-100\" : \"opacity-0 pointer-events-none\",\n                )}\n                style={{\n                  position: \"absolute\",\n                  top: 0,\n                  left: 0,\n                  right: 0,\n                  bottom: 0,\n                  zIndex: 10,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  backgroundColor: \"var(--muted, #f3f4f6)\",\n                  opacity: isLoading ? 1 : 0,\n                  pointerEvents: isLoading ? \"auto\" : \"none\",\n                  transition: \"opacity 300ms ease-in-out\",\n                }}\n              >\n                <div\n                  className=\"flex flex-col items-center gap-2\"\n                  style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    alignItems: \"center\",\n                    gap: \"0.5rem\",\n                  }}\n                >\n                  <svg\n                    className=\"spinner size-6 text-muted-foreground\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    style={{\n                      width: \"24px\",\n                      height: \"24px\",\n                      color: \"var(--muted-foreground, #6b7280)\",\n                      animation: \"slop-spin 1s linear infinite\",\n                    }}\n                  >\n                    <circle\n                      className=\"opacity-25\"\n                      cx=\"12\"\n                      cy=\"12\"\n                      r=\"10\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"4\"\n                      style={{ opacity: 0.25 }}\n                    />\n                    <path\n                      className=\"opacity-75\"\n                      fill=\"currentColor\"\n                      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\"\n                      style={{ opacity: 0.75 }}\n                    />\n                  </svg>\n                  <span\n                    className=\"text-xs text-muted-foreground\"\n                    style={{\n                      fontSize: \"0.75rem\",\n                      color: \"var(--muted-foreground, #6b7280)\",\n                    }}\n                  >\n                    Loading...\n                  </span>\n                </div>\n              </div>\n\n              {/* Shimmer effect underneath */}\n              <div\n                className={cn(\n                  \"shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted\",\n                  isLoading ? \"opacity-100\" : \"opacity-0\",\n                )}\n                style={{\n                  position: \"absolute\",\n                  top: 0,\n                  left: 0,\n                  right: 0,\n                  bottom: 0,\n                  background:\n                    \"linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)\",\n                  backgroundSize: \"200% 100%\",\n                  animation: \"slop-shimmer 2s ease-in-out infinite\",\n                  opacity: isLoading ? 1 : 0,\n                  transition: \"opacity 300ms\",\n                }}\n              />\n            </>\n          )}\n\n          {/* Video */}\n          <video\n            key={src}\n            ref={videoRef}\n            src={src}\n            autoPlay={autoPlay}\n            loop={loop}\n            muted={muted}\n            playsInline={playsInline}\n            onLoadedData={() => setIsLoading(false)}\n            onError={() => setIsLoading(false)}\n            className={cn(\n              \"h-full w-full object-cover transition-opacity duration-500\",\n              isLoading ? \"opacity-0\" : \"opacity-100\",\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit: \"cover\",\n              transition: \"opacity 500ms\",\n              opacity: isLoading ? 0 : 1,\n            }}\n            {...props}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n"],"mappings":"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","names":["React","import_react","import_clsx","import_tailwind_merge","import_core","import_jsx_runtime","cn"]}