@slopmachine/react 0.7.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/react",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "llms": "https://docs.slopmachine.dev/llms.txt",
   "llmsFull": "https://docs.slopmachine.dev/llms-full.txt",
   "description": "The official React SDK for Slop Machine",
@@ -9,15 +9,21 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
       "default": "./dist/index.js"
     }
   },
   "scripts": {
     "build": "tsup",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -44,11 +50,16 @@
     "vite": "^7.3.1"
   },
   "dependencies": {
-    "@slopmachine/core": "^0.7.0",
+    "@slopmachine/core": "^0.8.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
     "react": ">=18"
-  }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false
 }

package/Agents.md

@@ -1,36 +0,0 @@
-# React SDK Conventions
-
-This document outlines the coding conventions and patterns used in the `@slopmachine/react` SDK. Future agents should adhere to these guidelines when making modifications or adding new components.
-
-> **Important:** Review the repository-wide guidelines in [AGENTS.md](../../AGENTS.md) and check [GOTCHAS.md](../../GOTCHAS.md) for known issues, pitfalls, and workarounds before starting tasks. Maintain `GOTCHAS.md` whenever resolving new pitfalls.
-
-## Dependencies and Styling
-
-- **Class Merging:** Use `clsx` and `tailwind-merge` to construct and merge Tailwind CSS classes. A utility function `cn(...inputs: ClassValue[])` is typically used for this purpose.
-- **Styling Approach:** Components use Tailwind CSS classes for styling. However, to ensure components remain robust even if the consumer's environment doesn't perfectly process all Tailwind classes, always include equivalent inline `style` properties as a fallback.
-- **CSS Variables:** Use standard CSS variables for theme-related colors (e.g., `var(--muted, #f3f4f6)`).
-- **Custom Animations/Styles:** If complex animations or specific scoped styles are needed that go beyond Tailwind utility classes, inject them using a scoped `<style>` block within the component.
-- **Core Logic:** Import shared logic, utilities, and base types from `@slopmachine/core`.
-
-## Component Structure
-
-- **Functional Components:** Define components as Functional Components (e.g., `React.FC<Props>`).
-- **Prop Forwarding:** Spread the remaining props (`...props`) onto the primary underlying DOM element to allow consumers to pass standard HTML attributes (like `aria-` attributes, data attributes, etc.).
-
-## Prop Typing
-
-- **Interfaces:** Define an explicit `Props` interface for each component.
-- **Extending Standard Attributes:** Extend the appropriate React HTML attributes interface (e.g., `React.ImgHTMLAttributes<HTMLImageElement>`).
-- **Overriding Attributes:** Use `Omit` to exclude standard attributes that are managed internally by the component or replaced by custom SDK options (e.g., `Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">`).
-- **Shared Types:** Extend or incorporate types from `@slopmachine/core` (like `SlopImageOptions`).
-
-## IntelliSense and Documentation
-
-- **JSDoc Comments:** Always include descriptive JSDoc comments for components and their props to provide rich IntelliSense in IDEs.
-- **Component Documentation:** Component JSDoc blocks should describe what the component does and include a clear `@example` block demonstrating usage, and optionally a `@version` tag if applicable.
-- **Prop Documentation:** Every custom prop in a component's interface should have a JSDoc comment explaining its purpose, default behavior, and any edge cases. This is crucial for developer experience when consuming the SDK.
-
-## Exporting Patterns
-
-- **Named Exports:** Use named exports for components and interfaces (e.g., `export const ComponentName = ...`). Avoid default exports.
-- **Entry Point:** Ensure components and their prop types are exported from the package's main entry point if they are meant for public consumption.

package/src/components/ErrorOverlay.tsx

