@interware/content-generator 0.6.1 → 0.7.0

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

@@ -1,652 +1,742 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Flex, Box, Typography, lightTheme, Modal, Checkbox, Loader, Button, Grid, 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, NumberInput, Divider, Textarea, Tabs } from "@strapi/design-system";
 import { useLocation, Navigate, useSearchParams } from "react-router-dom";
-import { S as STUDIO_PATH } from "./index-BKigRXm3.mjs";
-import { useState, useRef, useEffect, useMemo, useId, useReducer, useCallback, useSyncExternalStore, useLayoutEffect, memo, forwardRef } from "react";
-import { Magic, Pencil, ChevronRight, Folder, 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 { S as STUDIO_PATH } from "./index-D67xWUPz.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 { useTheme } from "styled-components";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { toPng, toSvg, toJpeg } from "html-to-image";
 import qrcode from "qrcode-generator";
-const SegmentedSwitch = ({ label, options, value, onChange }) => /* @__PURE__ */ jsx(Flex, { role: "radiogroup", "aria-label": label, gap: 1, padding: 1, background: "neutral150", hasRadius: true, children: options.map(({ value: option, label: text, Icon }) => {
-  const on = value === option;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      tag: "button",
-      type: "button",
-      role: "radio",
-      "aria-checked": on,
-      onClick: () => onChange(option),
-      color: on ? "neutral800" : "neutral600",
-      background: on ? "neutral0" : "transparent",
-      shadow: on ? "filterShadow" : void 0,
-      hasRadius: true,
-      paddingLeft: 4,
-      paddingRight: 4,
-      style: { height: 36, border: 0, cursor: "pointer" },
-      children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Icon, { width: 16, height: 16 }),
-        /* @__PURE__ */ jsx(Typography, { fontWeight: on ? "bold" : "regular", textColor: on ? "neutral800" : "neutral600", children: text })
-      ] })
-    },
-    option
-  );
-}) });
-const CHECKERBOARD = "repeating-conic-gradient(#e6e6ec 0% 25%, #ffffff 0% 50%) 50% / 16px 16px";
-const useThemeColors = () => {
-  const theme = useTheme();
-  return theme?.colors ?? lightTheme.colors;
-};
-const RangeField = ({ label, value, min, max, step = 1, onChange, format = String }) => {
-  const c = useThemeColors();
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
-      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: format(value) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "range",
-        "aria-label": label,
-        min,
-        max,
-        step,
-        value,
-        onChange: (e) => onChange(Number(e.target.value)),
-        style: { width: "100%", accentColor: c.primary600 }
-      }
-    )
-  ] });
-};
-const SOFTNESS = 0.06;
-const MAX_DISTANCE = Math.sqrt(3) * 255;
-const colorKeyAlpha = (rgba, width, height, points, tolerance, { contiguous = true } = {}) => {
-  const alpha = new Uint8ClampedArray(width * height).fill(255);
-  const toAlpha = (d) => d <= tolerance ? 0 : d <= tolerance + SOFTNESS ? Math.round(255 * (d - tolerance) / SOFTNESS) : 255;
-  const inside = points.filter(({ x, y }) => x >= 0 && y >= 0 && x < width && y < height);
-  if (!contiguous) {
-    const seeds = inside.map(({ x, y }) => 4 * (Math.floor(y) * width + Math.floor(x))).map((s) => [rgba[s], rgba[s + 1], rgba[s + 2]]);
-    for (let i = 0; i < alpha.length; i++) {
-      for (const [r, g, b] of seeds) {
-        const dr = rgba[4 * i] - r;
-        const dg = rgba[4 * i + 1] - g;
-        const db = rgba[4 * i + 2] - b;
-        alpha[i] = Math.min(alpha[i], toAlpha(Math.sqrt(dr * dr + dg * dg + db * db) / MAX_DISTANCE));
-      }
-    }
-    return alpha;
+const flattenTree = (tree, parentId = null, depth = 0) => tree.flatMap((f) => [{ id: f.id, name: f.name, parentId, depth }, ...flattenTree(f.children ?? [], f.id, depth + 1)]);
+const pathTo = (tree, id) => {
+  if (id === null) return [];
+  for (const f of tree) {
+    if (f.id === id) return [f];
+    const sub = pathTo(f.children ?? [], id);
+    if (sub.length) return [f, ...sub];
   }
-  const seen = new Int32Array(width * height);
-  const stack = [];
-  inside.forEach(({ x, y }, n) => {
-    const mark = n + 1;
-    const start = Math.floor(y) * width + Math.floor(x);
-    const [r, g, b] = [rgba[4 * start], rgba[4 * start + 1], rgba[4 * start + 2]];
-    stack.push(start);
-    seen[start] = mark;
-    while (stack.length) {
-      const i = stack.pop();
-      const dr = rgba[4 * i] - r;
-      const dg = rgba[4 * i + 1] - g;
-      const db = rgba[4 * i + 2] - b;
-      const d = Math.sqrt(dr * dr + dg * dg + db * db) / MAX_DISTANCE;
-      if (d > tolerance + SOFTNESS) continue;
-      alpha[i] = Math.min(alpha[i], toAlpha(d));
-      if (d > tolerance) continue;
-      const px = i % width;
-      const visit = (j) => {
-        if (j < 0 || j >= alpha.length || seen[j] === mark) return;
-        seen[j] = mark;
-        stack.push(j);
-      };
-      if (px > 0) visit(i - 1);
-      if (px < width - 1) visit(i + 1);
-      visit(i - width);
-      visit(i + width);
-    }
-  });
-  return alpha;
-};
-const applyKeyAlpha = (rgba, alpha) => {
-  const out = new Uint8ClampedArray(rgba);
-  for (let i = 0; i < alpha.length; i++) out[4 * i + 3] = Math.min(out[4 * i + 3], alpha[i]);
-  return out;
-};
-const canvas = (width, height) => {
-  const c = document.createElement("canvas");
-  c.width = width;
-  c.height = height;
-  const ctx = c.getContext("2d", { willReadFrequently: true });
-  if (!ctx) throw new Error("Canvas 2D no disponible");
-  ctx.imageSmoothingQuality = "high";
-  return { c, ctx };
+  return [];
 };
-const loadImage = (src) => new Promise((resolve, reject) => {
-  const img = new Image();
-  img.onload = () => resolve(img);
-  img.onerror = () => reject(new Error("No se pudo leer la imagen"));
-  img.src = src;
-});
-const loadPixels = async (src) => {
-  const img = await loadImage(src);
-  const { ctx } = canvas(img.naturalWidth, img.naturalHeight);
-  ctx.drawImage(img, 0, 0);
-  return { width: img.naturalWidth, height: img.naturalHeight, data: ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight).data };
+const childrenOf = (tree, id) => id === null ? tree : pathTo(tree, id).at(-1)?.children ?? [];
+const cleanFolderName = (name) => name.trim().replace(/\s*\/\s*/g, " - ");
+const nameTaken = (tree, parentId, name) => {
+  const target = cleanFolderName(name).toLocaleLowerCase("es");
+  return childrenOf(tree, parentId).some((f) => f.name.toLocaleLowerCase("es") === target);
 };
-const drawPixels = (target, width, height, data) => {
-  target.width = width;
-  target.height = height;
-  target.getContext("2d")?.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
+const safeDeletePlan = (tree, folderId, fileIds) => {
+  const path = pathTo(tree, folderId);
+  const folder = path.at(-1);
+  if (!folder) return null;
+  const folderIds = (folder.children ?? []).map((c) => c.id);
+  const move = fileIds.length || folderIds.length ? { destinationFolderId: path.length > 1 ? path[path.length - 2].id : null, fileIds, folderIds } : null;
+  return { move, remove: [folderId] };
 };
-const pixelsToDataUrl = (width, height, data) => {
-  const { c, ctx } = canvas(width, height);
-  ctx.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
-  return c.toDataURL("image/png");
+const noBackgroundName = (name) => `${name.replace(/\.[a-z0-9]+$/i, "")} (sin fondo).png`;
+const IMAGE_MIMES = ["image/png", "image/jpeg", "image/webp"];
+const fileForm = (fileInfo, file) => {
+  const fd = new FormData();
+  if (file) fd.append("files", file);
+  fd.append("fileInfo", JSON.stringify(fileInfo));
+  return fd;
 };
-const INPUT_SIZE = 1024;
-const maskToRgba = (mask, width, height) => {
-  const out = new Uint8ClampedArray(4 * width * height);
-  for (let i = 0; i < width * height; i++) {
-    const v = mask[i] * 255;
-    out[4 * i] = out[4 * i + 1] = out[4 * i + 2] = v;
-    out[4 * i + 3] = 255;
-  }
-  return out;
+const createUploadApi = (client) => {
+  const api = {
+    async getTree() {
+      const { data } = await client.get("/upload/folder-structure");
+      return data?.data ?? [];
+    },
+    async getCounts() {
+      const { data } = await client.get("/upload/folders", {
+        params: { populate: { files: { count: true }, children: { count: true } } }
+      });
+      return Object.fromEntries(
+        (data?.data ?? []).map((f) => [
+          f.id,
+          { files: f.files?.count ?? 0, children: f.children?.count ?? 0 }
+        ])
+      );
+    },
+    /** Archivos de una carpeta; con `mimes`, solo esos tipos (el selector de imágenes, S4.13). */
+    async listFiles(folderId, { mimes } = {}) {
+      const byFolder = { folder: { id: folderId === null ? { $null: true } : { $eq: folderId } } };
+      const { data } = await client.get("/upload/files", {
+        params: {
+          page: 1,
+          pageSize: 100,
+          sort: "updatedAt:DESC",
+          filters: { $and: mimes?.length ? [byFolder, { mime: { $in: mimes } }] : [byFolder] }
+        }
+      });
+      return data?.results ?? [];
+    },
+    /** Las más recientes de varias carpetas a la vez («Recientes» del Generador, S4.14). */
+    async listRecent({ folderIds, mimes, limit }) {
+      const inFolders = { folder: { id: { $in: folderIds } } };
+      const { data } = await client.get("/upload/files", {
+        params: {
+          page: 1,
+          pageSize: limit,
+          sort: "updatedAt:DESC",
+          filters: { $and: mimes?.length ? [inFolders, { mime: { $in: mimes } }] : [inFolders] }
+        }
+      });
+      return data?.results ?? [];
+    },
+    async createFolder(name, parent) {
+      const { data } = await client.post("/upload/folders", { name, parent });
+      return data?.data;
+    },
+    async renameFolder(id, name, parent) {
+      await client.put(`/upload/folders/${id}`, { name, parent });
+    },
+    async uploadFiles(files, folderId) {
+      const uploaded = [];
+      for (const file of files) {
+        const { data } = await client.post("/upload", fileForm({ name: file.name, folder: folderId }, file));
+        uploaded.push(...Array.isArray(data) ? data : [data]);
+      }
+      return uploaded;
+    },
+    async renameFile(file, name) {
+      await client.post(
+        `/upload?id=${file.id}`,
+        fileForm({ name, folder: file.folder?.id ?? null, alternativeText: file.alternativeText, caption: file.caption })
+      );
+    },
+    async replaceFile(id, file) {
+      await client.post(`/upload?id=${id}`, fileForm({ name: file.name }, file));
+    },
+    async move({ fileIds = [], folderIds = [] }, destinationFolderId) {
+      await client.post("/upload/actions/bulk-move", { destinationFolderId, fileIds, folderIds });
+    },
+    async remove({ fileIds = [], folderIds = [] }) {
+      await client.post("/upload/actions/bulk-delete", { fileIds, folderIds });
+    },
+    /** Elimina una carpeta dejando sus archivos y subcarpetas en la carpeta superior (D1). */
+    deleteFolderSafely: (tree, folderId) => deleteFolderSafely(api, tree, folderId)
+  };
+  return api;
 };
-const applyAlpha = (rgba, maskRgba) => {
-  for (let i = 3; i < rgba.length; i += 4) rgba[i] = maskRgba[i - 3];
+const deleteFolderSafely = async (api, tree, folderId) => {
+  const files = await api.listFiles(folderId);
+  const plan = safeDeletePlan(tree, folderId, files.map((f) => f.id));
+  if (!plan) return;
+  if (plan.move) await api.move(plan.move, plan.move.destinationFolderId);
+  await api.remove({ folderIds: plan.remove });
 };
-const WORKER_URL = "/ort/background-worker.mjs";
-const RUN_TIMEOUT_MS = 12e4;
-const TIMEOUT_MESSAGE = "Quitar fondo tardó demasiado. Intenta de nuevo.";
-class RemoveBackgroundTimeout extends Error {
-  constructor() {
-    super(TIMEOUT_MESSAGE);
-  }
-}
-const removeBackgroundError = (err) => err instanceof RemoveBackgroundTimeout ? TIMEOUT_MESSAGE : "No se pudo quitar el fondo.";
-let loading = null;
-const loadModel = (onStatus) => {
-  if (!loading) {
-    const current = (async () => {
-      const worker = new Worker(WORKER_URL, { type: "module" });
-      const pending = /* @__PURE__ */ new Map();
-      let seq2 = 0;
-      let status2 = onStatus;
-      const discard = (err) => {
-        worker.terminate();
-        if (loading === current) loading = null;
-        pending.forEach(({ reject }) => reject(err));
-        pending.clear();
-      };
-      await new Promise((resolve, reject) => {
-        worker.onmessage = (e) => {
-          const m = e.data;
-          if (m.type === "status") status2?.(m.status);
-          else if (m.type === "ready") resolve();
-          else if (m.type === "mask") {
-            pending.get(m.id)?.resolve(new Float32Array(m.mask));
-            pending.delete(m.id);
-          } else if (m.type === "error") {
-            const err = new Error(m.message ?? "Error del modelo");
-            if (m.id === void 0) reject(err);
-            else {
-              pending.get(m.id)?.reject(err);
-              pending.delete(m.id);
-              discard(err);
-            }
-          }
-        };
-        worker.onerror = () => reject(new Error("El worker de «Quitar fondo» no cargó."));
-        worker.postMessage({ type: "load" });
-      }).catch((err) => {
-        discard(err);
-        throw err;
-      });
-      status2 = void 0;
-      return {
-        run: (rgba) => new Promise((resolve, reject) => {
-          const id = ++seq2;
-          const timer = setTimeout(() => {
-            pending.get(id)?.reject(new RemoveBackgroundTimeout());
-            pending.delete(id);
-            discard(new RemoveBackgroundTimeout());
-          }, RUN_TIMEOUT_MS);
-          pending.set(id, {
-            resolve: (m) => {
-              clearTimeout(timer);
-              resolve(m);
-            },
-            reject: (e) => {
-              clearTimeout(timer);
-              reject(e);
-            }
-          });
-          worker.postMessage({ type: "run", id, rgba: rgba.buffer }, [rgba.buffer]);
-        })
-      };
-    })();
-    loading = current;
-    current.catch(() => {
-      if (loading === current) loading = null;
+const STUDIO_ROOT = "Generated";
+const ROOT_LABEL = "/";
+const scopeToFolder = (base, rootName) => {
+  let root = null;
+  const rootId = () => {
+    root ??= base.getTree().then(async (tree) => tree.find((f) => f.name === rootName)?.id ?? (await base.createFolder(rootName, null)).id);
+    root.catch(() => {
+      root = null;
     });
-  }
-  return loading;
+    return root;
+  };
+  const at = async (id) => id ?? rootId();
+  const scoped = {
+    ...base,
+    async getTree() {
+      const id = await rootId();
+      return (await base.getTree()).find((f) => f.id === id)?.children ?? [];
+    },
+    listFiles: async (folderId, options) => base.listFiles(await at(folderId), options),
+    // Toda la biblioteca del Estudio: la raíz y sus subcarpetas; las carpetas pedidas se ignoran.
+    listRecent: async (options) => {
+      const id = await rootId();
+      const children = (await base.getTree()).find((f) => f.id === id)?.children ?? [];
+      return base.listRecent({ ...options, folderIds: [id, ...flattenTree(children).map((f) => f.id)] });
+    },
+    createFolder: async (name, parent) => base.createFolder(name, await at(parent)),
+    renameFolder: async (id, name, parent) => base.renameFolder(id, name, await at(parent)),
+    uploadFiles: async (files, folderId) => base.uploadFiles(files, await at(folderId)),
+    move: async (selection, destination) => base.move(selection, await at(destination)),
+    deleteFolderSafely: (tree, folderId) => deleteFolderSafely(scoped, tree, folderId)
+  };
+  return scoped;
 };
-const removeBackground = async (src, onStatus) => {
-  const [model, img] = await Promise.all([loadModel(onStatus), loadImage(src)]);
-  onStatus?.("Quitando fondo…");
-  const W = img.naturalWidth;
-  const H = img.naturalHeight;
-  const w = INPUT_SIZE;
-  const h = INPUT_SIZE;
-  const small = canvas(w, h);
-  small.ctx.drawImage(img, 0, 0, w, h);
-  const mask = await model.run(small.ctx.getImageData(0, 0, w, h).data);
-  const maskSmall = canvas(w, h);
-  maskSmall.ctx.putImageData(new ImageData(maskToRgba(mask, w, h), w, h), 0, 0);
-  const maskFull = canvas(W, H);
-  maskFull.ctx.drawImage(maskSmall.c, 0, 0, W, H);
-  const out = canvas(W, H);
-  out.ctx.drawImage(img, 0, 0);
-  const pixels = out.ctx.getImageData(0, 0, W, H);
-  applyAlpha(pixels.data, maskFull.ctx.getImageData(0, 0, W, H).data);
-  out.ctx.putImageData(pixels, 0, 0);
-  return out.c.toDataURL("image/png");
+const dataUrlToBytes = (dataUrl) => {
+  const comma = dataUrl.indexOf(",");
+  const meta = dataUrl.slice(0, comma);
+  const payload = dataUrl.slice(comma + 1);
+  if (meta.endsWith(";base64")) return Uint8Array.from(atob(payload), (c) => c.charCodeAt(0));
+  return new TextEncoder().encode(decodeURIComponent(payload));
 };
-const MODES$1 = [
-  { value: "auto", label: "Automático", Icon: Magic },
-  { value: "color", label: "Por color", Icon: Pencil }
-];
-const DEFAULT_TOLERANCE = 15;
-const PICK_LABEL = "Da clic en el fondo que quieres quitar";
-const RemoveBackgroundDialog = ({ open, src, onClose, onApply }) => {
-  const c = useThemeColors();
-  const [mode, setMode] = useState("auto");
-  const [auto, setAuto] = useState({});
-  const [pixels, setPixels] = useState(null);
-  const [points, setPoints] = useState([]);
-  const [tolerance, setTolerance] = useState(DEFAULT_TOLERANCE);
-  const [wholeImage, setWholeImage] = useState(false);
-  const [applying, setApplying] = useState(false);
-  const preview = useRef(null);
+const dataUrlToBlob = (dataUrl) => {
+  const type = dataUrl.slice(5, dataUrl.indexOf(",")).split(";")[0];
+  return new Blob([dataUrlToBytes(dataUrl)], { type });
+};
+const DOWNLOAD_PROXY$1 = "/strapi-content-generator-gemini/download-file";
+const useLibraryApi = () => {
+  const { get, post, put } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  return useMemo(() => {
+    const base = scopeToFolder(createUploadApi({ get, post, put }), STUDIO_ROOT);
+    const dataUrlOf = async (file) => {
+      if (!file.url) throw new Error("El archivo no tiene URL");
+      const url = file.url.startsWith("/") ? `${window.location.origin}${file.url}` : file.url;
+      const { data } = await post(DOWNLOAD_PROXY$1, { url });
+      return `data:${data.contentType};base64,${data.base64}`;
+    };
+    const download = async (file) => {
+      if (!file.url) return;
+      const href = URL.createObjectURL(dataUrlToBlob(await dataUrlOf(file)));
+      const a = document.createElement("a");
+      a.href = href;
+      a.download = file.name;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(href), 1e3);
+    };
+    const notify = (type, message) => toggleNotification({ type, message });
+    const saveBlob = (blob, name, folderId) => base.uploadFiles([new File([blob], name, { type: blob.type })], folderId);
+    return { api: { ...base, dataUrlOf, download, saveBlob }, notify };
+  }, [get, post, put, toggleNotification]);
+};
+const thumb$1 = (f) => f.formats?.thumbnail?.url ?? f.formats?.small?.url ?? f.url;
+const LibraryImagePicker = ({ open, max, onClose, onPick, title = "Elegir de la biblioteca", footerStart }) => {
+  const { api, notify } = useLibraryApi();
+  const [tree, setTree] = useState([]);
+  const [current, setCurrent] = useState(null);
+  const [files, setFiles] = useState([]);
+  const [loading2, setLoading] = useState(true);
+  const [picked, setPicked] = useState([]);
   useEffect(() => {
     if (!open) return;
-    setMode("auto");
-    setPixels(null);
-    setPoints([]);
-    setTolerance(DEFAULT_TOLERANCE);
-    setWholeImage(false);
-    setAuto({ status: "Preparando…" });
-    let live = true;
-    removeBackground(src, (status2) => live && setAuto({ status: status2 })).then((result2) => live && setAuto({ result: result2 })).catch((err) => live && setAuto({ error: removeBackgroundError(err) }));
-    return () => {
-      live = false;
-    };
-  }, [open, src]);
+    setPicked([]);
+    setCurrent(null);
+    api.getTree().then(setTree, () => notify("danger", "No se pudieron cargar las carpetas."));
+  }, [open, api, notify]);
   useEffect(() => {
-    if (!open || mode !== "color" || pixels) return;
-    let live = true;
-    loadPixels(src).then((p) => live && setPixels(p)).catch(() => live && setAuto((a) => ({ ...a, error: "No se pudo leer la imagen." })));
+    if (!open) return;
+    let alive = true;
+    setLoading(true);
+    api.listFiles(current, { mimes: IMAGE_MIMES }).then((list) => alive && setFiles(list), () => notify("danger", "No se pudieron cargar las imágenes.")).finally(() => alive && setLoading(false));
     return () => {
-      live = false;
+      alive = false;
     };
-  }, [open, mode, src, pixels]);
-  const keyed = useMemo(
-    () => pixels && points.length ? applyKeyAlpha(pixels.data, colorKeyAlpha(pixels.data, pixels.width, pixels.height, points, tolerance / 100, { contiguous: !wholeImage })) : null,
-    [pixels, points, tolerance, wholeImage]
-  );
-  useEffect(() => {
-    if (mode === "color" && pixels && preview.current) drawPixels(preview.current, pixels.width, pixels.height, keyed ?? pixels.data);
-  }, [mode, pixels, keyed]);
-  const pick = (e) => {
-    if (!pixels) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = Math.floor((e.clientX - rect.left) / rect.width * pixels.width);
-    const y = Math.floor((e.clientY - rect.top) / rect.height * pixels.height);
-    setPoints((p) => [...p, { x, y }]);
-  };
-  const result = mode === "auto" ? auto.result : keyed && pixels ? "color" : void 0;
-  const apply = async () => {
-    const dataUrl = mode === "auto" ? auto.result : keyed && pixels ? pixelsToDataUrl(pixels.width, pixels.height, keyed) : void 0;
-    if (!dataUrl) return;
-    setApplying(true);
-    try {
-      await onApply(dataUrl);
-    } finally {
-      setApplying(false);
-    }
-  };
-  const frame = { maxWidth: "100%", maxHeight: "45vh", display: "block" };
-  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
-    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Quitar fondo" }) }),
+  }, [open, current, api, notify]);
+  const isPicked = (f) => picked.some((p) => p.id === f.id);
+  const toggle = (f) => setPicked((list) => list.some((p) => p.id === f.id) ? list.filter((p) => p.id !== f.id) : max === 1 ? [f] : [...list, f]);
+  const full = max > 1 && picked.length >= max;
+  const path = pathTo(tree, current);
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs(Modal.Content, { style: { width: "min(880px, 92vw)" }, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: title }) }),
     /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-      /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(SegmentedSwitch, { label: "Modo de quitar fondo", options: MODES$1, value: mode, onChange: setMode }) }),
-      mode === "color" && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
-        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
-          PICK_LABEL,
-          ". Cada clic agrega un punto."
-        ] }),
-        /* @__PURE__ */ jsxs(Flex, { gap: 6, alignItems: "end", children: [
-          /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsx(RangeField, { label: "Tolerancia", value: tolerance, min: 0, max: 60, onChange: setTolerance, format: (v) => `${v} %` }) }),
-          /* @__PURE__ */ jsx(Checkbox, { checked: wholeImage, onCheckedChange: (v) => setWholeImage(v === true), children: "Quitar ese color en toda la imagen" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(Flex, { justifyContent: "center", padding: 2, hasRadius: true, style: { background: CHECKERBOARD, minHeight: 240 }, children: [
-        mode === "auto" && (auto.result ? /* @__PURE__ */ jsx("img", { src: auto.result, alt: "Vista previa sin fondo", style: frame }) : auto.error ? /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: auto.error }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-          /* @__PURE__ */ jsx(Loader, { small: true }),
-          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: auto.status })
-        ] })),
-        mode === "color" && (pixels ? /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
-          /* @__PURE__ */ jsx("canvas", { ref: preview, "aria-label": PICK_LABEL, onClick: pick, style: { ...frame, cursor: "crosshair" } }),
-          points.map((p, i) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              style: {
-                position: "absolute",
-                left: `${(p.x + 0.5) / pixels.width * 100}%`,
-                top: `${(p.y + 0.5) / pixels.height * 100}%`,
-                width: 10,
-                height: 10,
-                marginLeft: -5,
-                marginTop: -5,
-                borderRadius: "50%",
-                background: c.primary600,
-                border: `2px solid ${c.neutral0}`,
-                pointerEvents: "none"
-              }
-            },
-            i
-          ))
-        ] }) : /* @__PURE__ */ jsx(Loader, { small: true }))
-      ] })
+      /* @__PURE__ */ jsxs(Flex, { gap: 1, wrap: "wrap", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "S", onClick: () => setCurrent(null), children: ROOT_LABEL }),
+        path.map((f) => /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
+          /* @__PURE__ */ jsx(ChevronRight, { width: 12, height: 12 }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "S", onClick: () => setCurrent(f.id), children: f.name })
+        ] }, f.id))
+      ] }),
+      childrenOf(tree, current).length > 0 && /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", children: childrenOf(tree, current).map((f) => /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Folder, {}), "aria-label": `Abrir carpeta ${f.name}`, onClick: () => setCurrent(f.id), children: f.name }, f.id)) }),
+      loading2 ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 6, children: /* @__PURE__ */ jsx(Loader, { small: true, children: "Cargando imágenes…" }) }) : files.length === 0 ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "No hay imágenes en esta carpeta." }) : /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: files.map((f) => {
+        const on = isPicked(f);
+        return /* @__PURE__ */ jsx(Grid.Item, { col: 2, s: 4, xs: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            tag: "button",
+            type: "button",
+            color: "neutral800",
+            "aria-label": f.name,
+            "aria-pressed": on,
+            disabled: !on && full,
+            onClick: () => toggle(f),
+            padding: 1,
+            hasRadius: true,
+            background: on ? "primary100" : "neutral0",
+            borderColor: on ? "primary600" : "neutral200",
+            style: { cursor: !on && full ? "not-allowed" : "pointer", opacity: !on && full ? 0.5 : 1 },
+            children: [
+              /* @__PURE__ */ jsx("img", { src: thumb$1(f), alt: "", style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 2 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", ellipsis: true, tag: "span", style: { display: "block", marginTop: 4 }, children: f.name })
+            ]
+          }
+        ) }, f.id);
+      }) })
     ] }) }),
     /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: "Cancelar" }),
