@interware/content-generator 0.6.0 → 0.7.0

package/dist/_chunks/App-Cwr5ra5m.js

@@ -0,0 +1,1380 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const admin = require("@strapi/strapi/admin");
+const reactRouterDom = require("react-router-dom");
+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 reactIntl = require("react-intl");
+const formik = require("formik");
+const Yup = require("yup");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Yup__namespace = /* @__PURE__ */ _interopNamespace(Yup);
+const OFFSET = "-06:00";
+const ZONA = "America/Mexico_City";
+const nextAction = (r) => {
+  if (r.estado === "programado") return { label: "Ver programación", variant: "tertiary" };
+  if (r.estado === "publicado") return r.linkedInPostId && r.facebookPostId ? { label: "Ver", variant: "tertiary" } : { label: "Compartir", variant: "tertiary" };
+  return r.imagen ? { label: "Publicar", variant: "secondary" } : { label: "Elegir imagen", variant: "secondary" };
+};
+const FILTROS = [
+  { id: "todos", label: "Todos", test: () => true },
+  { id: "borradores", label: "Borradores", test: (r) => r.estado === "borrador" },
+  { id: "programados", label: "Programados", test: (r) => r.estado === "programado" },
+  { id: "sin-imagen", label: "Sin imagen", test: (r) => !r.imagen },
+  { id: "publicados", label: "Publicados", test: (r) => r.estado === "publicado" }
+];
+const MESES = ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"];
+const formatFecha = (fecha) => {
+  if (!fecha) return "Sin fecha";
+  const [y, m, d] = fecha.split("-").map(Number);
+  return `${d} ${MESES[m - 1]} ${y}`;
+};
+const partes = (iso) => {
+  const p = new Intl.DateTimeFormat("en-CA", { timeZone: ZONA, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).formatToParts(new Date(iso)).reduce((acc, x) => ({ ...acc, [x.type]: x.value }), {});
+  return { fecha: `${p.year}-${p.month}-${p.day}`, hora: `${p.hour}:${p.minute}` };
+};
+const formatFechaHora = (iso) => {
+  const { fecha, hora } = partes(iso);
+  return `${formatFecha(fecha)} · ${hora.replace(/^0/, "")}`;
+};
+const fromMexicoLocal = (fecha, hora) => (/* @__PURE__ */ new Date(`${fecha}T${hora}:00${OFFSET}`)).toISOString();
+const toMexicoLocal = (iso) => partes(iso);
+const BASE = "/strapi-content-generator-gemini";
+const GENERATE_TIMEOUT_MS = 24e4;
+const errorMessage = (err, fallback) => {
+  const message = err?.response?.data?.error?.message;
+  return typeof message === "string" && message ? message : fallback;
+};
+const createArticlesApi = (client) => ({
+  async list() {
+    const { data } = await client.get(`${BASE}/articles`);
+    return data.articles;
+  },
+  async detail(documentId) {
+    const { data } = await client.get(`${BASE}/articles/${documentId}`);
+    return data;
+  },
+  async generate(body) {
+    const signal = AbortSignal.timeout(GENERATE_TIMEOUT_MS);
+    const { data } = await client.post(`${BASE}/articles/generate`, body, { signal });
+    return data.documentId;
+  },
+  async enrich(texto) {
+    const { data } = await client.post(`${BASE}/articles/enrich`, { texto });
+    return data.texto;
+  },
+  async basePrompt() {
+    const { data } = await client.get(`${BASE}/articles/base-prompt`);
+    return data;
+  },
+  async saveBasePrompt(prompt) {
+    const { data } = await client.put(`${BASE}/articles/base-prompt`, { prompt });
+    return data;
+  },
+  async resetBasePrompt() {
+    const { data } = await client.del(`${BASE}/articles/base-prompt`);
+    return data;
+  },
+  async setImage(documentId, fileId) {
+    const { data } = await client.put(`${BASE}/articles/${documentId}/image`, { fileId });
+    return data;
+  },
+  async publish(documentId) {
+    const { data } = await client.post(`${BASE}/articles/${documentId}/publish`, {});
+    return data;
+  },
+  async schedule(documentId, at) {
+    const { data } = await client.post(`${BASE}/articles/${documentId}/schedule`, { at });
+    return data;
+  },
+  async unschedule(documentId) {
+    const { data } = await client.del(`${BASE}/articles/${documentId}/schedule`);
+    return data;
+  },
+  async categories() {
+    const { data } = await client.get(`${BASE}/categories`);
+    return (data ?? []).map((c) => ({ id: c.documentId, nombre: c.categoria }));
+  },
+  /** Compartir en LinkedIn o Facebook con el texto escrito en el panel (vacío → el predeterminado). */
+  async share(documentId, red, mensaje) {
+    await client.post(`${BASE}/publish-${red}`, { articleId: documentId, mensaje });
+  }
+});
+const useArticlesApi = () => {
+  const { get, post, put, del } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  return react.useMemo(() => {
+    const api = createArticlesApi({ get, post, put, del });
+    const notify = (type, message) => toggleNotification({ type, message });
+    return { api, notify };
+  }, [get, post, put, del, toggleNotification]);
+};
+const ESTADO$1 = {
+  borrador: { label: "Borrador", variant: "warning" },
+  programado: { label: "Programado", variant: "secondary" },
+  publicado: { label: "Publicado", variant: "success" }
+};
+const articlePath = (documentId) => `/plugins/${index.PLUGIN_ID}/articles/${documentId}`;
+const NEW_ARTICLE_PATH = `/plugins/${index.PLUGIN_ID}/generate-content`;
+const contentManagerUrl$1 = (documentId) => `/admin/content-manager/collection-types/api::articulo.articulo/${documentId}`;
+const fechaDe = (r) => r.programadaPara && r.estado === "programado" ? formatFechaHora(r.programadaPara) : formatFecha(r.fechaPublicacion);
+const Redes = ({ r }) => {
+  if (!r.linkedInPostId && !r.facebookPostId) return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: "—" });
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, wrap: "wrap", children: [
+    r.linkedInPostId && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: `https://www.linkedin.com/feed/update/${r.linkedInPostId}`, isExternal: true, endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}), children: "LinkedIn" }),
+    r.facebookPostId && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: `https://www.facebook.com/${r.facebookPostId}`, isExternal: true, endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}), children: "Facebook" })
+  ] });
+};
+const ArticlesPage = () => {
+  const { api, notify } = useArticlesApi();
+  const navigate = reactRouterDom.useNavigate();
+  const [rows, setRows] = react.useState(null);
+  const [filtro, setFiltro] = react.useState("todos");
+  const [busqueda, setBusqueda] = react.useState("");
+  react.useEffect(() => {
+    let alive = true;
+    api.list().then(
+      (list) => alive && setRows(list),
+      () => {
+        if (!alive) return;
+        setRows([]);
+        notify("danger", "No se pudieron cargar los artículos.");
+      }
+    );
+    return () => {
+      alive = false;
+    };
+  }, [api, notify]);
+  const visibles = react.useMemo(() => {
+    const test = FILTROS.find((f) => f.id === filtro)?.test ?? (() => true);
+    const q = busqueda.trim().toLowerCase();
+    return (rows ?? []).filter((r) => test(r) && (!q || r.titulo.toLowerCase().includes(q)));
+  }, [rows, filtro, busqueda]);
+  const abrir = (r) => navigate(articlePath(r.documentId));
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, paddingTop: 10, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", gap: 4, wrap: "wrap", marginBottom: 8, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: "Generador de contenido" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: "Artículos del blog y qué le falta a cada uno para publicarse." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { size: "L", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), onClick: () => navigate(NEW_ARTICLE_PATH), children: "Generar artículo" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", gap: 4, wrap: "wrap", marginBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", role: "group", "aria-label": "Filtrar artículos", children: FILTROS.map((f) => {
+        const on = f.id === filtro;
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: on ? "secondary" : "tertiary", "aria-pressed": on, onClick: () => setFiltro(f.id), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+          f.label,
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { active: on, children: (rows ?? []).filter(f.test).length })
+        ] }) }, f.id);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "0 1 320px", minWidth: 220 }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { "aria-label": "Buscar por título", placeholder: "Buscar por título", startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}), value: busqueda, onChange: (e) => setBusqueda(e.target.value) }) })
+    ] }),
+    rows === null ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 10, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Cargando artículos…" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 7, rowCount: visibles.length + 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Artículo" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Estado" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Imagen" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Publicación" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Compartido en" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: "Acción" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { children: "Editar" }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: visibles.map((r) => {
+          const accion = nextAction(r);
+          return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { style: { maxWidth: 420, whiteSpace: "normal" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextButton, { onClick: () => abrir(r), style: { textAlign: "left", whiteSpace: "normal", height: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", textColor: "neutral800", style: { whiteSpace: "normal", overflowWrap: "anywhere" }, children: r.titulo }) }),
+              r.categoria && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: r.categoria })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: ESTADO$1[r.estado].variant, children: ESTADO$1[r.estado].label }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: r.imagen ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "success", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { width: 10, height: 10 }),
+              "Lista"
+            ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: "Falta" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral700", style: { whiteSpace: "nowrap" }, children: fechaDe(r) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(Redes, { r }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: accion.variant, onClick: () => abrir(r), children: accion.label }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: `Editar «${r.titulo}» en el Content Manager`, variant: "ghost", tag: "a", href: contentManagerUrl$1(r.documentId), children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}) }) })
+          ] }, r.documentId);
+        }) })
+      ] }),
+      visibles.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 2, padding: 10, background: "neutral0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "p", children: "Nada por aquí" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: rows.length ? "Ningún artículo cumple este filtro." : "Aún no hay artículos. Genera el primero." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: `${visibles.length} de ${rows.length} artículos` }) })
+    ] })
+  ] });
+};
+const POST_MAX = 3e3;
+const hashtags = (keywords) => keywords.map((k) => k.trim().replace(/\s+/g, "").replace(/[^\p{L}\p{N}_]/gu, "")).filter(Boolean).map((k) => `#${k}`).join(" ");
+const defaultPostText = ({ titulo, descripcion, keywords }, red) => [red === "facebook" ? titulo : "", descripcion, hashtags(keywords)].filter(Boolean).join("\n\n");
+const DOMINIO = "interware.com.mx";
+const Texto = ({ mensaje }) => /* @__PURE__ */ jsxRuntime.jsx(
+  designSystem.Typography,
+  {
+    tag: "p",
+    textColor: "neutral800",
+    style: { whiteSpace: "pre-wrap", overflowWrap: "anywhere", lineHeight: 1.5 },
+    children: mensaje.split(/(#[\p{L}\p{N}_]+)/u).map(
+      (parte, i) => parte.startsWith("#") ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { tag: "span", textColor: "primary600", fontWeight: "semiBold", "data-hashtag": "", children: parte }, i) : parte
+    )
+  }
+);
+const SharePreview = ({ red, mensaje, article }) => {
+  const nombre = red === "linkedin" ? "LinkedIn" : "Facebook";
+  const vacio = !mensaje.trim();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Box,
+    {
+      tag: "section",
+      "aria-label": `Vista previa en ${nombre}`,
+      background: "neutral0",
+      hasRadius: true,
+      borderColor: "neutral200",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      overflow: "hidden",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", padding: 4, paddingBottom: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Flex,
+            {
+              justifyContent: "center",
+              alignItems: "center",
+              background: "neutral800",
+              hasRadius: true,
+              style: { width: 40, height: 40, flex: "none" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral0", fontWeight: "bold", children: "IW" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", children: "InterWare" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Ahora · Público" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 4, paddingRight: 4, paddingBottom: 3, children: vacio ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "danger600", children: "Escribe el texto de la publicación." }) : /* @__PURE__ */ jsxRuntime.jsx(Texto, { mensaje }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Box,
+          {
+            background: "neutral100",
+            borderColor: "neutral200",
+            borderStyle: "solid",
+            borderWidth: "1px 0 0",
+            children: [
+              article.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: article.imageUrl,
+                  alt: article.imageName ?? "",
+                  style: { display: "block", width: "100%", aspectRatio: "1.91 / 1", maxHeight: 200, objectFit: "cover" }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, padding: 3, children: red === "facebook" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: DOMINIO.toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", children: article.titulo }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, style: { maxWidth: "100%" }, children: article.descripcion })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", children: article.titulo }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: DOMINIO })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const ESTADO = {
+  borrador: { label: "Borrador", variant: "warning" },
+  programado: { label: "Programado", variant: "secondary" },
+  publicado: { label: "Publicado", variant: "success" }
+};
+const REDES = [
+  {
+    id: "linkedin",
+    nombre: "LinkedIn",
+    campo: "linkedInPostId",
+    url: (id) => `https://www.linkedin.com/feed/update/${id}`
+  },
+  {
+    id: "facebook",
+    nombre: "Facebook",
+    campo: "facebookPostId",
+    url: (id) => `https://www.facebook.com/${id}`
+  }
+];
+const SITE_URL = "https://www.interware.com.mx/blog";
+const contentManagerUrl = (documentId) => `/admin/content-manager/collection-types/api::articulo.articulo/${documentId}`;
+const extracto = (html, max = 700) => {
+  const text = (new DOMParser().parseFromString(html, "text/html").body.textContent ?? "").replace(/\s+/g, " ").trim();
+  return text.length > max ? `${text.slice(0, max)}…` : text;
+};
+const manana = () => toMexicoLocal(new Date(Date.now() + 24 * 60 * 60 * 1e3).toISOString()).fecha;
+const Tarjeta = ({
+  titulo,
+  extra,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: titulo }),
+    extra
+  ] }),
+  children
+] }) });
+const Requisito = ({
+  ok,
+  children,
+  accion
+}) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", gap: 3, style: { minHeight: 44 }, children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { color: ok ? "success600" : "warning600", children: ok ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { width: 16, height: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, { width: 16, height: 16 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children })
+  ] }),
+  accion
+] });
+const ArticlePage = () => {
+  const { documentId = "" } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const { api, notify } = useArticlesApi();
+  const [d, setD] = react.useState(null);
+  const [picker, setPicker] = react.useState(false);
+  const [cuando, setCuando] = react.useState("ahora");
+  const [fecha, setFecha] = react.useState(manana);
+  const [hora, setHora] = react.useState("09:00");
+  const [busy, setBusy] = react.useState(null);
+  const [confirmar, setConfirmar] = react.useState(null);
+  const [mensaje, setMensaje] = react.useState("");
+  react.useEffect(() => {
+    let alive = true;
+    api.detail(documentId).then(
+      (x) => alive && setD(x),
+      (err) => notify("danger", errorMessage(err, "No se pudo cargar el artículo."))
+    );
+    return () => {
+      alive = false;
+    };
+  }, [api, notify, documentId]);
+  const texto = react.useMemo(() => d ? extracto(d.content) : "", [d]);
+  const run = async (id, work, ok, fallback) => {
+    setBusy(id);
+    try {
+      setD(await work());
+      notify("success", ok);
+    } catch (err) {
+      notify("danger", errorMessage(err, fallback));
+    } finally {
+      setBusy(null);
+    }
+  };
+  const elegirImagen = (files) => {
+    setPicker(false);
+    if (files[0])
+      void run(
+        "imagen",
+        () => api.setImage(documentId, files[0].id),
+        "Imagen asignada.",
+        "No se pudo asignar la imagen."
+      );
+  };
+  const publicar = () => {
+    if (cuando === "ahora")
+      return run(
+        "publicar",
+        () => api.publish(documentId),
+        "Artículo publicado en el sitio.",
+        "No se pudo publicar."
+      );
+    return run(
+      "publicar",
+      () => api.schedule(documentId, fromMexicoLocal(fecha, hora)),
+      "Publicación programada.",
+      "No se pudo programar."
+    );
+  };
+  const abrirCompartir = (red) => {
+    if (!d) return;
+    setMensaje(
+      defaultPostText({ titulo: d.titulo, descripcion: d.descripcion, keywords: d.keywords }, red)
+    );
+    setConfirmar(red);
+  };
+  const compartir = async (red) => {
+    setConfirmar(null);
+    setBusy(red);
+    try {
+      await api.share(documentId, red, mensaje.trim());
+      setD(await api.detail(documentId));
+      notify("success", `Compartido en ${red === "linkedin" ? "LinkedIn" : "Facebook"}.`);
+    } catch (err) {
+      notify("danger", errorMessage(err, "No se pudo compartir."));
+    } finally {
+      setBusy(null);
+    }
+  };
+  if (!d) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 10, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Cargando artículo…" }) });
+  }
+  const referencias = d.fuentes.filter((f) => f.tipo === "referencia");
+  const encontradas = d.fuentes.filter((f) => f.tipo === "busqueda");
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, paddingTop: 6, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, marginBottom: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          variant: "ghost",
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}),
+          onClick: () => navigate(`/plugins/${index.PLUGIN_ID}`),
+          children: "Volver a artículos"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-end", gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Flex,
+          {
+            direction: "column",
+            alignItems: "flex-start",
+            gap: 2,
+            style: { flex: "1 1 520px", minWidth: 0 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: ESTADO[d.estado].variant, children: ESTADO[d.estado].label }),
+                d.categoria && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: d.categoria }),
+                d.minuteRead && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: `${d.minuteRead} min de lectura` })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: d.titulo })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.LinkButton,
+            {
+              variant: "tertiary",
+              size: "L",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}),
+              href: contentManagerUrl(d.documentId),
+              children: "Editar en el Content Manager"
+            }
+          ),
+          d.estado === "publicado" && d.slug && /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.LinkButton,
+            {
+              variant: "tertiary",
+              size: "L",
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}),
+              href: `${SITE_URL}/${d.slug}`,
+              isExternal: true,
+              children: "Ver en el sitio"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 6, alignItems: "flex-start", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Box,
+        {
+          background: "neutral0",
+          padding: 6,
+          hasRadius: true,
+          shadow: "tableShadow",
+          style: { flex: "999 1 560px", minWidth: 0 },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+            d.imageUrl ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { position: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: d.imageUrl,
+                  alt: d.imageName ?? "",
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    aspectRatio: "16 / 9",
+                    objectFit: "cover",
+                    borderRadius: 4
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { position: "absolute", right: 4, bottom: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: "tertiary",
+                  onClick: () => setPicker(true),
+                  loading: busy === "imagen",
+                  children: "Cambiar imagen"
+                }
+              ) })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                direction: "column",
+                gap: 3,
+                justifyContent: "center",
+                hasRadius: true,
+                background: "neutral100",
+                borderColor: "neutral200",
+                borderStyle: "dashed",
+                borderWidth: "1px",
+                style: { aspectRatio: "16 / 9" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { color: "neutral500", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Image, { width: 32, height: 32 }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: "Sin imagen principal" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Elige una de la biblioteca de Image Studio." }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      variant: "secondary",
+                      size: "L",
+                      onClick: () => setPicker(true),
+                      loading: busy === "imagen",
+                      children: "Elegir imagen"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, paddingLeft: 2, paddingRight: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral700", children: d.descripcion }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral700", style: { lineHeight: 1.65 }, children: texto }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Vista previa del inicio del contenido. El texto completo se edita en el Content Manager." })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, style: { flex: "1 1 340px" }, children: [
+        d.estado === "borrador" && /* @__PURE__ */ jsxRuntime.jsxs(Tarjeta, { titulo: "Para publicar en el sitio", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Requisito, { ok: true, children: "Contenido y SEO" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Requisito,
+            {
+              ok: d.imagen,
+              accion: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: d.imagen ? "tertiary" : "secondary",
+                  onClick: () => setPicker(true),
+                  children: d.imagen ? "Cambiar" : "Elegir imagen"
+                }
+              ),
+              children: "Imagen principal"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "cuando", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "¿Cuándo?" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Radio.Group,
+              {
+                value: cuando,
+                onValueChange: (v) => setCuando(v),
+                "aria-label": "¿Cuándo?",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Radio.Item, { value: "ahora", children: "Publicar ahora" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Radio.Item, { value: "programar", children: "Programar" })
+                ]
+              }
+            )
+          ] }) }),
+          cuando === "programar" ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "fecha", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Fecha" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    type: "date",
+                    value: fecha,
+                    onChange: (e) => setFecha(e.target.value)
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "hora", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Hora" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    type: "time",
+                    value: hora,
+                    onChange: (e) => setHora(e.target.value)
+                  }
+                )
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Hora del centro de México. La fecha de publicación del artículo será la programada." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "La fecha de publicación del artículo será hoy." }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              size: "L",
+              fullWidth: true,
+              disabled: !d.imagen || cuando === "programar" && (!fecha || !hora),
+              loading: busy === "publicar",
+              onClick: publicar,
+              children: cuando === "programar" ? "Programar publicación" : "Publicar en el sitio"
+            }
+          ),
+          !d.imagen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", textAlign: "center", children: "Elige una imagen para poder publicar." })
+        ] }),
+        d.estado === "programado" && d.programadaPara && /* @__PURE__ */ jsxRuntime.jsxs(Tarjeta, { titulo: "Publicación programada", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { color: "secondary600", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Clock, { width: 16, height: 16 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: `Se publicará el ${formatFechaHora(d.programadaPara)}` })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", paddingTop: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                variant: "secondary",
+                loading: busy === "publicar",
+                onClick: () => run(
+                  "publicar",
+                  () => api.publish(documentId),
+                  "Artículo publicado en el sitio.",
+                  "No se pudo publicar."
+                ),
+                children: "Publicar ahora"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                variant: "tertiary",
+                loading: busy === "cancelar",
+                onClick: () => run(
+                  "cancelar",
+                  () => api.unschedule(documentId),
+                  "Programación cancelada.",
+                  "No se pudo cancelar."
+                ),
+                children: "Cancelar programación"
+              }
+            )
+          ] })
+        ] }),
+        d.estado === "publicado" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { titulo: "Publicado en el sitio", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { color: "success600", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { width: 16, height: 16 }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: `Fecha de publicación: ${formatFecha(d.fechaPublicacion)}` })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { titulo: "Compartir en redes", extra: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: "Opcional" }), children: REDES.map((red) => {
+            const postId = d[red.campo];
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: 3,
+                paddingTop: 2,
+                style: { minHeight: 44 },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: red.nombre }),
+                  postId ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: red.url(postId), isExternal: true, endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}), children: `Ver en ${red.nombre}` }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      variant: "tertiary",
+                      "aria-label": `Compartir en ${red.nombre}`,
+                      loading: busy === red.id,
+                      onClick: () => abrirCompartir(red.id),
+                      children: "Compartir"
+                    }
+                  )
+                ]
+              },
+              red.id
+            );
+          }) })
+        ] }),
+        d.fuentes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          Tarjeta,
+          {
+            titulo: "Fuentes",
+            extra: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Verifícalas antes de publicar" }),
+            children: [
+              referencias.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Tus referencias" }),
+                referencias.map((f) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: f.url, isExternal: true, children: f.titulo }, f.url))
+              ] }),
+              encontradas.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, paddingTop: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Encontradas en Google" }),
+                encontradas.map((f) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: f.url, isExternal: true, children: f.titulo }, f.url))
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Tarjeta, { titulo: "SEO", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Meta título" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: d.seo?.metaTitle || "—" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Meta descripción" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: d.seo?.metaDescription || "—" })
+          ] }),
+          d.keywords.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", children: d.keywords.map((k) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: k }, k)) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ImageStudioTabs.LibraryImagePicker,
+      {
+        open: picker,
+        max: 1,
+        title: "Elegir imagen principal",
+        onClose: () => setPicker(false),
+        onPick: elegirImagen,
+        footerStart: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Link, { href: `/admin/${index.STUDIO_PATH}`, isExternal: true, endIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {}), children: "¿No está la que buscas? Créala en Image Studio" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Modal.Root,
+      {
+        open: confirmar !== null,
+        onOpenChange: (open) => !open && setConfirmar(null),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { style: { width: "min(1040px, 94vw)", maxWidth: "min(1040px, 94vw)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: `Compartir en ${confirmar === "facebook" ? "Facebook" : "LinkedIn"}` }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 6, alignItems: "flex-start", wrap: "wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 340px", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Field.Root,
+              {
+                name: "mensaje",
+                hint: "Se publica con el enlace al artículo y su imagen. Una vez publicado no se puede borrar desde aquí.",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "baseline", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Texto de la publicación" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Typography,
+                      {
+                        variant: "pi",
+                        textColor: [...mensaje].length > POST_MAX ? "danger600" : "neutral500",
+                        children: `${[...mensaje].length}/${POST_MAX}`
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Textarea,
+                    {
+                      value: mensaje,
+                      onChange: (e) => setMensaje(e.target.value),
+                      rows: 10
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 340px", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Vista previa" }),
+              confirmar && /* @__PURE__ */ jsxRuntime.jsx(SharePreview, { red: confirmar, mensaje, article: d }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Aproximada: cada red ajusta el diseño y corta el texto largo con «ver más»." })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: () => setConfirmar(null), children: "Cancelar" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                disabled: !mensaje.trim() || [...mensaje].length > POST_MAX,
+                onClick: () => confirmar && compartir(confirmar),
+                children: "Compartir"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+const MAX_URLS = 3;
+const NUEVA = "nueva:";
+const LABELS = { label: "Las instrucciones", empty: "Escribe las instrucciones del artículo." };
+const Panel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 6, hasRadius: true, shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children }) });
+const Punto = ({ children }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { color: "success600", paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { width: 14, height: 14 }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children })
+] });
+const useElapsed = (running) => {
+  const [seconds, setSeconds] = react.useState(0);
+  react.useEffect(() => {
+    if (!running) return setSeconds(0);
+    const t = setInterval(() => setSeconds((s) => s + 1), 1e3);
+    return () => clearInterval(t);
+  }, [running]);
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+};
+const NewArticlePage = () => {
+  const { api, notify } = useArticlesApi();
+  const navigate = reactRouterDom.useNavigate();
+  const [categorias, setCategorias] = react.useState([]);
+  const [categoria, setCategoria] = react.useState();
+  const [titulo, setTitulo] = react.useState("");
+  const [temperatura, setTemperatura] = react.useState(0.5);
+  const [urls, setUrls] = react.useState([]);
+  const [busqueda, setBusqueda] = react.useState(false);
+  const [instrucciones, setInstrucciones] = react.useState("");
+  const [usarBase, setUsarBase] = react.useState(true);
+  const [guardado, setGuardado] = react.useState(null);
+  const [base, setBase] = react.useState("");
+  const [busy, setBusy] = react.useState(null);
+  const elapsed = useElapsed(busy === "generate");
+  const alive = react.useRef(true);
+  react.useEffect(() => {
+    alive.current = true;
+    api.categories().then(
+      (list) => alive.current && setCategorias(list),
+      () => notify("danger", "No se pudieron cargar las categorías.")
+    );
+    api.basePrompt().then(
+      (b) => {
+        if (!alive.current) return;
+        setGuardado(b);
+        setBase(b.prompt);
+      },
+      () => notify("danger", "No se pudo cargar el prompt base.")
+    );
+    return () => {
+      alive.current = false;
+    };
+  }, [api, notify]);
+  const baseEditado = Boolean(guardado) && base.trim() !== guardado?.prompt;
+  const estadoBase = !usarBase ? "sin prompt base (instrucciones tal cual)" : baseEditado ? "editado para este artículo" : guardado?.personalizado ? "personalizado" : "predeterminado";
+  const cambiarBase = async (work, ok) => {
+    setBusy("base");
+    try {
+      const b = await work();
+      if (!alive.current) return;
+      setGuardado(b);
+      setBase(b.prompt);
+      notify("success", ok);
+    } catch (err) {
+      notify("danger", errorMessage(err, "No se pudo actualizar el prompt base."));
+    } finally {
+      if (alive.current) setBusy(null);
+    }
+  };
+  const nueva = categoria?.startsWith(NUEVA) ? categoria.slice(NUEVA.length) : null;
+  const nombreCategoria = nueva ?? categorias.find((c) => c.id === categoria)?.nombre ?? "";
+  const crearCategoria = (value) => {
+    const nombre = value?.trim();
+    if (!nombre) return;
+    const existente = categorias.find((c) => c.nombre.toLowerCase() === nombre.toLowerCase());
+    setCategoria(existente ? existente.id : `${NUEVA}${nombre}`);
+  };
+  const elegirCategoria = (v) => {
+    if (!v) return setCategoria(void 0);
+    if (v.startsWith(NUEVA) || categorias.some((c) => c.id === v)) return setCategoria(v);
+    crearCategoria(v);
+  };
+  const enriquecer = async () => {
+    setBusy("enrich");
+    try {
+      const texto = await api.enrich(instrucciones.trim());
+      if (alive.current) setInstrucciones(texto);
+    } catch (err) {
+      notify("danger", errorMessage(err, "No se pudieron enriquecer las instrucciones."));
+    } finally {
+      if (alive.current) setBusy(null);
+    }
+  };
+  const generar = async (texto) => {
+    if (!categoria) return;
+    const body = {
+      titulo: titulo.trim(),
+      categoria: nueva ? { nueva } : { id: categoria },
+      temperatura,
+      instrucciones: texto,
+      urls: urls.map((u) => u.trim()).filter(Boolean),
+      busqueda,
+      usarPromptBase: usarBase,
+      ...usarBase && baseEditado && base.trim() ? { promptBase: base.trim() } : {}
+    };
+    setBusy("generate");
+    try {
+      const documentId = await api.generate(body);
+      notify("success", "Borrador generado. Elige la imagen y publícalo.");
+      navigate(articlePath(documentId));
+    } catch (err) {
+      notify("danger", errorMessage(err, "No se pudo generar el artículo. Intenta de nuevo."));
+      if (alive.current) setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, paddingTop: 6, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 4, marginBottom: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "ghost", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}), onClick: () => navigate(".."), children: "Volver a artículos" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "baseline", gap: 4, wrap: "wrap", width: "100%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", children: "Nuevo artículo" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Se guarda como borrador. Nada se publica sin tu revisión." })
+      ] })
+    ] }),
+    busy === "generate" ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 8, hasRadius: true, shadow: "tableShadow", style: { width: "100%", maxWidth: 720 }, "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h2", children: "Redactando el artículo" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: busqueda || urls.some(Boolean) ? "Gemini 2.5 Pro está investigando y escribiendo el borrador." : "Gemini 2.5 Pro está escribiendo el borrador con tus datos." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true, children: "Generando" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: `${elapsed} transcurridos` })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, hasRadius: true, borderColor: "neutral150", borderStyle: "solid", borderWidth: "1px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Lo que pediste" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: `Categoría: ${nombreCategoria}${nueva ? " (nueva)" : ""}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: `Creatividad: ${temperatura}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: `Búsqueda de Google: ${busqueda ? "activada" : "no"} · URLs de referencia: ${urls.filter(Boolean).length}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: `Prompt base: ${estadoBase}` })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Si sales de esta pantalla, el borrador aparecerá en Artículos al terminar." })
+    ] }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 6, alignItems: "flex-start", wrap: "wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "999 1 560px", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: "¿De qué trata el artículo?" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 6, alignItems: "flex-start", wrap: "wrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 280px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "titulo", hint: "Opcional. Si lo dejas vacío, Gemini propone uno.", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Título" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { placeholder: "Ej: Las 10 tendencias en IA para 2026", value: titulo, onChange: (e) => setTitulo(e.target.value) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 280px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "categoria", required: true, hint: nueva ? void 0 : "Elige una o escribe para crear una nueva.", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Categoría" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Combobox,
+              {
+                placeholder: "Busca o escribe una nueva",
+                value: categoria,
+                onChange: elegirCategoria,
+                creatable: true,
+                createMessage: (v) => `Crear categoría «${v}»`,
+                onCreateOption: crearCategoria,
+                onClear: () => setCategoria(void 0),
+                children: [
+                  categorias.map((c) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: c.id, children: c.nombre }, c.id)),
+                  nueva && /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: categoria, children: nueva })
+                ]
+              }
+            ),
+            nueva ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", paddingTop: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "primary", children: "Nueva" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Se crea en Categorías al generar el artículo." })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "temperatura", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "baseline", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Creatividad" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: temperatura })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              "aria-label": "Creatividad",
+              min: 0,
+              max: 2,
+              step: 0.05,
+              value: temperatura,
+              onChange: (e) => setTemperatura(Number(e.target.value)),
+              style: { width: "100%" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Más precisa y sobria" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Más creativa y variada" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, hasRadius: true, borderColor: "neutral150", borderStyle: "solid", borderWidth: "1px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", tag: "h3", children: "Fuentes" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "URLs de referencia" }),
+            urls.map((url, i) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  "aria-label": `URL de referencia ${i + 1}`,
+                  type: "url",
+                  placeholder: "https://",
+                  value: url,
+                  onChange: (e) => setUrls((list) => list.map((u, j) => j === i ? e.target.value : u))
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: `Quitar URL ${i + 1}`, variant: "tertiary", onClick: () => setUrls((list) => list.filter((_, j) => j !== i)), children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) })
+            ] }, i)),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", gap: 2, wrap: "wrap", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Hasta 3 páginas: una nota, un caso, una página de servicio. Gemini escribe a partir de ellas." }),
+              urls.length < MAX_URLS && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", size: "S", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), onClick: () => setUrls((list) => [...list, ""]), children: "Agregar URL" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "busqueda", hint: "Usa información actual y muestra las fuentes en la revisión. Tiene un costo adicional por artículo.", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Buscar en Google" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Toggle, { onLabel: "Sí", offLabel: "No", checked: busqueda, onChange: (e) => setBusqueda(e.target.checked) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, hasRadius: true, borderColor: "neutral150", borderStyle: "solid", borderWidth: "1px", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Field.Root,
+            {
+              name: "usarPromptBase",
+              hint: usarBase ? "Persona, tono, reglas y arco narrativo de InterWare. Lo que edites se usa en este artículo." : "Se mandan tus instrucciones tal cual, sin el prompt base.",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Usar prompt base" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Toggle, { onLabel: "Sí", offLabel: "No", checked: usarBase, onChange: (e) => setUsarBase(e.target.checked) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+              ]
+            }
+          ),
+          usarBase && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "promptBase", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Prompt base" }),
+                baseEditado ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "warning", children: "Con cambios sin guardar" }) : guardado?.personalizado && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "primary", children: "Personalizado" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Textarea, { value: base, onChange: (e) => setBase(e.target.value), rows: 14, disabled: !guardado })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", justifyContent: "flex-end", children: [
+              baseEditado && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "ghost", size: "S", disabled: busy !== null, onClick: () => setBase(guardado?.prompt ?? ""), children: "Descartar cambios" }),
+              guardado?.personalizado && !baseEditado && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", size: "S", loading: busy === "base", disabled: busy !== null, onClick: () => cambiarBase(() => api.resetBasePrompt(), "Se restauró el prompt base original."), children: "Restaurar el original" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: "tertiary",
+                  size: "S",
+                  loading: busy === "base",
+                  disabled: busy !== null || !baseEditado || !base.trim(),
+                  onClick: () => cambiarBase(() => api.saveBasePrompt(base.trim()), "Prompt base guardado como predeterminado."),
+                  children: "Guardar como predeterminado"
+                }
+              )
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ImageStudioTabs.PromptComposer,
+          {
+            label: "Instrucciones",
+            value: instrucciones,
+            onChange: setInstrucciones,
+            onSubmit: generar,
+            labels: LABELS,
+            placeholder: "Tema, público, puntos que debe cubrir, tono, llamada a la acción…",
+            actionLabel: "Generar artículo",
+            actionIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkle, {}),
+            loading: false,
+            disabled: !categoria || busy !== null,
+            hint: categoria ? "«Enriquecer» convierte una idea corta en instrucciones completas. ⌘/Ctrl + Enter también genera." : "Elige una categoría para generar.",
+            tools: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", size: "S", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Sparkle, {}), loading: busy === "enrich", disabled: busy !== null || !instrucciones.trim(), onClick: enriquecer, children: "Enriquecer instrucciones" })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 300px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", tag: "h2", children: "Qué vas a obtener" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Punto, { children: "Título, descripción y contenido completo" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Punto, { children: "Datos SEO y palabras clave" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Punto, { children: "Las fuentes consultadas, para verificarlas antes de publicar" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Punto, { children: "Un borrador listo para elegir imagen y publicar" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: "Modelo" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "Gemini 2.5 Pro · Vertex AI" })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+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"),
+  referenceImages: Yup__namespace.array().of(
+    Yup__namespace.object().shape({
+      id: Yup__namespace.number().required(),
+      file: Yup__namespace.mixed().optional(),
+      previewUrl: Yup__namespace.string().optional()
+    })
+  ).max(3, "Se permiten máximo 3 imágenes de referencia por escena").optional()
+});
+const validationSchema = Yup__namespace.object().shape({
+  aspectRatio: Yup__namespace.string().oneOf(["16:9", "9:16", "1:1"], "Aspect ratio no válido").required("El aspect ratio es obligatorio"),
+  scenes: Yup__namespace.array().of(sceneSchema).min(1, "Debe haber al menos una escena").max(20, "No se permiten más de 20 escenas")
+});
+const initialValues = {
+  aspectRatio: "16:9",
+  scenes: [
+    {
+      prompt: ``,
+      durationSeconds: 8,
+      narrationText: ``,
+      referenceImages: []
+    }
+  ]
+};
+const Form = ({ onSubmit }) => {
+  const formik$1 = formik.useFormik({
+    initialValues,
+    validationSchema,
+    validateOnMount: true,
+    onSubmit
+  });
+  console.log("🚀 ~ Form ~ formik:", formik$1.errors);
+  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: "aspectRatio", width: "100%", required: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Relación de aspecto" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        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: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "16:9", children: "16:9" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "9:16", children: "9:16" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: "1:1", children: "1:1" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, { children: formik$1.errors.aspectRatio })
+    ] }) }),
+    formik$1.values.scenes.map((scene, index2) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral100", padding: 4, hasRadius: true, width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+          "Escena ",
+          index2 + 1
+        ] }),
+        formik$1.values.scenes.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "danger-light",
+            onClick: () => {
+              const updatedScenes = [...formik$1.values.scenes];
+              updatedScenes.splice(index2, 1);
+              formik$1.setFieldValue("scenes", updatedScenes);
+            },
+            children: "Eliminar Escena"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: `scenes.${index2}.prompt`, width: "100%", required: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Prompt de la escena" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Textarea,
+            {
+              name: `scenes.${index2}.prompt`,
+              placeholder: "Describe visualmente esta escena",
+              onChange: formik$1.handleChange,
+              onBlur: formik$1.handleBlur,
+              value: formik$1.values.scenes[index2].prompt,
+              rows: 6
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: `scenes.${index2}.durationSeconds`, width: "100%", required: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Duración (segundos)" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Combobox,
+            {
+              name: `scenes.${index2}.durationSeconds`,
+              onChange: (value) => formik$1.setFieldValue(`scenes.${index2}.durationSeconds`, value),
+              onBlur: formik$1.handleBlur,
+              value: formik$1.values.scenes[index2].durationSeconds,
+              onClear: () => formik$1.setFieldValue(`scenes.${index2}.durationSeconds`, ""),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: 4, children: "4" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: 6, children: "6" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: 8, children: "8" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { id: `scenes.${index2}.referenceImages`, 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: [
+            scene.referenceImages.map((image, imgIndex) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral200", padding: 2, hasRadius: true, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+              image.previewUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.previewUrl, alt: "preview", style: { width: 50, height: 50, objectFit: "cover" } }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 50, height: 50, backgroundColor: "#ccc" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.IconButton,
+                {
+                  onClick: () => {
+                    const imageToRemove = scene.referenceImages[imgIndex];
+                    if (imageToRemove.previewUrl) {
+                      URL.revokeObjectURL(imageToRemove.previewUrl);
+                    }
+                    const updatedImages = [...scene.referenceImages];
+                    updatedImages.splice(imgIndex, 1);
+                    formik$1.setFieldValue(`scenes.${index2}.referenceImages`, updatedImages);
+                  },
+                  label: "Eliminar imagen",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                }
+              )
+            ] }) }, image.id)),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                type: "button",
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
+                variant: "secondary",
+                fullWidth: true,
+                onClick: () => {
+                  const input = document.createElement("input");
+                  input.type = "file";
+                  input.accept = "image/*";
+                  input.onchange = (e) => {
+                    const selectedFile = e.target.files?.[0];
+                    if (!selectedFile) return;
+                    const newImage = {
+                      id: Date.now(),
+                      file: selectedFile,
+                      previewUrl: URL.createObjectURL(selectedFile)
+                    };
+                    const newImages = [...scene.referenceImages, newImage];
+                    formik$1.setFieldValue(`scenes.${index2}.referenceImages`, newImages.slice(0, 5));
+                  };
+                  input.click();
+                },
+                disabled: scene.referenceImages.length >= 5,
+                children: "Añadir imagen de referencia"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }, index2) }, `scene-${index2}`)),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { m: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Button,
+      {
+        type: "button",
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, {}),
+        variant: "secondary",
+        onClick: () => {
+          formik$1.setFieldValue("scenes", [
+            ...formik$1.values.scenes,
+            { prompt: "", durationSeconds: 6, narrationText: "", referenceImages: [] }
+          ]);
+        },
+        fullWidth: true,
+        children: "Añadir Escena"
+      }
+    ) }),
+    /* @__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 Video"
+      }
+    ) }) })
+  ] }) }) });
+};
+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();
+  const { formatMessage } = reactIntl.useIntl();
+  const handleSubmit = async (values, { setSubmitting }) => {
+    try {
+      const formData = new FormData();
+      formData.append("aspectRatio", values.aspectRatio);
+      values.scenes.forEach((scene, index2) => {
+        formData.append(`scenes[${index2}][prompt]`, scene.prompt);
+        formData.append(`scenes[${index2}][durationSeconds]`, scene.durationSeconds.toString());
+        formData.append(`scenes[${index2}][narrationText]`, scene.narrationText || "");
+        scene.referenceImages.forEach((image, imgIndex) => {
+          if (image.file) {
+            formData.append(`scenes[${index2}][referenceImages][${imgIndex}]`, image.file);
+          }
+        });
+      });
+      const response = await generateVideoWithScenes(formData);
+      console.log("🚀 ~ handleSubmit ~ response:", response);
+      toggleNotification({
+        type: "success",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.success`,
+          defaultMessage: "Video generado con éxito"
+        })
+      });
+    } catch (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: `${index.PLUGIN_ID}.config.load.error`,
+          defaultMessage: "Ocurrió un error al generar el video"
+        })
+      });
+    } 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 video 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, { onSubmit: handleSubmit }) })
+    ] })
+  ] });
+};
+const GenerateVideo = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: "Generar video con IA" }),
+    /* @__PURE__ */ jsxRuntime.jsx(GenerateVideoContainer, {})
+  ] });
+};
+const Screen = ({ title, children }) => /* @__PURE__ */ jsxRuntime.jsxs(admin.Page.Main, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Title, { children: title }),
+  children
+] });
+const App = () => {
+  const { allowedActions, isLoading } = admin.useRBAC(index.pluginPermissions);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Protect, { permissions: [...index.pluginPermissions.access], children: /* @__PURE__ */ jsxRuntime.jsx(PluginProviders.PluginProviders, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(Screen, { title: "Generador de contenido", children: /* @__PURE__ */ jsxRuntime.jsx(ArticlesPage, {}) }) }),
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/generate-content", element: /* @__PURE__ */ jsxRuntime.jsx(Screen, { title: "Nuevo artículo", children: /* @__PURE__ */ jsxRuntime.jsx(NewArticlePage, {}) }) }),
+    allowedActions.canAccess && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/articles/:documentId", element: /* @__PURE__ */ jsxRuntime.jsx(Screen, { title: "Artículo", children: /* @__PURE__ */ jsxRuntime.jsx(ArticlePage, {}) }) }),
+    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;