@@ -1,91 +0,0 @@
-import React from "react";
-import type { SlopMachineError } from "@slopmachine/core";
-
-/**
- * Content to render when generation or loading fails. Either a node, or a
- * function that receives the error and returns a node.
- */
-export type SlopErrorFallback =
-  React.ReactNode | ((error: SlopMachineError) => React.ReactNode);
-
-interface ErrorOverlayProps {
-  error: SlopMachineError;
-  errorFallback?: SlopErrorFallback;
-  /**
-   * Message shown by the default error UI, e.g. "Failed to load image".
-   */
-  label: string;
-}
-
-const overlayStyle: React.CSSProperties = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 10,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-/**
- * Internal overlay shown over the media slot when generation or loading fails.
- * Renders the consumer's `errorFallback` if provided, otherwise a default message.
- */
-export const ErrorOverlay: React.FC<ErrorOverlayProps> = ({
-  error,
-  errorFallback,
-  label,
-}) => {
-  if (errorFallback !== undefined) {
-    return (
-      <div
-        className="absolute inset-0 z-10 flex items-center justify-center"
-        style={overlayStyle}
-      >
-        {typeof errorFallback === "function"
-          ? errorFallback(error)
-          : errorFallback}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="absolute inset-0 z-10 flex items-center justify-center bg-muted"
-      style={{ ...overlayStyle, backgroundColor: "var(--muted, #f3f4f6)" }}
-      title={error.message}
-    >
-      <div
-        className="flex flex-col items-center gap-2 text-muted-foreground"
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "0.5rem",
-          color: "var(--muted-foreground, #6b7280)",
-        }}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-          style={{ width: "24px", height: "24px" }}
-        >
-          <circle cx="12" cy="12" r="10" />
-          <line x1="12" y1="8" x2="12" y2="12" />
-          <line x1="12" y1="16" x2="12.01" y2="16" />
-        </svg>
-        <span className="text-xs" style={{ fontSize: "0.75rem" }}>
-          {label}
-        </span>
-      </div>
-    </div>
-  );
-};

package/src/components/SlopImage.tsx