+      footerStart ?? /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: "Cancelar" }),
       /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        mode === "color" && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setPoints([]), disabled: !points.length, children: "Quitar puntos" }),
-        /* @__PURE__ */ jsx(Button, { onClick: apply, disabled: !result || applying, loading: applying, children: "Aplicar" })
+        footerStart && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: "Cancelar" }),
+        /* @__PURE__ */ jsx(Button, { disabled: picked.length === 0, onClick: () => onPick(picked), children: `Usar ${picked.length} ${picked.length === 1 ? "imagen" : "imágenes"}` })
       ] })
     ] })
   ] }) });
 };
-const RemoveBackgroundButton = ({ src, onDone }) => {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Magic, {}), onClick: () => setOpen(true), fullWidth: true, children: "Quitar fondo" }),
+const PROMPT_MAX = 2e3;
+const CONTROL = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F-\u009F]/g;
+const INVISIBLE = /[­​-‏‪-‮⁠-⁤⁦-⁩]/g;
+const TAG = /<\/?[a-z][^>]*>/gi;
+const sanitizePrompt = (text) => text.normalize("NFC").replace(CONTROL, "").replace(INVISIBLE, "").replace(TAG, "").replace(/\s+/g, " ").trim();
+const PROMPT_LABELS = { label: "El prompt", empty: "Escribe un prompt." };
+const INSTRUCTION_LABELS = { label: "La instrucción", empty: "Describe el cambio que quieres." };
+const checkPrompt = (text, { label, empty } = PROMPT_LABELS) => {
+  const clean = sanitizePrompt(text);
+  if (!clean) return { ok: false, error: empty };
+  if ([...clean].length > PROMPT_MAX) return { ok: false, error: `${label} puede tener hasta ${PROMPT_MAX} caracteres.` };
+  return { ok: true, text: clean };
+};
+const useThemeColors = () => {
+  const theme = useTheme();
+  return theme?.colors ?? lightTheme.colors;
+};
+const PromptComposer = (p) => {
+  const c = useThemeColors();
+  const id = useId();
+  const [focused, setFocused] = useState(false);
+  const check = checkPrompt(p.value, p.labels);
+  const error = !check.ok && p.value.trim() ? check.error : null;
+  const count = [...p.value].length;
+  const submit = () => {
+    if (check.ok && !p.disabled && !p.loading) p.onSubmit(check.text);
+  };
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, role: "group", "aria-labelledby": `${id}-label`, children: [
+    /* @__PURE__ */ jsx(Typography, { tag: "label", id: `${id}-label`, htmlFor: id, variant: "pi", fontWeight: "bold", children: p.label }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        hasRadius: true,
+        background: "neutral0",
+        style: {
+          border: `1px solid ${error ? c.danger600 : focused ? c.primary600 : c.neutral200}`,
+          boxShadow: focused && !error ? `${c.primary600} 0 0 0 2px` : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id,
+              value: p.value,
+              placeholder: p.placeholder,
+              "aria-invalid": Boolean(error),
+              "aria-describedby": `${id}-help`,
+              onChange: (e) => p.onChange(e.target.value),
+              onFocus: () => setFocused(true),
+              onBlur: () => setFocused(false),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  submit();
+                }
+              },
+              rows: 4,
+              style: {
+                display: "block",
+                width: "100%",
+                boxSizing: "border-box",
+                resize: "vertical",
+                minHeight: 96,
+                padding: "12px 16px 4px",
+                border: 0,
+                outline: "none",
+                background: "transparent",
+                color: c.neutral800,
+                font: "inherit",
+                fontSize: 14,
+                lineHeight: 1.5
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", gap: 2, paddingLeft: 3, paddingRight: 2, paddingBottom: 2, children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+              p.tools,
+              /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: count > PROMPT_MAX ? "danger600" : "neutral500", children: [
+                count,
+                "/",
+                PROMPT_MAX
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Button, { startIcon: p.actionIcon, loading: p.loading, disabled: p.disabled || !check.ok, onClick: submit, children: p.actionLabel })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { id: `${id}-help`, variant: "pi", textColor: error ? "danger600" : "neutral600", children: error ?? p.hint ?? "⌘/Ctrl + Enter también envía." })
+  ] });
+};
+const SegmentedSwitch = ({ label, options, value, onChange }) => /* @__PURE__ */ jsx(Flex, { role: "radiogroup", "aria-label": label, gap: 1, padding: 1, background: "neutral150", hasRadius: true, children: options.map(({ value: option, label: text, Icon }) => {
+  const on = value === option;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      tag: "button",
+      type: "button",
+      role: "radio",
+      "aria-checked": on,
+      onClick: () => onChange(option),
+      color: on ? "neutral800" : "neutral600",
+      background: on ? "neutral0" : "transparent",
+      shadow: on ? "filterShadow" : void 0,
+      hasRadius: true,
+      paddingLeft: 4,
+      paddingRight: 4,
+      style: { height: 36, border: 0, cursor: "pointer" },
+      children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Icon, { width: 16, height: 16 }),
+        /* @__PURE__ */ jsx(Typography, { fontWeight: on ? "bold" : "regular", textColor: on ? "neutral800" : "neutral600", children: text })
+      ] })
+    },
+    option
+  );
+}) });
+const CHECKERBOARD = "repeating-conic-gradient(#e6e6ec 0% 25%, #ffffff 0% 50%) 50% / 16px 16px";
+const RangeField = ({ label, value, min, max, step = 1, onChange, format = String }) => {
+  const c = useThemeColors();
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800", children: label }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: format(value) })
+    ] }),
     /* @__PURE__ */ jsx(
-      RemoveBackgroundDialog,
+      "input",
       {
-        open,
-        src,
-        onClose: () => setOpen(false),
-        onApply: (dataUrl) => {
-          onDone(dataUrl);
-          setOpen(false);
-        }
+        type: "range",
+        "aria-label": label,
+        min,
+        max,
+        step,
+        value,
+        onChange: (e) => onChange(Number(e.target.value)),
+        style: { width: "100%", accentColor: c.primary600 }
       }
     )
   ] });
 };
