@slopmachine/react 0.6.0 → 0.7.0

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   SlopImage: () => SlopImage,
+  SlopMachineError: () => import_core4.SlopMachineError,
   SlopText: () => SlopText,
   SlopVideo: () => SlopVideo,
   preloadImage: () => import_core4.preloadImage,
@@ -41,11 +42,86 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/SlopImage.tsx
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
 var import_core = require("@slopmachine/core");
+
+// src/components/ErrorOverlay.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var overlayStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var ErrorOverlay = ({
+  error,
+  errorFallback,
+  label
+}) => {
+  if (errorFallback !== void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 z-10 flex items-center justify-center",
+        style: overlayStyle,
+        children: typeof errorFallback === "function" ? errorFallback(error) : errorFallback
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "absolute inset-0 z-10 flex items-center justify-center bg-muted",
+      style: { ...overlayStyle, backgroundColor: "var(--muted, #f3f4f6)" },
+      title: error.message,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "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)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "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" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs", style: { fontSize: "0.75rem" }, children: label })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/SlopImage.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
@@ -65,6 +141,8 @@ var SlopImage = ({
   original,
   attachments,
   loader,
+  errorFallback,
+  onGenerationError,
   objectFit = "cover",
   imageClassName,
   style,
@@ -105,7 +183,7 @@ var SlopImage = ({
     ]
   );
   const [src, setSrc] = (0, import_react.useState)(rawSrc);
-  import_react.default.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     const timer = setTimeout(() => {
       setSrc(rawSrc);
     }, 100);
@@ -113,35 +191,33 @@ var SlopImage = ({
   }, [rawSrc]);
   const alt = "Image produced by Slop Machine (slopmachine.dev)";
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
   const [currentSrc, setCurrentSrc] = (0, import_react.useState)(src);
   if (src !== currentSrc) {
     setCurrentSrc(src);
     setIsLoading(true);
+    setError(null);
   }
-  import_react.default.useEffect(() => {
-    if (!src) return;
-    fetch(src, { method: "HEAD" }).then(async (res) => {
-      if (!res.ok) {
-        let errorMessage = res.statusText;
-        try {
-          const errRes = await fetch(src);
-          const errorText = await errRes.text();
-          const errorData = JSON.parse(errorText);
-          if (errorData.error) {
-            errorMessage = errorData.error;
-          }
-        } catch (e) {
-        }
-        console.error("SlopImage error:", res.status, errorMessage);
-        setIsLoading(false);
-      }
-    }).catch((err) => {
-      console.error(`Error fetching image from ${src}:`, err);
+  const onGenerationErrorRef = (0, import_react.useRef)(onGenerationError);
+  (0, import_react.useEffect)(() => {
+    onGenerationErrorRef.current = onGenerationError;
+  });
+  const monitor = (0, import_react.useMemo)(
+    () => (0, import_core.createRenderUrlMonitor)((err) => {
+      console.error("SlopImage error:", err.status ?? "", err.message);
       setIsLoading(false);
-    });
-  }, [src]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+      setError(err);
+      onGenerationErrorRef.current?.(err);
+    }),
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (!src) return;
+    monitor.watch(src);
+    return () => monitor.stop();
+  }, [src, monitor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
         @keyframes slop-shimmer {
           0% {
             background-position: 200% 0;
@@ -159,7 +235,7 @@ var SlopImage = ({
           }
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
         className: "slop-wrapper relative overflow-hidden w-full h-full",
@@ -171,7 +247,7 @@ var SlopImage = ({
           height: "100%"
         },
         children: [
-          loader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          loader ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "div",
             {
               className: cn(
@@ -194,8 +270,8 @@ var SlopImage = ({
               },
               children: loader
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: cn(
@@ -217,7 +293,7 @@ var SlopImage = ({
                   pointerEvents: isLoading ? "auto" : "none",
                   transition: "opacity 300ms ease-in-out"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "div",
                   {
                     className: "flex flex-col items-center gap-2",
@@ -228,7 +304,7 @@ var SlopImage = ({
                       gap: "0.5rem"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "svg",
                         {
                           className: "spinner size-6 text-muted-foreground",
@@ -242,7 +318,7 @@ var SlopImage = ({
                             animation: "slop-spin 1s linear infinite"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "circle",
                               {
                                 className: "opacity-25",
@@ -254,7 +330,7 @@ var SlopImage = ({
                                 style: { opacity: 0.25 }
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "path",
                               {
                                 className: "opacity-75",
@@ -266,7 +342,7 @@ var SlopImage = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "span",
                         {
                           className: "text-xs text-muted-foreground",
@@ -282,7 +358,7 @@ var SlopImage = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: cn(
@@ -304,7 +380,15 @@ var SlopImage = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ErrorOverlay,
+            {
+              error,
+              errorFallback,
+              label: "Failed to load image"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "img",
             {
               src,
@@ -315,12 +399,13 @@ var SlopImage = ({
                 onLoad?.(e);
               },
               onError: (e) => {
-                setIsLoading(false);
+                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 ? "opacity-0" : "opacity-100",
+                isLoading || error ? "opacity-0" : "opacity-100",
                 imageClassName
               ),
               style: {
@@ -328,7 +413,7 @@ var SlopImage = ({
                 width: "100%",
                 objectFit,
                 transition: "opacity 500ms",
-                opacity: isLoading ? 0 : 1
+                opacity: isLoading || error ? 0 : 1
               }
             },
             src
@@ -344,7 +429,7 @@ var import_react2 = require("react");
 var import_clsx2 = require("clsx");
 var import_tailwind_merge2 = require("tailwind-merge");
 var import_core2 = require("@slopmachine/core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function cn2(...inputs) {
   return (0, import_tailwind_merge2.twMerge)((0, import_clsx2.clsx)(inputs));
 }
@@ -364,6 +449,8 @@ var SlopVideo = ({
   original,
   attachments,
   loader,
+  errorFallback,
+  onGenerationError,
   autoPlay = true,
   loop = true,
   muted = true,
@@ -412,36 +499,34 @@ var SlopVideo = ({
     return () => clearTimeout(timer);
   }, [rawSrc]);
   const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
   const [currentSrc, setCurrentSrc] = (0, import_react2.useState)(src);
   const videoRef = (0, import_react2.useRef)(null);
   if (src !== currentSrc) {
     setCurrentSrc(src);
     setIsLoading(true);
+    setError(null);
   }
+  const onGenerationErrorRef = (0, import_react2.useRef)(onGenerationError);
   (0, import_react2.useEffect)(() => {
-    if (!src) return;
-    fetch(src, { method: "HEAD" }).then(async (res) => {
-      if (!res.ok) {
-        let errorMessage = res.statusText;
-        try {
-          const errRes = await fetch(src);
-          const errorText = await errRes.text();
-          const errorData = JSON.parse(errorText);
-          if (errorData.error) {
-            errorMessage = errorData.error;
-          }
-        } catch (e) {
-        }
-        console.error("SlopVideo error:", res.status, errorMessage);
-        setIsLoading(false);
-      }
-    }).catch((err) => {
-      console.error(`Error fetching video from ${src}:`, err);
+    onGenerationErrorRef.current = onGenerationError;
+  });
+  const monitor = (0, import_react2.useMemo)(
+    () => (0, import_core2.createRenderUrlMonitor)((err) => {
+      console.error("SlopVideo error:", err.status ?? "", err.message);
       setIsLoading(false);
-    });
-  }, [src]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+      setError(err);
+      onGenerationErrorRef.current?.(err);
+    }),
+    []
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!src) return;
+    monitor.watch(src);
+    return () => monitor.stop();
+  }, [src, monitor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
         @keyframes slop-shimmer {
           0% {
             background-position: 200% 0;
@@ -459,7 +544,7 @@ var SlopVideo = ({
           }
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style: props.style, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: props.style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         className: "slop-wrapper relative overflow-hidden w-full h-full",
@@ -471,7 +556,7 @@ var SlopVideo = ({
           height: "100%"
         },
         children: [
-          loader ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          loader ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "div",
             {
               className: cn2(
@@ -494,8 +579,8 @@ var SlopVideo = ({
               },
               children: loader
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
                 className: cn2(
@@ -517,7 +602,7 @@ var SlopVideo = ({
                   pointerEvents: isLoading ? "auto" : "none",
                   transition: "opacity 300ms ease-in-out"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                   "div",
                   {
                     className: "flex flex-col items-center gap-2",
@@ -528,7 +613,7 @@ var SlopVideo = ({
                       gap: "0.5rem"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                         "svg",
                         {
                           className: "spinner size-6 text-muted-foreground",
@@ -542,7 +627,7 @@ var SlopVideo = ({
                             animation: "slop-spin 1s linear infinite"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                               "circle",
                               {
                                 className: "opacity-25",
@@ -554,7 +639,7 @@ var SlopVideo = ({
                                 style: { opacity: 0.25 }
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                               "path",
                               {
                                 className: "opacity-75",
@@ -566,7 +651,7 @@ var SlopVideo = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         "span",
                         {
                           className: "text-xs text-muted-foreground",
@@ -582,7 +667,7 @@ var SlopVideo = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
                 className: cn2(
@@ -604,7 +689,15 @@ var SlopVideo = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            ErrorOverlay,
+            {
+              error,
+              errorFallback,
+              label: "Failed to load video"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "video",
             {
               ref: videoRef,
@@ -619,19 +712,20 @@ var SlopVideo = ({
                 onLoadedData?.(e);
               },
               onError: (e) => {
-                setIsLoading(false);
+                monitor.mediaFailed(src, "Failed to load video");
                 onError?.(e);
               },
+              "aria-hidden": error ? true : props["aria-hidden"],
               className: cn2(
                 "h-full w-full object-cover transition-opacity duration-500",
-                isLoading ? "opacity-0" : "opacity-100"
+                isLoading || error ? "opacity-0" : "opacity-100"
               ),
               style: {
                 height: "100%",
                 width: "100%",
                 objectFit: "cover",
                 transition: "opacity 500ms",
-                opacity: isLoading ? 0 : 1
+                opacity: isLoading || error ? 0 : 1
               }
             },
             src
@@ -645,7 +739,7 @@ var SlopVideo = ({
 // src/components/SlopText.tsx
 var import_react3 = __toESM(require("react"));
 var import_core3 = require("@slopmachine/core");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SlopText = import_react3.default.forwardRef(
   ({
     bucketId,
@@ -735,14 +829,14 @@ var SlopText = import_react3.default.forwardRef(
       };
     }, [rawUrl]);
     if (error && errorFallback) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errorFallback });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: errorFallback });
     }
     if (loading) {
       if (fallback) {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fallback });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: props.className, style: props.style, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: props.className, style: props.style, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
             @keyframes slop-shimmer {
               0% { background-position: 200% 0; }
               100% { background-position: -200% 0; }
@@ -752,7 +846,7 @@ var SlopText = import_react3.default.forwardRef(
               to { transform: rotate(360deg); }
             }
           ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             className: "slop-wrapper relative overflow-hidden w-full",
@@ -763,7 +857,7 @@ var SlopText = import_react3.default.forwardRef(
               minHeight: "100px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
@@ -779,7 +873,7 @@ var SlopText = import_react3.default.forwardRef(
                     justifyContent: "center",
                     backgroundColor: "var(--muted, #f3f4f6)"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       className: "flex flex-col items-center gap-2",
@@ -790,7 +884,7 @@ var SlopText = import_react3.default.forwardRef(
                         gap: "0.5rem"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                           "svg",
                           {
                             className: "spinner size-6 text-muted-foreground",
@@ -804,7 +898,7 @@ var SlopText = import_react3.default.forwardRef(
                               animation: "slop-spin 1s linear infinite"
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "circle",
                                 {
                                   className: "opacity-25",
@@ -816,7 +910,7 @@ var SlopText = import_react3.default.forwardRef(
                                   style: { opacity: 0.25 }
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                                 "path",
                                 {
                                   className: "opacity-75",
@@ -828,7 +922,7 @@ var SlopText = import_react3.default.forwardRef(
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "span",
                           {
                             className: "text-xs text-muted-foreground",
@@ -844,7 +938,7 @@ var SlopText = import_react3.default.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   className: "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
@@ -865,7 +959,7 @@ var SlopText = import_react3.default.forwardRef(
         )
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
         ref,
@@ -884,6 +978,7 @@ var import_core4 = require("@slopmachine/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SlopImage,
+  SlopMachineError,
   SlopText,
   SlopVideo,
   preloadImage,