@interware/content-generator 0.7.1 → 0.8.0

package/dist/_chunks/{App-h4_txTsI.mjs → App-DD1MzaWm.mjs}

@@ -5,8 +5,8 @@ import { P as PluginProviders } from "./PluginProviders-DWMpcAIh.mjs";
 import { useMemo, useState, useEffect, useRef, useCallback } from "react";
 import { Box, Flex, Typography, Button, Badge, TextInput, Loader, Table, Thead, Tr, Th, VisuallyHidden, Tbody, Td, TextButton, IconButton, Link, LinkButton, Field, Radio, Modal, Textarea, Combobox, ComboboxOption, Toggle, Grid } from "@strapi/design-system";
 import { Plus, Search, Check, Pencil, ExternalLink, ArrowLeft, Image, Clock, WarningCircle, Trash, Sparkle, PlusCircle } from "@strapi/icons";
-import { P as PLUGIN_ID, S as STUDIO_PATH, p as pluginPermissions } from "./index-D67xWUPz.mjs";
-import { L as LibraryImagePicker, P as PromptComposer, a as LEGACY_ROUTES, S as StudioRedirect, l as legacyRedirect } from "./ImageStudioTabs-B-mOwDfY.mjs";
+import { P as PLUGIN_ID, S as STUDIO_PATH, p as pluginPermissions } from "./index-zenHkX-p.mjs";
+import { L as LibraryImagePicker, P as PromptComposer, a as LEGACY_ROUTES, S as StudioRedirect, l as legacyRedirect } from "./ImageStudioTabs-DwaLxRjl.mjs";
 import { useIntl } from "react-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";

package/dist/_chunks/{App-Cwr5ra5m.js → App-DspaMfyW.js}

@@ -7,8 +7,8 @@ const PluginProviders = require("./PluginProviders-D79TeGSE.js");
 const react = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-NA9OuMGs.js");
-const ImageStudioTabs = require("./ImageStudioTabs-CG4KTn1S.js");
+const index = require("./index-BudahdfX.js");
+const ImageStudioTabs = require("./ImageStudioTabs-uXSBkFeu.js");
 const reactIntl = require("react-intl");
 const formik = require("formik");
 const Yup = require("yup");

package/dist/_chunks/{ImageStudioTabs-B-mOwDfY.mjs → ImageStudioTabs-DwaLxRjl.mjs}

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Modal, Flex, Button, Loader, Typography, Grid, Box, lightTheme, Checkbox, Field, TextInput, Dialog, SingleSelect, SingleSelectOption, Link, Badge, IconButtonGroup, IconButton, Toggle, Menu, NumberInput, Divider, Textarea, Tabs } from "@strapi/design-system";
+import { Modal, Flex, Button, Loader, Typography, Grid, Box, lightTheme, Checkbox, Field, TextInput, Dialog, SingleSelect, SingleSelectOption, Link, Badge, IconButtonGroup, IconButton, Toggle, Menu, Table, Thead, Tr, Th, VisuallyHidden, Tbody, Td, TextButton, LinkButton, NumberInput, Divider, Textarea, Tabs } from "@strapi/design-system";
 import { useLocation, Navigate, useSearchParams } from "react-router-dom";
-import { S as STUDIO_PATH } from "./index-D67xWUPz.mjs";
+import { S as STUDIO_PATH } from "./index-zenHkX-p.mjs";
 import { useMemo, useState, useEffect, useId, useRef, useReducer, useCallback, useSyncExternalStore, useLayoutEffect, memo, forwardRef } from "react";
-import { ChevronRight, Folder, Magic, Pencil, Upload, Sparkle, Plus, Cross, Download, ArrowClockwise, House, ChevronDown, FilePdf, File as File$1, More, Trash, User, Star, SquaresFour, Quotes, PriceTag, Paragraph, NumberList, Minus, Italic, Image as Image$1, HeadingTwo, HeadingOne, Hashtag, Feather, Drag, BulletList, ArrowLeft, Check, ArrowsCounterClockwise, ArrowLineLeft, ArrowLineRight, Expand, WarningCircle, Play, Phone, Mail, PinMap, Earth, PresentationChart, ChartPie, ChartBubble, Cog, Database, Cloud, Globe, Server, Lightbulb, Crown, SealCheck, Briefcase, Rocket, Shield, CheckCircle, Lightning, Heart, Collapse, Bold, ArrowUp, ArrowDown, Duplicate, Lock, EyeStriked, Eye } from "@strapi/icons";
+import { ChevronRight, Folder, Magic, Pencil, Upload, Sparkle, Plus, Cross, Download, ArrowClockwise, House, ChevronDown, FilePdf, File as File$1, More, ExternalLink, Trash, User, Star, SquaresFour, Quotes, PriceTag, Paragraph, NumberList, Minus, Italic, Image as Image$1, HeadingTwo, HeadingOne, Hashtag, Feather, Drag, BulletList, ArrowLeft, Check, ArrowsCounterClockwise, ArrowLineLeft, ArrowLineRight, Expand, WarningCircle, Play, Phone, Mail, PinMap, Earth, PresentationChart, ChartPie, ChartBubble, Cog, Database, Cloud, Globe, Server, Lightbulb, Crown, SealCheck, Briefcase, Rocket, Shield, CheckCircle, Lightning, Heart, Collapse, Bold, ArrowUp, ArrowDown, Duplicate, Lock, EyeStriked, Eye } from "@strapi/icons";
 import { useTheme } from "styled-components";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { toPng, toSvg, toJpeg } from "html-to-image";