-const flattenTree = (tree, parentId = null, depth = 0) => tree.flatMap((f) => [{ id: f.id, name: f.name, parentId, depth }, ...flattenTree(f.children ?? [], f.id, depth + 1)]);
-const pathTo = (tree, id) => {
-  if (id === null) return [];
-  for (const f of tree) {
-    if (f.id === id) return [f];
-    const sub = pathTo(f.children ?? [], id);
-    if (sub.length) return [f, ...sub];
+const SOFTNESS = 0.06;
+const MAX_DISTANCE = Math.sqrt(3) * 255;
+const colorKeyAlpha = (rgba, width, height, points, tolerance, { contiguous = true } = {}) => {
+  const alpha = new Uint8ClampedArray(width * height).fill(255);
+  const toAlpha = (d) => d <= tolerance ? 0 : d <= tolerance + SOFTNESS ? Math.round(255 * (d - tolerance) / SOFTNESS) : 255;
+  const inside = points.filter(({ x, y }) => x >= 0 && y >= 0 && x < width && y < height);
+  if (!contiguous) {
+    const seeds = inside.map(({ x, y }) => 4 * (Math.floor(y) * width + Math.floor(x))).map((s) => [rgba[s], rgba[s + 1], rgba[s + 2]]);
+    for (let i = 0; i < alpha.length; i++) {
+      for (const [r, g, b] of seeds) {
+        const dr = rgba[4 * i] - r;
+        const dg = rgba[4 * i + 1] - g;
+        const db = rgba[4 * i + 2] - b;
+        alpha[i] = Math.min(alpha[i], toAlpha(Math.sqrt(dr * dr + dg * dg + db * db) / MAX_DISTANCE));
+      }
+    }
+    return alpha;
   }
-  return [];
-};
-const childrenOf = (tree, id) => id === null ? tree : pathTo(tree, id).at(-1)?.children ?? [];
-const cleanFolderName = (name) => name.trim().replace(/\s*\/\s*/g, " - ");
-const nameTaken = (tree, parentId, name) => {
-  const target = cleanFolderName(name).toLocaleLowerCase("es");
-  return childrenOf(tree, parentId).some((f) => f.name.toLocaleLowerCase("es") === target);
-};
-const safeDeletePlan = (tree, folderId, fileIds) => {
-  const path = pathTo(tree, folderId);
-  const folder = path.at(-1);
-  if (!folder) return null;
-  const folderIds = (folder.children ?? []).map((c) => c.id);
-  const move = fileIds.length || folderIds.length ? { destinationFolderId: path.length > 1 ? path[path.length - 2].id : null, fileIds, folderIds } : null;
-  return { move, remove: [folderId] };
-};
-const noBackgroundName = (name) => `${name.replace(/\.[a-z0-9]+$/i, "")} (sin fondo).png`;
-const IMAGE_MIMES = ["image/png", "image/jpeg", "image/webp"];
-const fileForm = (fileInfo, file) => {
-  const fd = new FormData();
-  if (file) fd.append("files", file);
-  fd.append("fileInfo", JSON.stringify(fileInfo));
-  return fd;
-};
-const createUploadApi = (client) => {
-  const api = {
-    async getTree() {
-      const { data } = await client.get("/upload/folder-structure");
-      return data?.data ?? [];
-    },
-    async getCounts() {
-      const { data } = await client.get("/upload/folders", {
-        params: { populate: { files: { count: true }, children: { count: true } } }
-      });
-      return Object.fromEntries(
-        (data?.data ?? []).map((f) => [
-          f.id,
-          { files: f.files?.count ?? 0, children: f.children?.count ?? 0 }
-        ])
-      );
-    },
-    /** Archivos de una carpeta; con `mimes`, solo esos tipos (el selector de imágenes, S4.13). */
-    async listFiles(folderId, { mimes } = {}) {
-      const byFolder = { folder: { id: folderId === null ? { $null: true } : { $eq: folderId } } };
-      const { data } = await client.get("/upload/files", {
-        params: {
-          page: 1,
-          pageSize: 100,
-          sort: "updatedAt:DESC",
-          filters: { $and: mimes?.length ? [byFolder, { mime: { $in: mimes } }] : [byFolder] }
-        }
-      });
-      return data?.results ?? [];
-    },
-    /** Las más recientes de varias carpetas a la vez («Recientes» del Generador, S4.14). */
-    async listRecent({ folderIds, mimes, limit }) {
-      const inFolders = { folder: { id: { $in: folderIds } } };
-      const { data } = await client.get("/upload/files", {
-        params: {
-          page: 1,
-          pageSize: limit,
-          sort: "updatedAt:DESC",
-          filters: { $and: mimes?.length ? [inFolders, { mime: { $in: mimes } }] : [inFolders] }
-        }
-      });
-      return data?.results ?? [];
-    },
-    async createFolder(name, parent) {
-      const { data } = await client.post("/upload/folders", { name, parent });
-      return data?.data;
-    },
-    async renameFolder(id, name, parent) {
-      await client.put(`/upload/folders/${id}`, { name, parent });
-    },
-    async uploadFiles(files, folderId) {
-      const uploaded = [];
-      for (const file of files) {
-        const { data } = await client.post("/upload", fileForm({ name: file.name, folder: folderId }, file));
-        uploaded.push(...Array.isArray(data) ? data : [data]);
-      }
-      return uploaded;
-    },
-    async renameFile(file, name) {
-      await client.post(
-        `/upload?id=${file.id}`,
-        fileForm({ name, folder: file.folder?.id ?? null, alternativeText: file.alternativeText, caption: file.caption })
-      );
-    },
-    async replaceFile(id, file) {
-      await client.post(`/upload?id=${id}`, fileForm({ name: file.name }, file));
-    },
-    async move({ fileIds = [], folderIds = [] }, destinationFolderId) {
-      await client.post("/upload/actions/bulk-move", { destinationFolderId, fileIds, folderIds });
-    },
-    async remove({ fileIds = [], folderIds = [] }) {
-      await client.post("/upload/actions/bulk-delete", { fileIds, folderIds });
-    },
-    /** Elimina una carpeta dejando sus archivos y subcarpetas en la carpeta superior (D1). */
-    deleteFolderSafely: (tree, folderId) => deleteFolderSafely(api, tree, folderId)
-  };
-  return api;
+  const seen = new Int32Array(width * height);
+  const stack = [];
+  inside.forEach(({ x, y }, n) => {
+    const mark = n + 1;
+    const start = Math.floor(y) * width + Math.floor(x);
+    const [r, g, b] = [rgba[4 * start], rgba[4 * start + 1], rgba[4 * start + 2]];
+    stack.push(start);
+    seen[start] = mark;
+    while (stack.length) {
+      const i = stack.pop();
+      const dr = rgba[4 * i] - r;
+      const dg = rgba[4 * i + 1] - g;
+      const db = rgba[4 * i + 2] - b;
+      const d = Math.sqrt(dr * dr + dg * dg + db * db) / MAX_DISTANCE;
+      if (d > tolerance + SOFTNESS) continue;
+      alpha[i] = Math.min(alpha[i], toAlpha(d));
+      if (d > tolerance) continue;
+      const px = i % width;
+      const visit = (j) => {
+        if (j < 0 || j >= alpha.length || seen[j] === mark) return;
+        seen[j] = mark;
+        stack.push(j);
+      };
+      if (px > 0) visit(i - 1);
+      if (px < width - 1) visit(i + 1);
+      visit(i - width);
+      visit(i + width);
+    }
+  });
+  return alpha;
 };
-const deleteFolderSafely = async (api, tree, folderId) => {
-  const files = await api.listFiles(folderId);
-  const plan = safeDeletePlan(tree, folderId, files.map((f) => f.id));
-  if (!plan) return;
-  if (plan.move) await api.move(plan.move, plan.move.destinationFolderId);
-  await api.remove({ folderIds: plan.remove });
+const applyKeyAlpha = (rgba, alpha) => {
+  const out = new Uint8ClampedArray(rgba);
+  for (let i = 0; i < alpha.length; i++) out[4 * i + 3] = Math.min(out[4 * i + 3], alpha[i]);
+  return out;
 };
-const STUDIO_ROOT = "Generated";
-const ROOT_LABEL = "/";
-const scopeToFolder = (base, rootName) => {
-  let root = null;
-  const rootId = () => {
-    root ??= base.getTree().then(async (tree) => tree.find((f) => f.name === rootName)?.id ?? (await base.createFolder(rootName, null)).id);
-    root.catch(() => {
-      root = null;
-    });
-    return root;
-  };
-  const at = async (id) => id ?? rootId();
-  const scoped = {
-    ...base,
-    async getTree() {
-      const id = await rootId();
-      return (await base.getTree()).find((f) => f.id === id)?.children ?? [];
-    },
-    listFiles: async (folderId, options) => base.listFiles(await at(folderId), options),
-    // Toda la biblioteca del Estudio: la raíz y sus subcarpetas; las carpetas pedidas se ignoran.
-    listRecent: async (options) => {
-      const id = await rootId();
-      const children = (await base.getTree()).find((f) => f.id === id)?.children ?? [];
-      return base.listRecent({ ...options, folderIds: [id, ...flattenTree(children).map((f) => f.id)] });
-    },
-    createFolder: async (name, parent) => base.createFolder(name, await at(parent)),
-    renameFolder: async (id, name, parent) => base.renameFolder(id, name, await at(parent)),
-    uploadFiles: async (files, folderId) => base.uploadFiles(files, await at(folderId)),
-    move: async (selection, destination) => base.move(selection, await at(destination)),
-    deleteFolderSafely: (tree, folderId) => deleteFolderSafely(scoped, tree, folderId)
-  };
-  return scoped;
+const canvas = (width, height) => {
+  const c = document.createElement("canvas");
+  c.width = width;
+  c.height = height;
+  const ctx = c.getContext("2d", { willReadFrequently: true });
+  if (!ctx) throw new Error("Canvas 2D no disponible");
+  ctx.imageSmoothingQuality = "high";
+  return { c, ctx };
 };
-const dataUrlToBytes = (dataUrl) => {
-  const comma = dataUrl.indexOf(",");
-  const meta = dataUrl.slice(0, comma);
-  const payload = dataUrl.slice(comma + 1);
-  if (meta.endsWith(";base64")) return Uint8Array.from(atob(payload), (c) => c.charCodeAt(0));
-  return new TextEncoder().encode(decodeURIComponent(payload));
+const loadImage = (src) => new Promise((resolve, reject) => {
+  const img = new Image();
+  img.onload = () => resolve(img);
+  img.onerror = () => reject(new Error("No se pudo leer la imagen"));
+  img.src = src;
+});
+const loadPixels = async (src) => {
+  const img = await loadImage(src);
+  const { ctx } = canvas(img.naturalWidth, img.naturalHeight);
+  ctx.drawImage(img, 0, 0);
+  return { width: img.naturalWidth, height: img.naturalHeight, data: ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight).data };
 };
-const dataUrlToBlob = (dataUrl) => {
-  const type = dataUrl.slice(5, dataUrl.indexOf(",")).split(";")[0];
-  return new Blob([dataUrlToBytes(dataUrl)], { type });
+const drawPixels = (target, width, height, data) => {
+  target.width = width;
+  target.height = height;
+  target.getContext("2d")?.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
 };
-const DOWNLOAD_PROXY$1 = "/strapi-content-generator-gemini/download-file";
-const useLibraryApi = () => {
-  const { get, post, put } = useFetchClient();
-  const { toggleNotification } = useNotification();
-  return useMemo(() => {
-    const base = scopeToFolder(createUploadApi({ get, post, put }), STUDIO_ROOT);
-    const dataUrlOf = async (file) => {
-      if (!file.url) throw new Error("El archivo no tiene URL");
-      const url = file.url.startsWith("/") ? `${window.location.origin}${file.url}` : file.url;
-      const { data } = await post(DOWNLOAD_PROXY$1, { url });
-      return `data:${data.contentType};base64,${data.base64}`;
-    };
-    const download = async (file) => {
-      if (!file.url) return;
-      const href = URL.createObjectURL(dataUrlToBlob(await dataUrlOf(file)));
-      const a = document.createElement("a");
-      a.href = href;
-      a.download = file.name;
-      a.click();
-      setTimeout(() => URL.revokeObjectURL(href), 1e3);
-    };
-    const notify = (type, message) => toggleNotification({ type, message });
-    const saveBlob = (blob, name, folderId) => base.uploadFiles([new File([blob], name, { type: blob.type })], folderId);
-    return { api: { ...base, dataUrlOf, download, saveBlob }, notify };
-  }, [get, post, put, toggleNotification]);
+const pixelsToDataUrl = (width, height, data) => {
+  const { c, ctx } = canvas(width, height);
+  ctx.putImageData(new ImageData(new Uint8ClampedArray(data), width, height), 0, 0);
+  return c.toDataURL("image/png");
 };
-const thumb$1 = (f) => f.formats?.thumbnail?.url ?? f.formats?.small?.url ?? f.url;
-const LibraryImagePicker = ({ open, max, onClose, onPick }) => {
-  const { api, notify } = useLibraryApi();
-  const [tree, setTree] = useState([]);
-  const [current, setCurrent] = useState(null);
-  const [files, setFiles] = useState([]);
-  const [loading2, setLoading] = useState(true);
-  const [picked, setPicked] = useState([]);
+const INPUT_SIZE = 1024;
+const maskToRgba = (mask, width, height) => {
+  const out = new Uint8ClampedArray(4 * width * height);
+  for (let i = 0; i < width * height; i++) {
+    const v = mask[i] * 255;
+    out[4 * i] = out[4 * i + 1] = out[4 * i + 2] = v;
+    out[4 * i + 3] = 255;
+  }
+  return out;
+};
+const applyAlpha = (rgba, maskRgba) => {
+  for (let i = 3; i < rgba.length; i += 4) rgba[i] = maskRgba[i - 3];
+};
+const WORKER_URL = "/ort/background-worker.mjs";
+const RUN_TIMEOUT_MS = 12e4;
+const TIMEOUT_MESSAGE = "Quitar fondo tardó demasiado. Intenta de nuevo.";
+class RemoveBackgroundTimeout extends Error {
+  constructor() {
+    super(TIMEOUT_MESSAGE);
+  }
+}
+const removeBackgroundError = (err) => err instanceof RemoveBackgroundTimeout ? TIMEOUT_MESSAGE : "No se pudo quitar el fondo.";
+let loading = null;
+const loadModel = (onStatus) => {
+  if (!loading) {
+    const current = (async () => {
+      const worker = new Worker(WORKER_URL, { type: "module" });
+      const pending = /* @__PURE__ */ new Map();
+      let seq2 = 0;
+      let status2 = onStatus;
+      const discard = (err) => {
+        worker.terminate();
+        if (loading === current) loading = null;
+        pending.forEach(({ reject }) => reject(err));
+        pending.clear();
+      };
+      await new Promise((resolve, reject) => {
+        worker.onmessage = (e) => {
+          const m = e.data;
+          if (m.type === "status") status2?.(m.status);
+          else if (m.type === "ready") resolve();
+          else if (m.type === "mask") {
+            pending.get(m.id)?.resolve(new Float32Array(m.mask));
+            pending.delete(m.id);
+          } else if (m.type === "error") {
+            const err = new Error(m.message ?? "Error del modelo");
+            if (m.id === void 0) reject(err);
+            else {
+              pending.get(m.id)?.reject(err);
+              pending.delete(m.id);
+              discard(err);
+            }
+          }
+        };
+        worker.onerror = () => reject(new Error("El worker de «Quitar fondo» no cargó."));
+        worker.postMessage({ type: "load" });
+      }).catch((err) => {
+        discard(err);
+        throw err;
+      });
+      status2 = void 0;
+      return {
+        run: (rgba) => new Promise((resolve, reject) => {
+          const id = ++seq2;
+          const timer = setTimeout(() => {
+            pending.get(id)?.reject(new RemoveBackgroundTimeout());
+            pending.delete(id);
+            discard(new RemoveBackgroundTimeout());
+          }, RUN_TIMEOUT_MS);
+          pending.set(id, {
+            resolve: (m) => {
+              clearTimeout(timer);
+              resolve(m);
+            },
+            reject: (e) => {
+              clearTimeout(timer);
+              reject(e);
+            }
+          });
+          worker.postMessage({ type: "run", id, rgba: rgba.buffer }, [rgba.buffer]);
+        })
+      };
+    })();
+    loading = current;
+    current.catch(() => {
+      if (loading === current) loading = null;
+    });
+  }
+  return loading;
+};
+const removeBackground = async (src, onStatus) => {
+  const [model, img] = await Promise.all([loadModel(onStatus), loadImage(src)]);
+  onStatus?.("Quitando fondo…");
+  const W = img.naturalWidth;
+  const H = img.naturalHeight;
+  const w = INPUT_SIZE;
+  const h = INPUT_SIZE;
+  const small = canvas(w, h);
+  small.ctx.drawImage(img, 0, 0, w, h);
+  const mask = await model.run(small.ctx.getImageData(0, 0, w, h).data);
+  const maskSmall = canvas(w, h);
+  maskSmall.ctx.putImageData(new ImageData(maskToRgba(mask, w, h), w, h), 0, 0);
+  const maskFull = canvas(W, H);
+  maskFull.ctx.drawImage(maskSmall.c, 0, 0, W, H);
+  const out = canvas(W, H);
+  out.ctx.drawImage(img, 0, 0);
+  const pixels = out.ctx.getImageData(0, 0, W, H);
+  applyAlpha(pixels.data, maskFull.ctx.getImageData(0, 0, W, H).data);
+  out.ctx.putImageData(pixels, 0, 0);
+  return out.c.toDataURL("image/png");
+};
+const MODES$1 = [
+  { value: "auto", label: "Automático", Icon: Magic },
+  { value: "color", label: "Por color", Icon: Pencil }
+];
+const DEFAULT_TOLERANCE = 15;
+const PICK_LABEL = "Da clic en el fondo que quieres quitar";
+const RemoveBackgroundDialog = ({ open, src, onClose, onApply }) => {
+  const c = useThemeColors();
+  const [mode, setMode] = useState("auto");
+  const [auto, setAuto] = useState({});
+  const [pixels, setPixels] = useState(null);
+  const [points, setPoints] = useState([]);
+  const [tolerance, setTolerance] = useState(DEFAULT_TOLERANCE);
+  const [wholeImage, setWholeImage] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const preview = useRef(null);
   useEffect(() => {
     if (!open) return;
-    setPicked([]);
-    setCurrent(null);
-    api.getTree().then(setTree, () => notify("danger", "No se pudieron cargar las carpetas."));
-  }, [open, api, notify]);
+    setMode("auto");
+    setPixels(null);
+    setPoints([]);
+    setTolerance(DEFAULT_TOLERANCE);
+    setWholeImage(false);
+    setAuto({ status: "Preparando…" });
+    let live = true;
+    removeBackground(src, (status2) => live && setAuto({ status: status2 })).then((result2) => live && setAuto({ result: result2 })).catch((err) => live && setAuto({ error: removeBackgroundError(err) }));
+    return () => {
+      live = false;
+    };
+  }, [open, src]);
   useEffect(() => {
-    if (!open) return;
-    let alive = true;
-    setLoading(true);
-    api.listFiles(current, { mimes: IMAGE_MIMES }).then((list) => alive && setFiles(list), () => notify("danger", "No se pudieron cargar las imágenes.")).finally(() => alive && setLoading(false));
+    if (!open || mode !== "color" || pixels) return;
+    let live = true;
+    loadPixels(src).then((p) => live && setPixels(p)).catch(() => live && setAuto((a) => ({ ...a, error: "No se pudo leer la imagen." })));
     return () => {
-      alive = false;
+      live = false;
     };
-  }, [open, current, api, notify]);
-  const isPicked = (f) => picked.some((p) => p.id === f.id);
-  const toggle = (f) => setPicked((list) => list.some((p) => p.id === f.id) ? list.filter((p) => p.id !== f.id) : max === 1 ? [f] : [...list, f]);
-  const full = max > 1 && picked.length >= max;
-  const path = pathTo(tree, current);
-  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs(Modal.Content, { style: { width: "min(880px, 92vw)" }, children: [
-    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Elegir de la biblioteca" }) }),
+  }, [open, mode, src, pixels]);
+  const keyed = useMemo(
+    () => pixels && points.length ? applyKeyAlpha(pixels.data, colorKeyAlpha(pixels.data, pixels.width, pixels.height, points, tolerance / 100, { contiguous: !wholeImage })) : null,
+    [pixels, points, tolerance, wholeImage]
+  );
+  useEffect(() => {
+    if (mode === "color" && pixels && preview.current) drawPixels(preview.current, pixels.width, pixels.height, keyed ?? pixels.data);
+  }, [mode, pixels, keyed]);
+  const pick = (e) => {
+    if (!pixels) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = Math.floor((e.clientX - rect.left) / rect.width * pixels.width);
+    const y = Math.floor((e.clientY - rect.top) / rect.height * pixels.height);
+    setPoints((p) => [...p, { x, y }]);
+  };
+  const result = mode === "auto" ? auto.result : keyed && pixels ? "color" : void 0;
+  const apply = async () => {
+    const dataUrl = mode === "auto" ? auto.result : keyed && pixels ? pixelsToDataUrl(pixels.width, pixels.height, keyed) : void 0;
+    if (!dataUrl) return;
+    setApplying(true);
+    try {
+      await onApply(dataUrl);
+    } finally {
+      setApplying(false);
+    }
+  };
+  const frame = { maxWidth: "100%", maxHeight: "45vh", display: "block" };
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Quitar fondo" }) }),
     /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-      /* @__PURE__ */ jsxs(Flex, { gap: 1, wrap: "wrap", alignItems: "center", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "S", onClick: () => setCurrent(null), children: ROOT_LABEL }),
-        path.map((f) => /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx(ChevronRight, { width: 12, height: 12 }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "S", onClick: () => setCurrent(f.id), children: f.name })
-        ] }, f.id))
+      /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(SegmentedSwitch, { label: "Modo de quitar fondo", options: MODES$1, value: mode, onChange: setMode }) }),
+      mode === "color" && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+          PICK_LABEL,
+          ". Cada clic agrega un punto."
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 6, alignItems: "end", children: [
+          /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsx(RangeField, { label: "Tolerancia", value: tolerance, min: 0, max: 60, onChange: setTolerance, format: (v) => `${v} %` }) }),
+          /* @__PURE__ */ jsx(Checkbox, { checked: wholeImage, onCheckedChange: (v) => setWholeImage(v === true), children: "Quitar ese color en toda la imagen" })
+        ] })
       ] }),
