@slopmachine/react 0.1.10 → 0.1.13

package/dist/index.mjs

@@ -2,7 +2,9 @@
 import React, { useMemo, useState } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { buildImageUrl } from "@slopmachine/core";
+import {
+  buildImageUrl
+} from "@slopmachine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -81,15 +83,17 @@ var SlopImage = ({
           }
         }
       ` }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className, style: props.style, children: /* @__PURE__ */ 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__ */ jsx(
@@ -249,9 +253,289 @@ var SlopImage = ({
           )
         ]
       }
-    )
+    ) })
+  ] });
+};
+
+// src/components/SlopVideo.tsx
+import { useMemo as useMemo2, useState as useState2, useRef, useEffect } from "react";
+import { clsx as clsx2 } from "clsx";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import {
+  buildVideoUrl
+} from "@slopmachine/core";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function cn2(...inputs) {
+  return twMerge2(clsx2(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 = useMemo2(
+    () => buildVideoUrl({
+      bucketId,
+      aspectRatio,
+      version,
+      resultId,
+      variables,
+      duration,
+      baseUrl,
+      model
+    }),
+    [
+      bucketId,
+      aspectRatio,
+      version,
+      resultId,
+      variables,
+      duration,
+      baseUrl,
+      model
+    ]
+  );
+  const [src, setSrc] = useState2(rawSrc);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSrc(rawSrc);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [rawSrc]);
+  const [isLoading, setIsLoading] = useState2(true);
+  const [currentSrc, setCurrentSrc] = useState2(src);
+  const videoRef = useRef(null);
+  if (src !== currentSrc) {
+    setCurrentSrc(src);
+    setIsLoading(true);
+  }
+  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__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("div", { className, style: props.style, children: /* @__PURE__ */ jsxs2(
+      "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__ */ jsx2(
+            "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__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx2(
+              "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__ */ jsxs2(
+                  "div",
+                  {
+                    className: "flex flex-col items-center gap-2",
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: "0.5rem"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2(
+                        "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__ */ jsx2(
+                              "circle",
+                              {
+                                className: "opacity-25",
+                                cx: "12",
+                                cy: "12",
+                                r: "10",
+                                stroke: "currentColor",
+                                strokeWidth: "4",
+                                style: { opacity: 0.25 }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2(
+                              "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__ */ jsx2(
+                        "span",
+                        {
+                          className: "text-xs text-muted-foreground",
+                          style: {
+                            fontSize: "0.75rem",
+                            color: "var(--muted-foreground, #6b7280)"
+                          },
+                          children: "Loading..."
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "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__ */ jsx2(
+            "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
+          )
+        ]
+      }
+    ) })
   ] });
 };
 export {
-  SlopImage
+  SlopImage,
+  SlopVideo
 };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SlopImage.tsx","../src/components/SlopVideo.tsx"],"sourcesContent":["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":["useMemo","useState","clsx","twMerge","Fragment","jsx","jsxs","cn"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/react",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "description": "The official React SDK for Slop Machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -9,7 +9,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "scripts": {