@vaia-lab/sdk 0.3.0 → 0.4.0

package/dist/react/index.cjs

@@ -0,0 +1,1240 @@
+// @vaia/sdk — VAIA Platform Integration SDK
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  HandeiaAgent: () => HandeiaAgent,
+  InputBar: () => InputBar,
+  MODELS: () => MODELS,
+  VoiceCanvas: () => VoiceCanvas
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/agent.tsx
+var import_react3 = require("react");
+var import_react4 = require("motion/react");
+var import_lucide_react2 = require("lucide-react");
+
+// src/react/input-bar.tsx
+var import_react = require("react");
+var import_react2 = require("motion/react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function useTheme() {
+  const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)("light");
+  (0, import_react.useEffect)(() => {
+    const leer = () => setResolvedTheme(
+      document.documentElement.classList.contains("dark") || !document.documentElement.classList.contains("light") && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+    );
+    leer();
+    const obs = new MutationObserver(leer);
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", leer);
+    return () => {
+      obs.disconnect();
+      mq.removeEventListener("change", leer);
+    };
+  }, []);
+  return { resolvedTheme };
+}
+var PUBLISH_FORMATS = [
+  { id: "text", label: "Texto", icon: import_lucide_react.FileText },
+  { id: "artefact", label: "Artefacto", icon: import_lucide_react.Sparkles },
+  { id: "video", label: "Video", icon: import_lucide_react.Video },
+  { id: "audio", label: "Audio", icon: import_lucide_react.Music },
+  { id: "images", label: "Im\xE1genes", icon: import_lucide_react.Image }
+];
+var MODELS = [
+  { id: "gaia7", label: "Gaia 7", note: "En desarrollo", disabled: true },
+  { id: "claude-opus-4-8", label: "G Claude Opus 4.8", note: null, disabled: false },
+  { id: "gemini", label: "G Gemini", note: "Sin cr\xE9ditos", disabled: true },
+  { id: "gpt", label: "G ChatGPT", note: "Sin cr\xE9ditos", disabled: true }
+];
+function AutoTextarea({ value, onChange, onSubmit, onFocus, onBlur, placeholder }) {
+  const ref = (0, import_react.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "textarea",
+    {
+      ref,
+      value,
+      onChange: (e) => {
+        onChange(e.target.value);
+        if (ref.current) {
+          ref.current.style.height = "auto";
+          ref.current.style.height = `${ref.current.scrollHeight}px`;
+        }
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          onSubmit();
+        }
+      },
+      onFocus,
+      onBlur,
+      placeholder: placeholder ?? "Pregunta lo que quieras",
+      rows: 2,
+      className: "w-full resize-none bg-transparent outline-none text-[14px] text-black dark:text-white tracking-[-0.02em] leading-[1.55] placeholder:text-black/30 dark:placeholder:text-white/55 select-text overflow-y-auto max-h-[160px] [&::-webkit-scrollbar]:w-[5px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-black/15 dark:[&::-webkit-scrollbar-thumb]:bg-white/15 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-black/30 dark:hover:[&::-webkit-scrollbar-thumb]:bg-white/30"
+    }
+  );
+}
+var BLOBS = [
+  { bx: 0.15, by: 0.5, rx: 0.52, ry: 0.9, color: [202, 220, 252], speed: 1.1, phase: 0 },
+  { bx: 0.85, by: 0.5, rx: 0.48, ry: 0.85, color: [160, 200, 240], speed: 0.85, phase: 2.09 },
+  { bx: 0.5, by: 0.2, rx: 0.42, ry: 0.75, color: [190, 240, 225], speed: 0.95, phase: 4.18 },
+  { bx: 0.52, by: 0.8, rx: 0.38, ry: 0.7, color: [220, 200, 255], speed: 1.2, phase: 1.05 },
+  { bx: 0.7, by: 0.4, rx: 0.3, ry: 0.6, color: [255, 220, 230], speed: 0.75, phase: 3.3 }
+];
+var DARK_BLOBS = [
+  { bx: 0.15, by: 0.5, rx: 0.52, ry: 0.9, color: [64, 130, 255], speed: 1.1, phase: 0 },
+  { bx: 0.85, by: 0.5, rx: 0.48, ry: 0.85, color: [40, 210, 235], speed: 0.85, phase: 2.09 },
+  { bx: 0.5, by: 0.2, rx: 0.42, ry: 0.75, color: [60, 235, 170], speed: 0.95, phase: 4.18 },
+  { bx: 0.52, by: 0.8, rx: 0.38, ry: 0.7, color: [175, 90, 255], speed: 1.2, phase: 1.05 },
+  { bx: 0.7, by: 0.4, rx: 0.3, ry: 0.6, color: [255, 80, 150], speed: 0.75, phase: 3.3 }
+];
+function VoiceCanvas({ recording, voiceMode }) {
+  const canvasRef = (0, import_react.useRef)(null);
+  const recRef = (0, import_react.useRef)(recording);
+  recRef.current = recording;
+  const volRef = (0, import_react.useRef)(0);
+  const { resolvedTheme } = useTheme();
+  const darkRef = (0, import_react.useRef)(resolvedTheme === "dark");
+  (0, import_react.useEffect)(() => {
+    darkRef.current = resolvedTheme === "dark";
+  }, [resolvedTheme]);
+  (0, import_react.useEffect)(() => {
+    if (!voiceMode) {
+      volRef.current = 0;
+      return;
+    }
+    let actx;
+    let analyser;
+    let src;
+    let stream;
+    let raf;
+    const buf = new Uint8Array(1024);
+    const tick = () => {
+      analyser.getByteTimeDomainData(buf);
+      let sum = 0;
+      for (let i = 0; i < buf.length; i++) {
+        const v = ((buf[i] ?? 128) - 128) / 128;
+        sum += v * v;
+      }
+      const rms = Math.sqrt(sum / buf.length);
+      volRef.current += (Math.min(1, rms * 12) - volRef.current) * 0.18;
+      raf = requestAnimationFrame(tick);
+    };
+    navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then((s) => {
+      stream = s;
+      actx = new AudioContext();
+      analyser = actx.createAnalyser();
+      analyser.fftSize = 2048;
+      analyser.smoothingTimeConstant = 0.8;
+      src = actx.createMediaStreamSource(stream);
+      src.connect(analyser);
+      raf = requestAnimationFrame(tick);
+    }).catch(() => {
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      src?.disconnect();
+      stream?.getTracks().forEach((t) => t.stop());
+      actx?.close().catch(() => {
+      });
+      volRef.current = 0;
+    };
+  }, [voiceMode]);
+  (0, import_react.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let raf;
+    let t = 0;
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = canvas.offsetWidth * dpr;
+      canvas.height = canvas.offsetHeight * dpr;
+      ctx.scale(dpr, dpr);
+    };
+    const render = () => {
+      const w = canvas.offsetWidth;
+      const h = canvas.offsetHeight;
+      ctx.clearRect(0, 0, w, h);
+      const vol = volRef.current;
+      const boost = 1 + vol * 0.4;
+      const palette = darkRef.current ? DARK_BLOBS : BLOBS;
+      for (const b of palette) {
+        const amp = 0.13 + vol * 0.07;
+        const x = (b.bx + amp * Math.sin(t * 9e-4 * b.speed + b.phase) + 0.06 * Math.cos(t * 13e-4 * b.speed + b.phase * 1.7)) * w;
+        const y = (b.by + (0.09 + vol * 0.04) * Math.cos(t * 8e-4 * b.speed + b.phase + 1) + 0.04 * Math.sin(t * 11e-4 * b.speed + b.phase * 0.9)) * h;
+        const rx = b.rx * w * 0.68 * boost;
+        const ry = b.ry * h * 1.6 * boost;
+        const r = Math.max(rx, ry);
+        const [r0, g0, b0] = b.color;
+        const a0 = Math.min(0.85, 0.55 + vol * 0.3);
+        const grad = ctx.createRadialGradient(x, y, 0, x, y, r);
+        grad.addColorStop(0, `rgba(${r0},${g0},${b0},${a0.toFixed(2)})`);
+        grad.addColorStop(0.5, `rgba(${r0},${g0},${b0},${(a0 * 0.42).toFixed(2)})`);
+        grad.addColorStop(1, `rgba(${r0},${g0},${b0},0)`);
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      const lx = (0.3 + 0.07 * Math.sin(t * 6e-4)) * w;
+      const ly = (0.44 + 0.05 * Math.cos(t * 7e-4)) * h;
+      const lr = (0.26 + vol * 0.1) * w;
+      const lg = ctx.createRadialGradient(lx, ly, 0, lx, ly, lr);
+      if (darkRef.current) {
+        const peak = Math.min(0.75, 0.45 + vol * 0.3);
+        lg.addColorStop(0, `rgba(255,214,120,${peak.toFixed(2)})`);
+        lg.addColorStop(0.45, `rgba(255,190,90,${(peak * 0.5).toFixed(2)})`);
+        lg.addColorStop(1, "rgba(255,190,90,0)");
+      } else {
+        lg.addColorStop(0, `rgba(255,255,255,${Math.min(0.9, 0.6 + vol * 0.3).toFixed(2)})`);
+        lg.addColorStop(1, "rgba(255,255,255,0)");
+      }
+      ctx.fillStyle = lg;
+      ctx.beginPath();
+      ctx.arc(lx, ly, lr, 0, Math.PI * 2);
+      ctx.fill();
+      if (vol > 0.04 || recRef.current) {
+        const cx = w * 0.5, cy = h * 0.5;
+        const maxR = Math.hypot(w, h) * 0.55;
+        const spd = 25e-4 + vol * 6e-3;
+        for (let i = 0; i < 3; i++) {
+          const phase = (t * spd + i * 0.33) % 1;
+          const alpha = (1 - phase) * Math.min(0.55, 0.1 + vol * 0.55);
+          ctx.beginPath();
+          ctx.arc(cx, cy, phase * maxR, 0, Math.PI * 2);
+          ctx.strokeStyle = `rgba(180,170,255,${alpha.toFixed(3)})`;
+          ctx.lineWidth = 1 + vol * 2.5;
+          ctx.stroke();
+        }
+      }
+      t += 16;
+      raf = requestAnimationFrame(render);
+    };
+    resize();
+    render();
+    const ro = new ResizeObserver(resize);
+    ro.observe(canvas);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "absolute inset-0 w-full h-full pointer-events-none",
+      style: { borderRadius: "inherit" }
+    }
+  );
+}
+function InputBar({
+  value,
+  onChange,
+  onSend,
+  onFocus,
+  onBlur,
+  placeholder,
+  aiPhase = "idle",
+  aiStatus = "",
+  sentText = "",
+  thinkingLog = [],
+  thinkingOpen = false,
+  onThinkingToggle,
+  recording = false,
+  recordSecs = 0,
+  onStartRecording,
+  onCancelRecording,
+  onSendRecording,
+  voiceMode = false,
+  onVoiceModeToggle,
+  model,
+  onModelChange,
+  connectors = [],
+  onFileSelected,
+  onCloudOpen,
+  onConnectorInsert,
+  onNavigateConnectors,
+  enablePublish = false,
+  publishMode = false,
+  onPublishModeChange,
+  pubTitle = "",
+  onPubTitleChange,
+  pubBody = "",
+  onPubBodyChange,
+  pubFormat = "text",
+  onPubFormatChange,
+  onPublish,
+  onPubFileSelected,
+  pubFileName = null,
+  pubUploading = false,
+  actionsEndSlot
+}) {
+  const [attachOpen, setAttachOpen] = (0, import_react.useState)(false);
+  const [modelOpen, setModelOpen] = (0, import_react.useState)(false);
+  const fileRef = (0, import_react.useRef)(null);
+  const camRef = (0, import_react.useRef)(null);
+  const pubFileRef = (0, import_react.useRef)(null);
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    onFileSelected?.(file);
+    setAttachOpen(false);
+    e.target.value = "";
+  };
+  const connectedList = connectors.filter((c) => c.status === "connected").slice(0, 4);
+  const hasMoreConn = connectors.some((c) => c.status !== "connected");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: thinkingOpen && aiPhase !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react2.motion.div,
+      {
+        initial: { opacity: 0, height: 0, y: 8 },
+        animate: { opacity: 1, height: "auto", y: 0 },
+        exit: { opacity: 0, height: 0, y: 8 },
+        transition: { type: "spring", stiffness: 340, damping: 32 },
+        className: "mb-2 overflow-hidden rounded-2xl border border-black/[0.08] dark:border-white/[0.13] bg-white/90 dark:bg-[#171717]/90 backdrop-blur-sm shadow-[0_8px_32px_-12px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_32px_-12px_rgba(0,0,0,0.41)]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-4 pt-3 pb-3 flex flex-col gap-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] font-semibold tracking-[0.08em] uppercase text-black/30 dark:text-white/55", children: "Proceso interno" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: onThinkingToggle,
+                className: "w-5 h-5 flex items-center justify-center rounded-full text-black/30 dark:text-white/55 hover:text-black/60 dark:hover:text-white/77 hover:bg-black/[0.05] dark:hover:bg-white/[0.05] transition-colors",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "w-3 h-3", strokeWidth: 2 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1.5 max-h-[180px] overflow-y-auto [&::-webkit-scrollbar]:w-[3px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-black/10 dark:[&::-webkit-scrollbar-thumb]:bg-white/10 [&::-webkit-scrollbar-thumb]:rounded-full", children: [
+            thinkingLog.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_react2.motion.div,
+              {
+                initial: { opacity: 0, x: -4 },
+                animate: { opacity: 1, x: 0 },
+                transition: { duration: 0.2 },
+                className: "flex items-start gap-2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `mt-[5px] w-[5px] h-[5px] rounded-full shrink-0 ${line.startsWith("\u2713") ? "bg-black/50 dark:bg-white/50" : "bg-black/15 dark:bg-white/15"}` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `text-[12px] tracking-[-0.01em] leading-[1.5] ${line.startsWith("\u2713") ? "text-black/60 dark:text-white/77" : "text-black/35 dark:text-white/55"}`, children: line })
+                ]
+              },
+              i
+            )),
+            (aiPhase === "thinking" || aiPhase === "acting") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2 pl-[13px]", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react2.motion.span,
+              {
+                className: "w-[3px] h-[3px] rounded-full bg-black/20 dark:bg-white/20 block",
+                animate: { opacity: [0.2, 0.8, 0.2] },
+                transition: { duration: 1, repeat: Infinity, delay: i * 0.18 }
+              },
+              i
+            )) })
+          ] })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react2.motion.div,
+      {
+        className: "flex flex-col rounded-2xl bg-white dark:bg-[#171717] relative",
+        style: { borderWidth: "1px", borderStyle: "solid" },
+        animate: voiceMode ? {
+          borderColor: [
+            "rgba(167,139,250,0.55)",
+            "rgba(96,165,250,0.55)",
+            "rgba(34,211,238,0.55)",
+            "rgba(192,132,252,0.55)",
+            "rgba(167,139,250,0.55)"
+          ],
+          boxShadow: [
+            "0 0 0 3px rgba(139,92,246,0.10), 0 8px 40px -8px rgba(139,92,246,0.28)",
+            "0 0 0 3px rgba(59,130,246,0.10), 0 8px 40px -8px rgba(59,130,246,0.22)",
+            "0 0 0 3px rgba(6,182,212,0.10), 0 8px 40px -8px rgba(6,182,212,0.28)",
+            "0 0 0 3px rgba(168,85,247,0.10), 0 8px 40px -8px rgba(168,85,247,0.28)",
+            "0 0 0 3px rgba(139,92,246,0.10), 0 8px 40px -8px rgba(139,92,246,0.28)"
+          ]
+        } : {
+          borderColor: "var(--field-border)",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.05), 0 12px 40px -20px rgba(0,0,0,0.12)"
+        },
+        transition: voiceMode ? {
+          borderColor: { repeat: Infinity, duration: 4, ease: "easeInOut" },
+          boxShadow: { repeat: Infinity, duration: 4, ease: "easeInOut" }
+        } : { duration: 0.5 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: fileRef, type: "file", className: "hidden", onChange: handleFileChange }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: camRef, type: "file", accept: "image/*,video/*", className: "hidden", onChange: handleFileChange }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: pubFileRef, type: "file", className: "hidden", onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) onPubFileSelected?.(f);
+            e.target.value = "";
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { mode: "wait", initial: false, children: publishMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_react2.motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.15 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-4 pt-3 pb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] tracking-[0.08em] uppercase text-black/30 dark:text-white/55", children: "Nueva publicaci\xF3n" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: () => onPublishModeChange?.(false),
+                      className: "text-black/30 hover:text-black/60 dark:hover:text-white/77 transition-colors",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "w-3.5 h-3.5", strokeWidth: 1.8 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    autoFocus: true,
+                    value: pubTitle,
+                    onChange: (e) => onPubTitleChange?.(e.target.value),
+                    placeholder: "T\xEDtulo\u2026",
+                    className: "w-full text-[14px] font-medium text-black dark:text-white tracking-[-0.025em] placeholder:text-black/25 dark:placeholder:text-white/55 bg-transparent outline-none"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pt-1.5 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "textarea",
+                  {
+                    value: pubBody,
+                    onChange: (e) => onPubBodyChange?.(e.target.value),
+                    placeholder: "Descripci\xF3n\u2026 usa # para temas y @ para mencionar personas",
+                    rows: 2,
+                    className: "w-full resize-none text-[12.5px] text-black/60 dark:text-white/77 tracking-[-0.01em] leading-relaxed placeholder:text-black/25 dark:placeholder:text-white/55 bg-transparent outline-none"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pb-2.5 flex items-center gap-1.5 overflow-x-auto no-scrollbar", children: PUBLISH_FORMATS.map((f) => {
+                  const Ico = f.icon;
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "button",
+                    {
+                      onClick: () => onPubFormatChange?.(f.id),
+                      className: `shrink-0 h-6 pl-1.5 pr-2.5 rounded-full inline-flex items-center gap-1 text-[10.5px] tracking-[-0.01em] transition-all ${pubFormat === f.id ? "bg-black dark:bg-white text-white dark:text-black" : "bg-black/[0.04] dark:bg-white/[0.04] text-black/45 dark:text-white/63 hover:bg-black/[0.07] dark:hover:bg-white/[0.07] hover:text-black dark:hover:text-white"}`,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ico, { className: "w-2.5 h-2.5", strokeWidth: 1.7 }),
+                        f.label
+                      ]
+                    },
+                    f.id
+                  );
+                }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5 px-3 pb-3 border-t border-black/[0.05] dark:border-white/[0.11] pt-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: () => pubFileRef.current?.click(),
+                      disabled: pubUploading,
+                      className: "w-7 h-7 shrink-0 rounded-full flex items-center justify-center text-black/40 dark:text-white/55 hover:text-black dark:hover:text-white hover:bg-black/[0.05] dark:hover:bg-white/[0.05] transition-colors disabled:opacity-40",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: "w-3.5 h-3.5", strokeWidth: 1.7 })
+                    }
+                  ),
+                  (pubUploading || pubFileName) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10.5px] text-black/40 dark:text-white/55 tracking-[-0.01em] truncate max-w-[140px]", children: pubUploading ? "Subiendo\u2026" : pubFileName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: () => onPublishModeChange?.(false),
+                      className: "h-7 px-3.5 rounded-full text-[11.5px] text-black/40 dark:text-white/55 hover:text-black dark:hover:text-white hover:bg-black/[0.04] dark:hover:bg-white/[0.04] tracking-[-0.01em] transition-colors",
+                      children: "Cancelar"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: onPublish,
+                      disabled: !pubTitle.trim() || pubUploading,
+                      className: "h-7 px-4 rounded-full bg-black dark:bg-white text-white dark:text-black text-[11.5px] tracking-[-0.01em] hover:bg-black/85 dark:hover:bg-white/85 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                      children: "Publicar"
+                    }
+                  )
+                ] })
+              ]
+            },
+            "publish"
+          ) : (
+            /* ── NORMAL / RECORDING / AI PHASE ──────────────── */
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_react2.motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.15 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 pt-3 pb-0 min-h-[52px] flex items-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { mode: "wait", children: recording ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_react2.motion.div,
+                    {
+                      initial: { opacity: 0, y: 4 },
+                      animate: { opacity: 1, y: 0 },
+                      exit: { opacity: 0, y: 4 },
+                      transition: { duration: 0.18 },
+                      className: "w-full py-[7px] flex items-center gap-3",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative shrink-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_react2.motion.span,
+                            {
+                              className: "absolute inset-0 rounded-full bg-black/10 dark:bg-white/10",
+                              animate: { scale: [1, 1.7, 1], opacity: [0.5, 0, 0.5] },
+                              transition: { duration: 1.4, repeat: Infinity, ease: "easeInOut" }
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-[9px] h-[9px] rounded-full bg-black dark:bg-white relative" })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-[3px]", children: [0.6, 1, 0.7, 1.2, 0.5, 0.9, 1.1, 0.6, 0.8, 1, 0.7, 0.5].map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_react2.motion.span,
+                          {
+                            className: "w-[2.5px] rounded-full bg-black/50 dark:bg-white/50 block",
+                            animate: { scaleY: [h * 0.4, h, h * 0.3, h * 0.9, h * 0.5] },
+                            transition: { duration: 0.8 + i * 0.07, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" },
+                            style: { height: 18, transformOrigin: "center" }
+                          },
+                          i
+                        )) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[13px] tracking-[-0.01em] text-black/45 dark:text-white/63 tabular-nums", children: [
+                          String(Math.floor(recordSecs / 60)).padStart(2, "0"),
+                          ":",
+                          String(recordSecs % 60).padStart(2, "0")
+                        ] })
+                      ]
+                    },
+                    "recording"
+                  ) : aiPhase === "idle" ? (
+                    /* Normal text input */
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_react2.motion.div,
+                      {
+                        initial: { opacity: 0 },
+                        animate: { opacity: 1 },
+                        exit: { opacity: 0 },
+                        transition: { duration: 0.15 },
+                        className: "w-full",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          AutoTextarea,
+                          {
+                            value,
+                            onChange,
+                            onSubmit: onSend,
+                            onFocus,
+                            onBlur,
+                            placeholder
+                          }
+                        )
+                      },
+                      "textarea"
+                    )
+                  ) : (
+                    /* AI phase display */
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_react2.motion.div,
+                      {
+                        initial: { opacity: 0, y: 4 },
+                        animate: { opacity: 1, y: 0 },
+                        exit: { opacity: 0 },
+                        transition: { duration: 0.2 },
+                        className: "w-full py-[7px] flex items-center justify-between gap-3",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.AnimatePresence, { mode: "wait", children: [
+                            aiPhase === "sent" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_react2.motion.p,
+                              {
+                                initial: { opacity: 0, y: 3 },
+                                animate: { opacity: 1, y: 0 },
+                                exit: { opacity: 0, y: -3 },
+                                transition: { duration: 0.18 },
+                                className: "text-[14px] tracking-[-0.02em] leading-[1.55] text-black/80 dark:text-white/92 truncate flex-1",
+                                children: sentText
+                              },
+                              "sent"
+                            ),
+                            aiPhase === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                              import_react2.motion.div,
+                              {
+                                initial: { opacity: 0, y: 3 },
+                                animate: { opacity: 1, y: 0 },
+                                exit: { opacity: 0, y: -3 },
+                                transition: { duration: 0.18 },
+                                className: "flex items-center gap-2 flex-1",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13.5px] tracking-[-0.02em] text-black/40 dark:text-white/55", children: "Pensando" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex gap-[3px] items-center", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_react2.motion.span,
+                                    {
+                                      className: "w-[4px] h-[4px] rounded-full bg-black/30 dark:bg-white/30 block",
+                                      animate: { opacity: [0.3, 1, 0.3] },
+                                      transition: { duration: 1.2, repeat: Infinity, delay: i * 0.2 }
+                                    },
+                                    i
+                                  )) })
+                                ]
+                              },
+                              "thinking"
+                            ),
+                            aiPhase === "acting" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_react2.motion.p,
+                              {
+                                initial: { opacity: 0, y: 3 },
+                                animate: { opacity: 1, y: 0 },
+                                exit: { opacity: 0, y: -3 },
+                                transition: { duration: 0.2 },
+                                className: "text-[13.5px] tracking-[-0.02em] text-black/40 dark:text-white/55 flex-1",
+                                children: aiStatus
+                              },
+                              aiStatus
+                            ),
+                            aiPhase === "done" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_react2.motion.p,
+                              {
+                                initial: { opacity: 0, y: 3 },
+                                animate: { opacity: 1, y: 0 },
+                                exit: { opacity: 0, y: -3 },
+                                transition: { duration: 0.18 },
+                                className: "text-[13.5px] tracking-[-0.02em] text-black/40 dark:text-white/55 flex-1",
+                                children: "Listo"
+                              },
+                              "done"
+                            )
+                          ] }),
+                          aiPhase !== "sent" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              onClick: onThinkingToggle,
+                              className: `shrink-0 h-6 px-2.5 rounded-full border text-[11px] tracking-[-0.01em] transition-colors ${thinkingOpen ? "border-black/20 dark:border-white/26 bg-black/[0.05] dark:bg-white/[0.05] text-black/60 dark:text-white/77" : "border-black/[0.08] dark:border-white/[0.13] text-black/30 dark:text-white/55 hover:text-black/55 dark:hover:text-white/69 hover:border-black/15 dark:hover:border-white/21"}`,
+                              children: thinkingOpen ? "Cerrar" : "Ver m\xE1s"
+                            }
+                          )
+                        ]
+                      },
+                      "status"
+                    )
+                  ) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5 px-3 pt-1 pb-2.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          onClick: () => setAttachOpen((o) => !o),
+                          className: `w-8 h-8 shrink-0 rounded-full flex items-center justify-center transition-colors ${attachOpen ? "bg-black/[0.07] dark:bg-white/[0.07] text-black dark:text-white" : "text-black/70 dark:text-white/87 hover:text-black dark:hover:text-white hover:bg-black/[0.05] dark:hover:bg-white/[0.05]"}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: `w-[15px] h-[15px] transition-transform duration-200 ${attachOpen ? "rotate-45" : ""}` })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: attachOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_react2.motion.div,
+                          {
+                            initial: { opacity: 0 },
+                            animate: { opacity: 1 },
+                            exit: { opacity: 0 },
+                            className: "fixed inset-0 z-30 bg-black/20 backdrop-blur-[2px]",
+                            onClick: () => setAttachOpen(false)
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          import_react2.motion.div,
+                          {
+                            initial: { opacity: 0, scale: 0.96, y: 8 },
+                            animate: { opacity: 1, scale: 1, y: 0 },
+                            exit: { opacity: 0, scale: 0.97, y: 6 },
+                            transition: { type: "spring", stiffness: 340, damping: 30 },
+                            className: "hidden md:flex fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[340px] max-w-[90vw] flex-col rounded-2xl border border-black/[0.09] dark:border-white/[0.14] bg-white/90 dark:bg-[#171717]/90 backdrop-blur-xl shadow-[0_30px_90px_-20px_rgba(0,0,0,0.28)] dark:shadow-[0_30px_90px_-20px_rgba(0,0,0,0.64)] z-40 overflow-hidden",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-4 pt-4 pb-3 border-b border-black/[0.06] dark:border-white/[0.11]", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13px] font-medium tracking-[-0.02em] text-black dark:text-white", children: "Adjuntar" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "button",
+                                  {
+                                    onClick: () => setAttachOpen(false),
+                                    className: "w-7 h-7 flex items-center justify-center rounded-full text-black/35 dark:text-white/55 hover:text-black dark:hover:text-white hover:bg-black/[0.05] dark:hover:bg-white/[0.05] transition-colors",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "w-4 h-4", strokeWidth: 1.8 })
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-2 flex flex-col gap-0.5", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "button",
+                                  {
+                                    onClick: () => {
+                                      setAttachOpen(false);
+                                      fileRef.current?.click();
+                                    },
+                                    className: "flex items-center gap-3 h-10 px-3 rounded-xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group",
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-7 h-7 rounded-xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HardDrive, { className: "w-4 h-4 text-black/55 dark:text-white/69", strokeWidth: 1.6 }) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[12.5px] tracking-[-0.02em] text-black/80 dark:text-white/92 leading-tight", children: "Desde dispositivo" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[11px] text-black/30 dark:text-white/55 tracking-[-0.01em]", children: "Cualquier archivo local" })
+                                      ] })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "button",
+                                  {
+                                    onClick: () => {
+                                      setAttachOpen(false);
+                                      camRef.current?.click();
+                                    },
+                                    className: "flex items-center gap-3 h-10 px-3 rounded-xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group",
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-7 h-7 rounded-xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Camera, { className: "w-4 h-4 text-black/55 dark:text-white/69", strokeWidth: 1.6 }) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[12.5px] tracking-[-0.02em] text-black/80 dark:text-white/92 leading-tight", children: "C\xE1mara / imagen" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[11px] text-black/30 dark:text-white/55 tracking-[-0.01em]", children: "Foto o video" })
+                                      ] })
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "button",
+                                  {
+                                    onClick: () => {
+                                      setAttachOpen(false);
+                                      onCloudOpen?.();
+                                    },
+                                    className: "flex items-center gap-3 h-10 px-3 rounded-xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group",
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-7 h-7 rounded-xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Cloud, { className: "w-4 h-4 text-black/55 dark:text-white/69", strokeWidth: 1.6 }) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[12.5px] tracking-[-0.02em] text-black/80 dark:text-white/92 leading-tight", children: "Nube de Handeia" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[11px] text-black/30 dark:text-white/55 tracking-[-0.01em]", children: "Tus archivos guardados" })
+                                      ] })
+                                    ]
+                                  }
+                                ),
+                                connectedList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-3 my-1.5 border-t border-black/[0.06] dark:border-white/[0.11]" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "px-3 pb-1 text-[9.5px] tracking-[0.1em] uppercase text-black/25 dark:text-white/55", children: "Conectores" }),
+                                  connectedList.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                    "button",
+                                    {
+                                      onClick: () => {
+                                        onConnectorInsert?.(c.name);
+                                        setAttachOpen(false);
+                                      },
+                                      className: "flex items-center gap-3 h-10 px-3 rounded-xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group",
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-7 h-7 rounded-xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Link, { className: "w-3.5 h-3.5 text-black/50 dark:text-white/66", strokeWidth: 1.6 }) }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[12.5px] tracking-[-0.02em] text-black/80 dark:text-white/92 leading-tight truncate", children: c.name }),
+                                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[11px] text-black/30 dark:text-white/55 tracking-[-0.01em]", children: "Conectado" })
+                                        ] })
+                                      ]
+                                    },
+                                    c.id
+                                  ))
+                                ] }),
+                                hasMoreConn && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "button",
+                                  {
+                                    onClick: () => {
+                                      setAttachOpen(false);
+                                      onNavigateConnectors?.();
+                                    },
+                                    className: "flex items-center gap-3 h-10 px-3 rounded-xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group",
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-7 h-7 rounded-xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plug, { className: "w-3.5 h-3.5 text-black/35 dark:text-white/55", strokeWidth: 1.6 }) }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[12.5px] tracking-[-0.02em] text-black/40 dark:text-white/55", children: "Ver todos los conectores" })
+                                    ]
+                                  }
+                                )
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          import_react2.motion.div,
+                          {
+                            initial: { y: "100%" },
+                            animate: { y: 0 },
+                            exit: { y: "100%" },
+                            transition: { type: "spring", stiffness: 380, damping: 36 },
+                            className: "md:hidden fixed inset-x-0 bottom-0 z-40 flex flex-col rounded-t-3xl border-t border-black/[0.08] dark:border-white/[0.13] bg-white/90 dark:bg-[#171717]/90 backdrop-blur-xl shadow-[0_-16px_48px_-12px_rgba(0,0,0,0.2)] dark:shadow-[0_-16px_48px_-12px_rgba(0,0,0,0.46)]",
+                            style: { maxHeight: "52vh" },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pt-3 pb-1 flex justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-9 h-1 rounded-full bg-black/15 dark:bg-white/15" }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "overflow-y-auto px-3 pb-8 flex flex-col gap-0.5", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: () => {
+                                  setAttachOpen(false);
+                                  fileRef.current?.click();
+                                }, className: "flex items-center gap-3 h-12 px-3 rounded-2xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-9 h-9 rounded-2xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HardDrive, { className: "w-[18px] h-[18px] text-black/55 dark:text-white/69", strokeWidth: 1.6 }) }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[13.5px] tracking-[-0.02em] text-black/80 dark:text-white/92", children: "Desde dispositivo" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[11.5px] text-black/30 dark:text-white/55", children: "Cualquier archivo local" })
+                                  ] })
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: () => {
+                                  setAttachOpen(false);
+                                  camRef.current?.click();
+                                }, className: "flex items-center gap-3 h-12 px-3 rounded-2xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-9 h-9 rounded-2xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Camera, { className: "w-[18px] h-[18px] text-black/55 dark:text-white/69", strokeWidth: 1.6 }) }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[13.5px] tracking-[-0.02em] text-black/80 dark:text-white/92", children: "C\xE1mara / imagen" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[11.5px] text-black/30 dark:text-white/55", children: "Foto o video" })
+                                  ] })
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: () => {
+                                  setAttachOpen(false);
+                                  onCloudOpen?.();
+                                }, className: "flex items-center gap-3 h-12 px-3 rounded-2xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-9 h-9 rounded-2xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Cloud, { className: "w-[18px] h-[18px] text-black/55 dark:text-white/69", strokeWidth: 1.6 }) }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[13.5px] tracking-[-0.02em] text-black/80 dark:text-white/92", children: "Nube de Handeia" }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[11.5px] text-black/30 dark:text-white/55", children: "Tus archivos guardados" })
+                                  ] })
+                                ] }),
+                                connectedList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-3 my-2 border-t border-black/[0.06] dark:border-white/[0.11]" }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "px-3 pb-1 text-[10px] tracking-[0.1em] uppercase text-black/25 dark:text-white/55", children: "Conectores" }),
+                                  connectedList.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: () => {
+                                    onConnectorInsert?.(c.name);
+                                    setAttachOpen(false);
+                                  }, className: "flex items-center gap-3 h-12 px-3 rounded-2xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group", children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-9 h-9 rounded-2xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Link, { className: "w-[16px] h-[16px] text-black/50 dark:text-white/66", strokeWidth: 1.6 }) }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[13.5px] tracking-[-0.02em] text-black/80 dark:text-white/92", children: c.name }),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[11.5px] text-black/30 dark:text-white/55", children: "Conectado" })
+                                    ] })
+                                  ] }, c.id))
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: () => {
+                                  setAttachOpen(false);
+                                  onNavigateConnectors?.();
+                                }, className: "flex items-center gap-3 h-12 px-3 rounded-2xl text-left hover:bg-black/[0.04] dark:hover:bg-white/[0.04] transition-colors group", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-9 h-9 rounded-2xl bg-black/[0.05] dark:bg-white/[0.05] group-hover:bg-black/[0.07] flex items-center justify-center shrink-0 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plug, { className: "w-[16px] h-[16px] text-black/35 dark:text-white/55", strokeWidth: 1.6 }) }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13.5px] tracking-[-0.02em] text-black/40 dark:text-white/55", children: "Ver todos los conectores" })
+                                ] })
+                              ] })
+                            ]
+                          }
+                        )
+                      ] }) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative shrink-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "button",
+                        {
+                          onClick: () => setModelOpen((o) => !o),
+                          className: "h-7 inline-flex items-center gap-1.5 rounded-full border border-black/[0.09] dark:border-white/[0.14] px-3 text-[12px] tracking-[-0.02em] text-black/60 dark:text-white/77 hover:text-black dark:hover:text-white hover:border-black/20 dark:hover:border-white/26 hover:bg-black/[0.03] dark:hover:bg-white/[0.03] transition-colors",
+                          children: [
+                            MODELS.find((m) => m.id === model)?.label ?? model,
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { className: `w-[11px] h-[11px] opacity-70 transition-transform ${modelOpen ? "rotate-180" : ""}` })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: modelOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed inset-0 z-30", onClick: () => setModelOpen(false) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_react2.motion.div,
+                          {
+                            initial: { opacity: 0, y: 6, scale: 0.97 },
+                            animate: { opacity: 1, y: 0, scale: 1 },
+                            exit: { opacity: 0, y: 6, scale: 0.98 },
+                            transition: { duration: 0.15 },
+                            style: { transformOrigin: "bottom left" },
+                            className: "absolute bottom-full left-0 mb-2 w-48 bg-white dark:bg-[#171717] rounded-xl border border-black/[0.09] dark:border-white/[0.14] shadow-[0_16px_36px_-12px_rgba(0,0,0,0.22)] dark:shadow-[0_16px_36px_-12px_rgba(0,0,0,0.51)] p-1 z-40",
+                            children: MODELS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                              "button",
+                              {
+                                disabled: m.disabled,
+                                onClick: () => {
+                                  if (m.disabled) return;
+                                  onModelChange(m.id);
+                                  setModelOpen(false);
+                                },
+                                className: `w-full flex items-center gap-2 h-8 px-2.5 rounded-lg text-[12.5px] tracking-[-0.02em] transition-colors ${m.disabled ? "text-black/25 dark:text-white/55 cursor-not-allowed" : model === m.id ? "bg-black/[0.05] dark:bg-white/[0.05] text-black dark:text-white" : "text-black/55 dark:text-white/69 hover:text-black dark:hover:text-white hover:bg-black/[0.03] dark:hover:bg-white/[0.03]"}`,
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1 text-left", children: m.label }),
+                                  m.note && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9.5px] tracking-[0.03em] uppercase text-black/30 dark:text-white/55", children: m.note }),
+                                  !m.disabled && model === m.id && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "w-3.5 h-3.5 shrink-0", strokeWidth: 2.4 })
+                                ]
+                              },
+                              m.id
+                            ))
+                          }
+                        )
+                      ] }) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { mode: "wait", children: recording ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_react2.motion.div,
+                      {
+                        initial: { opacity: 0, x: 8 },
+                        animate: { opacity: 1, x: 0 },
+                        exit: { opacity: 0, x: 8 },
+                        transition: { duration: 0.15 },
+                        className: "flex items-center gap-1",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              onClick: onCancelRecording,
+                              className: "h-7 px-3 rounded-full text-[11.5px] tracking-[-0.01em] text-black/40 dark:text-white/55 hover:text-black dark:hover:text-white hover:bg-black/[0.05] dark:hover:bg-white/[0.05] transition-colors border border-black/[0.08] dark:border-white/[0.13]",
+                              children: "Cancelar"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              onClick: onSendRecording,
+                              className: "h-7 px-3 rounded-full text-[11.5px] tracking-[-0.01em] bg-black dark:bg-white text-white dark:text-black hover:bg-black/80 dark:hover:bg-white/80 transition-colors",
+                              children: "Enviar"
+                            }
+                          )
+                        ]
+                      },
+                      "rec-actions"
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_react2.motion.div,
+                      {
+                        initial: { opacity: 0 },
+                        animate: { opacity: 1 },
+                        exit: { opacity: 0 },
+                        transition: { duration: 0.1 },
+                        className: "flex items-center gap-1",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              onClick: onStartRecording,
+                              className: "w-8 h-8 shrink-0 rounded-full flex items-center justify-center text-black/70 dark:text-white/87 hover:text-black dark:hover:text-white hover:bg-black/[0.05] dark:hover:bg-white/[0.05] transition-colors",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Mic, { className: "w-[15px] h-[15px]", strokeWidth: 1.7 })
+                            }
+                          ),
+                          onVoiceModeToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              onClick: onVoiceModeToggle,
+                              className: `w-8 h-8 shrink-0 rounded-full flex items-center justify-center transition-colors ${voiceMode ? "bg-black/[0.07] dark:bg-white/[0.07] text-black dark:text-white" : "text-black/70 dark:text-white/87 hover:text-black dark:hover:text-white hover:bg-black/[0.05] dark:hover:bg-white/[0.05]"}`,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { mode: "wait", children: voiceMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.motion.span, { initial: { opacity: 0, rotate: -45 }, animate: { opacity: 1, rotate: 0 }, exit: { opacity: 0, rotate: 45 }, transition: { duration: 0.15 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "w-[15px] h-[15px]", strokeWidth: 1.8 }) }, "x") : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AudioWaveform, { className: "w-[15px] h-[15px]", strokeWidth: 1.7 }) }, "wave") })
+                            }
+                          ),
+                          actionsEndSlot
+                        ]
+                      },
+                      "mic-btn"
+                    ) })
+                  ] })
+                ]
+              },
+              "chat"
+            )
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: voiceMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_react2.motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
+              className: "absolute inset-0 pointer-events-none rounded-2xl overflow-hidden",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VoiceCanvas, { recording, voiceMode }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: "absolute inset-0 mix-blend-overlay pointer-events-none",
+                    style: {
+                      opacity: 0.06,
+                      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+                      backgroundSize: "160px 160px"
+                    }
+                  }
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/agent.ts
+var AGENT_PROTOCOL_VERSION = 1;
+
+// src/react/agent.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CIRCLE_SIZE = 44;
+var FIELD_GAP = 12;
+var HANDEIA_POR_DEFECTO = "https://handeia.com";
+var RUTA_TURNO = "/api/agent/space";
+function acotar(x, y) {
+  const M = 8;
+  const vv = typeof window !== "undefined" ? window.visualViewport : null;
+  const w = vv?.width ?? window.innerWidth;
+  const h = vv?.height ?? window.innerHeight;
+  return {
+    x: Math.min(Math.max(x, M), Math.max(M, w - CIRCLE_SIZE - M)),
+    y: Math.min(Math.max(y, M), Math.max(M, h - CIRCLE_SIZE - M))
+  };
+}
+function HandeiaAgent(props) {
+  const base = (props.handeiaUrl ?? HANDEIA_POR_DEFECTO).replace(/\/$/, "");
+  const [fieldOpen, setFieldOpen] = (0, import_react3.useState)(false);
+  const [pos, setPos] = (0, import_react3.useState)(null);
+  const drag = (0, import_react3.useRef)(null);
+  const [texto, setTexto] = (0, import_react3.useState)("");
+  const [model, setModel] = (0, import_react3.useState)(MODELS[0]?.id ?? "");
+  const [fase, setFase] = (0, import_react3.useState)("idle");
+  const [enviado, setEnviado] = (0, import_react3.useState)("");
+  const [respuesta, setRespuesta] = (0, import_react3.useState)("");
+  const historial = (0, import_react3.useRef)([]);
+  const [pendiente, setPendiente] = (0, import_react3.useState)(null);
+  const onDown = (e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    drag.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      origX: pos?.x ?? r.left,
+      origY: pos?.y ?? r.top,
+      moved: false
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = e.clientX - d.startX;
+    const dy = e.clientY - d.startY;
+    if (!d.moved && Math.hypot(dx, dy) < 6) return;
+    d.moved = true;
+    const { x, y } = acotar(d.origX + dx, d.origY + dy);
+    const vv = window.visualViewport;
+    setPos({
+      x,
+      y,
+      openLeft: x > (vv?.width ?? window.innerWidth) / 2,
+      openAbove: y > (vv?.height ?? window.innerHeight) / 2
+    });
+  };
+  const onUp = () => {
+    const d = drag.current;
+    drag.current = null;
+    if (d && !d.moved) setFieldOpen((v) => !v);
+  };
+  (0, import_react3.useEffect)(() => {
+    const reacomodar = () => setPos((p) => p ? { ...p, ...acotar(p.x, p.y) } : p);
+    window.addEventListener("resize", reacomodar);
+    window.visualViewport?.addEventListener("resize", reacomodar);
+    return () => {
+      window.removeEventListener("resize", reacomodar);
+      window.visualViewport?.removeEventListener("resize", reacomodar);
+    };
+  }, []);
+  const turno = (0, import_react3.useCallback)(async (mensaje, actionResult) => {
+    let context;
+    try {
+      context = await props.getContext?.();
+    } catch {
+      context = void 0;
+    }
+    let data;
+    try {
+      const res = await fetch(`${base}${RUTA_TURNO}`, {
+        method: "POST",
+        // La identidad va en la cookie de sesión de Handeia. El espacio nunca
+        // ve ni toca el token del usuario.
+        credentials: "include",
+        headers: { "Content-Type": "application/json; charset=utf-8" },
+        body: JSON.stringify({
+          protocol: AGENT_PROTOCOL_VERSION,
+          capId: props.capabilityId,
+          message: mensaje,
+          context,
+          actions: props.actions ?? [],
+          history: historial.current.slice(-12),
+          actionResult
+        })
+      });
+      data = await res.json();
+      if (!res.ok || data.ok === false) {
+        setRespuesta(
+          data.error === "no_autenticado" ? "Inicia sesi\xF3n en Handeia para usar el asistente." : data.error === "espacio_no_instalado" ? "Este espacio no est\xE1 instalado en tu Handeia." : data.error === "cupo_agotado" ? "Se agot\xF3 el uso del asistente por hoy en este espacio." : "Handeia no pudo responder ahora mismo."
+        );
+        setFase("done");
+        return;
+      }
+    } catch {
+      setRespuesta("No pude comunicarme con Handeia.");
+      setFase("done");
+      return;
+    }
+    if (data.text) {
+      setRespuesta(data.text);
+      historial.current.push({ role: "agent", text: data.text });
+    }
+    setFase("done");
+    if (!data.action) return;
+    if (!props.onAction) {
+      setRespuesta("Esto requiere una acci\xF3n que este espacio todav\xEDa no sabe ejecutar.");
+      return;
+    }
+    if (data.confirm) {
+      setPendiente({ name: data.action.name, args: data.action.args ?? {} });
+      return;
+    }
+    await ejecutar(data.action.name, data.action.args ?? {}, mensaje);
+  }, [base, props]);
+  const ejecutar = (0, import_react3.useCallback)(async (name, args, mensaje) => {
+    let r;
+    try {
+      r = await props.onAction(name, args);
+    } catch (e) {
+      r = { action: name, ok: false, error: e instanceof Error ? e.message : "fall\xF3" };
+    }
+    setFase("thinking");
+    await turno(mensaje, r);
+  }, [props, turno]);
+  const enviar = (0, import_react3.useCallback)(() => {
+    const t = texto.trim();
+    if (!t || fase === "thinking") return;
+    setTexto("");
+    setEnviado(t);
+    setRespuesta("");
+    setPendiente(null);
+    setFase("thinking");
+    historial.current.push({ role: "user", text: t });
+    void turno(t);
+  }, [texto, fase, turno]);
+  const sinMover = !pos;
+  const left = sinMover ? "50%" : pos.openLeft ? pos.x - FIELD_GAP : pos.x + CIRCLE_SIZE + FIELD_GAP;
+  const top = sinMover ? window?.innerHeight - 20 : pos.openAbove ? pos.y - FIELD_GAP : pos.y + CIRCLE_SIZE + FIELD_GAP;
+  const tx = sinMover ? "-50%" : pos.openLeft ? "-100%" : "0%";
+  const ty = sinMover ? "-100%" : pos.openAbove ? "-100%" : "0%";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.AnimatePresence, { children: fieldOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react4.motion.div,
+      {
+        initial: { opacity: 0, scale: 0.97, y: 6 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.98, y: 4 },
+        transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+        style: { position: "fixed", left, top, transform: `translate(${tx}, ${ty})`, zIndex: 2147483e3 },
+        className: "w-[min(560px,calc(100vw-32px))]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => {
+                setFieldOpen(false);
+                setEnviado("");
+                setRespuesta("");
+                setFase("idle");
+              },
+              "aria-label": "Cerrar",
+              className: "absolute -top-2.5 -right-2.5 z-10 w-6 h-6 rounded-full flex items-center justify-center text-white dark:text-black bg-black dark:bg-white shadow-[0_4px_14px_-2px_rgba(0,0,0,0.4)] transition-transform hover:scale-110 active:scale-95",
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3 h-3", strokeWidth: 2.4 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.AnimatePresence, { children: fase === "done" && respuesta && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_react4.motion.div,
+            {
+              initial: { opacity: 0, y: 6 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },
+              className: "mb-4 flex flex-col items-center gap-2 text-center px-2",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[11px] uppercase tracking-[0.15em] text-black/30 dark:text-white/55 truncate max-w-full", children: enviado }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[17px] text-black/85 dark:text-white/92 tracking-[-0.02em] leading-relaxed", children: respuesta }),
+                pendiente && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-1 flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: () => {
+                        const p = pendiente;
+                        setPendiente(null);
+                        void ejecutar(p.name, p.args, enviado);
+                      },
+                      className: "h-8 px-4 rounded-full bg-black dark:bg-white text-white dark:text-black text-[12px] tracking-[-0.01em]",
+                      children: "Hacerlo"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: () => {
+                        setPendiente(null);
+                        setRespuesta("Cancelado.");
+                      },
+                      className: "h-8 px-4 rounded-full border border-black/[0.12] dark:border-white/[0.18] text-black/70 dark:text-white/85 text-[12px]",
+                      children: "Cancelar"
+                    }
+                  )
+                ] })
+              ]
+            },
+            enviado
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            InputBar,
+            {
+              value: texto,
+              onChange: setTexto,
+              onSend: enviar,
+              aiPhase: fase,
+              sentText: enviado,
+              placeholder: props.placeholder ?? "Preg\xFAntale a Handeia\u2026",
+              model,
+              onModelChange: setModel
+            }
+          )
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        onPointerDown: onDown,
+        onPointerMove: onMove,
+        onPointerUp: onUp,
+        "aria-label": "Asistente de Handeia",
+        style: {
+          position: "fixed",
+          zIndex: 2147483e3,
+          ...pos ? { left: pos.x, top: pos.y } : { bottom: 20, right: 20 }
+        },
+        className: "w-11 h-11 rounded-full flex items-center justify-center text-white bg-black dark:bg-white dark:text-black shadow-[0_10px_30px_-6px_rgba(0,0,0,0.4)] transition-transform hover:scale-105 active:scale-95 touch-none cursor-grab active:cursor-grabbing",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Sparkles, { className: "w-4 h-4", strokeWidth: 1.9 })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HandeiaAgent,
+  InputBar,
+  MODELS,
+  VoiceCanvas
+});