@@ -737,6 +737,9 @@ const RemoveBackgroundButton = ({ src, onDone }) => {
     )
   ] });
 };
+const IMAGE_MAX_MB = 30;
+const IMAGE_MAX_BYTES = IMAGE_MAX_MB * 1024 * 1024;
+const IMAGE_FORMATS_HINT = `PNG, JPG o WEBP de hasta ${IMAGE_MAX_MB} MB.`;
 const NameDialog = ({ open, title, label, initial = "", confirmLabel, validate, onClose, onConfirm }) => {
   const [name, setName] = useState(initial);
   const [error, setError] = useState(null);
@@ -1168,7 +1171,7 @@ const closestRatio = (width, height, ratios) => {
   };
   return ratios.reduce((best, r) => Math.abs(value(r) - target) < Math.abs(value(best) - target) ? r : best);
 };
-const BASE = "/strapi-content-generator-gemini/image-studio";
+const BASE$2 = "/strapi-content-generator-gemini/image-studio";
 const toResult = ({ image, mimeType, model, grounding }) => ({
   src: `data:${mimeType};base64,${image}`,
   model,
@@ -1180,7 +1183,7 @@ const errorMessage = (err, fallback) => {
 };
 const createGeneratorApi = (client) => ({
   async models() {
-    const { data } = await client.get(`${BASE}/models`);
+    const { data } = await client.get(`${BASE$2}/models`);
     return data;
   },
   async generate(p) {
@@ -1193,7 +1196,7 @@ const createGeneratorApi = (client) => ({
     form.append("allowPeople", String(p.allowPeople));
     form.append("grounding", String(p.grounding));
     p.references.forEach((f) => form.append("references", f, f.name));
-    const { data } = await client.post(`${BASE}/generate`, form);
+    const { data } = await client.post(`${BASE$2}/generate`, form);
     return toResult(data);
   },
   async edit(p) {
@@ -1206,11 +1209,11 @@ const createGeneratorApi = (client) => ({
     p.references.forEach((f) => form.append("references", f, f.name));
     if (p.aspectRatio) form.append("aspectRatio", p.aspectRatio);
     form.append("image", new File([blob], `base.${blob.type.split("/")[1] ?? "png"}`, { type: blob.type }));
-    const { data } = await client.post(`${BASE}/edit`, form);
+    const { data } = await client.post(`${BASE$2}/edit`, form);
     return toResult(data);
   },
   async expand(prompt) {
-    const { data } = await client.post(`${BASE}/expand`, { prompt });
+    const { data } = await client.post(`${BASE$2}/expand`, { prompt });
     return data.prompt;
   }
 });
@@ -1250,7 +1253,10 @@ const EditEmpty = ({ disabled, onUpload, onOpenLibrary, onOpenRecent }) => {
         style: { width: "100%", maxWidth: 600, border: `2px dashed ${over ? c.primary600 : c.neutral200}` },
         children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 3, style: { textAlign: "center" }, children: [
           /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: "Elige la imagen que quieres editar" }),
-          /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "Arrástrala aquí, súbela o elígela de la biblioteca. PNG, JPG o WEBP de hasta 10 MB." }),
+          /* @__PURE__ */ jsxs(Typography, { textColor: "neutral600", children: [
+            "Arrástrala aquí, súbela o elígela de la biblioteca. ",
+            IMAGE_FORMATS_HINT
+          ] }),
           /* @__PURE__ */ jsxs(Flex, { gap: 3, paddingTop: 2, children: [
             /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Upload, {}), disabled, onClick: () => input.current?.click(), children: "Subir imagen" }),
             /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Folder, {}), disabled, onClick: onOpenLibrary, children: "Elegir de la biblioteca" })
@@ -1325,7 +1331,7 @@ const ReferencePicker = ({
   onChange,
   onPickFromLibrary,
   label = "Imágenes de referencia",
-  hint = "PNG, JPG o WEBP de hasta 10 MB.",
+  hint = IMAGE_FORMATS_HINT,
   noun = REFERENCES
 }) => {
   const input = useRef(null);
@@ -1519,8 +1525,8 @@ const GeneratorTab = () => {
   };
   const uploadBase = (file) => {
     if (!file) return;
-    if (!IMAGE_MIMES.includes(file.type) || file.size > 10 * 1024 * 1024) {
-      notify("warning", "Usa una imagen PNG, JPG o WEBP de hasta 10 MB.");
+    if (!IMAGE_MIMES.includes(file.type) || file.size > IMAGE_MAX_BYTES) {
+      notify("warning", `Usa una imagen ${IMAGE_FORMATS_HINT}`);
       return;
     }
     const reader = new FileReader();
@@ -1595,7 +1601,7 @@ const GeneratorTab = () => {
       ReferencePicker,
       {
         label: "Referencias de estilo",
-        hint: "Guían el estilo, no se copian. PNG, JPG o WEBP de hasta 10 MB.",
+        hint: `Guían el estilo, no se copian. ${IMAGE_FORMATS_HINT}`,
         files: references,
         max: model?.maxReferences ?? 0,
         modelLabel: model?.label ?? "Este modelo",
@@ -1829,7 +1835,7 @@ const isImage = (f) => (f.mime ?? "").startsWith("image/");
 const canRemoveBackground = (f) => isImage(f) && f.mime !== "image/svg+xml";
 const isGenerated = (f) => (f.caption ?? "").startsWith("AI generated content");
 const formatSize = (kb = 0) => kb >= 1024 ? `${(kb / 1024).toFixed(1)} MB` : `${Math.round(kb)} KB`;
-const FileCard = ({ file, onAction, busy }) => {
+const FileCard = ({ file, onAction, busy, drive }) => {
   const c = useThemeColors();
   const thumb2 = file.formats?.thumbnail?.url ?? file.formats?.small?.url ?? file.url;
   return /* @__PURE__ */ jsxs(
@@ -1868,7 +1874,8 @@ const FileCard = ({ file, onAction, busy }) => {
             /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
               /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatSize(file.size) }),
               isGenerated(file) && /* @__PURE__ */ jsx(Badge, { children: "Generada" }),
-              busy && /* @__PURE__ */ jsx(Badge, { active: true, children: busy })
+              busy && /* @__PURE__ */ jsx(Badge, { active: true, children: busy }),
+              drive?.label && /* @__PURE__ */ jsx(Badge, { variant: drive.tone, title: drive.title, children: drive.label })
             ] })
           ] }),
           /* @__PURE__ */ jsxs(Menu.Root, { children: [
@@ -1880,6 +1887,8 @@ const FileCard = ({ file, onAction, busy }) => {
               /* @__PURE__ */ jsx(Menu.Item, { onSelect: () => onAction("replace", file), children: "Reemplazar" }),
               /* @__PURE__ */ jsx(Menu.Item, { onSelect: () => onAction("move", file), children: "Mover a…" }),
               canRemoveBackground(file) && /* @__PURE__ */ jsx(Menu.Item, { onSelect: () => onAction("removeBackground", file), disabled: !!busy, children: "Quitar fondo" }),
+              drive?.action === "mark" && /* @__PURE__ */ jsx(Menu.Item, { onSelect: () => onAction("syncDrive", file), children: "Sincronizar con Drive" }),
+              drive?.action === "unmark" && /* @__PURE__ */ jsx(Menu.Item, { onSelect: () => onAction("unsyncDrive", file), children: "Dejar de sincronizar" }),
               /* @__PURE__ */ jsx(Menu.Item, { onSelect: () => onAction("delete", file), variant: "danger", children: "Eliminar" })
             ] })
           ] })