@@ -1,376 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-import {
-  buildImageUrl,
-  createRenderUrlMonitor,
-  type SlopMachineError,
-  type SlopImageOptions,
-  type ImageAspectRatio,
-} from "@slopmachine/core";
-import { ErrorOverlay, type SlopErrorFallback } from "./ErrorOverlay";
-
-// Utility for Tailwind classes
-function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export interface SlopImageProps
-  extends
-    Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
-    Omit<SlopImageOptions, "aspectRatio"> {
-  /**
-   * The aspect ratio of the generated image. Defaults to "1:1".
-   */
-  aspectRatio?: ImageAspectRatio;
-  /**
-   * Custom React node to display while the image is loading.
-   * If not provided, a default spinner and shimmer effect will be shown.
-   */
-  loader?: React.ReactNode;
-  /**
-   * Content to display if the image fails to generate or load.
-   * Pass a node, or a function that receives the `SlopMachineError` and returns a node.
-   * If not provided, a default error message is shown in place of the image.
-   */
-  errorFallback?: SlopErrorFallback;
-  /**
-   * Called once per URL when the image fails to generate or load.
-   * `error.status` holds the HTTP status when the API reported the failure.
-   */
-  onGenerationError?: (error: SlopMachineError) => void;
-  /**
-   * How the image should be resized to fit its container. Defaults to "cover".
-   */
-  objectFit?: React.CSSProperties["objectFit"];
-  /**
-   * Additional CSS classes to apply directly to the `<img />` element.
-   */
-  imageClassName?: string;
-}
-
-/**
- * Renders an image generated by Slop Machine.
- *
- * This component automatically constructs the correct URL for the Slop Machine API,
- * displays a loading skeleton or custom loader while fetching, and handles errors.
- *
- * @example
- * ```tsx
- * // Using a Bucket
- * <SlopImage
- *   bucketId="my-bucket"
- *   resultId="some-result"
- *   aspectRatio="16:9"
- *   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.7.0
- */
-export const SlopImage: React.FC<SlopImageProps> = ({
-  bucketId,
-  pipelineId,
-  siloId,
-  prompt,
-  metadata,
-  className,
-  aspectRatio = "1:1",
-  model,
-  version,
-  resultId,
-  variables = {},
-  baseUrl,
-  original,
-  attachments,
-  loader,
-  errorFallback,
-  onGenerationError,
-  objectFit = "cover",
-  imageClassName,
-  style,
-  onLoad,
-  onError,
-  ...props
-}) => {
-  // Construct API URL
-  const rawSrc = useMemo(
-    () =>
-      buildImageUrl({
-        bucketId,
-        pipelineId,
-        siloId,
-        prompt,
-        metadata,
-        aspectRatio,
-        model,
-        version,
-        resultId,
-        variables,
-        baseUrl,
-        original,
-        attachments,
-      }),
-    [
-      bucketId,
-      pipelineId,
-      siloId,
-      prompt,
-      metadata,
-      aspectRatio,
-      model,
-      version,
-      resultId,
-      variables,
-      baseUrl,
-      original,
-      attachments,
-    ],
-  );
-
-  const [src, setSrc] = useState(rawSrc);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setSrc(rawSrc);
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [rawSrc]);
-
-  const alt = "Image produced by Slop Machine (slopmachine.dev)";
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<SlopMachineError | null>(null);
-  const [currentSrc, setCurrentSrc] = useState(src);
-  if (src !== currentSrc) {
-    setCurrentSrc(src);
-    setIsLoading(true);
-    setError(null);
-  }
-
-  // Keep the latest callback without re-running effects when it changes identity
-  const onGenerationErrorRef = useRef(onGenerationError);
-  useEffect(() => {
-    onGenerationErrorRef.current = onGenerationError;
-  });
-
-  // Shares one URL check between the HEAD probe and the media element's error event
-  const monitor = useMemo(
-    () =>
-      createRenderUrlMonitor((err) => {
-        console.error("SlopImage error:", err.status ?? "", err.message);
-        setIsLoading(false);
-        setError(err);
-        onGenerationErrorRef.current?.(err);
-      }),
-    [],
-  );
-
-  useEffect(() => {
-    if (!src) return;
-    monitor.watch(src);
-    return () => monitor.stop();
-  }, [src, monitor]);
-
-  return (
-    <>
-      <style>{`
-        @keyframes slop-shimmer {
-          0% {
-            background-position: 200% 0;
-          }
-          100% {
-            background-position: -200% 0;
-          }
-        }
-        @keyframes slop-spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `}</style>
-      <div className={className} style={style}>
-        <div
-          className="slop-wrapper relative overflow-hidden w-full h-full"
-          style={{
-            aspectRatio: String(aspectRatio).replace(":", "/"),
-            position: "relative",
-            overflow: "hidden",
-            width: "100%",
-            height: "100%",
-          }}
-        >
-          {/* Loading UI */}
-          {loader ? (
-            <div
-              className={cn(
-                "absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300",
-                isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
-              )}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 10,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                opacity: isLoading ? 1 : 0,
-                pointerEvents: isLoading ? "auto" : "none",
-                transition: "opacity 300ms ease-in-out",
-              }}
-            >
-              {loader}
-            </div>
-          ) : (
-            <>
-              {/* Loading overlay */}
-              <div
-                className={cn(
-                  "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
-                  isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
-                )}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  zIndex: 10,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: "var(--muted, #f3f4f6)",
-                  opacity: isLoading ? 1 : 0,
-                  pointerEvents: isLoading ? "auto" : "none",
-                  transition: "opacity 300ms ease-in-out",
-                }}
-              >
-                <div
-                  className="flex flex-col items-center gap-2"
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                  }}
-                >
-                  <svg
-                    className="spinner size-6 text-muted-foreground"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    style={{
-                      width: "24px",
-                      height: "24px",
-                      color: "var(--muted-foreground, #6b7280)",
-                      animation: "slop-spin 1s linear infinite",
-                    }}
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                      style={{ opacity: 0.25 }}
-                    />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                      style={{ opacity: 0.75 }}
-                    />
-                  </svg>
-                  <span
-                    className="text-xs text-muted-foreground"
-                    style={{
-                      fontSize: "0.75rem",
-                      color: "var(--muted-foreground, #6b7280)",
-                    }}
-                  >
-                    Loading...
-                  </span>
-                </div>
-              </div>
-
-              {/* Shimmer effect underneath */}
-              <div
-                className={cn(
-                  "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
-                  isLoading ? "opacity-100" : "opacity-0",
-                )}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  background:
-                    "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
-                  backgroundSize: "200% 100%",
-                  animation: "slop-shimmer 2s ease-in-out infinite",
-                  opacity: isLoading ? 1 : 0,
-                  transition: "opacity 300ms",
-                }}
-              />
-            </>
-          )}
-
-          {error && (
-            <ErrorOverlay
-              error={error}
-              errorFallback={errorFallback}
-              label="Failed to load image"
-            />
-          )}
-
-          {/* Image */}
-          <img
-            key={src}
-            src={src}
-            alt={alt}
-            {...props}
-            onLoad={(e) => {
-              setIsLoading(false);
-              onLoad?.(e);
-            }}
-            onError={(e) => {
-              monitor.mediaFailed(src, "Failed to load image");
-              onError?.(e);
-            }}
-            aria-hidden={error ? true : props["aria-hidden"]}
-            className={cn(
-              "h-full w-full transition-opacity duration-500",
-              isLoading || error ? "opacity-0" : "opacity-100",
-              imageClassName,
-            )}
-            style={{
-              height: "100%",
-              width: "100%",
-              objectFit,
-              transition: "opacity 500ms",
-              opacity: isLoading || error ? 0 : 1,
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-};