-      childrenOf(tree, current).length > 0 && /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", children: childrenOf(tree, current).map((f) => /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Folder, {}), "aria-label": `Abrir carpeta ${f.name}`, onClick: () => setCurrent(f.id), children: f.name }, f.id)) }),
-      loading2 ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 6, children: /* @__PURE__ */ jsx(Loader, { small: true, children: "Cargando imágenes…" }) }) : files.length === 0 ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "No hay imágenes en esta carpeta." }) : /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: files.map((f) => {
-        const on = isPicked(f);
-        return /* @__PURE__ */ jsx(Grid.Item, { col: 2, s: 4, xs: 6, direction: "column", alignItems: "stretch", children: /* @__PURE__ */ jsxs(
-          Box,
-          {
-            tag: "button",
-            type: "button",
-            color: "neutral800",
-            "aria-label": f.name,
-            "aria-pressed": on,
-            disabled: !on && full,
-            onClick: () => toggle(f),
-            padding: 1,
-            hasRadius: true,
-            background: on ? "primary100" : "neutral0",
-            borderColor: on ? "primary600" : "neutral200",
-            style: { cursor: !on && full ? "not-allowed" : "pointer", opacity: !on && full ? 0.5 : 1 },
-            children: [
-              /* @__PURE__ */ jsx("img", { src: thumb$1(f), alt: "", style: { width: "100%", aspectRatio: "1", objectFit: "cover", display: "block", borderRadius: 2 } }),
-              /* @__PURE__ */ jsx(Typography, { variant: "pi", ellipsis: true, tag: "span", style: { display: "block", marginTop: 4 }, children: f.name })
-            ]
-          }
-        ) }, f.id);
-      }) })
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "center", padding: 2, hasRadius: true, style: { background: CHECKERBOARD, minHeight: 240 }, children: [
+        mode === "auto" && (auto.result ? /* @__PURE__ */ jsx("img", { src: auto.result, alt: "Vista previa sin fondo", style: frame }) : auto.error ? /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: auto.error }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+          /* @__PURE__ */ jsx(Loader, { small: true }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: auto.status })
+        ] })),
+        mode === "color" && (pixels ? /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+          /* @__PURE__ */ jsx("canvas", { ref: preview, "aria-label": PICK_LABEL, onClick: pick, style: { ...frame, cursor: "crosshair" } }),
+          points.map((p, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: `${(p.x + 0.5) / pixels.width * 100}%`,
+                top: `${(p.y + 0.5) / pixels.height * 100}%`,
+                width: 10,
+                height: 10,
+                marginLeft: -5,
+                marginTop: -5,
+                borderRadius: "50%",
+                background: c.primary600,
+                border: `2px solid ${c.neutral0}`,
+                pointerEvents: "none"
+              }
+            },
+            i
+          ))
+        ] }) : /* @__PURE__ */ jsx(Loader, { small: true }))
+      ] })
     ] }) }),
     /* @__PURE__ */ jsxs(Modal.Footer, { children: [
       /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: "Cancelar" }),
-      /* @__PURE__ */ jsx(Button, { disabled: picked.length === 0, onClick: () => onPick(picked), children: `Usar ${picked.length} ${picked.length === 1 ? "imagen" : "imágenes"}` })
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        mode === "color" && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setPoints([]), disabled: !points.length, children: "Quitar puntos" }),
+        /* @__PURE__ */ jsx(Button, { onClick: apply, disabled: !result || applying, loading: applying, children: "Aplicar" })
+      ] })
     ] })
   ] }) });
 };