@@ -1888,10 +1897,255 @@ const FileCard = ({ file, onAction, busy }) => {
     }
   );
 };
+const BASE$1 = "/strapi-content-generator-gemini/drive";
+const FOLDER = "application/vnd.google-apps.folder";
+const NATIVE_TYPES = {
+  "application/vnd.google-apps.document": "Documento de Google",
+  "application/vnd.google-apps.spreadsheet": "Hoja de cálculo de Google",
+  "application/vnd.google-apps.presentation": "Presentación de Google",
+  "application/vnd.google-apps.form": "Formulario de Google",
+  "application/vnd.google-apps.drawing": "Dibujo de Google",
+  "application/vnd.google-apps.shortcut": "Acceso directo"
+};
+const typeLabel = (mime) => {
+  if (mime === FOLDER) return "Carpeta";
+  if (NATIVE_TYPES[mime]) return NATIVE_TYPES[mime];
+  if (mime.startsWith("application/vnd.google-apps.")) return "Archivo de Google";
+  if (mime === "application/pdf") return "PDF";
+  if (mime.startsWith("image/")) return "Imagen";
+  if (mime.startsWith("video/")) return "Video";
+  if (mime.startsWith("audio/")) return "Audio";
+  return "Archivo";
+};
+const TypeIcon = ({ mime }) => mime === FOLDER ? /* @__PURE__ */ jsx(Folder, { width: 16, height: 16, "aria-hidden": true }) : mime === "application/pdf" ? /* @__PURE__ */ jsx(FilePdf, { width: 16, height: 16, "aria-hidden": true }) : /* @__PURE__ */ jsx(File$1, { width: 16, height: 16, "aria-hidden": true });
+const formatDate = (iso) => iso ? new Date(iso).toLocaleString("es-MX", { dateStyle: "medium", timeStyle: "short", timeZone: "America/Mexico_City" }) : "—";
+const confirmText = (item, count) => {
+  const parts = [`«${item.name}» irá a la papelera de Drive, donde se puede recuperar durante 30 días.`];
+  if (item.mimeType === FOLDER && count) {
+    const total = count.files + count.folders;
+    parts.push(
+      total === 0 ? "La carpeta está vacía." : `Contiene ${count.truncated ? "más de " : ""}${total.toLocaleString("es-MX")} ${total === 1 ? "elemento" : "elementos"} (${count.files} archivos y ${count.folders} carpetas), que también se van.`
+    );
+  }
+  if (item.synced || count?.synced) parts.push("Está sincronizado: también se borrará de la Biblioteca del CMS.");
+  return parts.join(" ");
+};
+const serverMessage$1 = (error, fallback) => error?.response?.data?.error?.message ?? (error instanceof Error && error.message ? error.message : fallback);
+const useDriveBrowserApi = () => {
+  const { get, del } = useFetchClient();
+  return useMemo(
+    () => ({
+      browse: async (folderId, pageToken) => {
+        try {
+          return (await get(`${BASE$1}/folders/${encodeURIComponent(folderId)}`, { params: pageToken ? { pageToken } : {} })).data;
+        } catch (error) {
+          throw new Error(serverMessage$1(error, "No se pudo leer Google Drive."));
+        }
+      },
+      count: async (id) => (await get(`${BASE$1}/items/${encodeURIComponent(id)}/count`)).data,
+      trash: async (id) => {
+        try {
+          await del(`${BASE$1}/items/${encodeURIComponent(id)}`);
+        } catch (error) {
+          throw new Error(serverMessage$1(error, "No se pudo mandar a la papelera."));
+        }
+      }
+    }),
+    [get, del]
+  );
+};
+const DriveTab = ({ api: injected, notify }) => {
+  const fallbackApi = useDriveBrowserApi();
+  const api = injected ?? fallbackApi;
+  const { toggleNotification } = useNotification();
+  const say = notify ?? ((type, message) => toggleNotification({ type, message }));
+  const [folderId, setFolderId] = useState("root");
+  const [page, setPage] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading2, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [doomed, setDoomed] = useState(null);
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setPage(await api.browse(folderId));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "No se pudo leer Google Drive.");
+    } finally {
+      setLoading(false);
+    }
+  }, [api, folderId]);
+  useEffect(() => {
+    load();
+  }, [load]);
+  const more = async () => {
+    if (!page?.nextPageToken) return;
+    setLoadingMore(true);
+    try {
+      const next = await api.browse(folderId, page.nextPageToken);
+      setPage({ ...next, items: [...page.items, ...next.items] });
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+  const askDelete = async (item) => {
+    setDoomed({ item, count: null });
+    if (item.mimeType === FOLDER) {
+      try {
+        const count = await api.count(item.id);
+        setDoomed((d) => d?.item.id === item.id ? { item, count } : d);
+      } catch {
+      }
+    }
+  };
+  const confirmDelete = async () => {
+    if (!doomed) return;
+    const { item } = doomed;
+    setDoomed(null);
+    try {
+      await api.trash(item.id);
+      say("success", `«${item.name}» se mandó a la papelera de Drive.`);
+      await load();
+    } catch (err) {
+      say("danger", err instanceof Error ? err.message : "No se pudo mandar a la papelera.");
+    }
+  };
+  if (error) return /* @__PURE__ */ jsx(EmptyNote, { children: error });
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Flex, { "data-testid": "drive-breadcrumb", gap: 1, alignItems: "center", wrap: "wrap", paddingBottom: 4, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "S", onClick: () => setFolderId("root"), children: "Mi unidad" }),
+      (page?.path ?? []).map((p, i, all) => /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(ChevronRight, { width: 10, height: 10, "aria-hidden": true }),
+        i === all.length - 1 ? /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: p.name }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "S", onClick: () => setFolderId(p.id), children: p.name })
+      ] }, p.id))
+    ] }),
+    loading2 ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Cargando Google Drive…" }) }) : !page?.items.length ? /* @__PURE__ */ jsx(EmptyNote, { children: "Esta carpeta de Drive está vacía." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: page.items.length + 1, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Nombre" }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Tipo" }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Modificado" }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Tamaño" }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Estado" }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: "Acciones" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: page.items.map((item) => /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Td, { style: { maxWidth: 420, whiteSpace: "normal" }, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(TypeIcon, { mime: item.mimeType }),
+            item.mimeType === FOLDER ? /* @__PURE__ */ jsx(TextButton, { onClick: () => setFolderId(item.id), style: { textAlign: "left", height: "auto" }, children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", textColor: "neutral800", style: { overflowWrap: "anywhere" }, children: item.name }) }) : /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", style: { overflowWrap: "anywhere" }, children: item.name })
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral700", children: typeLabel(item.mimeType) }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral700", style: { whiteSpace: "nowrap" }, children: formatDate(item.modifiedTime) }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral700", children: item.size === null ? "—" : formatSize(item.size / 1e3) }) }),
+          /* @__PURE__ */ jsx(Td, { children: item.synced && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Sincronizado" }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, justifyContent: "end", children: [
+            item.webViewLink && /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                variant: "tertiary",
+                size: "S",
+                href: item.webViewLink,
+                target: "_blank",
+                rel: "noreferrer noopener",
+                endIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
+                children: "Abrir en Drive"
+              }
+            ),
+            /* @__PURE__ */ jsx(IconButton, { label: `Eliminar ${item.name}`, variant: "ghost", onClick: () => askDelete(item), children: /* @__PURE__ */ jsx(Trash, {}) })
+          ] }) })
+        ] }, item.id)) })
+      ] }),
+      page.nextPageToken && /* @__PURE__ */ jsx(Flex, { justifyContent: "center", paddingTop: 4, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: more, loading: loadingMore, children: "Mostrar más" }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: !!doomed,
+        title: "¿Mandar a la papelera de Drive?",
+        confirmLabel: "Mandar a la papelera",
+        onClose: () => setDoomed(null),
+        onConfirm: confirmDelete,
+        children: doomed ? confirmText(doomed.item, doomed.count) : ""
+      }
+    )
+  ] });
+};
+const BASE = "/strapi-content-generator-gemini/drive";
+const POLL_MS = 1e4;
+const LABELS = {
+  synced: { label: "Drive", tone: "success" },
+  pending: { label: "Drive: pendiente", tone: "neutral" },
+  error: { label: "Drive: error", tone: "danger" },
+  skipped: { label: "Drive: omitido", tone: "warning" }
+};
+const driveView = (links, key, parentInside) => {
+  if (!links?.connected) return null;
+  const item = links.items[key];
+  if (item?.inside) {
+    return { ...LABELS[item.status], title: item.error ?? void 0, action: item.root ? "unmark" : null };
+  }
+  if (parentInside) return { ...LABELS.pending, action: null };
+  return { label: null, tone: "neutral", action: "mark" };
+};
+const serverMessage = (error, fallback) => error?.response?.data?.error?.message ?? fallback;
+const useDriveSync = (watching = false) => {
+  const { get, post, del } = useFetchClient();
+  const [links, setLinks] = useState(null);
+  const refresh = useCallback(async () => {
+    try {
+      const { data } = await get(`${BASE}/links`);
+      setLinks(data);
+    } catch {
+      setLinks(null);
+    }
+  }, [get]);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  const busy = !!links?.connected && (watching || links.pending > 0 || Object.values(links.items).some((i) => i.status === "pending"));
+  useEffect(() => {
+    if (!busy) return;
+    const timer = setInterval(refresh, POLL_MS);
+    return () => clearInterval(timer);
+  }, [busy, refresh]);
+  useEffect(() => {
+    const onVisible = () => document.visibilityState === "visible" && refresh();
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, [refresh]);
+  return useMemo(
+    () => ({
+      links,
+      refresh,
+      async mark(cmsType, cmsId) {
+        try {
+          await post(`${BASE}/links`, { cmsType, cmsId });
+        } catch (error) {
+          throw new Error(serverMessage(error, "No se pudo sincronizar con Drive."));
+        } finally {
+          await refresh();
+        }
+      },
+      async unmark(cmsType, cmsId) {
+        try {
+          await del(`${BASE}/links/${cmsType}/${cmsId}`);
+        } catch (error) {
+          throw new Error(serverMessage(error, "No se pudo dejar de sincronizar."));
+        } finally {
+          await refresh();
+        }
+      }
+    }),
+    [links, refresh, post, del]
+  );
+};
 const status = (err) => err?.response?.status ?? err?.status;
 const LibraryTab = () => {
   const c = useThemeColors();
   const { api, notify } = useLibraryApi();
+  const [drivePending, setDrivePending] = useState(false);
+  const drive = useDriveSync(drivePending);
   const [tree, setTree] = useState([]);
   const [counts, setCounts] = useState({});
   const [current, setCurrent] = useState(null);
@@ -1935,7 +2189,20 @@ const LibraryTab = () => {
   useEffect(() => {
     loadFiles();
   }, [loadFiles]);
-  const refresh = () => Promise.all([loadTree(), loadFiles()]);
+  const refresh = () => Promise.all([loadTree(), loadFiles(), drive.refresh()]);
+  const toggleDrive = async (mode, cmsType, cmsId) => {
+    try {
+      if (mode === "mark") {
+        await drive.mark(cmsType, cmsId);
+        notify("success", "Se sincronizará con Drive en unos segundos.");
+      } else {
+        await drive.unmark(cmsType, cmsId);
+        notify("success", "Dejó de sincronizarse. No se borró nada en Drive ni aquí.");
+      }
+    } catch (err) {
+      notify("danger", err instanceof Error ? err.message : "No se pudo completar la operación con Drive.");
+    }
+  };
   const run = async (action, ok) => {
     try {
       await action();
@@ -1992,12 +2259,24 @@ const LibraryTab = () => {
     if (action === "rename") return setDialog({ kind: "renameFile", file });
     if (action === "move") return setDialog({ kind: "moveFile", file });
     if (action === "delete") return setDialog({ kind: "deleteFile", file });
+    if (action === "syncDrive") return toggleDrive("mark", "file", file.id);
+    if (action === "unsyncDrive") return toggleDrive("unmark", "file", file.id);
   };
   const validateFolder = (parent, except) => (name) => cleanFolderName(name) !== except && nameTaken(tree, parent, name) ? "Ya existe una carpeta con ese nombre aquí." : null;
+  const pendingShown = (() => {
+    const inside = current !== null && !!drive.links?.items[`folder:${current}`]?.inside;
+    const isPending = (key) => driveView(drive.links, key, inside)?.label === "Drive: pendiente";
+    return files.some((f) => isPending(`file:${f.id}`)) || childrenOf(tree, current).some((f) => isPending(`folder:${f.id}`));
+  })();
+  useEffect(() => {
+    setDrivePending(pendingShown);
+  }, [pendingShown]);
   if (forbidden) {
     return /* @__PURE__ */ jsx(EmptyNote, { children: "Para usar la biblioteca necesitas permiso de la Media Library de Strapi. Pídelo a un administrador." });
   }
   const subfolders = childrenOf(tree, current);
+  const currentInside = current !== null && !!drive.links?.items[`folder:${current}`]?.inside;
+  const folderDrive = current !== null ? driveView(drive.links, `folder:${current}`, !!(folder && path.length > 1 && drive.links?.items[`folder:${path[path.length - 2].id}`]?.inside)) : null;
   return /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "stretch", children: [
     /* @__PURE__ */ jsx(Box, { width: "280px", shrink: 0, background: "neutral0", padding: 3, hasRadius: true, style: { maxHeight: "calc(100vh - 220px)", overflowY: "auto" }, children: /* @__PURE__ */ jsx(
       FolderTree,
@@ -2044,6 +2323,9 @@ const LibraryTab = () => {
               ] }, f.id))
             ] }),
             /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+              folder && folderDrive?.label && /* @__PURE__ */ jsx(Badge, { variant: folderDrive.tone, title: folderDrive.title, children: folderDrive.label }),
+              folder && folderDrive?.action === "mark" && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => toggleDrive("mark", "folder", folder.id), children: "Sincronizar con Drive" }),
+              folder && folderDrive?.action === "unmark" && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => toggleDrive("unmark", "folder", folder.id), children: "Dejar de sincronizar" }),
               folder && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Pencil, {}), onClick: () => setDialog({ kind: "renameFolder" }), children: "Renombrar carpeta" }),
                 /* @__PURE__ */ jsx(Button, { variant: "danger-light", startIcon: /* @__PURE__ */ jsx(Trash, {}), onClick: () => setDialog({ kind: "deleteFolder" }), children: "Eliminar carpeta" })
