@slopmachine/react 0.1.25 → 0.2.0

package/CHANGELOG.md

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

package/README.md

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

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -48,6 +48,10 @@ function cn(...inputs) {
 }
 var SlopImage = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "1:1",
   version,
@@ -61,11 +65,17 @@ var SlopImage = ({
   objectFit = "cover",
   imageClassName,
   style,
+  onLoad,
+  onError,
   ...props
 }) => {
   const rawSrc = (0, import_react.useMemo)(
     () => (0, import_core.buildImageUrl)({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -77,6 +87,10 @@ var SlopImage = ({
     }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -292,8 +306,15 @@ var SlopImage = ({
             {
               src,
               alt,
-              onLoad: () => setIsLoading(false),
-              onError: () => setIsLoading(false),
+              ...props,
+              onLoad: (e) => {
+                setIsLoading(false);
+                onLoad?.(e);
+              },
+              onError: (e) => {
+                setIsLoading(false);
+                onError?.(e);
+              },
               className: cn(
                 "h-full w-full transition-opacity duration-500",
                 isLoading ? "opacity-0" : "opacity-100",
@@ -305,8 +326,7 @@ var SlopImage = ({
                 objectFit,
                 transition: "opacity 500ms",
                 opacity: isLoading ? 0 : 1
-              },
-              ...props
+              }
             },
             src
           )
@@ -327,6 +347,10 @@ function cn2(...inputs) {
 }
 var SlopVideo = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "16:9",
   version,
@@ -342,11 +366,17 @@ var SlopVideo = ({
   loop = true,
   muted = true,
   playsInline = true,
+  onLoadedData,
+  onError,
   ...props
 }) => {
   const rawSrc = (0, import_react2.useMemo)(
     () => (0, import_core2.buildVideoUrl)({
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -359,6 +389,10 @@ var SlopVideo = ({
     }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -579,8 +613,15 @@ var SlopVideo = ({
               loop,
               muted,
               playsInline,
-              onLoadedData: () => setIsLoading(false),
-              onError: () => setIsLoading(false),
+              ...props,
+              onLoadedData: (e) => {
+                setIsLoading(false);
+                onLoadedData?.(e);
+              },
+              onError: (e) => {
+                setIsLoading(false);
+                onError?.(e);
+              },
               className: cn2(
                 "h-full w-full object-cover transition-opacity duration-500",
                 isLoading ? "opacity-0" : "opacity-100"
@@ -591,8 +632,7 @@ var SlopVideo = ({
                 objectFit: "cover",
                 transition: "opacity 500ms",
                 opacity: isLoading ? 0 : 1
-              },
-              ...props
+              }
             },
             src
           )
@@ -610,6 +650,10 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var SlopText = import_react3.default.forwardRef(
   ({
     bucketId,
+    pipelineId,
+    siloId,
+    prompt,
+    metadata,
     version,
     resultId,
     variables,
@@ -622,21 +666,39 @@ var SlopText = import_react3.default.forwardRef(
     const [text, setText] = (0, import_react3.useState)(null);
     const [loading, setLoading] = (0, import_react3.useState)(true);
     const [error, setError] = (0, import_react3.useState)(null);
+    const rawUrl = (0, import_react3.useMemo)(
+      () => (0, import_core3.buildTextUrl)({
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        metadata,
+        version,
+        resultId,
+        variables,
+        baseUrl,
+        attachments
+      }),
+      [
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        JSON.stringify(metadata),
+        version,
+        resultId,
+        JSON.stringify(variables),
+        baseUrl,
+        JSON.stringify(attachments)
+      ]
+    );
     (0, import_react3.useEffect)(() => {
       let isMounted = true;
       const fetchText = async () => {
         try {
           setLoading(true);
           setError(null);
-          const url = (0, import_core3.buildTextUrl)({
-            bucketId,
-            version,
-            resultId,
-            variables,
-            baseUrl,
-            attachments
-          });
-          const response = await fetch(url, { cache: "no-store" });
+          const response = await fetch(rawUrl, { cache: "no-store" });
           if (!response.ok) {
             let errorMessage = response.statusText;
             try {
@@ -669,14 +731,7 @@ var SlopText = import_react3.default.forwardRef(
       return () => {
         isMounted = false;
       };
-    }, [
-      bucketId,
-      version,
-      resultId,
-      JSON.stringify(variables),
-      JSON.stringify(attachments),
-      baseUrl
-    ]);
+    }, [rawUrl]);
     if (error && errorFallback) {
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errorFallback });
     }