@decido/shell 4.0.2 → 4.0.3

package/dist/chunk-OCHGY2MN.mjs

@@ -0,0 +1,1662 @@
+import {
+  getRegisteredShellTypes,
+  getShellMeta
+} from "./chunk-IMHORBTL.mjs";
+import {
+  useSuggestionsStore
+} from "./chunk-F3OTFHNO.mjs";
+import {
+  getIntentPatterns,
+  useIntentLens
+} from "./chunk-QHQW2HMU.mjs";
+import {
+  useMorphInstanceStore
+} from "./chunk-UHT6FIYF.mjs";
+import {
+  useUIComponentStore
+} from "./chunk-3BZX7LF2.mjs";
+import {
+  useLayoutStore
+} from "./chunk-MSVEFEXE.mjs";
+import {
+  usePlaygroundStore
+} from "./chunk-XMSU6UWD.mjs";
+
+// src/components/playground/PlaygroundChat.tsx
+import React8 from "react";
+import { motion as motion4, AnimatePresence as AnimatePresence4 } from "motion/react";
+import { Building2 as Building22, BrainCircuit as BrainCircuit2, Sparkles as Sparkles3, Download } from "lucide-react";
+
+// src/components/playground/SuggestionCards.tsx
+import React from "react";
+
+// src/config/IconRegistry.ts
+import {
+  Search,
+  Workflow,
+  Zap,
+  Terminal,
+  BrainCircuit,
+  Command,
+  FileText,
+  Cpu,
+  ShoppingCart,
+  Building2,
+  Activity,
+  Thermometer,
+  AlertTriangle,
+  TrendingUp,
+  PackageCheck,
+  Network,
+  Home,
+  Settings,
+  MessageSquare,
+  Globe,
+  Lock,
+  Shield,
+  Database,
+  HardDrive,
+  Wifi,
+  Cloud,
+  Server,
+  BarChart3,
+  PieChart,
+  Gauge,
+  Bell,
+  Mail,
+  Users,
+  FolderOpen,
+  Code,
+  Layers,
+  Box,
+  Rocket,
+  Sparkles
+} from "lucide-react";
+var ICON_MAP = {
+  // Communication & AI
+  "Search": Search,
+  "MessageSquare": MessageSquare,
+  "BrainCircuit": BrainCircuit,
+  "Sparkles": Sparkles,
+  "Command": Command,
+  "Terminal": Terminal,
+  // Actions & Flow
+  "Workflow": Workflow,
+  "Zap": Zap,
+  "Rocket": Rocket,
+  "Network": Network,
+  // Data & Files
+  "FileText": FileText,
+  "FolderOpen": FolderOpen,
+  "Code": Code,
+  "Database": Database,
+  // Business & Commerce
+  "ShoppingCart": ShoppingCart,
+  "Building2": Building2,
+  "Users": Users,
+  // Monitoring & Metrics
+  "Activity": Activity,
+  "Thermometer": Thermometer,
+  "AlertTriangle": AlertTriangle,
+  "TrendingUp": TrendingUp,
+  "BarChart3": BarChart3,
+  "PieChart": PieChart,
+  "Gauge": Gauge,
+  "Bell": Bell,
+  // Infrastructure
+  "Cpu": Cpu,
+  "HardDrive": HardDrive,
+  "Server": Server,
+  "Cloud": Cloud,
+  "Wifi": Wifi,
+  "PackageCheck": PackageCheck,
+  // Security & Settings
+  "Lock": Lock,
+  "Shield": Shield,
+  "Settings": Settings,
+  // Misc
+  "Globe": Globe,
+  "Mail": Mail,
+  "Home": Home,
+  "Layers": Layers,
+  "Box": Box
+};
+function resolveIcon(name) {
+  return ICON_MAP[name] || Command;
+}
+var COLOR_MAP = {
+  "emerald": "text-emerald-400",
+  "cyan": "text-cyan-400",
+  "purple": "text-purple-400",
+  "orange": "text-orange-400",
+  "yellow": "text-yellow-400",
+  "rose": "text-rose-400",
+  "red": "text-red-400",
+  "blue": "text-blue-400",
+  "indigo": "text-indigo-400",
+  "pink": "text-pink-400",
+  "amber": "text-amber-400",
+  "teal": "text-teal-400",
+  "lime": "text-lime-400",
+  "sky": "text-sky-400",
+  "violet": "text-violet-400",
+  "fuchsia": "text-fuchsia-400",
+  "white": "text-white"
+};
+function resolveColor(name) {
+  return COLOR_MAP[name] || "text-white";
+}
+function resolveColorClasses(color) {
+  return {
+    text: COLOR_MAP[color] || "text-white",
+    bg: `bg-${color}-500/10`,
+    border: `border-${color}-500/20`
+  };
+}
+
+// src/components/playground/SuggestionCards.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SuggestionCards = React.memo(function SuggestionCards2({ suggestions, onSelect }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 sm:gap-3 w-full min-w-0 max-w-full mt-3 sm:mt-4", children: suggestions.map((sug, i) => {
+    const IconComponent = resolveIcon(sug.icon);
+    const colorClass = resolveColor(sug.color);
+    return /* @__PURE__ */ jsx("div", { className: "group relative flex flex-col p-3 sm:p-4 bg-surface-tertiary hover:bg-surface-elevated border border-border-subtle hover:border-border-default rounded-xl sm:rounded-2xl text-left transition-all overflow-hidden h-auto min-h-[6rem] sm:h-32 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 cursor-pointer flex flex-col min-w-0", onClick: () => onSelect(sug.command), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5 sm:mb-2", children: [
+        /* @__PURE__ */ jsx("div", { className: `p-1 sm:p-1.5 rounded-full bg-surface-glass shrink-0 ${colorClass}`, children: /* @__PURE__ */ jsx(IconComponent, { size: 12, className: "sm:w-3.5 sm:h-3.5" }) }),
+        /* @__PURE__ */ jsx("span", { className: `text-[11px] sm:text-xs font-bold truncate ${colorClass}`, children: sug.title })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs sm:text-sm text-text-secondary flex-1 leading-snug line-clamp-2 sm:line-clamp-3 overflow-hidden break-words", children: [
+        '"',
+        sug.command,
+        '"'
+      ] })
+    ] }) }, i);
+  }) });
+});
+
+// src/components/playground/PlaygroundFloatingInput.tsx
+import { useState as useState6, useRef as useRef3, useEffect as useEffect4, useMemo as useMemo4, useCallback as useCallback3 } from "react";
+import { motion as motion3, AnimatePresence as AnimatePresence3 } from "motion/react";
+import { Paperclip, FolderOpen as FolderOpen3 } from "lucide-react";
+import { useTimelineStore } from "@decido/engine";
+import { SlashCommandMenu, VoiceLiveMode } from "@decido/chat";
+
+// src/hooks/useAIModelSelector.ts
+import { useState, useEffect, useMemo, useCallback } from "react";
+import {
+  getProviderStatuses
+} from "@decido/kernel-bridge";
+var KNOWN_MODELS = {
+  ollama: [
+    { id: "qwen2.5:7b", label: "Qwen 2.5 7B", provider: "ollama", tag: "local", isLocal: true },
+    { id: "llama3.1:8b", label: "Llama 3.1 8B", provider: "ollama", tag: "local", isLocal: true },
+    { id: "codellama:7b", label: "CodeLlama 7B", provider: "ollama", tag: "code", isLocal: true },
+    { id: "mistral:7b", label: "Mistral 7B", provider: "ollama", tag: "local", isLocal: true }
+  ],
+  gemini: [
+    { id: "gemini-3-flash-preview", label: "3.0 Flash", provider: "gemini", tag: "fast", isLocal: false },
+    { id: "gemini-3.1-pro-preview", label: "3.1 Pro", provider: "gemini", tag: "smart", isLocal: false },
+    { id: "gemini-3.1-flash-lite-preview", label: "3.1 Flash Lite", provider: "gemini", tag: "stable", isLocal: false }
+  ],
+  anthropic: [
+    { id: "claude-sonnet-4-20250514", label: "Sonnet 4", provider: "anthropic", tag: "balanced", isLocal: false },
+    { id: "claude-3-5-haiku-20241022", label: "3.5 Haiku", provider: "anthropic", tag: "fast", isLocal: false }
+  ],
+  openai: [
+    { id: "gpt-4o", label: "GPT-4o", provider: "openai", tag: "smart", isLocal: false },
+    { id: "gpt-4o-mini", label: "GPT-4o Mini", provider: "openai", tag: "fast", isLocal: false }
+  ]
+};
+var PROVIDER_META = {
+  ollama: { label: "Ollama", icon: "\u{1F999}", color: "#10b981", isLocal: true },
+  gemini: { label: "Gemini", icon: "\u2728", color: "#3b82f6", isLocal: false },
+  anthropic: { label: "Claude", icon: "\u{1F9E0}", color: "#a855f7", isLocal: false },
+  openai: { label: "OpenAI", icon: "\u26A1", color: "#06b6d4", isLocal: false },
+  mlx: { label: "MLX", icon: "\u{1F34E}", color: "#f59e0b", isLocal: true }
+};
+var STORAGE_KEY = "decido_ai_model";
+function useAIModelSelector() {
+  const [selectedModelId, setSelectedModelId] = useState(
+    () => localStorage.getItem(STORAGE_KEY) || "gemini-3-flash-preview"
+  );
+  const [providerStatuses, setProviderStatuses] = useState({});
+  useEffect(() => {
+    let mounted = true;
+    const check = async () => {
+      try {
+        const statuses = await getProviderStatuses();
+        if (!mounted) return;
+        const map = {};
+        for (const [id, status] of Object.entries(statuses)) {
+          map[id] = status === "available" ? "online" : "offline";
+        }
+        setProviderStatuses(map);
+      } catch {
+      }
+    };
+    check();
+    const timer = setInterval(check, 3e4);
+    return () => {
+      mounted = false;
+      clearInterval(timer);
+    };
+  }, []);
+  const providerGroups = useMemo(() => {
+    return Object.entries(KNOWN_MODELS).map(([id, models]) => {
+      const meta = PROVIDER_META[id] || { label: id, icon: "\u{1F916}", color: "#888", isLocal: false };
+      return {
+        provider: id,
+        label: meta.label,
+        icon: meta.icon,
+        color: meta.color,
+        isLocal: meta.isLocal,
+        models,
+        status: providerStatuses[id] || "unknown"
+      };
+    });
+  }, [providerStatuses]);
+  const selectedModel = useMemo(() => {
+    for (const group of providerGroups) {
+      const found = group.models.find((m) => m.id === selectedModelId);
+      if (found) return { model: found, group };
+    }
+    return {
+      model: { id: selectedModelId, label: selectedModelId, provider: "unknown", tag: "", isLocal: false },
+      group: providerGroups[0] || null
+    };
+  }, [selectedModelId, providerGroups]);
+  const selectModel = useCallback((modelId) => {
+    setSelectedModelId(modelId);
+    localStorage.setItem(STORAGE_KEY, modelId);
+    if (typeof window !== "undefined" && window.__DECIDO__) {
+      window.__DECIDO__.selectedModel = modelId;
+    }
+  }, []);
+  return {
+    selectedModelId,
+    selectedModel: selectedModel.model,
+    selectedProvider: selectedModel.group,
+    providerGroups,
+    selectModel,
+    providerStatuses
+  };
+}
+
+// src/components/chat-extensions/IntentCatalogPanel.tsx
+import React2, { useState as useState2 } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { ChevronDown, Zap as Zap2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var IntentCatalogPanel = React2.memo(function IntentCatalogPanel2({ onSelect }) {
+  const patterns = getIntentPatterns();
+  const [expanded, setExpanded] = useState2(null);
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full bg-surface-tertiary border border-border-default rounded-xl overflow-hidden shadow-2xl", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "px-3 py-2 flex items-center gap-2 border-b border-border-subtle", children: [
+      /* @__PURE__ */ jsx2(Zap2, { size: 12, className: "text-cyan-400" }),
+      /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-text-muted font-mono uppercase tracking-wider", children: "Intenciones Disponibles" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "max-h-[240px] overflow-y-auto custom-scrollbar", children: [
+      patterns.map((p) => /* @__PURE__ */ jsxs2("div", { className: "border-b border-border-subtle last:border-0", children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: () => setExpanded(expanded === p.type ? null : p.type),
+            className: "w-full flex items-center gap-2 px-3 py-2 text-xs hover:bg-surface-glass transition-colors",
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "text-base leading-none", children: p.icon }),
+              /* @__PURE__ */ jsx2("span", { className: "font-semibold text-text-primary flex-1 text-left", children: p.label }),
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "w-2 h-2 rounded-full shrink-0",
+                  style: { background: p.color }
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                ChevronDown,
+                {
+                  size: 12,
+                  className: `text-text-muted transition-transform ${expanded === p.type ? "rotate-180" : ""}`
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(AnimatePresence, { children: expanded === p.type && /* @__PURE__ */ jsx2(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.15 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx2("div", { className: "px-3 pb-2 space-y-1", children: p.examples.map((ex, i) => /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                onClick: () => onSelect(ex),
+                className: "w-full text-left px-2.5 py-1.5 rounded-lg text-[11px] text-text-secondary hover:text-text-primary hover:bg-surface-glass transition-colors font-mono leading-snug flex items-center gap-2 group",
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: "w-1 h-1 rounded-full shrink-0 opacity-40 group-hover:opacity-100 transition-opacity",
+                      style: { background: p.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2("span", { className: "flex-1", children: ex }),
+                  /* @__PURE__ */ jsx2("span", { className: "text-[9px] text-text-muted opacity-0 group-hover:opacity-100 transition-opacity", children: "\u21B5" })
+                ]
+              },
+              i
+            )) })
+          }
+        ) })
+      ] }, p.type)),
+      patterns.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-xs text-text-muted italic text-center", children: "Sin intenciones registradas" })
+    ] })
+  ] });
+});
+
+// src/components/playground/input-parts/InputToolbar.tsx
+import React4, { useState as useState4, useMemo as useMemo2, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { MonitorPlay, Code2, ChevronDown as ChevronDown3, Zap as Zap3, Brain, Settings2 } from "lucide-react";
+
+// src/components/playground/input-parts/AIModelSelector.tsx
+import React3, { useState as useState3, useRef, useEffect as useEffect2 } from "react";
+import { ChevronDown as ChevronDown2, Cpu as Cpu2 } from "lucide-react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TAG_STYLES = {
+  fast: "bg-cyan-500/20 text-cyan-400",
+  smart: "bg-purple-500/20 text-purple-400",
+  stable: "bg-emerald-500/20 text-emerald-400",
+  new: "bg-emerald-500/20 text-emerald-400",
+  code: "bg-amber-500/20 text-amber-400",
+  local: "bg-emerald-500/15 text-emerald-400",
+  balanced: "bg-purple-500/15 text-purple-400",
+  vision: "bg-pink-500/20 text-pink-400",
+  audio: "bg-amber-500/20 text-amber-400",
+  lite: "bg-surface-glass text-text-secondary"
+};
+var STATUS_DOT = {
+  online: "bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]",
+  offline: "bg-red-400/60",
+  unknown: "bg-surface-tertiary"
+};
+var AIModelSelector = React3.memo(function AIModelSelector2({
+  selectedModelId,
+  selectedModel,
+  providerGroups,
+  onSelect
+}) {
+  const [isOpen, setIsOpen] = useState3(false);
+  const containerRef = useRef(null);
+  useEffect2(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+  const localGroups = providerGroups.filter((g) => g.isLocal);
+  const cloudGroups = providerGroups.filter((g) => !g.isLocal);
+  return /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        },
+        className: "flex items-center gap-1.5 px-2 py-1.5 rounded-xl text-text-muted\n                   hover:text-text-primary hover:bg-surface-glass transition-all text-[10px] font-mono",
+        title: `Modelo AI: ${selectedModel.label}`,
+        children: [
+          /* @__PURE__ */ jsx3(Cpu2, { size: 14 }),
+          /* @__PURE__ */ jsx3(ChevronDown2, { size: 10 })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "absolute left-0 w-64 bg-white/90 dark:bg-surface-tertiary border border-black/[0.06] dark:border-border-default\n                     rounded-xl shadow-xl dark:shadow-2xl z-50 max-h-[360px] overflow-y-auto custom-scrollbar",
+        style: { bottom: "100%", marginBottom: "0.5rem" },
+        children: [
+          localGroups.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "px-3 py-1.5 text-[9px] text-text-muted font-mono uppercase tracking-wider\n                              border-b border-border-subtle flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-emerald-400", children: "\u25CF" }),
+              " Local"
+            ] }),
+            localGroups.map((group) => /* @__PURE__ */ jsx3(
+              ProviderSection,
+              {
+                group,
+                selectedModelId,
+                onSelect: (id) => {
+                  onSelect(id);
+                  setIsOpen(false);
+                }
+              },
+              group.provider
+            ))
+          ] }),
+          cloudGroups.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "px-3 py-1.5 text-[9px] text-text-muted font-mono uppercase tracking-wider\n                              border-b border-border-subtle flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-cyan-400", children: "\u2601" }),
+              " Cloud (BYOK)"
+            ] }),
+            cloudGroups.map((group) => /* @__PURE__ */ jsx3(
+              ProviderSection,
+              {
+                group,
+                selectedModelId,
+                onSelect: (id) => {
+                  onSelect(id);
+                  setIsOpen(false);
+                }
+              },
+              group.provider
+            ))
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+function ProviderSection({
+  group,
+  selectedModelId,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-1.5 text-[10px] font-semibold text-text-secondary", children: [
+      /* @__PURE__ */ jsx3("span", { children: group.icon }),
+      /* @__PURE__ */ jsx3("span", { children: group.label }),
+      /* @__PURE__ */ jsx3("span", { className: `w-1.5 h-1.5 rounded-full ml-auto ${STATUS_DOT[group.status]}` })
+    ] }),
+    group.models.map((m) => /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSelect(m.id);
+        },
+        className: `w-full text-left px-3 py-2 text-xs flex items-center justify-between transition-colors
+            ${selectedModelId === m.id ? "text-text-primary" : "text-text-secondary hover:bg-surface-glass hover:text-text-primary"}`,
+        style: selectedModelId === m.id ? { background: `${group.color}20` } : void 0,
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-mono truncate", children: m.label }),
+          m.tag && /* @__PURE__ */ jsx3("span", { className: `text-[9px] px-1.5 py-0.5 rounded-full font-semibold shrink-0 ${TAG_STYLES[m.tag] || "bg-surface-glass text-text-muted"}`, children: m.tag })
+        ]
+      },
+      m.id
+    ))
+  ] });
+}
+
+// src/components/playground/input-parts/InputToolbar.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var InputToolbar = React4.memo(function InputToolbar2({
+  selectedModelId,
+  selectedModel,
+  providerGroups,
+  onModelSelect,
+  selectedShell,
+  onShellSelect,
+  showCanvas,
+  setShowCanvas,
+  prototypeBrand = "decido",
+  setPrototypeBrand,
+  intentEnabled,
+  onIntentToggle,
+  showIntentPanel,
+  onIntentPanelToggle
+}) {
+  const [showOptionsMenu, setShowOptionsMenu] = useState4(false);
+  const [showShellMenu, setShowShellMenu] = useState4(false);
+  const optionsRef = useRef2(null);
+  const shellRef = useRef2(null);
+  const shellTypes = useMemo2(() => {
+    try {
+      return getRegisteredShellTypes();
+    } catch {
+      return [];
+    }
+  }, []);
+  const cycleBrand = () => {
+    if (!setPrototypeBrand) return;
+    const brands = ["startup_demo", "enterprise_demo", "industrial_demo"];
+    setPrototypeBrand(brands[(brands.indexOf(prototypeBrand) + 1) % brands.length]);
+  };
+  useEffect3(() => {
+    if (!showOptionsMenu) return;
+    const handler = (e) => {
+      if (optionsRef.current && !optionsRef.current.contains(e.target)) {
+        setShowOptionsMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showOptionsMenu]);
+  useEffect3(() => {
+    if (!showShellMenu) return;
+    const handler = (e) => {
+      if (shellRef.current && !shellRef.current.contains(e.target)) {
+        setShowShellMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showShellMenu]);
+  const shellMeta = selectedShell ? getShellMeta(selectedShell) : null;
+  const hasActiveTool = showCanvas || intentEnabled || showIntentPanel;
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center justify-center gap-0.5 sm:gap-1 xl:gap-2 relative flex-1 min-w-0", children: [
+    /* @__PURE__ */ jsx4(
+      AIModelSelector,
+      {
+        selectedModelId,
+        selectedModel,
+        providerGroups,
+        onSelect: onModelSelect
+      }
+    ),
+    /* @__PURE__ */ jsx4("div", { className: "w-px h-4 bg-surface-glass/80 mx-1" }),
+    /* @__PURE__ */ jsxs4("div", { ref: shellRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowShellMenu(!showShellMenu);
+            setShowOptionsMenu(false);
+          },
+          className: `flex items-center gap-1 px-2 py-1.5 rounded-xl hover:bg-surface-glass transition-all text-[10px] font-mono
+            ${selectedShell ? "" : "text-text-muted hover:text-cyan-400"}`,
+          style: selectedShell && shellMeta ? { color: shellMeta.color } : void 0,
+          title: `Destino de salida: ${shellMeta?.label || selectedShell || "Ninguna (chat)"}`,
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "text-sm", children: shellMeta?.icon || "\u{1F4AC}" }),
+            /* @__PURE__ */ jsx4(ChevronDown3, { size: 10 })
+          ]
+        }
+      ),
+      showShellMenu && /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "absolute left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 w-[220px] bg-white/95 dark:bg-surface-tertiary border border-black/[0.06] dark:border-border-default\n                       rounded-2xl shadow-xl dark:shadow-2xl z-[100] max-h-[300px] overflow-y-auto custom-scrollbar flex flex-col backdrop-blur-xl",
+          style: { bottom: "100%", marginBottom: "0.6rem" },
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: "px-3 py-2 text-[10px] text-text-muted font-mono uppercase tracking-wider bg-surface-base/50", children: "Destino de Salida" }),
+            /* @__PURE__ */ jsxs4("div", { className: "p-1 pb-2", children: [
+              /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onShellSelect(null);
+                    setShowShellMenu(false);
+                  },
+                  className: `w-full text-left px-3 py-2.5 rounded-xl text-xs transition-colors font-mono flex items-center gap-2.5
+                  ${!selectedShell ? "bg-cyan-500/10 text-cyan-400 font-semibold" : "text-text-secondary hover:bg-surface-glass hover:text-text-primary"}`,
+                  children: [
+                    /* @__PURE__ */ jsx4("span", { className: "text-base leading-none w-4 text-center", children: "\u{1F4AC}" }),
+                    /* @__PURE__ */ jsx4("span", { children: "Ninguna (Chat)" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4("div", { className: "h-px bg-border-subtle my-1 mx-1" }),
+              shellTypes.map((st) => {
+                const meta = getShellMeta(st);
+                return /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onShellSelect(st);
+                      setShowShellMenu(false);
+                    },
+                    className: `w-full text-left px-3 py-2.5 mt-0.5 rounded-xl text-xs transition-colors font-mono flex items-center gap-2.5
+                      ${selectedShell === st ? "text-text-primary font-semibold" : "text-text-secondary hover:bg-surface-glass hover:text-text-primary"}`,
+                    style: selectedShell === st ? { background: `${meta.color}20` } : void 0,
+                    children: [
+                      /* @__PURE__ */ jsx4("span", { className: "text-base leading-none w-4 text-center", children: meta.icon }),
+                      /* @__PURE__ */ jsx4("span", { className: "flex-1 truncate", children: meta.label }),
+                      /* @__PURE__ */ jsx4("span", { className: "w-1.5 h-1.5 rounded-full shrink-0", style: { background: meta.color } })
+                    ]
+                  },
+                  st
+                );
+              })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "w-px h-4 bg-surface-glass/80 mx-1" }),
+    /* @__PURE__ */ jsxs4("div", { ref: optionsRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowOptionsMenu(!showOptionsMenu);
+            setShowShellMenu(false);
+          },
+          className: `w-8 h-8 rounded-xl flex items-center justify-center transition-all relative
+            ${showOptionsMenu || hasActiveTool ? "text-text-primary bg-surface-glass" : "text-text-secondary hover:text-text-primary hover:bg-surface-glass"}`,
+          title: "Opciones del Agente",
+          children: [
+            /* @__PURE__ */ jsx4(Settings2, { size: 16 }),
+            hasActiveTool && /* @__PURE__ */ jsx4("div", { className: "absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-cyan-400" })
+          ]
+        }
+      ),
+      showOptionsMenu && /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "absolute left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 sm:-right-2 w-[240px] sm:w-[260px] bg-white/95 dark:bg-surface-tertiary border border-black/[0.06] dark:border-border-default\n                       rounded-2xl shadow-xl dark:shadow-2xl z-[100] max-h-[380px] overflow-y-auto custom-scrollbar flex flex-col backdrop-blur-xl",
+          style: { bottom: "100%", marginBottom: "0.6rem" },
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: "px-3 py-2 text-[10px] text-text-muted font-mono uppercase tracking-wider bg-surface-base/50", children: "Agente y Contexto" }),
+            /* @__PURE__ */ jsxs4("div", { className: "p-1", children: [
+              /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onIntentToggle();
+                  },
+                  className: `w-full text-left px-3 py-2.5 rounded-xl text-xs transition-colors font-mono flex items-center justify-between group
+                  ${intentEnabled ? "text-emerald-500 bg-emerald-500/10" : "text-text-secondary hover:bg-surface-glass hover:text-text-primary"}`,
+                  children: [
+                    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2.5", children: [
+                      /* @__PURE__ */ jsx4(Brain, { size: 15 }),
+                      /* @__PURE__ */ jsx4("span", { children: "Interpretar intenciones" })
+                    ] }),
+                    /* @__PURE__ */ jsx4("div", { className: `w-7 h-4 rounded-full flex items-center p-0.5 transition-colors border ${intentEnabled ? "bg-emerald-500 border-emerald-500/0" : "bg-surface-glass border-border-default group-hover:bg-border-subtle"}`, children: /* @__PURE__ */ jsx4("div", { className: `w-3 h-3 rounded-full bg-white transition-transform ${intentEnabled ? "translate-x-[12px]" : "translate-x-0"}` }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onIntentPanelToggle();
+                    setShowOptionsMenu(false);
+                  },
+                  className: "w-full text-left px-3 py-2.5 mt-0.5 rounded-xl text-xs text-text-secondary hover:bg-surface-glass hover:text-cyan-500 transition-colors font-mono flex items-center gap-2.5",
+                  children: [
+                    /* @__PURE__ */ jsx4(Zap3, { size: 15 }),
+                    /* @__PURE__ */ jsx4("span", { children: "Explorar cat\xE1logo" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "h-px bg-border-subtle" }),
+            /* @__PURE__ */ jsx4("div", { className: "px-3 py-2 text-[10px] text-text-muted font-mono uppercase tracking-wider bg-surface-base/50", children: "Entorno Visual" }),
+            /* @__PURE__ */ jsxs4("div", { className: "p-1 pb-2", children: [
+              setShowCanvas && /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowCanvas(!showCanvas);
+                    setShowOptionsMenu(false);
+                  },
+                  className: `w-full text-left px-3 py-2.5 rounded-xl text-xs transition-colors font-mono flex items-center justify-between
+                    ${showCanvas ? "text-primary bg-primary/10" : "text-text-secondary hover:bg-surface-glass hover:text-text-primary"}`,
+                  children: [
+                    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2.5", children: [
+                      /* @__PURE__ */ jsx4(MonitorPlay, { size: 15 }),
+                      /* @__PURE__ */ jsx4("span", { children: "Lienzo (Canvas)" })
+                    ] }),
+                    showCanvas && /* @__PURE__ */ jsx4("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                  ]
+                }
+              ),
+              setPrototypeBrand && /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    cycleBrand();
+                  },
+                  className: "w-full mt-0.5 text-left px-3 py-2.5 rounded-xl text-xs text-amber-500 hover:bg-surface-glass transition-colors font-mono flex items-center justify-between",
+                  children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2.5", children: [
+                    /* @__PURE__ */ jsx4(Code2, { size: 15 }),
+                    /* @__PURE__ */ jsxs4("span", { children: [
+                      "UI: ",
+                      prototypeBrand
+                    ] })
+                  ] })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+});
+
+// src/components/playground/input-parts/InputActions.tsx
+import React5 from "react";
+import { Send, Mic, Square, Sparkles as Sparkles2 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var InputActions = React5.memo(function InputActions2({
+  inputHasText,
+  isGenerating,
+  isTranscribing,
+  onToggleTranscribing,
+  onSend,
+  setIsVoiceActive
+}) {
+  if (isGenerating) {
+    return /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-2 min-w-[100px] justify-end", children: /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => e.stopPropagation(),
+        className: "w-12 h-12 rounded-full text-text-primary bg-red-500/80 hover:bg-red-500 flex items-center justify-center\n                     transition-colors shadow-[0_0_15px_rgba(239,68,68,0.3)]",
+        title: "Detener generaci\xF3n",
+        children: /* @__PURE__ */ jsx5(Square, { size: 18 })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 min-w-[100px] justify-end", children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggleTranscribing();
+        },
+        className: `w-10 h-10 rounded-full flex items-center justify-center transition-all
+          ${isTranscribing ? "text-red-400 bg-red-400/10 animate-pulse" : "text-text-secondary hover:text-text-primary hover:bg-surface-glass"}`,
+        title: "Reconocimiento de voz (STT)",
+        children: /* @__PURE__ */ jsx5(Mic, { size: 20 })
+      }
+    ),
+    inputHasText ? /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSend();
+        },
+        className: "w-12 h-12 rounded-full text-text-inverse bg-cyan-400 hover:bg-cyan-300 flex items-center justify-center\n                     transition-colors shadow-[0_0_15px_rgba(34,211,238,0.3)]",
+        title: "Enviar",
+        children: /* @__PURE__ */ jsx5(Send, { size: 20, className: "ml-1" })
+      }
+    ) : setIsVoiceActive ? /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsVoiceActive(true);
+        },
+        className: "w-12 h-12 rounded-full text-cyan-400 bg-cyan-500/10 hover:bg-cyan-500/20 flex items-center justify-center\n                     border border-cyan-500/20 transition-all shadow-[0_0_15px_rgba(6,182,212,0.15)]\n                     hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] group relative overflow-hidden",
+        title: "Hablar con la IA (Live)",
+        children: [
+          /* @__PURE__ */ jsx5(Sparkles2, { size: 22, className: "relative z-10 transition-transform group-hover:scale-110" }),
+          /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 bg-linear-to-r from-cyan-400 to-purple-500 rounded-full opacity-0 group-hover:opacity-20 transition-opacity" })
+        ]
+      }
+    ) : null
+  ] });
+});
+
+// src/components/playground/input-parts/ResourceLibraryPanel.tsx
+import React6, { useState as useState5, useMemo as useMemo3, useCallback as useCallback2 } from "react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { FolderOpen as FolderOpen2, Palette, Search as Search2, Tag, Clock, Trash2, X } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var TEMPLATES = [
+  {
+    id: "landing-saas",
+    title: "Landing SaaS",
+    category: "Marketing",
+    emoji: "\u{1F680}",
+    color: "#7c3aed",
+    description: "Hero, CTA, features",
+    html: '<section class="min-h-screen bg-linear-to-br from-violet-950 via-indigo-950 to-black text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Landing SaaS</h1></section>'
+  },
+  {
+    id: "dashboard",
+    title: "Dashboard",
+    category: "App",
+    emoji: "\u{1F4CA}",
+    color: "#06b6d4",
+    description: "M\xE9tricas, sidebar, cards",
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Dashboard</h1></div>'
+  },
+  {
+    id: "portfolio",
+    title: "Portfolio",
+    category: "Personal",
+    emoji: "\u{1F3A8}",
+    color: "#ec4899",
+    description: "Bio, proyectos, contacto",
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Portfolio</h1></div>'
+  },
+  {
+    id: "pricing",
+    title: "Pricing",
+    category: "Marketing",
+    emoji: "\u{1F4B3}",
+    color: "#10b981",
+    description: "3 planes, toggle anual",
+    html: '<section class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Pricing</h1></section>'
+  },
+  {
+    id: "login",
+    title: "Login",
+    category: "Auth",
+    emoji: "\u{1F510}",
+    color: "#f59e0b",
+    description: "Form, social, glassmorphism",
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Login</h1></div>'
+  },
+  {
+    id: "blog",
+    title: "Blog",
+    category: "Content",
+    emoji: "\u{1F4DD}",
+    color: "#3b82f6",
+    description: "Lista de art\xEDculos",
+    html: '<div class="min-h-screen bg-gray-950 text-white flex items-center justify-center"><h1 class="text-5xl font-bold">Blog</h1></div>'
+  }
+];
+var ALL_CATEGORIES = ["All", "Marketing", "App", "Personal", "Auth", "Content", "Generated"];
+var ResourceLibraryPanel = React6.memo(function ResourceLibraryPanel2({
+  isOpen,
+  onClose,
+  onLoadTemplate,
+  onOpenInstance
+}) {
+  const [tab, setTab] = useState5("creations");
+  const [searchQuery, setSearchQuery] = useState5("");
+  const [selectedCategory, setSelectedCategory] = useState5("All");
+  const instances = useMorphInstanceStore(
+    useShallow((s) => Array.from(s.instances.values()))
+  );
+  const setActiveInstance = useMorphInstanceStore((s) => s.setActiveInstance);
+  const removeInstance = useMorphInstanceStore((s) => s.removeInstance);
+  const htmlInstances = useMemo3(
+    () => instances.filter((inst) => inst.data?.html || inst.shellType === "iframe").sort((a, b) => b.createdAt - a.createdAt),
+    [instances]
+  );
+  const filteredTemplates = useMemo3(() => {
+    return TEMPLATES.filter((t) => {
+      const matchSearch = !searchQuery || t.title.toLowerCase().includes(searchQuery.toLowerCase()) || t.description.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchCat = selectedCategory === "All" || t.category === selectedCategory;
+      return matchSearch && matchCat;
+    });
+  }, [searchQuery, selectedCategory]);
+  const filteredCreations = useMemo3(() => {
+    if (!searchQuery) return htmlInstances;
+    const q = searchQuery.toLowerCase();
+    return htmlInstances.filter(
+      (inst) => inst.label.toLowerCase().includes(q) || inst.shellType.toLowerCase().includes(q)
+    );
+  }, [htmlInstances, searchQuery]);
+  const handleLoadInstance = useCallback2((inst) => {
+    setActiveInstance(inst.id);
+    useLayoutStore.getState().setActiveTab(`morph-${inst.id}`);
+    onOpenInstance(inst.id);
+    onClose();
+  }, [setActiveInstance, onOpenInstance, onClose]);
+  const handleLoadTemplate = useCallback2((t) => {
+    onLoadTemplate(t.html);
+    onClose();
+  }, [onLoadTemplate, onClose]);
+  const timeAgo = (ts) => {
+    const diff = Date.now() - ts;
+    const mins = Math.floor(diff / 6e4);
+    if (mins < 1) return "ahora";
+    if (mins < 60) return `${mins}m`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h`;
+    return `${Math.floor(hrs / 24)}d`;
+  };
+  return /* @__PURE__ */ jsx6(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsx6(
+    motion2.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 8 },
+      className: "absolute bottom-full left-0 right-0 z-50 mb-2",
+      children: /* @__PURE__ */ jsxs6("div", { className: "bg-white/95 dark:bg-[#1a1a2e] border border-black/[0.08] dark:border-border-default\n                          rounded-2xl shadow-xl dark:shadow-2xl overflow-hidden max-h-[420px] flex flex-col backdrop-blur-xl", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-4 py-3 border-b border-black/[0.06] dark:border-border-subtle shrink-0", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx6("h3", { className: "text-sm font-bold text-text-primary", children: "Librer\xEDa" }),
+            /* @__PURE__ */ jsxs6("div", { className: "flex bg-black/[0.04] dark:bg-surface-glass rounded-lg p-0.5", children: [
+              /* @__PURE__ */ jsxs6(
+                "button",
+                {
+                  onClick: () => setTab("creations"),
+                  className: `px-3 py-1.5 text-[11px] font-semibold rounded-md transition-all flex items-center gap-1.5
+                      ${tab === "creations" ? "bg-white dark:bg-surface-tertiary text-text-primary shadow-sm" : "text-text-muted hover:text-text-secondary"}`,
+                  children: [
+                    /* @__PURE__ */ jsx6(FolderOpen2, { size: 12 }),
+                    " Mis Creaciones",
+                    htmlInstances.length > 0 && /* @__PURE__ */ jsx6("span", { className: "text-[9px] bg-cyan-500/20 text-cyan-600 dark:text-cyan-400 px-1.5 py-0.5 rounded-full font-bold", children: htmlInstances.length })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs6(
+                "button",
+                {
+                  onClick: () => setTab("templates"),
+                  className: `px-3 py-1.5 text-[11px] font-semibold rounded-md transition-all flex items-center gap-1.5
+                      ${tab === "templates" ? "bg-white dark:bg-surface-tertiary text-text-primary shadow-sm" : "text-text-muted hover:text-text-secondary"}`,
+                  children: [
+                    /* @__PURE__ */ jsx6(Palette, { size: 12 }),
+                    " Templates"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx6("button", { onClick: onClose, className: "w-7 h-7 rounded-lg text-text-muted hover:text-text-primary hover:bg-black/[0.04] dark:hover:bg-surface-glass flex items-center justify-center transition-colors", children: /* @__PURE__ */ jsx6(X, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "px-4 py-2 border-b border-black/[0.04] dark:border-border-subtle shrink-0 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex-1 relative", children: [
+            /* @__PURE__ */ jsx6(Search2, { size: 13, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted" }),
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "text",
+                placeholder: "Buscar...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "w-full pl-8 pr-3 py-1.5 bg-black/[0.03] dark:bg-surface-glass border border-transparent focus:border-cyan-500/30\n                             rounded-lg text-xs text-text-primary placeholder-text-muted outline-hidden transition"
+              }
+            )
+          ] }),
+          tab === "templates" && /* @__PURE__ */ jsx6("div", { className: "flex gap-1 overflow-x-auto no-scrollbar", children: ALL_CATEGORIES.filter((c) => c !== "Generated").map((cat) => /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: () => setSelectedCategory(cat),
+              className: `px-2 py-1 text-[10px] font-semibold rounded-md whitespace-nowrap transition-all
+                        ${selectedCategory === cat ? "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400" : "text-text-muted hover:text-text-secondary hover:bg-black/[0.04] dark:hover:bg-surface-glass"}`,
+              children: cat
+            },
+            cat
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "flex-1 overflow-y-auto px-3 py-3 custom-scrollbar", children: /* @__PURE__ */ jsx6(AnimatePresence2, { mode: "wait", children: tab === "creations" ? /* @__PURE__ */ jsx6(motion2.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: filteredCreations.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+          /* @__PURE__ */ jsx6(FolderOpen2, { size: 32, className: "text-text-muted/30 mb-3" }),
+          /* @__PURE__ */ jsx6("p", { className: "text-sm text-text-muted", children: "Sin creaciones a\xFAn" }),
+          /* @__PURE__ */ jsx6("p", { className: "text-[10px] text-text-muted/60 mt-1", children: "Genera una p\xE1gina desde el chat para verla aqu\xED" })
+        ] }) : /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2", children: filteredCreations.map((inst, i) => /* @__PURE__ */ jsxs6(
+          motion2.button,
+          {
+            initial: { opacity: 0, y: 6 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: i * 0.03 },
+            onClick: () => handleLoadInstance(inst),
+            className: "group relative bg-black/[0.02] dark:bg-surface-glass border border-black/[0.06] dark:border-border-subtle\n                                       hover:border-cyan-500/30 rounded-xl p-3 text-left transition-all hover:shadow-md overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsx6("div", { className: "h-16 rounded-lg bg-gradient-to-br from-cyan-500/10 to-purple-500/10 dark:from-cyan-500/5 dark:to-purple-500/5\n                                           mb-2 flex items-center justify-center overflow-hidden border border-black/[0.04] dark:border-border-subtle", children: /* @__PURE__ */ jsx6("span", { className: "text-lg opacity-50", children: "\u{1F310}" }) }),
+              /* @__PURE__ */ jsx6("h4", { className: "text-[11px] font-semibold text-text-primary truncate", children: inst.label }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5 mt-1", children: [
+                /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1 text-[9px] text-text-muted", children: [
+                  /* @__PURE__ */ jsx6(Clock, { size: 9 }),
+                  " ",
+                  timeAgo(inst.createdAt)
+                ] }),
+                /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 font-semibold", children: [
+                  /* @__PURE__ */ jsx6(Tag, { size: 8 }),
+                  " ",
+                  inst.shellType
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx6("div", { className: "absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1", children: /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    removeInstance(inst.id);
+                  },
+                  className: "w-5 h-5 rounded bg-red-500/10 hover:bg-red-500/20 text-red-400 flex items-center justify-center",
+                  title: "Eliminar",
+                  children: /* @__PURE__ */ jsx6(Trash2, { size: 10 })
+                }
+              ) })
+            ]
+          },
+          inst.id
+        )) }) }, "creations") : /* @__PURE__ */ jsx6(motion2.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2", children: filteredTemplates.map((t, i) => /* @__PURE__ */ jsxs6(
+          motion2.button,
+          {
+            initial: { opacity: 0, y: 6 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: i * 0.03 },
+            onClick: () => handleLoadTemplate(t),
+            className: "group bg-black/[0.02] dark:bg-surface-glass border border-black/[0.06] dark:border-border-subtle\n                                     hover:border-opacity-50 rounded-xl p-3 text-left transition-all hover:shadow-md overflow-hidden",
+            style: { "--hover-color": t.color },
+            children: [
+              /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  className: "h-14 rounded-lg mb-2 flex items-center justify-center transition-all group-hover:scale-[1.02]",
+                  style: { background: `linear-gradient(135deg, ${t.color}20, ${t.color}08)` },
+                  children: /* @__PURE__ */ jsx6("span", { className: "text-2xl", children: t.emoji })
+                }
+              ),
+              /* @__PURE__ */ jsx6("h4", { className: "text-[11px] font-semibold text-text-primary", children: t.title }),
+              /* @__PURE__ */ jsx6("p", { className: "text-[9px] text-text-muted mt-0.5", children: t.description }),
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  className: "inline-block mt-1.5 text-[9px] font-semibold px-1.5 py-0.5 rounded",
+                  style: { background: `${t.color}15`, color: t.color },
+                  children: t.category
+                }
+              )
+            ]
+          },
+          t.id
+        )) }) }, "templates") }) })
+      ] })
+    }
+  ) });
+});
+
+// src/components/playground/PlaygroundFloatingInput.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var PlaygroundFloatingInput = ({
+  onSend,
+  isGenerating,
+  isVoiceActive = false,
+  setIsVoiceActive,
+  VoiceWidget,
+  dynamicPersona,
+  setSuggestions,
+  selectedVoice,
+  showCanvas,
+  setShowCanvas,
+  prototypeBrand = "decido",
+  setPrototypeBrand
+}) => {
+  const [inputValue, setInputValue] = useState6("");
+  const [isTranscribing, setIsTranscribing] = useState6(false);
+  const [slashMenuOpen, setSlashMenuOpen] = useState6(false);
+  const [slashMenuIndex, setSlashMenuIndex] = useState6(0);
+  const [showIntentPanel, setShowIntentPanel] = useState6(false);
+  const [showLibrary, setShowLibrary] = useState6(false);
+  const [intentEnabled, setIntentEnabled] = useState6(true);
+  const [selectedShell, setSelectedShell] = useState6(
+    () => localStorage.getItem("decido_selected_shell")
+  );
+  const inputRef = useRef3(null);
+  const { selectedModelId, selectedModel, providerGroups, selectModel } = useAIModelSelector();
+  useEffect4(() => {
+    if (typeof window !== "undefined" && window.__DECIDO__) {
+      window.__DECIDO__.intentEnabled = intentEnabled;
+    }
+  }, [intentEnabled]);
+  const activeChatId = usePlaygroundStore((s) => s.activeChatId);
+  useEffect4(() => {
+    if (!activeChatId) return;
+    usePlaygroundStore.setState((s) => ({
+      chatInstances: s.chatInstances.map(
+        (c) => c.id === activeChatId ? { ...c, model: selectedModelId } : c
+      )
+    }));
+  }, [selectedModelId, activeChatId]);
+  useEffect4(() => {
+    if (selectedShell) localStorage.setItem("decido_selected_shell", selectedShell);
+    else localStorage.removeItem("decido_selected_shell");
+    if (typeof window !== "undefined" && window.__DECIDO__) {
+      window.__DECIDO__.selectedShell = selectedShell;
+    }
+    if (!activeChatId) return;
+    usePlaygroundStore.setState((s) => ({
+      chatInstances: s.chatInstances.map(
+        (c) => c.id === activeChatId ? { ...c, shellType: selectedShell || void 0 } : c
+      )
+    }));
+    if (selectedShell) {
+      const meta = getShellMeta(selectedShell);
+      useMorphInstanceStore.getState().upsertInstance({
+        id: activeChatId,
+        sourceChatId: activeChatId,
+        shellType: selectedShell,
+        label: meta.label || selectedShell,
+        data: {}
+      });
+    } else {
+      useMorphInstanceStore.getState().removeInstance(activeChatId);
+    }
+  }, [selectedShell, activeChatId]);
+  const activeInstance = usePlaygroundStore((s) => s.chatInstances.find((c) => c.id === s.activeChatId));
+  useEffect4(() => {
+    if (!activeInstance) return;
+    if (activeInstance.model && activeInstance.model !== selectedModelId) {
+      selectModel(activeInstance.model);
+    }
+    const instanceShell = activeInstance.shellType || null;
+    if (instanceShell !== selectedShell) {
+      setSelectedShell(instanceShell);
+    }
+  }, [activeChatId]);
+  const { primaryIntent } = useIntentLens(intentEnabled ? inputValue : "");
+  const seeds = useSuggestionsStore((s) => s.seeds);
+  const generated = useSuggestionsStore((s) => s.generated);
+  const pluginSuggestions = useSuggestionsStore((s) => s.pluginSuggestions);
+  const allSuggestions = useMemo4(() => {
+    const plugin = Object.values(pluginSuggestions).flat();
+    return [...generated, ...seeds, ...plugin];
+  }, [generated, seeds, pluginSuggestions]);
+  const [placeholderIndex, setPlaceholderIndex] = useState6(0);
+  useEffect4(() => {
+    if (allSuggestions.length <= 1) return;
+    const timer = setInterval(() => setPlaceholderIndex((i) => (i + 1) % allSuggestions.length), 4e3);
+    return () => clearInterval(timer);
+  }, [allSuggestions.length]);
+  const rotatingPlaceholder = allSuggestions.length > 0 ? allSuggestions[placeholderIndex % allSuggestions.length] : "Escribe / para comandos... (Shift+Enter nueva l\xEDnea)";
+  useEffect4(() => {
+    const ta = inputRef.current;
+    if (ta) {
+      ta.style.height = "auto";
+      ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`;
+    }
+  }, [inputValue]);
+  const timelines = useTimelineStore((s) => s.timelines);
+  const blueprintLibrary = useTimelineStore((s) => s.blueprintLibrary);
+  const uiComponents = useUIComponentStore((s) => s.components);
+  const slashCommands = useMemo4(() => {
+    const flowList = Object.keys(timelines).map((id) => ({ id, label: id, description: timelines[id]?.name || id }));
+    const bpList = Object.entries(blueprintLibrary).map(([id, bp]) => ({ id, label: bp.name || id, description: `v${bp.metadata?.version || "?"} \xB7 ${bp.metadata?.tags?.join(", ") || ""}` }));
+    const uiList = Object.values(uiComponents).map((c) => ({ id: c.id, label: c.name, description: c.category }));
+    return [
+      { command: "/run", label: "Run Flow", description: "Ejecutar un flujo", icon: "\u25B6", subCommands: flowList },
+      { command: "/flows", label: "List Flows", description: "Ver todos los flujos", icon: "\u{1F4CB}" },
+      { command: "/blueprints", label: "Blueprints", description: "Subflujos disponibles", icon: "\u{1F517}", subCommands: bpList },
+      { command: "/ui", label: "UI Components", description: "Biblioteca de componentes", icon: "\u{1F3A8}", subCommands: uiList },
+      { command: "/reset", label: "Reset Engine", description: "Reiniciar el motor", icon: "\u{1F504}" },
+      { command: "/tts", label: "Voice Synthesis", description: "Generar audio TTS con Kokoro", icon: "\u{1F399}\uFE0F" }
+    ];
+  }, [timelines, blueprintLibrary, uiComponents]);
+  const filteredCommands = useMemo4(() => {
+    if (!inputValue.startsWith("/")) return [];
+    const parts = inputValue.split(" ");
+    const cmd = parts[0].toLowerCase();
+    const arg = parts.slice(1).join(" ").toLowerCase();
+    const matched = slashCommands.find((c) => c.command === cmd);
+    if (matched?.subCommands) {
+      return matched.subCommands.filter((sc) => !arg || sc.id.toLowerCase().includes(arg) || sc.label.toLowerCase().includes(arg)).map((sc) => ({ ...sc, type: "sub", parentCommand: cmd }));
+    }
+    return slashCommands.filter((c) => c.command.startsWith(cmd)).map((c) => ({ id: c.command, label: c.label, description: c.description, icon: c.icon, type: "command", subCommands: c.subCommands }));
+  }, [inputValue, slashCommands]);
+  useEffect4(() => {
+    setSlashMenuOpen(inputValue.startsWith("/") && filteredCommands.length > 0);
+    setSlashMenuIndex(0);
+  }, [inputValue, filteredCommands.length]);
+  const handleSlashSelect = (item) => {
+    if (item.type === "command") {
+      if (item.subCommands) {
+        setInputValue(item.id + " ");
+        inputRef.current?.focus();
+      } else {
+        onSend(item.id);
+        setInputValue("");
+        setSlashMenuOpen(false);
+      }
+    } else if (item.type === "sub") {
+      onSend(`${item.parentCommand} ${item.id}`);
+      setInputValue("");
+      setSlashMenuOpen(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (slashMenuOpen) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSlashMenuIndex((i) => Math.min(i + 1, filteredCommands.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSlashMenuIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && filteredCommands[slashMenuIndex]) {
+        e.preventDefault();
+        handleSlashSelect(filteredCommands[slashMenuIndex]);
+      } else if (e.key === "Escape") setSlashMenuOpen(false);
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (inputValue.trim() && !isGenerating) {
+        onSend(inputValue.trim());
+        setInputValue("");
+      }
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (inputValue.trim() && !isGenerating) {
+      onSend(inputValue.trim());
+      setInputValue("");
+    }
+  };
+  const handleSendClick = useCallback3(() => {
+    if (inputValue.trim() && !isGenerating) {
+      onSend(inputValue.trim());
+      setInputValue("");
+    }
+  }, [inputValue, isGenerating, onSend]);
+  return /* @__PURE__ */ jsxs7(motion3.div, { layout: true, className: `w-full relative ${isVoiceActive ? "h-64" : ""}`, children: [
+    /* @__PURE__ */ jsx7(SlashCommandMenu, { isOpen: slashMenuOpen, items: filteredCommands, activeIndex: slashMenuIndex, onSelect: handleSlashSelect, onHover: setSlashMenuIndex }),
+    /* @__PURE__ */ jsx7(AnimatePresence3, { children: showIntentPanel && /* @__PURE__ */ jsx7(motion3.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 10 }, className: "absolute bottom-full left-0 right-0 mb-2 z-50", children: /* @__PURE__ */ jsx7(IntentCatalogPanel, { onSelect: (text) => {
+      setInputValue(text);
+      setShowIntentPanel(false);
+      inputRef.current?.focus();
+    } }) }) }),
+    /* @__PURE__ */ jsx7(
+      ResourceLibraryPanel,
+      {
+        isOpen: showLibrary,
+        onClose: () => setShowLibrary(false),
+        onLoadTemplate: (html) => {
+          onSend(`/template ${html.slice(0, 100)}`);
+        },
+        onOpenInstance: (id) => {
+          useMorphInstanceStore.getState().setActiveInstance(id);
+          if (setShowCanvas) setShowCanvas(true);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx7("div", { className: `bg-white/80 dark:bg-surface-tertiary border border-black/[0.08] dark:border-border-default rounded-4xl flex flex-col p-2 shadow-sm dark:shadow-2xl transition-all duration-300
+        ${isVoiceActive ? "h-full border-cyan-500/30" : "focus-within:border-black/[0.12] dark:focus-within:border-border-strong focus-within:shadow-md dark:focus-within:shadow-lg"}`, children: /* @__PURE__ */ jsx7(AnimatePresence3, { mode: "wait", children: !isVoiceActive ? /* @__PURE__ */ jsxs7(
+      motion3.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "flex flex-col w-full h-full cursor-text",
+        onClick: (e) => {
+          const ta = e.currentTarget.querySelector("textarea");
+          if (ta && e.target === e.currentTarget) ta.focus();
+        },
+        children: [
+          /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: "relative flex items-center px-3 sm:px-4 py-2 sm:py-3 min-h-[48px] sm:min-h-[60px]", children: [
+            /* @__PURE__ */ jsx7(
+              "textarea",
+              {
+                ref: inputRef,
+                placeholder: isTranscribing ? "Escuchando..." : rotatingPlaceholder,
+                value: inputValue,
+                onChange: (e) => setInputValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                rows: 1,
+                className: "w-full bg-transparent text-text-primary placeholder-text-muted outline-hidden text-sm sm:text-[15px] leading-relaxed resize-none",
+                disabled: isGenerating,
+                style: { maxHeight: "200px" }
+              }
+            ),
+            primaryIntent && !slashMenuOpen && /* @__PURE__ */ jsxs7(
+              "div",
+              {
+                className: "absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-semibold border",
+                style: { background: `${primaryIntent.color}15`, borderColor: `${primaryIntent.color}30`, color: primaryIntent.color },
+                children: [
+                  /* @__PURE__ */ jsx7("span", { children: primaryIntent.icon }),
+                  /* @__PURE__ */ jsx7("span", { children: primaryIntent.label })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center justify-between px-2 pb-1 relative z-10 w-full gap-y-2", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 shrink-0", children: [
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setShowLibrary(!showLibrary);
+                    setShowIntentPanel(false);
+                  },
+                  className: `w-10 h-10 rounded-full flex items-center justify-center transition-colors
+                      ${showLibrary ? "text-cyan-400 bg-cyan-500/10" : "text-text-secondary hover:text-text-primary hover:bg-surface-glass"}`,
+                  title: "Librer\xEDa de recursos",
+                  children: /* @__PURE__ */ jsx7(FolderOpen3, { size: 20 })
+                }
+              ),
+              /* @__PURE__ */ jsx7("button", { type: "button", className: "w-10 h-10 rounded-full text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors", title: "Adjuntar", children: /* @__PURE__ */ jsx7(Paperclip, { size: 20 }) })
+            ] }),
+            /* @__PURE__ */ jsx7(
+              InputToolbar,
+              {
+                selectedModelId,
+                selectedModel,
+                providerGroups,
+                onModelSelect: selectModel,
+                selectedShell,
+                onShellSelect: setSelectedShell,
+                showCanvas,
+                setShowCanvas,
+                prototypeBrand,
+                setPrototypeBrand,
+                intentEnabled,
+                onIntentToggle: () => setIntentEnabled(!intentEnabled),
+                showIntentPanel,
+                onIntentPanelToggle: () => setShowIntentPanel(!showIntentPanel)
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              InputActions,
+              {
+                inputHasText: !!inputValue.trim(),
+                isGenerating,
+                isTranscribing,
+                onToggleTranscribing: () => setIsTranscribing(!isTranscribing),
+                onSend: handleSendClick,
+                setIsVoiceActive
+              }
+            )
+          ] })
+        ]
+      },
+      "text-mode"
+    ) : /* @__PURE__ */ jsx7(VoiceLiveMode, { VoiceWidget, dynamicPersona, setSuggestions, selectedVoice, onClose: () => setIsVoiceActive?.(false) }) }) }),
+    /* @__PURE__ */ jsx7("div", { className: "text-center mt-3", children: /* @__PURE__ */ jsx7("p", { className: "text-[10px] md:text-[11px] text-text-muted font-medium tracking-wide", children: "Decido puede equivocarse. Considera revisar la informaci\xF3n importante." }) })
+  ] });
+};
+
+// src/components/playground/PlaygroundChat.tsx
+import { ChatProvider, ChatMessageRow, ChatExportMenu } from "@decido/chat";
+
+// src/components/chat-extensions/chatSlashCommands.ts
+import { useTimelineStore as useTimelineStore2 } from "@decido/engine";
+import { useEngineStore } from "@decido/engine";
+function handleSlashCommand(input, ctx) {
+  if (!input.startsWith("/")) return false;
+  const parts = input.split(" ");
+  const cmd = parts[0].toLowerCase();
+  const arg = parts.slice(1).join(" ");
+  switch (cmd) {
+    case "/run": {
+      if (!arg) return false;
+      const timelines = useTimelineStore2.getState().timelines;
+      if (timelines[arg]) {
+        ctx.setPrototypeBrand(arg);
+        useEngineStore.getState().resetEngine();
+        ctx.addChatMessage({ type: "text", sender: "system", text: `\u25B6\uFE0F Ejecutando flujo: **${arg}**`, actorId: "system" });
+        setTimeout(() => {
+          useEngineStore.getState().dispatchEvent({ type: "SYSTEM_START" });
+        }, 100);
+      } else {
+        ctx.addChatMessage({ type: "alert", sender: "system", text: `Flujo "${arg}" no encontrado. Usa /flows para ver los disponibles.`, actorId: "system" });
+      }
+      return true;
+    }
+    case "/flows": {
+      const flowIds = Object.keys(useTimelineStore2.getState().timelines);
+      ctx.addChatMessage({ type: "text", sender: "system", text: `\u{1F4CB} Flujos disponibles:
+${flowIds.map((id) => `\u2022 ${id}`).join("\n")}
+
+Usa /run [nombre] para ejecutar.`, actorId: "system" });
+      return true;
+    }
+    case "/blueprints": {
+      const bps = Object.entries(useTimelineStore2.getState().blueprintLibrary);
+      ctx.addChatMessage({ type: "text", sender: "system", text: `\u{1F4E6} Blueprints:
+${bps.map(([id, bp]) => `\u2022 ${id} \u2014 ${bp.name || "?"}`).join("\n") || "Ninguno registrado."}`, actorId: "system" });
+      return true;
+    }
+    case "/ui": {
+      if (arg) {
+        const comp = useUIComponentStore.getState().components[arg];
+        if (comp) ctx.addChatMessage({ type: "ui-artifact", sender: "agent", text: `\u{1F3A8} ${comp.name}`, actorId: "system", uiSchema: JSON.stringify(comp.schema) });
+        else ctx.addChatMessage({ type: "alert", sender: "system", text: `Componente "${arg}" no encontrado.`, actorId: "system" });
+      } else {
+        const uiComps = Object.values(useUIComponentStore.getState().components);
+        ctx.addChatMessage({ type: "text", sender: "system", text: `\u{1F3A8} UI Components:
+${uiComps.map((c) => `\u2022 ${c.name} (${c.category}) \u2014 ${c.source}`).join("\n") || "Ninguno."}
+
+Usa /ui [id] para renderizar.`, actorId: "system" });
+      }
+      return true;
+    }
+    case "/tts": {
+      if (!arg) {
+        ctx.addChatMessage({ type: "alert", sender: "system", text: `Debes indicar el texto a leer. Ejemplo:
+/tts Hola mundo`, actorId: "system" });
+        return true;
+      }
+      ctx.addChatMessage({ type: "text", sender: "system", text: `\u{1F399}\uFE0F Generando audio neuronal para:
+"${arg}"...`, actorId: "system" });
+      import("@decido/kernel-bridge").then(({ kernel }) => {
+        kernel.execute("call_mcp_tool", {
+          server_name: "Kokoro TTS",
+          tool_name: "generate_tts",
+          arguments: { text: arg, voice: "em_alex", speed: 1, lang: "es", return_base64: true }
+        }).then((res) => {
+          const messageText = typeof res === "string" ? res : JSON.stringify(res);
+          if (messageText.includes("DATA_URI:")) {
+            const dataUri = messageText.split("DATA_URI:")[1].trim();
+            ctx.addChatMessage({
+              type: "audio",
+              sender: "system",
+              text: `\u2705 Emisi\xF3n de voz generada con \xE9xito`,
+              audioSrc: dataUri,
+              actorId: "system"
+            });
+          } else {
+            ctx.addChatMessage({ type: "alert", sender: "system", text: `La respuesta no incluy\xF3 un URI v\xE1lido:
+${messageText}`, actorId: "system" });
+          }
+        }).catch((err) => {
+          ctx.addChatMessage({ type: "alert", sender: "system", text: `\u274C Error de TTS: ${String(err)}`, actorId: "system" });
+        });
+      });
+      return true;
+    }
+    case "/reset": {
+      useEngineStore.getState().resetEngine();
+      ctx.addChatMessage({ type: "text", sender: "system", text: "\u23F9 Motor reiniciado.", actorId: "system" });
+      return true;
+    }
+    default:
+      ctx.addChatMessage({ type: "alert", sender: "system", text: `Comando desconocido: ${cmd}`, actorId: "system" });
+      return true;
+  }
+}
+
+// src/components/playground/PlaygroundChat.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var PlaygroundChat = React8.memo(function PlaygroundChat2({
+  step,
+  selectedProfile,
+  authAvailableLicenses,
+  handleProfileSelect,
+  activeConfig,
+  demoState,
+  suggestions,
+  setInputValue,
+  isGenerating,
+  config,
+  handleGeneratePlayground,
+  isCreatorMode = true,
+  isVoiceActive = false,
+  setIsVoiceActive,
+  VoiceWidget,
+  dynamicPersona,
+  setSuggestions: setSuggestionsFromParent,
+  selectedVoice,
+  showCanvas,
+  setShowCanvas
+}) {
+  const activeChatId = usePlaygroundStore((state) => state.activeChatId);
+  const chatMessages = usePlaygroundStore((state) => state.chatMessagesByInstance[state.activeChatId || "_default"] || []);
+  const addChatMessage = usePlaygroundStore((state) => state.addChatMessage);
+  const prototypeBrand = usePlaygroundStore((state) => state.prototypeBrand);
+  const setPrototypeBrand = usePlaygroundStore((state) => state.setPrototypeBrand);
+  const scrollRef = React8.useRef(null);
+  const [isAtBottom, setIsAtBottom] = React8.useState(true);
+  const [showExportMenu, setShowExportMenu] = React8.useState(false);
+  const isAtBottomRef = React8.useRef(true);
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const atBottom = scrollHeight - scrollTop - clientHeight < 100;
+    setIsAtBottom(atBottom);
+    isAtBottomRef.current = atBottom;
+  };
+  const lastMsg = chatMessages[chatMessages.length - 1];
+  const scrollKey = `${chatMessages.length}-${lastMsg?.text?.length || 0}`;
+  React8.useEffect(() => {
+    if (isAtBottomRef.current && scrollRef.current) {
+      scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
+    }
+  }, [scrollKey]);
+  const runStressTest = () => {
+    let count = 0;
+    const interval = setInterval(() => {
+      if (count > 200) {
+        clearInterval(interval);
+        return;
+      }
+      addChatMessage({ type: count % 3 === 0 ? "alert" : count % 5 === 0 ? "card" : "text", sender: count % 2 === 0 ? "agent" : "system", text: `Stresstesting message ${count} para medir rendimiento en el sistema.` });
+      count++;
+    }, 10);
+  };
+  const handleThemeSwitch = () => {
+    const brands = activeConfig && typeof activeConfig === "object" && config?.environments ? Object.keys(config.environments) : ["brand-a", "brand-b", "brand-c"];
+    const nextIndex = (brands.indexOf(prototypeBrand) + 1) % brands.length;
+    setPrototypeBrand(brands[nextIndex]);
+  };
+  const chatContextValue = React8.useMemo(() => ({
+    activeConfig,
+    onMorphInstanceSelect: (instanceId) => {
+      useMorphInstanceStore.getState().setActiveInstance(instanceId);
+      useLayoutStore.getState().setActiveTab(`morph-${instanceId}`);
+      if (setShowCanvas) setShowCanvas(true);
+    },
+    extensions: {
+      getPreviewHTML: () => useMorphInstanceStore.getState().getActiveInstance?.()?.data?.html || null,
+      onSendMessage: (text) => addChatMessage({ type: "text", sender: "user", text }),
+      renderMessageActions: (msgId) => null
+    }
+  }), [activeConfig, setShowCanvas, addChatMessage]);
+  return /* @__PURE__ */ jsx8(AnimatePresence4, { mode: "wait", children: step === "action" ? /* @__PURE__ */ jsxs8(motion4.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, className: "flex flex-col items-center justify-center h-full text-center", children: [
+    /* @__PURE__ */ jsx8("div", { className: "w-24 h-24 mx-auto rounded-full border-[3px] border-cyan-500/30 border-t-cyan-400 animate-spin mb-8 shadow-[0_0_30px_rgba(34,211,238,0.2)]" }),
+    /* @__PURE__ */ jsx8("h2", { className: "text-3xl font-bold text-text-primary mb-4", children: "Reestructurando el OS..." }),
+    /* @__PURE__ */ jsxs8("p", { className: "text-cyan-400 font-mono text-sm tracking-widest uppercase bg-cyan-500/10 py-2 px-6 rounded-full inline-block border border-cyan-500/20", children: [
+      "Cargando m\xF3dulos para: ",
+      selectedProfile
+    ] })
+  ] }, "action-step") : step === "profile" ? /* @__PURE__ */ jsxs8(motion4.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, className: "flex flex-col items-center justify-center h-full w-full max-w-4xl mx-auto pb-20", children: [
+    /* @__PURE__ */ jsx8("h2", { className: "text-2xl md:text-3xl font-bold text-text-primary text-center mb-8", children: "Selecciona tu Perfil" }),
+    /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 w-full", children: authAvailableLicenses.map((license) => /* @__PURE__ */ jsx8("button", { onClick: () => handleProfileSelect(license), className: `group relative p-6 rounded-3xl bg-surface-tertiary border border-border-subtle transition-all text-left overflow-hidden ${license.type === "enterprise" ? "hover:border-emerald-500/50" : "hover:border-cyan-500/50"}`, children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4 mb-4", children: [
+      /* @__PURE__ */ jsx8("div", { className: `w-12 h-12 rounded-full flex items-center justify-center shadow-inner ${license.type === "enterprise" ? "bg-emerald-500/10 text-emerald-400" : "bg-cyan-500/10 text-cyan-400"}`, children: license.type === "enterprise" ? /* @__PURE__ */ jsx8(Building22, { size: 24 }) : /* @__PURE__ */ jsx8(BrainCircuit2, { size: 24 }) }),
+      /* @__PURE__ */ jsx8("h3", { className: "text-xl font-bold text-text-primary", children: license.name })
+    ] }) }, license.id)) })
+  ] }, "profile-step") : /* @__PURE__ */ jsxs8(motion4.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, className: "flex flex-col h-full overflow-hidden w-full max-w-full lg:max-w-4xl mx-auto pb-4 px-3 sm:px-6 md:px-8 lg:px-4 min-w-0 min-h-0 box-border", children: [
+    /* @__PURE__ */ jsxs8("div", { ref: scrollRef, onScroll: handleScroll, className: `flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar scroll-smooth flex flex-col gap-6 md:gap-8 min-w-0 min-h-0 ${!isCreatorMode ? "justify-end pb-6" : "pb-48 md:pb-64"}`, children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-3 md:gap-4 transition-all mt-4 sm:mt-6 md:mt-8", children: [
+        /* @__PURE__ */ jsxs8("h1", { className: "text-2xl sm:text-3xl md:text-5xl font-semibold leading-tight text-text-primary/50", children: [
+          /* @__PURE__ */ jsx8("span", { className: `bg-linear-to-r ${activeConfig.gradient} text-transparent bg-clip-text transition-all duration-700`, children: activeConfig.greetingText }),
+          /* @__PURE__ */ jsx8("br", {}),
+          activeConfig.greetingPrompt || "\xBFEn qu\xE9 puedo ayudarte hoy?"
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4 flex-wrap mt-2", children: [
+          /* @__PURE__ */ jsx8("p", { className: "text-sm text-text-muted font-mono transition-all duration-700", children: activeConfig.subtitle }),
+          /* @__PURE__ */ jsxs8("div", { className: "hidden md:flex gap-2 items-center", children: [
+            /* @__PURE__ */ jsxs8("button", { onClick: handleThemeSwitch, className: "text-[10px] text-text-secondary hover:text-text-primary uppercase tracking-wider transition-colors bg-surface-glass hover:bg-surface-glass px-3 py-1.5 rounded-full border border-border-default flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx8("span", { className: `w-2 h-2 rounded-full ${prototypeBrand === "brand-b" ? "bg-emerald-400" : prototypeBrand === "brand-c" ? "bg-purple-400" : "bg-cyan-400"}` }),
+              "Tema: ",
+              prototypeBrand
+            ] }),
+            /* @__PURE__ */ jsxs8("button", { onClick: runStressTest, className: "text-[10px] text-text-secondary hover:text-orange-400 uppercase tracking-wider transition-colors bg-orange-500/5 hover:bg-orange-500/10 px-3 py-1.5 rounded-full border border-orange-500/20 border-dashed flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx8("span", { className: "text-orange-500 font-bold", children: "\u26A0" }),
+              " Estr\xE9s (200 msgs)"
+            ] }),
+            /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs8("button", { onClick: () => setShowExportMenu(!showExportMenu), className: "text-[10px] text-text-secondary hover:text-cyan-400 uppercase tracking-wider transition-colors bg-surface-glass hover:bg-surface-glass px-3 py-1.5 rounded-full border border-border-default flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx8(Download, { size: 10 }),
+                " Export"
+              ] }),
+              /* @__PURE__ */ jsx8(ChatExportMenu, { isOpen: showExportMenu, onClose: () => setShowExportMenu(false) })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx8(ChatProvider, { value: chatContextValue, children: (chatMessages.length > 0 || isGenerating) && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-6 mt-6 max-w-full md:max-w-3xl min-w-0", children: [
+        chatMessages.map((msg) => /* @__PURE__ */ jsx8(ChatMessageRow, { msg }, msg.id)),
+        /* @__PURE__ */ jsx8(AnimatePresence4, { children: isGenerating && /* @__PURE__ */ jsxs8(motion4.div, { initial: { opacity: 0, y: 10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, className: "flex gap-4", children: [
+          /* @__PURE__ */ jsx8("div", { className: "w-10 h-10 rounded-full flex items-center justify-center shadow-lg border shrink-0 bg-transparent border-border-strong text-text-primary", children: /* @__PURE__ */ jsx8(Sparkles3, { size: 18, className: "text-text-muted animate-pulse" }) }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 space-y-2 flex flex-col items-start justify-center", children: /* @__PURE__ */ jsxs8("div", { className: "bg-surface-tertiary border border-border-subtle rounded-2xl p-4 shadow-xl inline-flex gap-1.5 items-center justify-center", children: [
+            /* @__PURE__ */ jsx8("div", { className: "w-1.5 h-1.5 rounded-full bg-surface-elevated animate-bounce", style: { animationDelay: "0ms" } }),
+            /* @__PURE__ */ jsx8("div", { className: "w-1.5 h-1.5 rounded-full bg-surface-elevated animate-bounce", style: { animationDelay: "150ms" } }),
+            /* @__PURE__ */ jsx8("div", { className: "w-1.5 h-1.5 rounded-full bg-surface-elevated animate-bounce", style: { animationDelay: "300ms" } })
+          ] }) })
+        ] }) })
+      ] }) }),
+      !chatMessages.length && demoState !== "idle" && /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-6 mt-6 max-w-full md:max-w-3xl opacity-50 min-w-0", children: /* @__PURE__ */ jsx8("p", { className: "text-sm text-text-muted italic", children: "Ejecutando secuencia en el simulador sin salida de chat..." }) }),
+      !chatMessages.length && demoState === "idle" && /* @__PURE__ */ jsx8(SuggestionCards, { suggestions, onSelect: setInputValue })
+    ] }),
+    !isAtBottom && chatMessages.length > 5 && /* @__PURE__ */ jsx8(
+      motion4.button,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 10 },
+        onClick: () => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" }),
+        className: `absolute ${!isCreatorMode ? "bottom-20" : "bottom-[100px]"} left-1/2 transform -translate-x-1/2 bg-cyan-500 text-text-primary rounded-full px-4 py-2 text-xs font-bold shadow-[0_0_15px_rgba(34,211,238,0.5)] border border-cyan-400 flex items-center gap-2 z-50 hover:bg-cyan-400`,
+        children: "\u2B07 Nuevos Mensajes"
+      }
+    ),
+    !isCreatorMode && /* @__PURE__ */ jsx8("div", { className: "shrink-0 w-full max-w-full lg:max-w-3xl mx-auto pb-2", children: /* @__PURE__ */ jsx8(
+      PlaygroundFloatingInput,
+      {
+        isGenerating,
+        onSend: (val) => {
+          if (handleSlashCommand(val, { prototypeBrand, setPrototypeBrand, addChatMessage })) return;
+          setInputValue(val);
+          if (handleGeneratePlayground) {
+            handleGeneratePlayground(val);
+          } else if (window.__DECIDO__?.geminiStream) {
+            window.__DECIDO__.geminiStream(val);
+          }
+        },
+        isVoiceActive,
+        setIsVoiceActive,
+        VoiceWidget,
+        dynamicPersona,
+        setSuggestions: setSuggestionsFromParent,
+        selectedVoice,
+        showCanvas,
+        setShowCanvas,
+        prototypeBrand,
+        setPrototypeBrand
+      }
+    ) })
+  ] }, "chat-greeting") });
+});
+
+export {
+  resolveIcon,
+  resolveColor,
+  resolveColorClasses,
+  PlaygroundFloatingInput,
+  PlaygroundChat
+};