@slopmachine/react 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @slopmachine/react
 
+## 0.8.1
+
+### Patch Changes
+
+- 9e91dd6: - Passing bucket-only options (`model`, `version`, `original`, `attachments`, video `duration`) together with `pipelineId` now logs a one-time console warning. The pipeline endpoint doesn't support them, and they were previously dropped silently. `aspectRatio` still sizes the component and doesn't warn.
+  - `interpolatePrompt` now treats variable names and values literally. Keys containing regex characters (e.g. `{a.b}`) no longer match other placeholders, and values containing `$` are no longer mangled.
+  - Clarified that `baseUrl` is a full endpoint URL, not a base URL.
+  - Internal: the URL builders share one implementation. Generated URLs are byte-for-byte unchanged, so existing browser and CDN caches stay valid.
+- Updated dependencies [9e91dd6]
+  - @slopmachine/core@0.8.1
+
+## 0.8.0
+
+### Minor Changes
+
+- 2026601: Packaging fixes:
+
+  - **React Server Components:** `@slopmachine/react` now ships with a `"use client"` directive, so `SlopImage`, `SlopVideo` and `SlopText` can be imported directly from Next.js App Router server components (this previously failed with `useState is not a function`). Server code that needs plain helpers should import them from `@slopmachine/core`.
+  - **Smaller installs:** `@slopmachine/core` no longer depends on `@pixerate/schemas` (and transitively `zod`). `ImageAspectRatio` and `VideoAspectRatio` are now defined inline with the same values.
+  - **Svelte package is now built** with `@sveltejs/package`: components still ship as uncompiled `.svelte` files, but the entry point is plain JS with generated `.d.ts` types, so non-Vite tooling works and consumers' TypeScript no longer type-checks the SDK's source.
+  - **Published files:** packages now publish only `dist/` and `CHANGELOG.md` (previously source, tsconfig and internal docs were included). Core and React are marked `sideEffects: false` for better tree-shaking.
+  - **ESM types:** core and React now expose separate type declarations for `import` (`.d.mts`) and `require` (`.d.ts`), fixing ambiguous types for ESM consumers.
+
+### Patch Changes
+
+- Updated dependencies [2026601]
+  - @slopmachine/core@0.8.0
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -64,7 +64,7 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  * />
  * ```
  *
- * @version 0.7.0
+ * @version 0.8.1
  */
 declare const SlopImage: React.FC<SlopImageProps>;
 
@@ -118,7 +118,7 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  * />
  * ```
  *
- * @version 0.7.0
+ * @version 0.8.1
  */
 declare const SlopVideo: React.FC<SlopVideoProps>;
 
@@ -156,7 +156,7 @@ interface SlopTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
  * />
  * ```
  *
- * @version 0.7.0
+ * @version 0.8.1
  */
 declare const SlopText: React.ForwardRefExoticComponent<SlopTextProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -64,7 +64,7 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  * />
  * ```
  *
- * @version 0.7.0
+ * @version 0.8.1
  */
 declare const SlopImage: React.FC<SlopImageProps>;
 
@@ -118,7 +118,7 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  * />
  * ```
  *
- * @version 0.7.0
+ * @version 0.8.1
  */
 declare const SlopVideo: React.FC<SlopVideoProps>;
 
@@ -156,7 +156,7 @@ interface SlopTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
  * />
  * ```
  *