+const RemoveBackgroundButton = ({ src, onDone }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Magic, {}), onClick: () => setOpen(true), fullWidth: true, children: "Quitar fondo" }),
+    /* @__PURE__ */ jsx(
+      RemoveBackgroundDialog,
+      {
+        open,
+        src,
+        onClose: () => setOpen(false),
+        onApply: (dataUrl) => {
+          onDone(dataUrl);
+          setOpen(false);
+        }
+      }
+    )
+  ] });
+};
 const NameDialog = ({ open, title, label, initial = "", confirmLabel, validate, onClose, onConfirm }) => {
   const [name, setName] = useState(initial);
   const [error, setError] = useState(null);
@@ -1037,19 +1127,6 @@ const downloadBlob = (blob, name) => {
   a.click();
   setTimeout(() => URL.revokeObjectURL(href), 1e3);
 };
-const PROMPT_MAX = 2e3;
-const CONTROL = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F-\u009F]/g;
-const INVISIBLE = /[­​-‏‪-‮⁠-⁤⁦-⁩]/g;
-const TAG = /<\/?[a-z][^>]*>/gi;
-const sanitizePrompt = (text) => text.normalize("NFC").replace(CONTROL, "").replace(INVISIBLE, "").replace(TAG, "").replace(/\s+/g, " ").trim();
-const PROMPT_LABELS = { label: "El prompt", empty: "Escribe un prompt." };
-const INSTRUCTION_LABELS = { label: "La instrucción", empty: "Describe el cambio que quieres." };
-const checkPrompt = (text, { label, empty } = PROMPT_LABELS) => {
-  const clean = sanitizePrompt(text);
-  if (!clean) return { ok: false, error: empty };
-  if ([...clean].length > PROMPT_MAX) return { ok: false, error: `${label} puede tener hasta ${PROMPT_MAX} caracteres.` };
-  return { ok: true, text: clean };
-};
 const initialGenerator = { versions: [], currentId: null };
 const currentVersion = (s) => s.versions.find((v) => v.id === s.currentId) ?? null;
 const generatorReducer = (state, action) => {
@@ -1234,80 +1311,6 @@ const GroundingSources = ({ grounding }) => {
     )
   ] }) });
 };
