@slopmachine/react 0.1.26 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @slopmachine/react
+
+## 0.2.0
+
+### Minor Changes
+
+- 15b923d: Switch pipeline execution parameters to use pipelineId (with optional siloId) instead of pipelineKey.
+
+### Patch Changes
+
+- Updated dependencies [15b923d]
+  - @slopmachine/core@0.2.0

package/README.md

@@ -1,15 +1,15 @@
 # @slopmachine/react
 
-The official React SDK for Slop Machine. This package provides React components to easily integrate Slop Machine image generation into your applications.
+The official React SDK for Slop Machine. This package provides high-performance, layout-stable React components to seamlessly integrate AI images, videos, and text into your web applications.
 
 ## Installation
 
 ```bash
-npm install @slopmachine/react
+npm install @slopmachine/react @slopmachine/core
 # or
-yarn add @slopmachine/react
+yarn add @slopmachine/react @slopmachine/core
 # or
-pnpm add @slopmachine/react
+pnpm add @slopmachine/react @slopmachine/core
 ```
 
 ## Demo
@@ -18,37 +18,74 @@ https://docs.slopmachine.dev/demo-react/
 
 ## Usage
 
+### 1. Using Pre-Templated Buckets
+
 ```tsx
-import { SlopImage } from "@slopmachine/react";
+import { SlopImage, SlopVideo, SlopText } from "@slopmachine/react";
 
-function App() {
+function BucketExample() {
   return (
-    <div style={{ width: "400px", height: "400px" }}>
+    <div>
+      {/* Dynamic Image */}
       <SlopImage
-        prompt="A cute cat drinking coffee in a {style} style"
-        aspectRatio="1:1"
-        variables={{ style: "anime" }}
+        bucketId="my-bucket-id"
+        aspectRatio="16:9"
+        variables={{ style: "anime", character: "wizard" }}
+        className="rounded-lg shadow-md"
+      />
+
+      {/* Dynamic Video */}
+      <SlopVideo
+        bucketId="my-video-bucket"
+        aspectRatio="16:9"
+        duration={5}
+        autoPlay
+        loop
+        muted
+      />
+
+      {/* Dynamic Text / Story */}
+      <SlopText
+        bucketId="my-text-bucket"
+        variables={{ hero: "Arthur" }}
+        className="prose"
       />
     </div>
   );
 }
-
-export default App;
 ```
 
-## API / Props
+### 2. Using Dynamic Multi-Step Pipelines
+
+Pipelines give you full runtime control over the prompt and pipeline execution while persisting results directly to Slop Machine:
+
+```tsx
+import { SlopImage, SlopVideo, SlopText } from "@slopmachine/react";
 
-### `SlopImage`
+function PipelineExample() {
+  return (
+    <div>
+      <SlopImage
+        pipelineId="pipe_live_abc123"
+        prompt="1960s retro robot eating synthetic pizza on Mars"
+        aspectRatio="1:1"
+        metadata={{ campaign: "retro_future_2026", userId: "u_101" }}
+      />
 
-The `SlopImage` component inherits from standard `React.ImgHTMLAttributes<HTMLImageElement>` (excluding `src` and `alt`) and accepts the following additional props:
+      <SlopVideo
+        pipelineId="pipe_live_def456"
+        prompt="A drone swooping through neon skyscrapers in heavy rain"
+        aspectRatio="9:16"
+      />
 
-| Prop          | Type                     | Default      | Description                                             |
-| :------------ | :----------------------- | :----------- | :------------------------------------------------------ |
-| `prompt`      | `string`                 | **Required** | The prompt to use for image generation.                 |
-| `aspectRatio` | `string`                 | `"1:1"`      | The aspect ratio of the image (e.g. `"16:9"`, `"1:1"`). |
-| `variables`   | `Record<string, string>` | `{}`         | Variables to interpolate into the prompt.               |
-| `model`       | `string`                 | `undefined`  | The AI model to use for generation.                     |
-| `baseUrl`     | `string`                 | `undefined`  | Custom base URL for the Slop Machine API.               |
+      <SlopText
+        pipelineId="pipe_live_ghi789"
+        prompt="Write a whimsical product tagline for a cybernetic toaster"
+      />
+    </div>
+  );
+}
+```
 
 ## License
 

package/dist/index.d.mts

@@ -29,6 +29,7 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopImage
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -36,9 +37,17 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  *   className="rounded-lg"
  *   objectFit="cover"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopImage
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="1960s retro robot eating pizza on Mars"
+ *   aspectRatio="16:9"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 declare const SlopImage: React.FC<SlopImageProps>;
 