@@ -2068,11 +2350,15 @@ const LibraryTab = () => {
               children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
                 /* @__PURE__ */ jsx(Folder, { width: 16, height: 16, "aria-hidden": true }),
                 /* @__PURE__ */ jsx(Typography, { ellipsis: true, style: { flex: 1 }, children: f.name }),
+                (() => {
+                  const view = driveView(drive.links, `folder:${f.id}`, currentInside);
+                  return view?.label ? /* @__PURE__ */ jsx(Badge, { size: "S", variant: view.tone, title: view.title, children: view.label }) : null;
+                })(),
                 /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: counts[f.id]?.files ?? 0 })
               ] })
             }
           ) }, f.id)) }),
-          loading2 ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Cargando archivos…" }) }) : files.length === 0 ? /* @__PURE__ */ jsx(EmptyNote, { children: subfolders.length ? "No hay archivos sueltos en esta carpeta." : "Carpeta vacía. Arrastra archivos aquí o usa «Subir archivos»." }) : /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: files.map((f) => /* @__PURE__ */ jsx(Grid.Item, { col: 3, m: 4, s: 6, xs: 12, children: /* @__PURE__ */ jsx(FileCard, { file: f, onAction: onFileAction, busy: bgBusy[f.id] }) }, f.id)) }),
+          loading2 ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Cargando archivos…" }) }) : files.length === 0 ? /* @__PURE__ */ jsx(EmptyNote, { children: subfolders.length ? "No hay archivos sueltos en esta carpeta." : "Carpeta vacía. Arrastra archivos aquí o usa «Subir archivos»." }) : /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: files.map((f) => /* @__PURE__ */ jsx(Grid.Item, { col: 3, m: 4, s: 6, xs: 12, children: /* @__PURE__ */ jsx(FileCard, { file: f, onAction: onFileAction, busy: bgBusy[f.id], drive: driveView(drive.links, `file:${f.id}`, currentInside) }) }, f.id)) }),
           dragOver && /* @__PURE__ */ jsx(Flex, { position: "absolute", justifyContent: "center", background: "primary100", hasRadius: true, style: { inset: 0, border: `2px dashed ${c.primary600}`, opacity: 0.95 }, children: /* @__PURE__ */ jsxs(Typography, { variant: "beta", textColor: "primary700", children: [
             "Suelta para subir a «",
             folder?.name ?? ROOT_LABEL,
@@ -2184,17 +2470,6 @@ const LibraryTab = () => {
     /* @__PURE__ */ jsx(RemoveBackgroundDialog, { open: !!bgTarget, src: bgTarget?.src ?? "", onClose: () => setBgTarget(null), onApply: saveNoBackground })
   ] });
 };
-const PALETTE = [
-  { label: "Navy", value: "#1F2A44" },
-  { label: "Rojo", value: "#E4002B" },
-  { label: "Teal", value: "#00C7B1" },
-  { label: "Teal suave", value: "#92CFC7" },
-  { label: "Amarillo", value: "#FFC844" },
-  { label: "Amarillo suave", value: "#F8DF8D" },
-  { label: "Gris", value: "#5B6473" },
-  { label: "Papel", value: "#EEF1F5" },
-  { label: "Blanco", value: "#FFFFFF" }
-];
 const NAVY = "#1F2A44";
 const RED$1 = "#E4002B";
 const TEAL$1 = "#00C7B1";
@@ -2765,6 +3040,15 @@ const editorReducer = (state, action) => {
     }
   }
 };
