@slopmachine/react 0.1.10 → 0.1.12

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.12
+ */
 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.12
+ */
 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);
 
@@ -288,7 +289,283 @@ 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.jsxs)(
+      "div",
+      {
+        className: cn2("relative overflow-hidden", className),
+        style: {
+          aspectRatio: String(aspectRatio).replace(":", "/"),
+          backgroundColor: "var(--muted, #f3f4f6)",
+          position: "relative",
+          overflow: "hidden"
+        },
+        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.12\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\n        className={cn(\"relative overflow-hidden\", className)}\n        style={{\n          aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\n          backgroundColor: \"var(--muted, #f3f4f6)\",\n          position: \"relative\",\n          overflow: \"hidden\",\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    </>\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\n        className={cn(\"relative overflow-hidden\", className)}\n        style={{\n          aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\n          backgroundColor: \"var(--muted, #f3f4f6)\",\n          position: \"relative\",\n          overflow: \"hidden\",\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    </>\n  );\n};\n"],"mappings":"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","names":["React","import_react","import_clsx","import_tailwind_merge","import_core","import_jsx_runtime","cn"]}

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));
@@ -252,6 +254,284 @@ 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__ */ jsxs2(
+      "div",
+      {
+        className: cn2("relative overflow-hidden", className),
+        style: {
+          aspectRatio: String(aspectRatio).replace(":", "/"),
+          backgroundColor: "var(--muted, #f3f4f6)",
+          position: "relative",
+          overflow: "hidden"
+        },
+        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.12\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\n        className={cn(\"relative overflow-hidden\", className)}\n        style={{\n          aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\n          backgroundColor: \"var(--muted, #f3f4f6)\",\n          position: \"relative\",\n          overflow: \"hidden\",\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    </>\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\n        className={cn(\"relative overflow-hidden\", className)}\n        style={{\n          aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\n          backgroundColor: \"var(--muted, #f3f4f6)\",\n          position: \"relative\",\n          overflow: \"hidden\",\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    </>\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.12",
   "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": {

package/src/components/SlopImage.tsx

@@ -2,20 +2,50 @@ import React, { useMemo, useState } from "react";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-import { buildImageUrl, type SlopImageOptions } from "@slopmachine/core";
+import {
+  buildImageUrl,
+  type SlopImageOptions,
+  type ImageAspectRatio,
+} from "@slopmachine/core";
 
 // Utility for Tailwind classes
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-interface SlopImageProps
+export interface SlopImageProps
   extends
     Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
-    SlopImageOptions {
+    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.12
+ */
 export const SlopImage: React.FC<SlopImageProps> = ({
   bucketId,
   className,

package/src/components/SlopVideo.tsx

@@ -0,0 +1,308 @@
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+import {
+  buildVideoUrl,
+  type SlopVideoOptions,
+  type VideoAspectRatio,
+} from "@slopmachine/core";
+
+// 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;
+}
+
+/**
+ * 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
+ * />
+ * ```
+ */
+export const SlopVideo: React.FC<SlopVideoProps> = ({
+  bucketId,
+  className,
+  aspectRatio = "16:9",
+  version,
+  resultId,
+  model,
+  variables = {},
+  duration,
+  baseUrl,
+  loader,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  playsInline = true,
+  ...props
+}) => {
+  // Construct API URL
+  const rawSrc = useMemo(
+    () =>
+      buildVideoUrl({
+        bucketId,
+        aspectRatio,
+        version,
+        resultId,
+        variables,
+        duration,
+        baseUrl,
+        model,
+      }),
+    [
+      bucketId,
+      aspectRatio,
+      version,
+      resultId,
+      variables,
+      duration,
+      baseUrl,
+      model,
+    ],
+  );
+
+  const [src, setSrc] = useState(rawSrc);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSrc(rawSrc);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [rawSrc]);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentSrc, setCurrentSrc] = useState(src);
+  const videoRef = useRef<HTMLVideoElement>(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) {
+            // Failed to fetch or parse error details
+          }
+          setIsLoading(false);
+        }
+      })
+      .catch((err) => {
+        console.error(`Error fetching video from ${src}:`, err);
+        setIsLoading(false);
+      });
+  }, [src]);
+
+  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={cn("relative overflow-hidden", className)}
+        style={{
+          aspectRatio: String(aspectRatio).replace(":", "/"),
+          backgroundColor: "var(--muted, #f3f4f6)",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* 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",
+              }}
+            />
+          </>
+        )}
+
+        {/* Video */}
+        <video
+          key={src}
+          ref={videoRef}
+          src={src}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          playsInline={playsInline}
+          onLoadedData={() => setIsLoading(false)}
+          onError={() => setIsLoading(false)}
+          className={cn(
+            "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}
+        />
+      </div>
+    </>
+  );
+};

package/src/index.ts

@@ -1 +1,8 @@
-export { SlopImage } from './components/SlopImage';
+export { SlopImage, type SlopImageProps } from "./components/SlopImage";
+export { SlopVideo, type SlopVideoProps } from "./components/SlopVideo";
+export type {
+  ImageAspectRatio,
+  VideoAspectRatio,
+  SlopImageOptions,
+  SlopVideoOptions,
+} from "@slopmachine/core";

package/tsconfig.json

@@ -21,6 +21,7 @@
     "noFallthroughCasesInSwitch": true,
 
     "declaration": true,
+    "declarationMap": true,
     "baseUrl": "."
   },
   "include": ["src"],

package/tsup.config.ts

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