@interware/content-generator 0.4.3 → 0.5.0

package/dist/_chunks/{App-DmCOiKrV.js → App-DVTFrZvf.js}

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const admin = require("@strapi/strapi/admin");
-const designSystem = require("@strapi/design-system");
 const reactRouterDom = require("react-router-dom");
-const index = require("./index-CTnsB_jp.js");
+const ImageStudioTabs = require("./ImageStudioTabs-B2UbKYq7.js");
 const reactIntl = require("react-intl");
 const react = require("react");
+const designSystem = require("@strapi/design-system");
 const reactRedux = require("react-redux");
+const index = require("./index-Ddp0Qvqo.js");
 const icons = require("@strapi/icons");
-const getTranslation = require("./getTranslation-DwDV99gW.js");
+const getTranslation = require("./getTranslation-D88uLXGd.js");
 const formik = require("formik");
 const Yup = require("yup");
 function _interopNamespace(e) {
@@ -30,51 +31,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const Yup__namespace = /* @__PURE__ */ _interopNamespace(Yup);
-const links = [
-  {
-    label: "Generador de contenido con IA",
-    required: "access",
-    subLinks: [
-      {
-        id: 1,
-        label: "Generador de contenido",
-        to: "/admin/plugins/strapi-content-generator-gemini",
-        required: "access"
-      },
-      {
-        id: 2,
-        label: "Generador de imágenes",
-        to: "/admin/plugins/strapi-content-generator-gemini/generate-images",
-        required: "access"
-      }
-    ]
-  }
-];
-const Navigation = () => {
-  const location = reactRouterDom.useLocation();
-  const { allowedActions, isLoading } = admin.useRBAC(index.pluginPermissions);
-  if (isLoading) return null;
-  const canAccess = (required) => {
-    if (!required) return true;
-    if (required === "access") return allowedActions.canAccess;
-    return false;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.SubNav, { "aria-label": "Generador de contenido SubNav", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavHeader, { label: "MKT" }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavSections, { children: links.filter((section) => canAccess(section.required)).map(({ label, subLinks }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SubNavSection, { label, children: subLinks.filter((subLink) => canAccess(subLink.required)).map((subLink) => {
-      const active = location.pathname === subLink.to.replace(/^\/admin/, "");
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.SubNavLink,
-        {
-          href: subLink.to,
-          active,
-          children: subLink.label
-        },
-        subLink.id
-      );
-    }) }, label)) })
-  ] });
-};
 const useDialog = (id) => {
   const dispatch = reactRedux.useDispatch();
   const state = reactRedux.useSelector((state2) => state2.content_generator_commonDialog.open[id] ?? false);
@@ -588,7 +544,7 @@ const useUsers = () => {
     getUsers
   };
 };
-const validationSchema$2 = Yup__namespace.object().shape({
+const validationSchema$1 = Yup__namespace.object().shape({
   titulo: Yup__namespace.string().notRequired(),
   autor: Yup__namespace.string().required("Este campo es obligatorio"),
   categoria: Yup__namespace.string().required("Este campo es obligatorio"),
@@ -602,10 +558,10 @@ const initialValues$1 = {
   temperatura: "0.5",
   instrucciones: ""
 };
-const Form$2 = ({ onSubmit, categorias, users }) => {
+const Form$1 = ({ onSubmit, categorias, users }) => {
   const formik$1 = formik.useFormik({
     initialValues: initialValues$1,
-    validationSchema: validationSchema$2,
+    validationSchema: validationSchema$1,
     onSubmit
   });
   const { values, errors, touched, isValid, dirty, isSubmitting, handleChange, setFieldValue, handleSubmit } = formik$1;
@@ -863,7 +819,7 @@ const GenerateContentContainer = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { alignItems: "end", width: "100%", justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini", children: "Regresar" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$2, { categorias, users, onSubmit }) })
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Form$1, { categorias, users, onSubmit }) })
     ] })
   ] });
 };