+const ORIGIN_URL = "/strapi-content-generator-gemini/drive/origin";
+const recordTemplateOrigin = async (post, files, template) => {
+  for (const file of files) {
+    try {
+      await post(ORIGIN_URL, { fileId: file.id, templateDocumentId: template.documentId ?? template.id, templateName: template.name });
+    } catch {
+    }
+  }
+};
 const useEditorIO = () => {
   const { post } = useFetchClient();
   const { toggleNotification } = useNotification();
@@ -2797,7 +3081,8 @@ const useEditorIO = () => {
       if (!node) return false;
       try {
         const blob = await renderPiece(node, template, "png");
-        await api.saveBlob(blob, /\.png$/i.test(name) ? name : `${name}.png`, folderId);
+        const saved = await api.saveBlob(blob, /\.png$/i.test(name) ? name : `${name}.png`, folderId);
+        await recordTemplateOrigin((u, body) => post(u, body), saved, template);
         toggleNotification({ type: "success", message: "Pieza guardada en la biblioteca." });
         return true;
       } catch {
@@ -2805,7 +3090,7 @@ const useEditorIO = () => {
         return false;
       }
     },
-    [api, toggleNotification]
+    [api, post, toggleNotification]
   );
   return { loadImage: loadImage2, exportAs, saveToLibrary };
 };