@@ -61,6 +70,7 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopVideo
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -70,9 +80,17 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  *   loop
  *   muted
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopVideo
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Drone shot of a cyberpunk city in rain"
+ *   aspectRatio="16:9"
+ *   metadata={{ campaign: "spring_launch" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 declare const SlopVideo: React.FC<SlopVideoProps>;
 
@@ -94,15 +112,23 @@ interface SlopTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopText
  *   bucketId="my-text-bucket"
  *   fallback={<div>Loading story...</div>}
  *   errorFallback={<div>Failed to load story</div>}
  *   className="text-lg text-gray-800"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopText
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Write a whimsical haiku about quantum physics"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 declare const SlopText: React.ForwardRefExoticComponent<SlopTextProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -29,6 +29,7 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopImage
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -36,9 +37,17 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  *   className="rounded-lg"
  *   objectFit="cover"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopImage
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="1960s retro robot eating pizza on Mars"
+ *   aspectRatio="16:9"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 declare const SlopImage: React.FC<SlopImageProps>;
 
@@ -61,6 +70,7 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopVideo
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -70,9 +80,17 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  *   loop
  *   muted
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopVideo
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Drone shot of a cyberpunk city in rain"
+ *   aspectRatio="16:9"
+ *   metadata={{ campaign: "spring_launch" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 declare const SlopVideo: React.FC<SlopVideoProps>;
 
@@ -94,15 +112,23 @@ interface SlopTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopText
  *   bucketId="my-text-bucket"
  *   fallback={<div>Loading story...</div>}
  *   errorFallback={<div>Failed to load story</div>}
  *   className="text-lg text-gray-800"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopText
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Write a whimsical haiku about quantum physics"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 declare const SlopText: React.ForwardRefExoticComponent<SlopTextProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -48,6 +48,10 @@ function cn(...inputs) {
 }
 var SlopImage = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "1:1",
   version,
@@ -68,6 +72,10 @@ var SlopImage = ({
   const rawSrc = (0, import_react.useMemo)(
     () => (0, import_core.buildImageUrl)({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -79,6 +87,10 @@ var SlopImage = ({
     }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -335,6 +347,10 @@ function cn2(...inputs) {
 }
 var SlopVideo = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "16:9",
   version,
@@ -357,6 +373,10 @@ var SlopVideo = ({
   const rawSrc = (0, import_react2.useMemo)(
     () => (0, import_core2.buildVideoUrl)({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -369,6 +389,10 @@ var SlopVideo = ({
     }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -626,6 +650,10 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var SlopText = import_react3.default.forwardRef(
   ({
     bucketId,
+    pipelineId,
+    siloId,
+    prompt,
+    metadata,
     version,
     resultId,
     variables,
@@ -638,21 +666,39 @@ var SlopText = import_react3.default.forwardRef(
     const [text, setText] = (0, import_react3.useState)(null);
     const [loading, setLoading] = (0, import_react3.useState)(true);
     const [error, setError] = (0, import_react3.useState)(null);
+    const rawUrl = (0, import_react3.useMemo)(
+      () => (0, import_core3.buildTextUrl)({
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        metadata,
+        version,
+        resultId,
+        variables,
+        baseUrl,
+        attachments
+      }),
+      [
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        JSON.stringify(metadata),
+        version,
+        resultId,
+        JSON.stringify(variables),
+        baseUrl,
+        JSON.stringify(attachments)
+      ]
+    );
     (0, import_react3.useEffect)(() => {
       let isMounted = true;
       const fetchText = async () => {
         try {
           setLoading(true);
           setError(null);
-          const url = (0, import_core3.buildTextUrl)({
-            bucketId,
-            version,
-            resultId,
-            variables,
-            baseUrl,
-            attachments
-          });
-          const response = await fetch(url, { cache: "no-store" });
+          const response = await fetch(rawUrl, { cache: "no-store" });
           if (!response.ok) {
             let errorMessage = response.statusText;
             try {
@@ -685,14 +731,7 @@ var SlopText = import_react3.default.forwardRef(
       return () => {
         isMounted = false;
       };
-    }, [
-      bucketId,
-      version,
-      resultId,
-      JSON.stringify(variables),
-      JSON.stringify(attachments),
-      baseUrl
-    ]);
+    }, [rawUrl]);
     if (error && errorFallback) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errorFallback });
     }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/SlopImage.tsx","../src/components/SlopVideo.tsx","../src/components/SlopText.tsx"],"sourcesContent":["export { SlopImage, type SlopImageProps } from \"./components/SlopImage\";\nexport { SlopVideo, type SlopVideoProps } from \"./components/SlopVideo\";\nexport { SlopText, type SlopTextProps } from \"./components/SlopText\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n} from \"@slopmachine/core\";\n\nexport { preloadImage } 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   * How the image should be resized to fit its container. Defaults to \"cover\".\n   */\n  objectFit?: React.CSSProperties[\"objectFit\"];\n  /**\n   * Additional CSS classes to apply directly to the `<img />` element.\n   */\n  imageClassName?: string;\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 *   objectFit=\"cover\"\n * />\n * ```\n *\n * @version 0.1.26\n */\nexport const SlopImage: React.FC<SlopImageProps> = ({\n  bucketId,\n  className,\n  aspectRatio = \"1:1\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  objectFit = \"cover\",\n  imageClassName,\n  style,\n  onLoad,\n  onError,\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        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      quality,\n      original,\n      attachments,\n    ],\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 = \"Image produced by Slop Machine (slopmachine.dev)\";\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopImage error:\", res.status, errorMessage);\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={style}>\n        <div\n          className=\"slop-wrapper relative overflow-hidden w-full h-full\"\n          style={{\n            aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\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            {...props}\n            onLoad={(e) => {\n              setIsLoading(false);\n              onLoad?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading ? 0 : 1,\n            }}\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 *\n * @version 0.1.26\n */\nexport const SlopVideo: React.FC<SlopVideoProps> = ({\n  bucketId,\n  className,\n  aspectRatio = \"16:9\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  autoPlay = true,\n  loop = true,\n  muted = true,\n  playsInline = true,\n  onLoadedData,\n  onError,\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        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      duration,\n      baseUrl,\n      quality,\n      original,\n      attachments,\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopVideo error:\", res.status, errorMessage);\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            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            {...props}\n            onLoadedData={(e) => {\n              setIsLoading(false);\n              onLoadedData?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\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          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useState } from \"react\";\nimport { buildTextUrl, type SlopTextOptions } from \"@slopmachine/core\";\nimport { marked } from \"marked\";\n\nexport interface SlopTextProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    SlopTextOptions {\n  /**\n   * Optional loading component to show while the text is being generated\n   */\n  fallback?: React.ReactNode;\n  /**\n   * Optional error component to show if the text generation fails\n   */\n  errorFallback?: React.ReactNode;\n}\n\n/**\n * Renders text generated by Slop Machine.\n *\n * This component automatically constructs the correct URL for the Slop Machine API,\n * fetches the generated text, and displays it with optional loading and error states.\n *\n * @example\n * ```tsx\n * <SlopText\n *   bucketId=\"my-text-bucket\"\n *   fallback={<div>Loading story...</div>}\n *   errorFallback={<div>Failed to load story</div>}\n *   className=\"text-lg text-gray-800\"\n * />\n * ```\n *\n * @version 0.1.26\n */\nexport const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(\n  (\n    {\n      bucketId,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      attachments,\n      fallback,\n      errorFallback,\n      ...props\n    },\n    ref,\n  ) => {\n    const [text, setText] = useState<string | null>(null);\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Error | null>(null);\n\n    useEffect(() => {\n      let isMounted = true;\n\n      const fetchText = async () => {\n        try {\n          setLoading(true);\n          setError(null);\n\n          const url = buildTextUrl({\n            bucketId,\n            version,\n            resultId,\n            variables,\n            baseUrl,\n            attachments,\n          });\n\n          // Fetch the URL to get the content, following redirects automatically\n          const response = await fetch(url, { cache: \"no-store\" });\n          if (!response.ok) {\n            let errorMessage = response.statusText;\n            try {\n              const errorText = await response.text();\n              const errorData = JSON.parse(errorText);\n              if (errorData.error) {\n                errorMessage = errorData.error;\n              }\n            } catch (e) {\n              // Ignore JSON parse errors if the response isn't JSON\n            }\n            throw new Error(`Failed to fetch text: ${errorMessage}`);\n          }\n          const content = await response.text();\n          if (isMounted) {\n            setText(content);\n          }\n        } catch (err) {\n          if (isMounted) {\n            const finalError =\n              err instanceof Error ? err : new Error(\"Failed to generate text\");\n            console.error(finalError);\n            setError(finalError);\n          }\n        } finally {\n          if (isMounted) {\n            setLoading(false);\n          }\n        }\n      };\n\n      fetchText();\n\n      return () => {\n        isMounted = false;\n      };\n    }, [\n      bucketId,\n      version,\n      resultId,\n      JSON.stringify(variables),\n      JSON.stringify(attachments),\n      baseUrl,\n    ]);\n\n    if (error && errorFallback) {\n      return <>{errorFallback}</>;\n    }\n\n    if (loading) {\n      if (fallback) {\n        return <>{fallback}</>;\n      }\n      return (\n        <div className={props.className} style={props.style}>\n          <style>{`\n            @keyframes slop-shimmer {\n              0% { background-position: 200% 0; }\n              100% { background-position: -200% 0; }\n            }\n            @keyframes slop-spin {\n              from { transform: rotate(0deg); }\n              to { transform: rotate(360deg); }\n            }\n          `}</style>\n          <div\n            className=\"slop-wrapper relative overflow-hidden w-full\"\n            style={{\n              position: \"relative\",\n              overflow: \"hidden\",\n              width: \"100%\",\n              minHeight: \"100px\",\n            }}\n          >\n            {/* Loading overlay */}\n            <div\n              className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300\"\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              }}\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=\"shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted\"\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              }}\n            />\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{\n          __html: text ? (marked.parse(text) as string) : \"\",\n        }}\n      />\n    );\n  },\n);\n\nSlopText.displayName = \"SlopText\";\n"],"mappings":"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","names":["React","import_react","import_clsx","import_tailwind_merge","import_core","import_jsx_runtime","cn","import_react","import_core","import_jsx_runtime","React","import_core"]}
+{"version":3,"sources":["../src/index.ts","../src/components/SlopImage.tsx","../src/components/SlopVideo.tsx","../src/components/SlopText.tsx"],"sourcesContent":["export { SlopImage, type SlopImageProps } from \"./components/SlopImage\";\nexport { SlopVideo, type SlopVideoProps } from \"./components/SlopVideo\";\nexport { SlopText, type SlopTextProps } from \"./components/SlopText\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n} from \"@slopmachine/core\";\n\nexport { preloadImage } 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   * How the image should be resized to fit its container. Defaults to \"cover\".\n   */\n  objectFit?: React.CSSProperties[\"objectFit\"];\n  /**\n   * Additional CSS classes to apply directly to the `<img />` element.\n   */\n  imageClassName?: string;\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 * // Using a Bucket\n * <SlopImage\n *   bucketId=\"my-bucket\"\n *   resultId=\"some-result\"\n *   aspectRatio=\"16:9\"\n *   className=\"rounded-lg\"\n *   objectFit=\"cover\"\n * />\n *\n * // Using a Pipeline with runtime prompt\n * <SlopImage\n *   pipelineId=\"pipe_live_abc123\"\n *   prompt=\"1960s retro robot eating pizza on Mars\"\n *   aspectRatio=\"16:9\"\n *   metadata={{ userId: \"123\" }}\n * />\n * ```\n *\n * @version 0.2.0\n */\nexport const SlopImage: React.FC<SlopImageProps> = ({\n  bucketId,\n  pipelineId,\n  siloId,\n  prompt,\n  metadata,\n  className,\n  aspectRatio = \"1:1\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  objectFit = \"cover\",\n  imageClassName,\n  style,\n  onLoad,\n  onError,\n  ...props\n}) => {\n  // Construct API URL\n  const rawSrc = useMemo(\n    () =>\n      buildImageUrl({\n        bucketId,\n        pipelineId,\n        siloId,\n        prompt,\n        metadata,\n        aspectRatio,\n        version,\n        resultId,\n        variables,\n        baseUrl,\n        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      quality,\n      original,\n      attachments,\n    ],\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 = \"Image produced by Slop Machine (slopmachine.dev)\";\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopImage error:\", res.status, errorMessage);\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={style}>\n        <div\n          className=\"slop-wrapper relative overflow-hidden w-full h-full\"\n          style={{\n            aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\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            {...props}\n            onLoad={(e) => {\n              setIsLoading(false);\n              onLoad?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading ? 0 : 1,\n            }}\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 * // Using a Bucket\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 * // Using a Pipeline with runtime prompt\n * <SlopVideo\n *   pipelineId=\"pipe_live_abc123\"\n *   prompt=\"Drone shot of a cyberpunk city in rain\"\n *   aspectRatio=\"16:9\"\n *   metadata={{ campaign: \"spring_launch\" }}\n * />\n * ```\n *\n * @version 0.2.0\n */\nexport const SlopVideo: React.FC<SlopVideoProps> = ({\n  bucketId,\n  pipelineId,\n  siloId,\n  prompt,\n  metadata,\n  className,\n  aspectRatio = \"16:9\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  autoPlay = true,\n  loop = true,\n  muted = true,\n  playsInline = true,\n  onLoadedData,\n  onError,\n  ...props\n}) => {\n  // Construct API URL\n  const rawSrc = useMemo(\n    () =>\n      buildVideoUrl({\n        bucketId,\n        pipelineId,\n        siloId,\n        prompt,\n        metadata,\n        aspectRatio,\n        version,\n        resultId,\n        variables,\n        duration,\n        baseUrl,\n        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      duration,\n      baseUrl,\n      quality,\n      original,\n      attachments,\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopVideo error:\", res.status, errorMessage);\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            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            {...props}\n            onLoadedData={(e) => {\n              setIsLoading(false);\n              onLoadedData?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\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          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { buildTextUrl, type SlopTextOptions } from \"@slopmachine/core\";\nimport { marked } from \"marked\";\n\nexport interface SlopTextProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    SlopTextOptions {\n  /**\n   * Optional loading component to show while the text is being generated\n   */\n  fallback?: React.ReactNode;\n  /**\n   * Optional error component to show if the text generation fails\n   */\n  errorFallback?: React.ReactNode;\n}\n\n/**\n * Renders text generated by Slop Machine.\n *\n * This component automatically constructs the correct URL for the Slop Machine API,\n * fetches the generated text, and displays it with optional loading and error states.\n *\n * @example\n * ```tsx\n * // Using a Bucket\n * <SlopText\n *   bucketId=\"my-text-bucket\"\n *   fallback={<div>Loading story...</div>}\n *   errorFallback={<div>Failed to load story</div>}\n *   className=\"text-lg text-gray-800\"\n * />\n *\n * // Using a Pipeline with runtime prompt\n * <SlopText\n *   pipelineId=\"pipe_live_abc123\"\n *   prompt=\"Write a whimsical haiku about quantum physics\"\n *   metadata={{ userId: \"123\" }}\n * />\n * ```\n *\n * @version 0.2.0\n */\nexport const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(\n  (\n    {\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      attachments,\n      fallback,\n      errorFallback,\n      ...props\n    },\n    ref,\n  ) => {\n    const [text, setText] = useState<string | null>(null);\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Error | null>(null);\n\n    const rawUrl = useMemo(\n      () =>\n        buildTextUrl({\n          bucketId,\n          pipelineId,\n          siloId,\n          prompt,\n          metadata,\n          version,\n          resultId,\n          variables,\n          baseUrl,\n          attachments,\n        }),\n      [\n        bucketId,\n        pipelineId,\n        siloId,\n        prompt,\n        JSON.stringify(metadata),\n        version,\n        resultId,\n        JSON.stringify(variables),\n        baseUrl,\n        JSON.stringify(attachments),\n      ],\n    );\n\n    useEffect(() => {\n      let isMounted = true;\n\n      const fetchText = async () => {\n        try {\n          setLoading(true);\n          setError(null);\n\n          // Fetch the URL to get the content, following redirects automatically\n          const response = await fetch(rawUrl, { cache: \"no-store\" });\n          if (!response.ok) {\n            let errorMessage = response.statusText;\n            try {\n              const errorText = await response.text();\n              const errorData = JSON.parse(errorText);\n              if (errorData.error) {\n                errorMessage = errorData.error;\n              }\n            } catch (e) {\n              // Ignore JSON parse errors if the response isn't JSON\n            }\n            throw new Error(`Failed to fetch text: ${errorMessage}`);\n          }\n          const content = await response.text();\n          if (isMounted) {\n            setText(content);\n          }\n        } catch (err) {\n          if (isMounted) {\n            const finalError =\n              err instanceof Error ? err : new Error(\"Failed to generate text\");\n            console.error(finalError);\n            setError(finalError);\n          }\n        } finally {\n          if (isMounted) {\n            setLoading(false);\n          }\n        }\n      };\n\n      fetchText();\n\n      return () => {\n        isMounted = false;\n      };\n    }, [rawUrl]);\n\n    if (error && errorFallback) {\n      return <>{errorFallback}</>;\n    }\n\n    if (loading) {\n      if (fallback) {\n        return <>{fallback}</>;\n      }\n      return (\n        <div className={props.className} style={props.style}>\n          <style>{`\n            @keyframes slop-shimmer {\n              0% { background-position: 200% 0; }\n              100% { background-position: -200% 0; }\n            }\n            @keyframes slop-spin {\n              from { transform: rotate(0deg); }\n              to { transform: rotate(360deg); }\n            }\n          `}</style>\n          <div\n            className=\"slop-wrapper relative overflow-hidden w-full\"\n            style={{\n              position: \"relative\",\n              overflow: \"hidden\",\n              width: \"100%\",\n              minHeight: \"100px\",\n            }}\n          >\n            {/* Loading overlay */}\n            <div\n              className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300\"\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              }}\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=\"shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted\"\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              }}\n            />\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{\n          __html: text ? (marked.parse(text) as string) : \"\",\n        }}\n      />\n    );\n  },\n);\n\nSlopText.displayName = \"SlopText\";\n"],"mappings":"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","names":["React","import_react","import_clsx","import_tailwind_merge","import_core","import_jsx_runtime","cn","import_react","import_core","import_jsx_runtime","React","import_core"]}

package/dist/index.mjs

@@ -11,6 +11,10 @@ function cn(...inputs) {
 }
 var SlopImage = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "1:1",
   version,
@@ -31,6 +35,10 @@ var SlopImage = ({
   const rawSrc = useMemo(
     () => buildImageUrl({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -42,6 +50,10 @@ var SlopImage = ({
     }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -300,6 +312,10 @@ function cn2(...inputs) {
 }
 var SlopVideo = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "16:9",
   version,
@@ -322,6 +338,10 @@ var SlopVideo = ({
   const rawSrc = useMemo2(
     () => buildVideoUrl({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -334,6 +354,10 @@ var SlopVideo = ({
     }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -584,13 +608,17 @@ var SlopVideo = ({
 };
 
 // src/components/SlopText.tsx
-import React3, { useEffect as useEffect2, useState as useState3 } from "react";
+import React3, { useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
 import { buildTextUrl } from "@slopmachine/core";
 import { marked } from "marked";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var SlopText = React3.forwardRef(
   ({
     bucketId,
+    pipelineId,
+    siloId,
+    prompt,
+    metadata,
     version,
     resultId,
     variables,
@@ -603,21 +631,39 @@ var SlopText = React3.forwardRef(
     const [text, setText] = useState3(null);
     const [loading, setLoading] = useState3(true);
     const [error, setError] = useState3(null);
+    const rawUrl = useMemo3(
+      () => buildTextUrl({
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        metadata,
+        version,
+        resultId,
+        variables,
+        baseUrl,
+        attachments
+      }),
+      [
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        JSON.stringify(metadata),
+        version,
+        resultId,
+        JSON.stringify(variables),
+        baseUrl,
+        JSON.stringify(attachments)
+      ]
+    );
     useEffect2(() => {
       let isMounted = true;
       const fetchText = async () => {
         try {
           setLoading(true);
           setError(null);
-          const url = buildTextUrl({
-            bucketId,
-            version,
-            resultId,
-            variables,
-            baseUrl,
-            attachments
-          });
-          const response = await fetch(url, { cache: "no-store" });
+          const response = await fetch(rawUrl, { cache: "no-store" });
           if (!response.ok) {
             let errorMessage = response.statusText;
             try {
@@ -650,14 +696,7 @@ var SlopText = React3.forwardRef(
       return () => {
         isMounted = false;
       };
-    }, [
-      bucketId,
-      version,
-      resultId,
-      JSON.stringify(variables),
-      JSON.stringify(attachments),
-      baseUrl
-    ]);
+    }, [rawUrl]);
     if (error && errorFallback) {
       return /* @__PURE__ */ jsx3(Fragment3, { children: errorFallback });
     }

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SlopImage.tsx","../src/components/SlopVideo.tsx","../src/components/SlopText.tsx","../src/index.ts"],"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   * How the image should be resized to fit its container. Defaults to \"cover\".\n   */\n  objectFit?: React.CSSProperties[\"objectFit\"];\n  /**\n   * Additional CSS classes to apply directly to the `<img />` element.\n   */\n  imageClassName?: string;\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 *   objectFit=\"cover\"\n * />\n * ```\n *\n * @version 0.1.26\n */\nexport const SlopImage: React.FC<SlopImageProps> = ({\n  bucketId,\n  className,\n  aspectRatio = \"1:1\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  objectFit = \"cover\",\n  imageClassName,\n  style,\n  onLoad,\n  onError,\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        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      quality,\n      original,\n      attachments,\n    ],\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 = \"Image produced by Slop Machine (slopmachine.dev)\";\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopImage error:\", res.status, errorMessage);\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={style}>\n        <div\n          className=\"slop-wrapper relative overflow-hidden w-full h-full\"\n          style={{\n            aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\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            {...props}\n            onLoad={(e) => {\n              setIsLoading(false);\n              onLoad?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading ? 0 : 1,\n            }}\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 *\n * @version 0.1.26\n */\nexport const SlopVideo: React.FC<SlopVideoProps> = ({\n  bucketId,\n  className,\n  aspectRatio = \"16:9\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  autoPlay = true,\n  loop = true,\n  muted = true,\n  playsInline = true,\n  onLoadedData,\n  onError,\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        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      duration,\n      baseUrl,\n      quality,\n      original,\n      attachments,\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopVideo error:\", res.status, errorMessage);\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            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            {...props}\n            onLoadedData={(e) => {\n              setIsLoading(false);\n              onLoadedData?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\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          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useState } from \"react\";\nimport { buildTextUrl, type SlopTextOptions } from \"@slopmachine/core\";\nimport { marked } from \"marked\";\n\nexport interface SlopTextProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    SlopTextOptions {\n  /**\n   * Optional loading component to show while the text is being generated\n   */\n  fallback?: React.ReactNode;\n  /**\n   * Optional error component to show if the text generation fails\n   */\n  errorFallback?: React.ReactNode;\n}\n\n/**\n * Renders text generated by Slop Machine.\n *\n * This component automatically constructs the correct URL for the Slop Machine API,\n * fetches the generated text, and displays it with optional loading and error states.\n *\n * @example\n * ```tsx\n * <SlopText\n *   bucketId=\"my-text-bucket\"\n *   fallback={<div>Loading story...</div>}\n *   errorFallback={<div>Failed to load story</div>}\n *   className=\"text-lg text-gray-800\"\n * />\n * ```\n *\n * @version 0.1.26\n */\nexport const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(\n  (\n    {\n      bucketId,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      attachments,\n      fallback,\n      errorFallback,\n      ...props\n    },\n    ref,\n  ) => {\n    const [text, setText] = useState<string | null>(null);\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Error | null>(null);\n\n    useEffect(() => {\n      let isMounted = true;\n\n      const fetchText = async () => {\n        try {\n          setLoading(true);\n          setError(null);\n\n          const url = buildTextUrl({\n            bucketId,\n            version,\n            resultId,\n            variables,\n            baseUrl,\n            attachments,\n          });\n\n          // Fetch the URL to get the content, following redirects automatically\n          const response = await fetch(url, { cache: \"no-store\" });\n          if (!response.ok) {\n            let errorMessage = response.statusText;\n            try {\n              const errorText = await response.text();\n              const errorData = JSON.parse(errorText);\n              if (errorData.error) {\n                errorMessage = errorData.error;\n              }\n            } catch (e) {\n              // Ignore JSON parse errors if the response isn't JSON\n            }\n            throw new Error(`Failed to fetch text: ${errorMessage}`);\n          }\n          const content = await response.text();\n          if (isMounted) {\n            setText(content);\n          }\n        } catch (err) {\n          if (isMounted) {\n            const finalError =\n              err instanceof Error ? err : new Error(\"Failed to generate text\");\n            console.error(finalError);\n            setError(finalError);\n          }\n        } finally {\n          if (isMounted) {\n            setLoading(false);\n          }\n        }\n      };\n\n      fetchText();\n\n      return () => {\n        isMounted = false;\n      };\n    }, [\n      bucketId,\n      version,\n      resultId,\n      JSON.stringify(variables),\n      JSON.stringify(attachments),\n      baseUrl,\n    ]);\n\n    if (error && errorFallback) {\n      return <>{errorFallback}</>;\n    }\n\n    if (loading) {\n      if (fallback) {\n        return <>{fallback}</>;\n      }\n      return (\n        <div className={props.className} style={props.style}>\n          <style>{`\n            @keyframes slop-shimmer {\n              0% { background-position: 200% 0; }\n              100% { background-position: -200% 0; }\n            }\n            @keyframes slop-spin {\n              from { transform: rotate(0deg); }\n              to { transform: rotate(360deg); }\n            }\n          `}</style>\n          <div\n            className=\"slop-wrapper relative overflow-hidden w-full\"\n            style={{\n              position: \"relative\",\n              overflow: \"hidden\",\n              width: \"100%\",\n              minHeight: \"100px\",\n            }}\n          >\n            {/* Loading overlay */}\n            <div\n              className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300\"\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              }}\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=\"shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted\"\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              }}\n            />\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{\n          __html: text ? (marked.parse(text) as string) : \"\",\n        }}\n      />\n    );\n  },\n);\n\nSlopText.displayName = \"SlopText\";\n","export { SlopImage, type SlopImageProps } from \"./components/SlopImage\";\nexport { SlopVideo, type SlopVideoProps } from \"./components/SlopVideo\";\nexport { SlopText, type SlopTextProps } from \"./components/SlopText\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n} from \"@slopmachine/core\";\n\nexport { preloadImage } from \"@slopmachine/core\";\n"],"mappings":";AAAA,OAAO,SAAS,SAAS,gBAAgB;AACzC,SAAS,YAA6B;AACtC,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,OAGK;AA+ID,SAsDM,UAtDN,KAsFY,YAtFZ;AA5IN,SAAS,MAAM,QAAsB;AACnC,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AA4CO,IAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEJ,QAAM,SAAS;AAAA,IACb,MACE,cAAc;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,MAAM;AAErC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,WAAW,MAAM;AAC7B,aAAO,MAAM;AAAA,IACf,GAAG,GAAG;AACN,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,MAAM;AAEZ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,GAAG;AAEhD,MAAI,QAAQ,YAAY;AACtB,kBAAc,GAAG;AACjB,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,IAAK;AAEV,UAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,EAC1B,KAAK,OAAO,QAAQ;AACnB,UAAI,CAAC,IAAI,IAAI;AACX,YAAI,eAAe,IAAI;AACvB,YAAI;AACF,gBAAM,SAAS,MAAM,MAAM,GAAG;AAC9B,gBAAM,YAAY,MAAM,OAAO,KAAK;AACpC,gBAAM,YAAY,KAAK,MAAM,SAAS;AACtC,cAAI,UAAU,OAAO;AACnB,2BAAe,UAAU;AAAA,UAC3B;AAAA,QACF,SAAS,GAAG;AAAA,QAEZ;AACA,gBAAQ,MAAM,oBAAoB,IAAI,QAAQ,YAAY;AAC1D,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,cAAQ,MAAM,6BAA6B,GAAG,KAAK,GAAG;AACtD,mBAAa,KAAK;AAAA,IACpB,CAAC;AAAA,EACL,GAAG,CAAC,GAAG,CAAC;AAER,SACE,iCACE;AAAA,wBAAC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAiBN;AAAA,IACF,oBAAC,SAAI,WAAsB,OACzB;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,aAAa,OAAO,WAAW,EAAE,QAAQ,KAAK,GAAG;AAAA,UACjD,UAAU;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QAGC;AAAA,mBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY,gBAAgB;AAAA,cAC9B;AAAA,cACA,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,SAAS,YAAY,IAAI;AAAA,gBACzB,eAAe,YAAY,SAAS;AAAA,gBACpC,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH,IAEA,iCAEE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY,gBAAgB;AAAA,gBAC9B;AAAA,gBACA,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,iBAAiB;AAAA,kBACjB,SAAS,YAAY,IAAI;AAAA,kBACzB,eAAe,YAAY,SAAS;AAAA,kBACpC,YAAY;AAAA,gBACd;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,eAAe;AAAA,sBACf,YAAY;AAAA,sBACZ,KAAK;AAAA,oBACP;AAAA,oBAEA;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAM;AAAA,0BACN,MAAK;AAAA,0BACL,SAAQ;AAAA,0BACR,OAAO;AAAA,4BACL,OAAO;AAAA,4BACP,QAAQ;AAAA,4BACR,OAAO;AAAA,4BACP,WAAW;AAAA,0BACb;AAAA,0BAEA;AAAA;AAAA,8BAAC;AAAA;AAAA,gCACC,WAAU;AAAA,gCACV,IAAG;AAAA,gCACH,IAAG;AAAA,gCACH,GAAE;AAAA,gCACF,QAAO;AAAA,gCACP,aAAY;AAAA,gCACZ,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,4BACzB;AAAA,4BACA;AAAA,8BAAC;AAAA;AAAA,gCACC,WAAU;AAAA,gCACV,MAAK;AAAA,gCACL,GAAE;AAAA,gCACF,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,4BACzB;AAAA;AAAA;AAAA,sBACF;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAO;AAAA,4BACL,UAAU;AAAA,4BACV,OAAO;AAAA,0BACT;AAAA,0BACD;AAAA;AAAA,sBAED;AAAA;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY,gBAAgB;AAAA,gBAC9B;AAAA,gBACA,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,YACE;AAAA,kBACF,gBAAgB;AAAA,kBAChB,WAAW;AAAA,kBACX,SAAS,YAAY,IAAI;AAAA,kBACzB,YAAY;AAAA,gBACd;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAIF;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACC,GAAG;AAAA,cACJ,QAAQ,CAAC,MAAM;AACb,6BAAa,KAAK;AAClB,yBAAS,CAAC;AAAA,cACZ;AAAA,cACA,SAAS,CAAC,MAAM;AACd,6BAAa,KAAK;AAClB,0BAAU,CAAC;AAAA,cACb;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY,cAAc;AAAA,gBAC1B;AAAA,cACF;AAAA,cACA,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,OAAO;AAAA,gBACP;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,IAAI;AAAA,cAC3B;AAAA;AAAA,YAvBK;AAAA,UAwBP;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;;;AC3UA,SAAgB,WAAAA,UAAS,YAAAC,WAAU,QAAQ,iBAAiB;AAC5D,SAAS,QAAAC,aAA6B;AACtC,SAAS,WAAAC,gBAAe;AAExB;AAAA,EACE;AAAA,OAGK;AA4ID,SAsDM,YAAAC,WAtDN,OAAAC,MAsFY,QAAAC,aAtFZ;AAzIN,SAASC,OAAM,QAAsB;AACnC,SAAOJ,SAAQD,MAAK,MAAM,CAAC;AAC7B;AAsCO,IAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEJ,QAAM,SAASF;AAAA,IACb,MACE,cAAc;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,CAAC,KAAK,MAAM,IAAIC,UAAS,MAAM;AAErC,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM;AAC7B,aAAO,MAAM;AAAA,IACf,GAAG,GAAG;AACN,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,CAAC,WAAW,YAAY,IAAIA,UAAS,IAAI;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAIA,UAAS,GAAG;AAChD,QAAM,WAAW,OAAyB,IAAI;AAE9C,MAAI,QAAQ,YAAY;AACtB,kBAAc,GAAG;AACjB,iBAAa,IAAI;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,IAAK;AAEV,UAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,EAC1B,KAAK,OAAO,QAAQ;AACnB,UAAI,CAAC,IAAI,IAAI;AACX,YAAI,eAAe,IAAI;AACvB,YAAI;AACF,gBAAM,SAAS,MAAM,MAAM,GAAG;AAC9B,gBAAM,YAAY,MAAM,OAAO,KAAK;AACpC,gBAAM,YAAY,KAAK,MAAM,SAAS;AACtC,cAAI,UAAU,OAAO;AACnB,2BAAe,UAAU;AAAA,UAC3B;AAAA,QACF,SAAS,GAAG;AAAA,QAEZ;AACA,gBAAQ,MAAM,oBAAoB,IAAI,QAAQ,YAAY;AAC1D,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,CAAC,EACA,MAAM,CAAC,QAAQ;AACd,cAAQ,MAAM,6BAA6B,GAAG,KAAK,GAAG;AACtD,mBAAa,KAAK;AAAA,IACpB,CAAC;AAAA,EACL,GAAG,CAAC,GAAG,CAAC;AAER,SACE,gBAAAK,MAAAF,WAAA,EACE;AAAA,oBAAAC,KAAC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAiBN;AAAA,IACF,gBAAAA,KAAC,SAAI,WAAsB,OAAO,MAAM,OACtC,0BAAAC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,aAAa,OAAO,WAAW,EAAE,QAAQ,KAAK,GAAG;AAAA,UACjD,UAAU;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QAGC;AAAA,mBACC,gBAAAD;AAAA,YAAC;AAAA;AAAA,cACC,WAAWE;AAAA,gBACT;AAAA,gBACA,YAAY,gBAAgB;AAAA,cAC9B;AAAA,cACA,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,SAAS,YAAY,IAAI;AAAA,gBACzB,eAAe,YAAY,SAAS;AAAA,gBACpC,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH,IAEA,gBAAAD,MAAAF,WAAA,EAEE;AAAA,4BAAAC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAWE;AAAA,kBACT;AAAA,kBACA,YAAY,gBAAgB;AAAA,gBAC9B;AAAA,gBACA,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,iBAAiB;AAAA,kBACjB,SAAS,YAAY,IAAI;AAAA,kBACzB,eAAe,YAAY,SAAS;AAAA,kBACpC,YAAY;AAAA,gBACd;AAAA,gBAEA,0BAAAD;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,eAAe;AAAA,sBACf,YAAY;AAAA,sBACZ,KAAK;AAAA,oBACP;AAAA,oBAEA;AAAA,sCAAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAM;AAAA,0BACN,MAAK;AAAA,0BACL,SAAQ;AAAA,0BACR,OAAO;AAAA,4BACL,OAAO;AAAA,4BACP,QAAQ;AAAA,4BACR,OAAO;AAAA,4BACP,WAAW;AAAA,0BACb;AAAA,0BAEA;AAAA,4CAAAD;AAAA,8BAAC;AAAA;AAAA,gCACC,WAAU;AAAA,gCACV,IAAG;AAAA,gCACH,IAAG;AAAA,gCACH,GAAE;AAAA,gCACF,QAAO;AAAA,gCACP,aAAY;AAAA,gCACZ,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,4BACzB;AAAA,4BACA,gBAAAA;AAAA,8BAAC;AAAA;AAAA,gCACC,WAAU;AAAA,gCACV,MAAK;AAAA,gCACL,GAAE;AAAA,gCACF,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,4BACzB;AAAA;AAAA;AAAA,sBACF;AAAA,sBACA,gBAAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,WAAU;AAAA,0BACV,OAAO;AAAA,4BACL,UAAU;AAAA,4BACV,OAAO;AAAA,0BACT;AAAA,0BACD;AAAA;AAAA,sBAED;AAAA;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YAGA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAWE;AAAA,kBACT;AAAA,kBACA,YAAY,gBAAgB;AAAA,gBAC9B;AAAA,gBACA,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,YACE;AAAA,kBACF,gBAAgB;AAAA,kBAChB,WAAW;AAAA,kBACX,SAAS,YAAY,IAAI;AAAA,kBACzB,YAAY;AAAA,gBACd;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAIF,gBAAAF;AAAA,YAAC;AAAA;AAAA,cAEC,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAG;AAAA,cACJ,cAAc,CAAC,MAAM;AACnB,6BAAa,KAAK;AAClB,+BAAe,CAAC;AAAA,cAClB;AAAA,cACA,SAAS,CAAC,MAAM;AACd,6BAAa,KAAK;AAClB,0BAAU,CAAC;AAAA,cACb;AAAA,cACA,WAAWE;AAAA,gBACT;AAAA,gBACA,YAAY,cAAc;AAAA,cAC5B;AAAA,cACA,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,SAAS,YAAY,IAAI;AAAA,cAC3B;AAAA;AAAA,YA1BK;AAAA,UA2BP;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;;;AC3UA,OAAOC,UAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAC3C,SAAS,oBAA0C;AACnD,SAAS,cAAc;AAsHV,qBAAAC,WAAA,OAAAC,MAqDG,QAAAC,aArDH;AApFN,IAAM,WAAWL,OAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,MAAM,OAAO,IAAIE,UAAwB,IAAI;AACpD,UAAM,CAAC,SAAS,UAAU,IAAIA,UAAS,IAAI;AAC3C,UAAM,CAAC,OAAO,QAAQ,IAAIA,UAAuB,IAAI;AAErD,IAAAD,WAAU,MAAM;AACd,UAAI,YAAY;AAEhB,YAAM,YAAY,YAAY;AAC5B,YAAI;AACF,qBAAW,IAAI;AACf,mBAAS,IAAI;AAEb,gBAAM,MAAM,aAAa;AAAA,YACvB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF,CAAC;AAGD,gBAAM,WAAW,MAAM,MAAM,KAAK,EAAE,OAAO,WAAW,CAAC;AACvD,cAAI,CAAC,SAAS,IAAI;AAChB,gBAAI,eAAe,SAAS;AAC5B,gBAAI;AACF,oBAAM,YAAY,MAAM,SAAS,KAAK;AACtC,oBAAM,YAAY,KAAK,MAAM,SAAS;AACtC,kBAAI,UAAU,OAAO;AACnB,+BAAe,UAAU;AAAA,cAC3B;AAAA,YACF,SAAS,GAAG;AAAA,YAEZ;AACA,kBAAM,IAAI,MAAM,yBAAyB,YAAY,EAAE;AAAA,UACzD;AACA,gBAAM,UAAU,MAAM,SAAS,KAAK;AACpC,cAAI,WAAW;AACb,oBAAQ,OAAO;AAAA,UACjB;AAAA,QACF,SAAS,KAAK;AACZ,cAAI,WAAW;AACb,kBAAM,aACJ,eAAe,QAAQ,MAAM,IAAI,MAAM,yBAAyB;AAClE,oBAAQ,MAAM,UAAU;AACxB,qBAAS,UAAU;AAAA,UACrB;AAAA,QACF,UAAE;AACA,cAAI,WAAW;AACb,uBAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,MACF;AAEA,gBAAU;AAEV,aAAO,MAAM;AACX,oBAAY;AAAA,MACd;AAAA,IACF,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK,UAAU,SAAS;AAAA,MACxB,KAAK,UAAU,WAAW;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,QAAI,SAAS,eAAe;AAC1B,aAAO,gBAAAG,KAAAD,WAAA,EAAG,yBAAc;AAAA,IAC1B;AAEA,QAAI,SAAS;AACX,UAAI,UAAU;AACZ,eAAO,gBAAAC,KAAAD,WAAA,EAAG,oBAAS;AAAA,MACrB;AACA,aACE,gBAAAE,MAAC,SAAI,WAAW,MAAM,WAAW,OAAO,MAAM,OAC5C;AAAA,wBAAAD,KAAC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASN;AAAA,QACF,gBAAAC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA,cACV,OAAO;AAAA,cACP,WAAW;AAAA,YACb;AAAA,YAGA;AAAA,8BAAAD;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,UAAU;AAAA,oBACV,KAAK;AAAA,oBACL,MAAM;AAAA,oBACN,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,QAAQ;AAAA,oBACR,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,iBAAiB;AAAA,kBACnB;AAAA,kBAEA,0BAAAC;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,SAAS;AAAA,wBACT,eAAe;AAAA,wBACf,YAAY;AAAA,wBACZ,KAAK;AAAA,sBACP;AAAA,sBAEA;AAAA,wCAAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,WAAU;AAAA,4BACV,OAAM;AAAA,4BACN,MAAK;AAAA,4BACL,SAAQ;AAAA,4BACR,OAAO;AAAA,8BACL,OAAO;AAAA,8BACP,QAAQ;AAAA,8BACR,OAAO;AAAA,8BACP,WAAW;AAAA,4BACb;AAAA,4BAEA;AAAA,8CAAAD;AAAA,gCAAC;AAAA;AAAA,kCACC,WAAU;AAAA,kCACV,IAAG;AAAA,kCACH,IAAG;AAAA,kCACH,GAAE;AAAA,kCACF,QAAO;AAAA,kCACP,aAAY;AAAA,kCACZ,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,8BACzB;AAAA,8BACA,gBAAAA;AAAA,gCAAC;AAAA;AAAA,kCACC,WAAU;AAAA,kCACV,MAAK;AAAA,kCACL,GAAE;AAAA,kCACF,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,8BACzB;AAAA;AAAA;AAAA,wBACF;AAAA,wBACA,gBAAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,WAAU;AAAA,4BACV,OAAO;AAAA,8BACL,UAAU;AAAA,8BACV,OAAO;AAAA,4BACT;AAAA,4BACD;AAAA;AAAA,wBAED;AAAA;AAAA;AAAA,kBACF;AAAA;AAAA,cACF;AAAA,cAGA,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,UAAU;AAAA,oBACV,KAAK;AAAA,oBACL,MAAM;AAAA,oBACN,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,YACE;AAAA,oBACF,gBAAgB;AAAA,oBAChB,WAAW;AAAA,kBACb;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,SACF;AAAA,IAEJ;AAEA,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,yBAAyB;AAAA,UACvB,QAAQ,OAAQ,OAAO,MAAM,IAAI,IAAe;AAAA,QAClD;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;;;AC1OvB,SAAS,oBAAoB;","names":["useMemo","useState","clsx","twMerge","Fragment","jsx","jsxs","cn","React","useEffect","useState","Fragment","jsx","jsxs"]}
+{"version":3,"sources":["../src/components/SlopImage.tsx","../src/components/SlopVideo.tsx","../src/components/SlopText.tsx","../src/index.ts"],"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   * How the image should be resized to fit its container. Defaults to \"cover\".\n   */\n  objectFit?: React.CSSProperties[\"objectFit\"];\n  /**\n   * Additional CSS classes to apply directly to the `<img />` element.\n   */\n  imageClassName?: string;\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 * // Using a Bucket\n * <SlopImage\n *   bucketId=\"my-bucket\"\n *   resultId=\"some-result\"\n *   aspectRatio=\"16:9\"\n *   className=\"rounded-lg\"\n *   objectFit=\"cover\"\n * />\n *\n * // Using a Pipeline with runtime prompt\n * <SlopImage\n *   pipelineId=\"pipe_live_abc123\"\n *   prompt=\"1960s retro robot eating pizza on Mars\"\n *   aspectRatio=\"16:9\"\n *   metadata={{ userId: \"123\" }}\n * />\n * ```\n *\n * @version 0.2.0\n */\nexport const SlopImage: React.FC<SlopImageProps> = ({\n  bucketId,\n  pipelineId,\n  siloId,\n  prompt,\n  metadata,\n  className,\n  aspectRatio = \"1:1\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  objectFit = \"cover\",\n  imageClassName,\n  style,\n  onLoad,\n  onError,\n  ...props\n}) => {\n  // Construct API URL\n  const rawSrc = useMemo(\n    () =>\n      buildImageUrl({\n        bucketId,\n        pipelineId,\n        siloId,\n        prompt,\n        metadata,\n        aspectRatio,\n        version,\n        resultId,\n        variables,\n        baseUrl,\n        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      quality,\n      original,\n      attachments,\n    ],\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 = \"Image produced by Slop Machine (slopmachine.dev)\";\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopImage error:\", res.status, errorMessage);\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={style}>\n        <div\n          className=\"slop-wrapper relative overflow-hidden w-full h-full\"\n          style={{\n            aspectRatio: String(aspectRatio).replace(\":\", \"/\"),\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            {...props}\n            onLoad={(e) => {\n              setIsLoading(false);\n              onLoad?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading ? 0 : 1,\n            }}\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 * // Using a Bucket\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 * // Using a Pipeline with runtime prompt\n * <SlopVideo\n *   pipelineId=\"pipe_live_abc123\"\n *   prompt=\"Drone shot of a cyberpunk city in rain\"\n *   aspectRatio=\"16:9\"\n *   metadata={{ campaign: \"spring_launch\" }}\n * />\n * ```\n *\n * @version 0.2.0\n */\nexport const SlopVideo: React.FC<SlopVideoProps> = ({\n  bucketId,\n  pipelineId,\n  siloId,\n  prompt,\n  metadata,\n  className,\n  aspectRatio = \"16:9\",\n  version,\n  resultId,\n  quality = \"fast\",\n  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  autoPlay = true,\n  loop = true,\n  muted = true,\n  playsInline = true,\n  onLoadedData,\n  onError,\n  ...props\n}) => {\n  // Construct API URL\n  const rawSrc = useMemo(\n    () =>\n      buildVideoUrl({\n        bucketId,\n        pipelineId,\n        siloId,\n        prompt,\n        metadata,\n        aspectRatio,\n        version,\n        resultId,\n        variables,\n        duration,\n        baseUrl,\n        quality,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      version,\n      resultId,\n      variables,\n      duration,\n      baseUrl,\n      quality,\n      original,\n      attachments,\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          let errorMessage = res.statusText;\n          try {\n            const errRes = await fetch(src);\n            const errorText = await errRes.text();\n            const errorData = JSON.parse(errorText);\n            if (errorData.error) {\n              errorMessage = errorData.error;\n            }\n          } catch (e) {\n            // Failed to fetch or parse error details\n          }\n          console.error(\"SlopVideo error:\", res.status, errorMessage);\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            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            {...props}\n            onLoadedData={(e) => {\n              setIsLoading(false);\n              onLoadedData?.(e);\n            }}\n            onError={(e) => {\n              setIsLoading(false);\n              onError?.(e);\n            }}\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          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { buildTextUrl, type SlopTextOptions } from \"@slopmachine/core\";\nimport { marked } from \"marked\";\n\nexport interface SlopTextProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    SlopTextOptions {\n  /**\n   * Optional loading component to show while the text is being generated\n   */\n  fallback?: React.ReactNode;\n  /**\n   * Optional error component to show if the text generation fails\n   */\n  errorFallback?: React.ReactNode;\n}\n\n/**\n * Renders text generated by Slop Machine.\n *\n * This component automatically constructs the correct URL for the Slop Machine API,\n * fetches the generated text, and displays it with optional loading and error states.\n *\n * @example\n * ```tsx\n * // Using a Bucket\n * <SlopText\n *   bucketId=\"my-text-bucket\"\n *   fallback={<div>Loading story...</div>}\n *   errorFallback={<div>Failed to load story</div>}\n *   className=\"text-lg text-gray-800\"\n * />\n *\n * // Using a Pipeline with runtime prompt\n * <SlopText\n *   pipelineId=\"pipe_live_abc123\"\n *   prompt=\"Write a whimsical haiku about quantum physics\"\n *   metadata={{ userId: \"123\" }}\n * />\n * ```\n *\n * @version 0.2.0\n */\nexport const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(\n  (\n    {\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      version,\n      resultId,\n      variables,\n      baseUrl,\n      attachments,\n      fallback,\n      errorFallback,\n      ...props\n    },\n    ref,\n  ) => {\n    const [text, setText] = useState<string | null>(null);\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Error | null>(null);\n\n    const rawUrl = useMemo(\n      () =>\n        buildTextUrl({\n          bucketId,\n          pipelineId,\n          siloId,\n          prompt,\n          metadata,\n          version,\n          resultId,\n          variables,\n          baseUrl,\n          attachments,\n        }),\n      [\n        bucketId,\n        pipelineId,\n        siloId,\n        prompt,\n        JSON.stringify(metadata),\n        version,\n        resultId,\n        JSON.stringify(variables),\n        baseUrl,\n        JSON.stringify(attachments),\n      ],\n    );\n\n    useEffect(() => {\n      let isMounted = true;\n\n      const fetchText = async () => {\n        try {\n          setLoading(true);\n          setError(null);\n\n          // Fetch the URL to get the content, following redirects automatically\n          const response = await fetch(rawUrl, { cache: \"no-store\" });\n          if (!response.ok) {\n            let errorMessage = response.statusText;\n            try {\n              const errorText = await response.text();\n              const errorData = JSON.parse(errorText);\n              if (errorData.error) {\n                errorMessage = errorData.error;\n              }\n            } catch (e) {\n              // Ignore JSON parse errors if the response isn't JSON\n            }\n            throw new Error(`Failed to fetch text: ${errorMessage}`);\n          }\n          const content = await response.text();\n          if (isMounted) {\n            setText(content);\n          }\n        } catch (err) {\n          if (isMounted) {\n            const finalError =\n              err instanceof Error ? err : new Error(\"Failed to generate text\");\n            console.error(finalError);\n            setError(finalError);\n          }\n        } finally {\n          if (isMounted) {\n            setLoading(false);\n          }\n        }\n      };\n\n      fetchText();\n\n      return () => {\n        isMounted = false;\n      };\n    }, [rawUrl]);\n\n    if (error && errorFallback) {\n      return <>{errorFallback}</>;\n    }\n\n    if (loading) {\n      if (fallback) {\n        return <>{fallback}</>;\n      }\n      return (\n        <div className={props.className} style={props.style}>\n          <style>{`\n            @keyframes slop-shimmer {\n              0% { background-position: 200% 0; }\n              100% { background-position: -200% 0; }\n            }\n            @keyframes slop-spin {\n              from { transform: rotate(0deg); }\n              to { transform: rotate(360deg); }\n            }\n          `}</style>\n          <div\n            className=\"slop-wrapper relative overflow-hidden w-full\"\n            style={{\n              position: \"relative\",\n              overflow: \"hidden\",\n              width: \"100%\",\n              minHeight: \"100px\",\n            }}\n          >\n            {/* Loading overlay */}\n            <div\n              className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300\"\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              }}\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=\"shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted\"\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              }}\n            />\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{\n          __html: text ? (marked.parse(text) as string) : \"\",\n        }}\n      />\n    );\n  },\n);\n\nSlopText.displayName = \"SlopText\";\n","export { SlopImage, type SlopImageProps } from \"./components/SlopImage\";\nexport { SlopVideo, type SlopVideoProps } from \"./components/SlopVideo\";\nexport { SlopText, type SlopTextProps } from \"./components/SlopText\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n} from \"@slopmachine/core\";\n\nexport { preloadImage } from \"@slopmachine/core\";\n"],"mappings":"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","names":["useMemo","useState","clsx","twMerge","Fragment","jsx","jsxs","cn","React","useEffect","useMemo","useState","Fragment","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/react",
-  "version": "0.1.26",
+  "version": "0.2.0",
   "llms": "https://docs.slopmachine.dev/llms.txt",
   "llmsFull": "https://docs.slopmachine.dev/llms-full.txt",
   "description": "The official React SDK for Slop Machine",
@@ -47,7 +47,7 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
-    "@slopmachine/core": "^0.1.25",
+    "@slopmachine/core": "^0.2.0",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@types/marked": "^5.0.2",

package/src/components/SlopImage.tsx

@@ -44,6 +44,7 @@ export interface SlopImageProps
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopImage
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -51,12 +52,24 @@ export interface SlopImageProps
  *   className="rounded-lg"
  *   objectFit="cover"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopImage
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="1960s retro robot eating pizza on Mars"
+ *   aspectRatio="16:9"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 export const SlopImage: React.FC<SlopImageProps> = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "1:1",
   version,
@@ -79,6 +92,10 @@ export const SlopImage: React.FC<SlopImageProps> = ({
     () =>
       buildImageUrl({
         bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        metadata,
         aspectRatio,
         version,
         resultId,
@@ -90,6 +107,10 @@ export const SlopImage: React.FC<SlopImageProps> = ({
       }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,

package/src/components/SlopText.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { buildTextUrl, type SlopTextOptions } from "@slopmachine/core";
 import { marked } from "marked";
 
@@ -24,20 +24,32 @@ export interface SlopTextProps
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopText
  *   bucketId="my-text-bucket"
  *   fallback={<div>Loading story...</div>}
  *   errorFallback={<div>Failed to load story</div>}
  *   className="text-lg text-gray-800"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopText
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Write a whimsical haiku about quantum physics"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
   (
     {
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       version,
       resultId,
       variables,
@@ -53,6 +65,34 @@ export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<Error | null>(null);
 
+    const rawUrl = useMemo(
+      () =>
+        buildTextUrl({
+          bucketId,
+          pipelineId,
+          siloId,
+          prompt,
+          metadata,
+          version,
+          resultId,
+          variables,
+          baseUrl,
+          attachments,
+        }),
+      [
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        JSON.stringify(metadata),
+        version,
+        resultId,
+        JSON.stringify(variables),
+        baseUrl,
+        JSON.stringify(attachments),
+      ],
+    );
+
     useEffect(() => {
       let isMounted = true;
 
@@ -61,17 +101,8 @@ export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
           setLoading(true);
           setError(null);
 
-          const url = buildTextUrl({
-            bucketId,
-            version,
-            resultId,
-            variables,
-            baseUrl,
-            attachments,
-          });
-
           // Fetch the URL to get the content, following redirects automatically
-          const response = await fetch(url, { cache: "no-store" });
+          const response = await fetch(rawUrl, { cache: "no-store" });
           if (!response.ok) {
             let errorMessage = response.statusText;
             try {
@@ -108,14 +139,7 @@ export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
       return () => {
         isMounted = false;
       };
-    }, [
-      bucketId,
-      version,
-      resultId,
-      JSON.stringify(variables),
-      JSON.stringify(attachments),
-      baseUrl,
-    ]);
+    }, [rawUrl]);
 
     if (error && errorFallback) {
       return <>{errorFallback}</>;

package/src/components/SlopVideo.tsx

@@ -36,6 +36,7 @@ export interface SlopVideoProps
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopVideo
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -45,12 +46,24 @@ export interface SlopVideoProps
  *   loop
  *   muted
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopVideo
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Drone shot of a cyberpunk city in rain"
+ *   aspectRatio="16:9"
+ *   metadata={{ campaign: "spring_launch" }}
+ * />
  * ```
  *
- * @version 0.1.26
+ * @version 0.2.0
  */
 export const SlopVideo: React.FC<SlopVideoProps> = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "16:9",
   version,
@@ -75,6 +88,10 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
     () =>
       buildVideoUrl({
         bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        metadata,
         aspectRatio,
         version,
         resultId,
@@ -87,6 +104,10 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
       }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,