@slopmachine/react 0.0.1 → 0.0.2

package/dist/index.js

@@ -46,6 +46,10 @@ var SlopImage = ({
     () => (0, import_core.buildImageUrl)({ prompt, aspectRatio, variables, baseUrl, model }),
     [prompt, aspectRatio, variables, baseUrl, model]
   );
+  const alt = (0, import_react.useMemo)(
+    () => (0, import_core.interpolatePrompt)(prompt, variables) ?? "Generated image",
+    [prompt, variables]
+  );
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const [currentSrc, setCurrentSrc] = (0, import_react.useState)(src);
   if (src !== currentSrc) {
@@ -194,7 +198,7 @@ var SlopImage = ({
             "img",
             {
               src,
-              alt: prompt,
+              alt,
               onLoad: () => setIsLoading(false),
               className: cn(
                 "h-full w-full object-cover transition-opacity duration-500",

package/dist/index.mjs

@@ -2,7 +2,10 @@
 import { useMemo, useState } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { buildImageUrl } from "@slopmachine/core";
+import {
+  buildImageUrl,
+  interpolatePrompt
+} from "@slopmachine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -20,6 +23,10 @@ var SlopImage = ({
     () => buildImageUrl({ prompt, aspectRatio, variables, baseUrl, model }),
     [prompt, aspectRatio, variables, baseUrl, model]
   );
+  const alt = useMemo(
+    () => interpolatePrompt(prompt, variables) ?? "Generated image",
+    [prompt, variables]
+  );
   const [isLoading, setIsLoading] = useState(true);
   const [currentSrc, setCurrentSrc] = useState(src);
   if (src !== currentSrc) {
@@ -168,7 +175,7 @@ var SlopImage = ({
             "img",
             {
               src,
-              alt: prompt,
+              alt,
               onLoad: () => setIsLoading(false),
               className: cn(
                 "h-full w-full object-cover transition-opacity duration-500",

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@slopmachine/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "The official React SDK for Slop Machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
   "scripts": {

package/src/components/SlopImage.tsx

@@ -2,7 +2,11 @@ import React, { useMemo, useState } from "react";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-import { buildImageUrl, type SlopMachineOptions } from "@slopmachine/core";
+import {
+  buildImageUrl,
+  interpolatePrompt,
+  type SlopMachineOptions,
+} from "@slopmachine/core";
 
 // Utility for Tailwind classes
 function cn(...inputs: ClassValue[]) {
@@ -29,6 +33,11 @@ export const SlopImage: React.FC<SlopImageProps> = ({
     [prompt, aspectRatio, variables, baseUrl, model],
   );
 
+  const alt = useMemo(
+    () => interpolatePrompt(prompt, variables) ?? "Generated image",
+    [prompt, variables],
+  );
+
   const [isLoading, setIsLoading] = useState(true);
   const [currentSrc, setCurrentSrc] = useState(src);
 
@@ -157,7 +166,7 @@ export const SlopImage: React.FC<SlopImageProps> = ({
         <img
           key={src}
           src={src}
-          alt={prompt}
+          alt={alt}
           onLoad={() => setIsLoading(false)}
           className={cn(
             "h-full w-full object-cover transition-opacity duration-500",