@@ -873,635 +829,6 @@ const GenerateContent = () => {
     /* @__PURE__ */ jsxRuntime.jsx(GenerateContentContainer, {})
   ] });
 };
-const useImages$1 = () => {
-  const { get, del, post } = admin.useFetchClient();
-  const getImages = react.useCallback(
-    async () => {
-      return await get("/strapi-content-generator-gemini/images");
-    },
-    [get]
-  );
-  const deleteImage = react.useCallback(
-    async (config) => {
-      return await del("/strapi-content-generator-gemini/delete-image", config);
-    },
-    [del]
-  );
-  const generateImageWithConfig = react.useCallback(
-    async (data, config) => {
-      return await post("/strapi-content-generator-gemini/generate-image-with-config", data, config);
-    },
-    [post]
-  );
-  const generateVideoWithScenes = react.useCallback(
-    async (data, config) => {
-      return await post("/strapi-content-generator-gemini/generate-video-with-scenes", data, config);
-    },
-    [post]
-  );
-  return {
-    getImages,
-    deleteImage,
-    generateImageWithConfig,
-    generateVideoWithScenes
-  };
-};
-const PRINCIPAL_KEY = "principal";
-const ModalImagesSizes = ({
-  open,
-  setOpen,
-  image,
-  handleDownload
-}) => {
-  const [selectedImages, setSelectedImages] = react.useState(
-    () => /* @__PURE__ */ new Set()
-  );
-  const formats = react.useMemo(
-    () => Object.entries(image?.formats ?? {}),
-    [image?.formats]
-  );
-  const toggleImageSelection = react.useCallback((key) => {
-    setSelectedImages((prev) => {
-      const next = new Set(prev);
-      next.has(key) ? next.delete(key) : next.add(key);
-      return next;
-    });
-  }, []);
-  const isPrincipalSelected = react.useMemo(
-    () => selectedImages.has(PRINCIPAL_KEY),
-    [selectedImages]
-  );
-  const isDownloadDisabled = react.useMemo(
-    () => selectedImages.size === 0,
-    [selectedImages]
-  );
-  const handleClose = react.useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
-  react.useEffect(() => {
-    if (!open) {
-      setSelectedImages(/* @__PURE__ */ new Set());
-    }
-  }, [open]);
-  if (!image) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.Modal.Root,
-    {
-      id: "modal-image-formats",
-      open,
-      onOpenChange: handleClose,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Descargar imágenes" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            designSystem.Card,
-            {
-              id: "modal-principal",
-              onClick: () => toggleImageSelection(PRINCIPAL_KEY),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { checked: isPrincipalSelected }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: image.url })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { children: "Principal" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: `${image.width}x${image.height}` })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: image.mime })
-                ] })
-              ]
-            }
-          ) }),
-          formats.map(([format, img]) => {
-            const isSelected = selectedImages.has(format);
-            return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
-              designSystem.Card,
-              {
-                id: `modal-${format}`,
-                onClick: () => toggleImageSelection(format),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardCheckbox, { checked: isSelected }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: img.url })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { children: format }),
-                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: `${img.width}x${img.height}` })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: image.mime })
-                  ] })
-                ]
-              }
-            ) }, format);
-          })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: handleClose, children: "Cancelar" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
-            {
-              disabled: isDownloadDisabled,
-              onClick: () => {
-                handleDownload(selectedImages);
-              },
-              children: "Descargar"
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-};
-const ImagesContext = react.createContext(void 0);
-const ImagesProvider = ({ children }) => {
-  const { getImages, deleteImage } = useImages$1();
-  const { openDialog, closeDialog } = useDialog("dialog-delete-image");
-  const { formatMessage } = reactIntl.useIntl();
-  const { toggleNotification } = admin.useNotification();
-  const [images, setImages] = react.useState([]);
-  const [loading, setLoading] = react.useState(false);
-  const [open, setOpen] = react.useState(false);
-  const currentImageRef = react.useRef();
-  const fetchImages = react.useCallback(async () => {
-    let isMounted = true;
-    try {
-      const { data } = await getImages();
-      if (isMounted) {
-        setImages(data);
-      }
-    } catch (error) {
-      console.error("Error fetching images:", error);
-    }
-    return () => {
-      isMounted = false;
-    };
-  }, [getImages]);
-  const handleDeleteImage = async () => {
-    closeDialog();
-    try {
-      await deleteImage({ params: { documentId: currentImageRef.current?.documentId } });
-      toggleNotification({
-        type: "success",
-        message: formatMessage({
-          id: `${index.PLUGIN_ID}.config.load.error`,
-          defaultMessage: "Imagen eliminada con éxito"
-        })
-      });
-      fetchImages();
-    } catch (err) {
-      toggleNotification({
-        type: "danger",
-        message: formatMessage({
-          id: `${index.PLUGIN_ID}.config.load.error`,
-          defaultMessage: "Ocurrió un error al eliminar la imagen"
-        })
-      });
-    }
-  };
-  const onCancelAction = react.useCallback((action) => {
-    switch (action) {
-      case "delete":
-        closeDialog();
-        break;
-      case "download":
-        setOpen(false);
-        break;
-      default:
-        return;
-    }
-    currentImageRef.current = void 0;
-    closeDialog();
-  }, [openDialog]);
-  const onClickAction = react.useCallback((image, action) => {
-    currentImageRef.current = image;
-    switch (action) {
-      case "delete":
-        openDialog();
-        break;
-      case "download":
-        setOpen(true);
-        break;
-      default:
-        return;
-    }
-  }, [openDialog, setOpen]);
-  const downloadImage = async (url, filename) => {
-    try {
-      const response = await fetch(url, {
-        method: "GET",
-        mode: "cors"
-      });
-      if (!response.ok) throw new Error("Network response was not ok");
-      const blob = await response.blob();
-      const blobUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = blobUrl;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(blobUrl);
-    } catch (error) {
-      console.error("Error downloading image:", error);
-      const link = document.createElement("a");
-      link.href = url;
-      link.target = "_blank";
-      link.rel = "noopener noreferrer";
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }
-  };
-  const handleDownload = async (selectedKeys) => {
-    const image = currentImageRef.current;
-    if (!image) return;
-    setOpen(false);
-    const keys = Array.isArray(selectedKeys) ? selectedKeys : Array.from(selectedKeys);
-    const extension = image.ext?.replace(".", "") ?? "jpg";
-    const formats = image.formats;
-    const items = keys.map((key) => {
-      if (key === "principal") {
-        return {
-          url: image.url,
-          filename: `image-principal-${image.documentId}.${extension}`
-        };
-      }
-      const formatImage = formats?.[key];
-      if (!formatImage) return null;
-      return {
-        url: formatImage.url,
-        filename: `image-${key}-${image.documentId}.${extension}`
-      };
-    }).filter(Boolean);
-    for (const item of items) {
-      await downloadImage(item.url, item.filename);
-    }
-  };
-  react.useEffect(() => {
-    fetchImages();
-  }, [fetchImages]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    currentImageRef.current && /* @__PURE__ */ jsxRuntime.jsx(
-      ModalImagesSizes,
-      {
-        open,
-        setOpen,
-        image: currentImageRef.current,
-        handleDownload
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DialogCommon,
-      {
-        title: "Eliminar imagen",
-        id: "dialog-delete-image",
-        onConfirmAction: handleDeleteImage,
-        onCancelAction: () => onCancelAction("delete"),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", justifyContent: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "¿Seguro que deseas eliminar esta imagen?" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Esta acción es irreversible" })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ImagesContext.Provider, { value: { images, onClickAction }, children })
-  ] });
-};
-const useImages = () => {
-  const context = react.useContext(ImagesContext);
-  if (!context) {
-    throw new Error("useImages must be used within an ImagesProvider");
-  }
-  return context;
-};
-const Image = ({ image }) => {
-  const { onClickAction } = useImages();
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Card, { id: image.id, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardAction, { position: "end", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.IconButton,
-          {
-            label: "Descargar",
-            onClick: () => {
-              onClickAction(image, "download");
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Download, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.IconButton,
-          {
-            label: "Eliminar",
-            onClick: () => {
-              onClickAction(image, "delete");
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: image.url, style: { borderTopLeftRadius: "4px", borderTopRightRadius: "4px" } })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { children: `${image.caption?.replace("generada por IA", "").slice(0, 80)}...` }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: `${image.width}X${image.height}` })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: image.mime })
-    ] })
-  ] });
-};
-const Images = () => {
-  const { images } = useImages();
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, margin: 6, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 3, children: images.map((image) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Image, { image }) }, image.id);
-  }) }) });
-};
-const GenerateImagesContainer = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ImagesProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { padding: 6, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Generar imagenes y videos con IA" }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "end", alignItems: "end", gap: 3, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.LinkButton, { href: "/admin/plugins/strapi-content-generator-gemini/generate-image", children: "Generar nueva imagen" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Images, {}) })
-  ] }) }) });
-};
-const GenerateImages = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: "Generar imagenes con IA" }),
-    /* @__PURE__ */ jsxRuntime.jsx(GenerateImagesContainer, {})
-  ] });
-};
-const aspectRatioOptions = [
-  { value: "1:1", label: "1:1 (Cuadrado)" },
-  { value: "2:3", label: "2:3 Rectangular (vertical)" },
-  { value: "3:2", label: "3:2 Rectangular (horizontal)" },
-  { value: "3:4", label: "3:4 Rectangular (vertical)" },
-  { value: "4:3", label: "4:3 Rectangular (horizontal)" },
-  { value: "9:16", label: "9:16 Rectangular (vertical)" },
-  { value: "16:9", label: "16:9 Rectangular (horizontal)" },
-  { value: "21:9", label: "21:9 Rectangular (horizontal)" }
-];
-const validationSchema$1 = Yup__namespace.object({
-  prompt: Yup__namespace.string().required("El prompt es requerido"),
-  aspectRatio: Yup__namespace.string().required("La relación de aspecto es requerida"),
-  imageSize: Yup__namespace.string().required("El tamaño de la imagen es requerido")
-});
-const Form$1 = ({ onSubmit }) => {
-  const [referenceImages, setReferenceImages] = react.useState([]);
-  const individualFileInputRefs = react.useRef({});
-  const newImageFileInputRef = react.useRef(null);
-  const formik$1 = formik.useFormik({
-    initialValues: {
-      prompt: "",
-      aspectRatio: "16:9",
-      imageSize: "1K"
-    },
-    validationSchema: validationSchema$1,
-    onSubmit: (values, formikHelpers) => onSubmit({ ...values }, formikHelpers, referenceImages)
-  });
-  const handleAddImage = () => {
-    newImageFileInputRef.current?.click();
-  };
-  const handleRemoveImage = (id) => {
-    const imageToRemove = referenceImages.find((img) => img.id === id);
-    if (imageToRemove?.previewUrl) {
-      URL.revokeObjectURL(imageToRemove.previewUrl);
-    }
-    setReferenceImages(referenceImages.filter((image) => image.id !== id));
-  };
-  const handleNewImageFileChange = (e) => {
-    const selectedFile = e.target.files?.[0];
-    if (selectedFile) {
-      setReferenceImages((prevImages) => [
-        ...prevImages,
-        { id: Date.now(), file: selectedFile, previewUrl: URL.createObjectURL(selectedFile) }
-      ]);
-    }
-    e.target.value = "";
-  };
-  const handleIndividualFileChange = (id, selectedFile) => {
-    setReferenceImages((prevImages) => prevImages.map((image) => {
-      if (image.id === id) {
-        if (image.previewUrl) {
-          URL.revokeObjectURL(image.previewUrl);
-        }
-        if (selectedFile) {
-          return { ...image, file: selectedFile, previewUrl: URL.createObjectURL(selectedFile) };
-        } else {
-          const { file, previewUrl, ...rest } = image;
-          return rest;
-        }
-      }
-      return image;
-    }));
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: formik$1.handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.Field.Root,
-      {
-        id: "prompt",
-        width: "100%",
-        required: true,
-        error: formik$1.touched.prompt && formik$1.errors.prompt ? formik$1.errors.prompt : void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Descripción de la imagen" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Textarea,
-            {
-              name: "prompt",
-              placeholder: "Ej: Una superficie paramétrica 3D con forma de cinta que se tuerce sobre sí misma, flotando sobre un fondo gradiente oscuro. Evoca integración y continuidad de sistemas.",
-              onChange: formik$1.handleChange,
-              onBlur: formik$1.handleBlur,
-              value: formik$1.values.prompt,
-              rows: 5
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: "Describe qué quieres ver — forma, movimiento, atmósfera. El estilo de marca (colores, materiales, iluminación) se aplica automáticamente." }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.Field.Root,
-      {
-        id: "imagen-referencia",
-        width: "100%",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Imagen(es) de referencia" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, width: "100%", children: [
-            referenceImages.map((image) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 3, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", gap: 3, width: "100%", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "primary100", padding: 1, children: image.previewUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.previewUrl, alt: "preview", style: { width: "50px", height: "50px", objectFit: "cover" } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "50px", height: "50px", backgroundColor: "#ccc" } }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexGrow: 2 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "file",
-                    accept: "image/*",
-                    "aria-label": `Reemplazar imagen de referencia ${image.id}`,
-                    ref: (el) => individualFileInputRefs.current[image.id] = el,
-                    style: { display: "none" },
-                    onChange: (e) => handleIndividualFileChange(image.id, e.target.files?.[0])
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Button,
-                  {
-                    onClick: () => individualFileInputRefs.current[image.id]?.click(),
-                    startIcon: image.file ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
-                    variant: "secondary",
-                    fullWidth: true,
-                    children: image.file ? image.file.name : "Seleccionar archivo"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: () => handleRemoveImage(image.id), label: "Eliminar imagen", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) })
-            ] }) }, image.id)),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "file",
-                accept: "image/*",
-                "aria-label": "Añadir imagen de referencia",
-                ref: newImageFileInputRef,
-                style: { display: "none" },
-                onChange: handleNewImageFileChange
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Button,
-              {
-                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
-                variant: "secondary",
-                fullWidth: true,
-                onClick: handleAddImage,
-                disabled: referenceImages.length >= 5,
-                children: "Añadir imagen de referencia"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.Field.Root,
-      {
-        id: "aspectRatio",
-        width: "100%",
-        required: true,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Relación de aspecto" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Combobox,
-            {
-              name: "aspectRatio",
-              onChange: (value) => formik$1.setFieldValue("aspectRatio", value),
-              onBlur: () => formik$1.setFieldTouched("aspectRatio", true),
-              value: formik$1.values.aspectRatio,
-              onClear: () => formik$1.setFieldValue("aspectRatio", ""),
-              children: aspectRatioOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: option.value, children: option.label }, option.value))
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.Field.Root,
-      {
-        id: "imageSize",
-        error: formik$1.touched.imageSize && formik$1.errors.imageSize ? formik$1.errors.imageSize : void 0,
-        width: "100%",
-        required: true,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Tamaño de la imagen" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            designSystem.Combobox,
-            {
-              name: "imageSize",
-              onChange: (value) => formik$1.setFieldValue("imageSize", value),
-              onBlur: () => formik$1.setFieldTouched("imageSize", true),
-              value: formik$1.values.imageSize,
-              onClear: () => formik$1.setFieldValue("imageSize", ""),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "1K", children: "1K" }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "2K", children: "2K" }),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "4K", children: "4K" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, { children: formik$1.errors.imageSize })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { width: "100%", justifyContent: "end", alignItems: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Button,
-      {
-        type: "submit",
-        fullWidth: true,
-        disabled: !(formik$1.isValid && formik$1.dirty) || formik$1.isSubmitting,
-        loading: formik$1.isSubmitting,
-        children: "Generar imagen"
-      }
-    ) }) })
-  ] }) }) });
-};
-const GenerateImageContainer = () => {
-  const { toggleNotification } = admin.useNotification();
-  const { generateImageWithConfig } = useImages$1();
-  const { formatMessage } = reactIntl.useIntl();
-  const handleSubmit = async (values, { setSubmitting }, referenceImages) => {
-    try {
-      const formData = new FormData();
-      formData.append("prompt", values.prompt);
-      formData.append("aspectRatio", values.aspectRatio);
-      formData.append("imageSize", values.imageSize);
-      referenceImages.forEach((img, index2) => {
-        if (img.file) {
-          formData.append(`referenceImages[${index2}]`, img.file);
-        }
-      });
-      const response = await generateImageWithConfig(formData);
-      toggleNotification({
-        type: "success",
-        message: formatMessage({
-          id: `${index.PLUGIN_ID}.config.load.success`,
-          defaultMessage: "Imagen generada con éxito"
-        })
-      });
-    } catch (error) {
-      toggleNotification({
-        type: "danger",
-        message: formatMessage({
-          id: `${index.PLUGIN_ID}.config.load.error`,
-          defaultMessage: "Ocurrió un error al generar la imagen"
-        })
-      });
-    } finally {
-      setSubmitting(false);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { padding: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Generar imagen con IA" }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "Para uso exclusivo de InterWare de México" })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { padding: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 2 }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 8, children: /* @__PURE__ */ jsxRuntime.jsx(Form$1, { onSubmit: handleSubmit }) })
-    ] })
-  ] });
-};
-const GenerateImage = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: "Generar imagen con IA" }),
-    /* @__PURE__ */ jsxRuntime.jsx(GenerateImageContainer, {})
-  ] });
-};
 const sceneSchema = Yup__namespace.object().shape({
   prompt: Yup__namespace.string().trim().required("El prompt es obligatorio para esta escena"),
   durationSeconds: Yup__namespace.number().min(1, "La duración mínima es 1 segundo").max(90, "La duración máxima es 90 segundos").required("La duración es obligatoria"),
@@ -1690,9 +1017,21 @@ const Form = ({ onSubmit }) => {
     ) }) })
   ] }) }) });
 };