- * @version 0.7.0
+ * @version 0.8.1
  */
 declare const SlopText: React.ForwardRefExoticComponent<SlopTextProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/SlopImage.tsx","../src/components/ErrorOverlay.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\";\nexport type { SlopErrorFallback } from \"./components/ErrorOverlay\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n  SlopTextOptions,\n  ResultRating,\n  RateResultOptions,\n  RateResultResponse,\n} from \"@slopmachine/core\";\n\nexport {\n  preloadImage,\n  preloadVideo,\n  preloadText,\n  rateResult,\n  SlopMachineError,\n} from \"@slopmachine/core\";\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildImageUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopImageOptions,\n  type ImageAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the image fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the image.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the image fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.7.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  model,\n  version,\n  resultId,\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        model,\n        version,\n        resultId,\n        variables,\n        baseUrl,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      model,\n      version,\n      resultId,\n      variables,\n      baseUrl,\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 alt = \"Image produced by Slop Machine (slopmachine.dev)\";\n\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopImage error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load image\"\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              monitor.mediaFailed(src, \"Failed to load image\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React from \"react\";\nimport type { SlopMachineError } from \"@slopmachine/core\";\n\n/**\n * Content to render when generation or loading fails. Either a node, or a\n * function that receives the error and returns a node.\n */\nexport type SlopErrorFallback =\n  React.ReactNode | ((error: SlopMachineError) => React.ReactNode);\n\ninterface ErrorOverlayProps {\n  error: SlopMachineError;\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Message shown by the default error UI, e.g. \"Failed to load image\".\n   */\n  label: string;\n}\n\nconst overlayStyle: React.CSSProperties = {\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};\n\n/**\n * Internal overlay shown over the media slot when generation or loading fails.\n * Renders the consumer's `errorFallback` if provided, otherwise a default message.\n */\nexport const ErrorOverlay: React.FC<ErrorOverlayProps> = ({\n  error,\n  errorFallback,\n  label,\n}) => {\n  if (errorFallback !== undefined) {\n    return (\n      <div\n        className=\"absolute inset-0 z-10 flex items-center justify-center\"\n        style={overlayStyle}\n      >\n        {typeof errorFallback === \"function\"\n          ? errorFallback(error)\n          : errorFallback}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted\"\n      style={{ ...overlayStyle, backgroundColor: \"var(--muted, #f3f4f6)\" }}\n      title={error.message}\n    >\n      <div\n        className=\"flex flex-col items-center gap-2 text-muted-foreground\"\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: \"0.5rem\",\n          color: \"var(--muted-foreground, #6b7280)\",\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          style={{ width: \"24px\", height: \"24px\" }}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n        </svg>\n        <span className=\"text-xs\" style={{ fontSize: \"0.75rem\" }}>\n          {label}\n        </span>\n      </div>\n    </div>\n  );\n};\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildVideoUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopVideoOptions,\n  type VideoAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the video fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the video.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the video fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.7.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  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        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      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 [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopVideo error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load video\"\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              monitor.mediaFailed(src, \"Failed to load video\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full object-cover transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit: \"cover\",\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  buildTextUrl,\n  renderMarkdown,\n  type SlopTextOptions,\n} from \"@slopmachine/core\";\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.7.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      model,\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          model,\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        model,\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 ? renderMarkdown(text) : \"\",\n        }}\n      />\n    );\n  },\n);\n\nSlopText.displayName = \"SlopText\";\n"],"mappings":"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","names":["import_jsx_runtime","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/ErrorOverlay.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\";\nexport type { SlopErrorFallback } from \"./components/ErrorOverlay\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n  SlopTextOptions,\n  ResultRating,\n  RateResultOptions,\n  RateResultResponse,\n} from \"@slopmachine/core\";\n\nexport {\n  preloadImage,\n  preloadVideo,\n  preloadText,\n  rateResult,\n  SlopMachineError,\n} from \"@slopmachine/core\";\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildImageUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopImageOptions,\n  type ImageAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the image fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the image.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the image fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.8.1\n */\nexport const SlopImage: React.FC<SlopImageProps> = ({\n  bucketId,\n  pipelineId,\n  siloId,\n  prompt,\n  metadata,\n  className,\n  aspectRatio = \"1:1\",\n  model,\n  version,\n  resultId,\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        model,\n        version,\n        resultId,\n        variables,\n        baseUrl,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      model,\n      version,\n      resultId,\n      variables,\n      baseUrl,\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 alt = \"Image produced by Slop Machine (slopmachine.dev)\";\n\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopImage error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load image\"\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              monitor.mediaFailed(src, \"Failed to load image\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React from \"react\";\nimport type { SlopMachineError } from \"@slopmachine/core\";\n\n/**\n * Content to render when generation or loading fails. Either a node, or a\n * function that receives the error and returns a node.\n */\nexport type SlopErrorFallback =\n  React.ReactNode | ((error: SlopMachineError) => React.ReactNode);\n\ninterface ErrorOverlayProps {\n  error: SlopMachineError;\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Message shown by the default error UI, e.g. \"Failed to load image\".\n   */\n  label: string;\n}\n\nconst overlayStyle: React.CSSProperties = {\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};\n\n/**\n * Internal overlay shown over the media slot when generation or loading fails.\n * Renders the consumer's `errorFallback` if provided, otherwise a default message.\n */\nexport const ErrorOverlay: React.FC<ErrorOverlayProps> = ({\n  error,\n  errorFallback,\n  label,\n}) => {\n  if (errorFallback !== undefined) {\n    return (\n      <div\n        className=\"absolute inset-0 z-10 flex items-center justify-center\"\n        style={overlayStyle}\n      >\n        {typeof errorFallback === \"function\"\n          ? errorFallback(error)\n          : errorFallback}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted\"\n      style={{ ...overlayStyle, backgroundColor: \"var(--muted, #f3f4f6)\" }}\n      title={error.message}\n    >\n      <div\n        className=\"flex flex-col items-center gap-2 text-muted-foreground\"\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: \"0.5rem\",\n          color: \"var(--muted-foreground, #6b7280)\",\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          style={{ width: \"24px\", height: \"24px\" }}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n        </svg>\n        <span className=\"text-xs\" style={{ fontSize: \"0.75rem\" }}>\n          {label}\n        </span>\n      </div>\n    </div>\n  );\n};\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildVideoUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopVideoOptions,\n  type VideoAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the video fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the video.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the video fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.8.1\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  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        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      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 [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopVideo error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load video\"\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              monitor.mediaFailed(src, \"Failed to load video\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full object-cover transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit: \"cover\",\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  buildTextUrl,\n  renderMarkdown,\n  type SlopTextOptions,\n} from \"@slopmachine/core\";\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.8.1\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      model,\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          model,\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        model,\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 ? renderMarkdown(text) : \"\",\n        }}\n      />\n    );\n  },\n);\n\nSlopText.displayName = \"SlopText\";\n"],"mappings":"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","names":["import_jsx_runtime","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

@@ -1,3 +1,5 @@
+"use client";
+
 // src/components/SlopImage.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
 import { clsx } from "clsx";

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SlopImage.tsx","../src/components/ErrorOverlay.tsx","../src/components/SlopVideo.tsx","../src/components/SlopText.tsx","../src/index.ts"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildImageUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopImageOptions,\n  type ImageAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the image fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the image.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the image fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.7.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  model,\n  version,\n  resultId,\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        model,\n        version,\n        resultId,\n        variables,\n        baseUrl,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      model,\n      version,\n      resultId,\n      variables,\n      baseUrl,\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 alt = \"Image produced by Slop Machine (slopmachine.dev)\";\n\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopImage error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load image\"\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              monitor.mediaFailed(src, \"Failed to load image\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React from \"react\";\nimport type { SlopMachineError } from \"@slopmachine/core\";\n\n/**\n * Content to render when generation or loading fails. Either a node, or a\n * function that receives the error and returns a node.\n */\nexport type SlopErrorFallback =\n  React.ReactNode | ((error: SlopMachineError) => React.ReactNode);\n\ninterface ErrorOverlayProps {\n  error: SlopMachineError;\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Message shown by the default error UI, e.g. \"Failed to load image\".\n   */\n  label: string;\n}\n\nconst overlayStyle: React.CSSProperties = {\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};\n\n/**\n * Internal overlay shown over the media slot when generation or loading fails.\n * Renders the consumer's `errorFallback` if provided, otherwise a default message.\n */\nexport const ErrorOverlay: React.FC<ErrorOverlayProps> = ({\n  error,\n  errorFallback,\n  label,\n}) => {\n  if (errorFallback !== undefined) {\n    return (\n      <div\n        className=\"absolute inset-0 z-10 flex items-center justify-center\"\n        style={overlayStyle}\n      >\n        {typeof errorFallback === \"function\"\n          ? errorFallback(error)\n          : errorFallback}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted\"\n      style={{ ...overlayStyle, backgroundColor: \"var(--muted, #f3f4f6)\" }}\n      title={error.message}\n    >\n      <div\n        className=\"flex flex-col items-center gap-2 text-muted-foreground\"\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: \"0.5rem\",\n          color: \"var(--muted-foreground, #6b7280)\",\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          style={{ width: \"24px\", height: \"24px\" }}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n        </svg>\n        <span className=\"text-xs\" style={{ fontSize: \"0.75rem\" }}>\n          {label}\n        </span>\n      </div>\n    </div>\n  );\n};\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildVideoUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopVideoOptions,\n  type VideoAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the video fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the video.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the video fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.7.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  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        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      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 [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopVideo error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load video\"\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              monitor.mediaFailed(src, \"Failed to load video\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full object-cover transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit: \"cover\",\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  buildTextUrl,\n  renderMarkdown,\n  type SlopTextOptions,\n} from \"@slopmachine/core\";\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.7.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      model,\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          model,\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        model,\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 ? renderMarkdown(text) : \"\",\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\";\nexport type { SlopErrorFallback } from \"./components/ErrorOverlay\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n  SlopTextOptions,\n  ResultRating,\n  RateResultOptions,\n  RateResultResponse,\n} from \"@slopmachine/core\";\n\nexport {\n  preloadImage,\n  preloadVideo,\n  preloadText,\n  rateResult,\n  SlopMachineError,\n} from \"@slopmachine/core\";\n"],"mappings":"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","names":["jsx","jsxs","useEffect","useMemo","useRef","useState","clsx","twMerge","createRenderUrlMonitor","Fragment","jsx","jsxs","cn","twMerge","clsx","useMemo","useState","useEffect","useRef","createRenderUrlMonitor","React","useEffect","useMemo","useState","Fragment","jsx","jsxs"]}
+{"version":3,"sources":["../src/components/SlopImage.tsx","../src/components/ErrorOverlay.tsx","../src/components/SlopVideo.tsx","../src/components/SlopText.tsx","../src/index.ts"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildImageUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopImageOptions,\n  type ImageAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the image fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the image.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the image fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.8.1\n */\nexport const SlopImage: React.FC<SlopImageProps> = ({\n  bucketId,\n  pipelineId,\n  siloId,\n  prompt,\n  metadata,\n  className,\n  aspectRatio = \"1:1\",\n  model,\n  version,\n  resultId,\n  variables = {},\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        model,\n        version,\n        resultId,\n        variables,\n        baseUrl,\n        original,\n        attachments,\n      }),\n    [\n      bucketId,\n      pipelineId,\n      siloId,\n      prompt,\n      metadata,\n      aspectRatio,\n      model,\n      version,\n      resultId,\n      variables,\n      baseUrl,\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 alt = \"Image produced by Slop Machine (slopmachine.dev)\";\n\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopImage error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load image\"\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              monitor.mediaFailed(src, \"Failed to load image\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n              imageClassName,\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit,\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React from \"react\";\nimport type { SlopMachineError } from \"@slopmachine/core\";\n\n/**\n * Content to render when generation or loading fails. Either a node, or a\n * function that receives the error and returns a node.\n */\nexport type SlopErrorFallback =\n  React.ReactNode | ((error: SlopMachineError) => React.ReactNode);\n\ninterface ErrorOverlayProps {\n  error: SlopMachineError;\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Message shown by the default error UI, e.g. \"Failed to load image\".\n   */\n  label: string;\n}\n\nconst overlayStyle: React.CSSProperties = {\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};\n\n/**\n * Internal overlay shown over the media slot when generation or loading fails.\n * Renders the consumer's `errorFallback` if provided, otherwise a default message.\n */\nexport const ErrorOverlay: React.FC<ErrorOverlayProps> = ({\n  error,\n  errorFallback,\n  label,\n}) => {\n  if (errorFallback !== undefined) {\n    return (\n      <div\n        className=\"absolute inset-0 z-10 flex items-center justify-center\"\n        style={overlayStyle}\n      >\n        {typeof errorFallback === \"function\"\n          ? errorFallback(error)\n          : errorFallback}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center bg-muted\"\n      style={{ ...overlayStyle, backgroundColor: \"var(--muted, #f3f4f6)\" }}\n      title={error.message}\n    >\n      <div\n        className=\"flex flex-col items-center gap-2 text-muted-foreground\"\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: \"0.5rem\",\n          color: \"var(--muted-foreground, #6b7280)\",\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          style={{ width: \"24px\", height: \"24px\" }}\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n          <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n        </svg>\n        <span className=\"text-xs\" style={{ fontSize: \"0.75rem\" }}>\n          {label}\n        </span>\n      </div>\n    </div>\n  );\n};\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport {\n  buildVideoUrl,\n  createRenderUrlMonitor,\n  type SlopMachineError,\n  type SlopVideoOptions,\n  type VideoAspectRatio,\n} from \"@slopmachine/core\";\nimport { ErrorOverlay, type SlopErrorFallback } from \"./ErrorOverlay\";\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   * Content to display if the video fails to generate or load.\n   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.\n   * If not provided, a default error message is shown in place of the video.\n   */\n  errorFallback?: SlopErrorFallback;\n  /**\n   * Called once per URL when the video fails to generate or load.\n   * `error.status` holds the HTTP status when the API reported the failure.\n   */\n  onGenerationError?: (error: SlopMachineError) => void;\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.8.1\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  variables = {},\n  duration,\n  baseUrl,\n  original,\n  attachments,\n  loader,\n  errorFallback,\n  onGenerationError,\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        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      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 [error, setError] = useState<SlopMachineError | null>(null);\n  const [currentSrc, setCurrentSrc] = useState(src);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  if (src !== currentSrc) {\n    setCurrentSrc(src);\n    setIsLoading(true);\n    setError(null);\n  }\n\n  // Keep the latest callback without re-running effects when it changes identity\n  const onGenerationErrorRef = useRef(onGenerationError);\n  useEffect(() => {\n    onGenerationErrorRef.current = onGenerationError;\n  });\n\n  // Shares one URL check between the HEAD probe and the media element's error event\n  const monitor = useMemo(\n    () =>\n      createRenderUrlMonitor((err) => {\n        console.error(\"SlopVideo error:\", err.status ?? \"\", err.message);\n        setIsLoading(false);\n        setError(err);\n        onGenerationErrorRef.current?.(err);\n      }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!src) return;\n    monitor.watch(src);\n    return () => monitor.stop();\n  }, [src, monitor]);\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          {error && (\n            <ErrorOverlay\n              error={error}\n              errorFallback={errorFallback}\n              label=\"Failed to load video\"\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              monitor.mediaFailed(src, \"Failed to load video\");\n              onError?.(e);\n            }}\n            aria-hidden={error ? true : props[\"aria-hidden\"]}\n            className={cn(\n              \"h-full w-full object-cover transition-opacity duration-500\",\n              isLoading || error ? \"opacity-0\" : \"opacity-100\",\n            )}\n            style={{\n              height: \"100%\",\n              width: \"100%\",\n              objectFit: \"cover\",\n              transition: \"opacity 500ms\",\n              opacity: isLoading || error ? 0 : 1,\n            }}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  buildTextUrl,\n  renderMarkdown,\n  type SlopTextOptions,\n} from \"@slopmachine/core\";\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.8.1\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      model,\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          model,\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        model,\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 ? renderMarkdown(text) : \"\",\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\";\nexport type { SlopErrorFallback } from \"./components/ErrorOverlay\";\n\nexport type {\n  ImageAspectRatio,\n  VideoAspectRatio,\n  SlopImageOptions,\n  SlopVideoOptions,\n  SlopTextOptions,\n  ResultRating,\n  RateResultOptions,\n  RateResultResponse,\n} from \"@slopmachine/core\";\n\nexport {\n  preloadImage,\n  preloadVideo,\n  preloadText,\n  rateResult,\n  SlopMachineError,\n} from \"@slopmachine/core\";\n"],"mappings":"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","names":["jsx","jsxs","useEffect","useMemo","useRef","useState","clsx","twMerge","createRenderUrlMonitor","Fragment","jsx","jsxs","cn","twMerge","clsx","useMemo","useState","useEffect","useRef","createRenderUrlMonitor","React","useEffect","useMemo","useState","Fragment","jsx","jsxs"]}