@@ -3934,44 +4219,63 @@ const SaveTemplateDialog = ({ open, defaultName, defaultFolder, folders, onClose
     ] })
   ] }) });
 };
+const parseHex = (raw) => {
+  const hex = raw.trim().replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(hex)) return `#${[...hex].map((c) => c + c).join("")}`.toUpperCase();
+  if (/^[0-9a-f]{6}$/i.test(hex)) return `#${hex}`.toUpperCase();
+  return null;
+};
 const ColorField = ({ label, value, onChange }) => {
   const tc = useThemeColors();
+  const current = parseHex(value ?? "") ?? "#000000";
+  const [draft, setDraft] = useState(current);
+  useEffect(() => setDraft((d) => parseHex(d) === current ? d : current), [current]);
+  const apply = (text) => {
+    const hex = parseHex(text);
+    if (hex && hex !== current) onChange(hex);
+  };
+  const typeHex = (text) => {
+    setDraft(text);
+    if (text.trim().replace(/^#/, "").length === 6) apply(text);
+  };
+  const leave = () => {
+    apply(draft);
+    setDraft(parseHex(draft) ?? current);
+  };
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
-    /* @__PURE__ */ jsxs(Flex, { gap: 1, wrap: "wrap", alignItems: "center", children: [
-      PALETTE.map((c) => {
-        const active = value?.toUpperCase() === c.value;
-        return /* @__PURE__ */ jsx(
-          Box,
-          {
-            tag: "button",
-            color: "neutral800",
-            type: "button",
-            "aria-label": `${label}: ${c.label}`,
-            "aria-pressed": active,
-            title: c.label,
-            onClick: () => onChange(c.value),
-            style: {
-              width: 22,
-              height: 22,
-              borderRadius: 4,
-              cursor: "pointer",
-              background: c.value,
-              border: active ? `2px solid ${tc.primary600}` : `1px solid ${tc.neutral200}`,
-              padding: 0
-            }
-          },
-          c.value
-        );
-      }),
+    /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "color",
-          "aria-label": `${label} personalizado`,
-          value: /^#[0-9a-f]{6}$/i.test(value ?? "") ? value : "#000000",
+          "aria-label": `${label}: selector`,
+          title: "Abrir selector de color",
+          value: current.toLowerCase(),
           onChange: (e) => onChange(e.target.value.toUpperCase()),
-          style: { width: 26, height: 26, border: "none", padding: 0, background: "none", cursor: "pointer" }
+          style: {
+            flexShrink: 0,
+            width: 32,
+            height: 32,
+            padding: 2,
+            borderRadius: 4,
+            cursor: "pointer",
+            border: `1px solid ${tc.neutral200}`,
+            background: tc.neutral0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          "aria-label": `${label}: hexadecimal`,
+          size: "S",
+          value: draft,
+          placeholder: "#1F2A44",
+          maxLength: 7,
+          spellCheck: false,
+          onChange: (e) => typeHex(e.target.value),
+          onBlur: leave
         }
       )
     ] })
@@ -5231,7 +5535,8 @@ const TemplatesTab = () => {
 const STUDIO_TABS = [
   { value: "generator", label: "Generador" },
   { value: "templates", label: "Plantillas" },
-  { value: "library", label: "Imágenes y documentos" }
+  { value: "library", label: "Imágenes y documentos" },
+  { value: "drive", label: "Google Drive" }
 ];
 const PANEL = { height: "100%", overflowY: "auto" };
 const isStudioTab = (v) => STUDIO_TABS.some((t) => t.value === v);
@@ -5259,7 +5564,8 @@ const ImageStudioTabs = () => {
         /* @__PURE__ */ jsxs(Box, { flex: "1", style: { minHeight: 0 }, children: [
           /* @__PURE__ */ jsx(Tabs.Content, { value: "generator", style: PANEL, children: /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsx(GeneratorTab, {}) }) }),
           /* @__PURE__ */ jsx(Tabs.Content, { value: "templates", style: PANEL, children: /* @__PURE__ */ jsx(TemplatesTab, {}) }),
-          /* @__PURE__ */ jsx(Tabs.Content, { value: "library", style: PANEL, children: /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsx(LibraryTab, {}) }) })
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "library", style: PANEL, children: /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsx(LibraryTab, {}) }) }),
+          /* @__PURE__ */ jsx(Tabs.Content, { value: "drive", style: PANEL, children: /* @__PURE__ */ jsx(Box, { padding: 6, children: tab === "drive" && /* @__PURE__ */ jsx(DriveTab, {}) }) })
         ] })
       ]
     }