+const useImages = () => {
+  const { post } = admin.useFetchClient();
+  const generateVideoWithScenes = react.useCallback(
+    async (data, config) => {
+      return await post("/strapi-content-generator-gemini/generate-video-with-scenes", data, config);
+    },
+    [post]
+  );
+  return {
+    generateVideoWithScenes
+  };
+};
 const GenerateVideoContainer = () => {
   const { toggleNotification } = admin.useNotification();
-  const { generateVideoWithScenes } = useImages$1();
+  const { generateVideoWithScenes } = useImages();
   const { formatMessage } = reactIntl.useIntl();
   const handleSubmit = async (values, { setSubmitting }) => {
     try {
@@ -1751,29 +1090,15 @@ const App = () => {
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Loading, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: [...index.pluginPermissions.access], children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { locale: "es-MX", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: "auto 1fr",
-        width: "100%",
-        height: "100vh"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Navigation, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
-          allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
-          allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-content", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateContent, {}) }),
-          allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-images", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateImages, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-image", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateImage, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-video", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateVideo, {}) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
-        ] })
-      ] })
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: [...index.pluginPermissions.access], children: /* @__PURE__ */ jsxRuntime.jsx(ImageStudioTabs.PluginProviders, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-content", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateContent, {}) }),
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/image-studio", element: /* @__PURE__ */ jsxRuntime.jsx(ImageStudioTabs.StudioRedirect, {}) }),
+      ImageStudioTabs.LEGACY_ROUTES.map((r) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: r.path, element: ImageStudioTabs.legacyRedirect(r.tab) }, r.path)),
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-video", element: /* @__PURE__ */ jsxRuntime.jsx(GenerateVideo, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
+  ] }) }) });
 };
 exports.App = App;