-const PromptComposer = (p) => {
-  const c = useThemeColors();
-  const id = useId();
-  const [focused, setFocused] = useState(false);
-  const check = checkPrompt(p.value, p.labels);
-  const error = !check.ok && p.value.trim() ? check.error : null;
-  const count = [...p.value].length;
-  const submit = () => {
-    if (check.ok && !p.disabled && !p.loading) p.onSubmit(check.text);
-  };
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, role: "group", "aria-labelledby": `${id}-label`, children: [
-    /* @__PURE__ */ jsx(Typography, { tag: "label", id: `${id}-label`, htmlFor: id, variant: "pi", fontWeight: "bold", children: p.label }),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        hasRadius: true,
-        background: "neutral0",
-        style: {
-          border: `1px solid ${error ? c.danger600 : focused ? c.primary600 : c.neutral200}`,
-          boxShadow: focused && !error ? `${c.primary600} 0 0 0 2px` : void 0
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              id,
-              value: p.value,
-              placeholder: p.placeholder,
-              "aria-invalid": Boolean(error),
-              "aria-describedby": `${id}-help`,
-              onChange: (e) => p.onChange(e.target.value),
-              onFocus: () => setFocused(true),
-              onBlur: () => setFocused(false),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                  e.preventDefault();
-                  submit();
-                }
-              },
-              rows: 4,
-              style: {
-                display: "block",
-                width: "100%",
-                boxSizing: "border-box",
-                resize: "vertical",
-                minHeight: 96,
-                padding: "12px 16px 4px",
-                border: 0,
-                outline: "none",
-                background: "transparent",
-                color: c.neutral800,
-                font: "inherit",
-                fontSize: 14,
-                lineHeight: 1.5
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", gap: 2, paddingLeft: 3, paddingRight: 2, paddingBottom: 2, children: [
-            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-              p.tools,
-              /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: count > PROMPT_MAX ? "danger600" : "neutral500", children: [
-                count,
-                "/",
-                PROMPT_MAX
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(Button, { startIcon: p.actionIcon, loading: p.loading, disabled: p.disabled || !check.ok, onClick: submit, children: p.actionLabel })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Typography, { id: `${id}-help`, variant: "pi", textColor: error ? "danger600" : "neutral600", children: error ?? p.hint ?? "⌘/Ctrl + Enter también envía." })
-  ] });
-};
 const MODES = [
   { value: "create", label: "Crear imagen", Icon: Sparkle },
   { value: "edit", label: "Editar imagen", Icon: Pencil }
@@ -5264,7 +5267,9 @@ const ImageStudioTabs = () => {
 };
 export {
   ImageStudioTabs as I,
-  LEGACY_ROUTES as L,
+  LibraryImagePicker as L,
+  PromptComposer as P,
   StudioRedirect as S,
+  LEGACY_ROUTES as a,
   legacyRedirect as l
 };