@decido/shell 4.0.3 → 4.0.4

package/dist/CenterComposite-RPEGBKQU.mjs

@@ -1,1697 +0,0 @@
-import {
-  PlaygroundErrorBoundary,
-  bridgeToMorph,
-  useNetwork,
-  useStudioConfig,
-  useUIStateListener
-} from "./chunk-LWMMFTJC.mjs";
-import {
-  PlaygroundChat
-} from "./chunk-OCHGY2MN.mjs";
-import "./chunk-IMHORBTL.mjs";
-import "./chunk-F3OTFHNO.mjs";
-import "./chunk-QHQW2HMU.mjs";
-import {
-  PlaygroundTerminal
-} from "./chunk-Q64KZXPK.mjs";
-import {
-  DebugPanel
-} from "./chunk-VBPGEFNM.mjs";
-import "./chunk-JF5QSJYT.mjs";
-import "./chunk-ZCCCBHE6.mjs";
-import {
-  useMorphInstanceStore
-} from "./chunk-UHT6FIYF.mjs";
-import {
-  useUIComponentStore
-} from "./chunk-3BZX7LF2.mjs";
-import "./chunk-MSVEFEXE.mjs";
-import {
-  dlog,
-  useDebugPanelStore
-} from "./chunk-3P4P3M54.mjs";
-import {
-  usePlaygroundStore
-} from "./chunk-XMSU6UWD.mjs";
-import "./chunk-UJCSKKID.mjs";
-
-// src/components/shell/CenterComposite.tsx
-import { useRef as useRef4, useEffect as useEffect6 } from "react";
-import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from "react-resizable-panels";
-
-// src/components/playground/PlaygroundBottomControls.tsx
-import React8, { useState as useState5 } from "react";
-import { motion as motion5 } from "motion/react";
-import { X as X3 } from "lucide-react";
-
-// src/components/studio/BlueprintManagerPanel.tsx
-import { useState as useState2, useCallback, useRef as useRef2, useEffect as useEffect2 } from "react";
-import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
-import { FolderOpen, Plus, Check, X, FileText as FileText2, Network as Network2 } from "lucide-react";
-import { useTimelineStore } from "@decido/engine";
-import { useBlueprintNavigation } from "@decido/engine";
-
-// src/components/studio/blueprint/BlueprintCard.tsx
-import { useState } from "react";
-import { motion, AnimatePresence } from "motion/react";
-import { FileText, Network, MoreVertical, Edit3, Copy, Trash2 } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var BlueprintCard = ({
-  id,
-  name,
-  nodeCount,
-  isActive,
-  isSubflow,
-  onSelect,
-  onRename,
-  onDuplicate,
-  onDelete
-}) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editName, setEditName] = useState(name);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const handleSubmitRename = () => {
-    const t = editName.trim();
-    if (t && t !== name) onRename(t);
-    setIsEditing(false);
-  };
-  const accent = isSubflow ? "violet" : "cyan";
-  const Icon = isSubflow ? Network : FileText;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `group relative flex items-center gap-2 px-3 py-2 rounded-xl cursor-pointer transition-all mb-0.5 ${isActive ? `bg-${accent}-500/15 border border-${accent}-500/30` : "hover:bg-surface-glass border border-transparent"}`,
-      onClick: () => !isEditing && onSelect(),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { size: 14, className: isActive ? `text-${accent}-400` : isSubflow ? "text-violet-400/60" : "text-text-muted" }),
-        isEditing ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center gap-1", children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            autoFocus: true,
-            value: editName,
-            onChange: (e) => setEditName(e.target.value),
-            onKeyDown: (e) => {
-              if (e.key === "Enter") handleSubmitRename();
-              if (e.key === "Escape") setIsEditing(false);
-            },
-            onBlur: handleSubmitRename,
-            className: "flex-1 bg-surface-glass border border-cyan-500/30 rounded px-2 py-0.5 text-xs text-text-primary focus:outline-hidden font-mono",
-            onClick: (e) => e.stopPropagation()
-          }
-        ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("div", { className: `text-xs font-medium truncate ${isActive ? "text-text-primary" : isSubflow ? "text-text-secondary" : "text-text-primary"}`, children: name || id }),
-            /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-text-muted font-mono", children: [
-              nodeCount,
-              " nodos"
-            ] })
-          ] }),
-          isSubflow && /* @__PURE__ */ jsx("span", { className: "text-[9px] bg-violet-500/10 text-violet-400 px-1.5 py-0.5 rounded-full font-mono", children: "sub" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                setMenuOpen(!menuOpen);
-              },
-              className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-surface-glass text-text-muted transition-all",
-              children: /* @__PURE__ */ jsx(MoreVertical, { size: 14 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: menuOpen && /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            initial: { opacity: 0, scale: 0.9 },
-            animate: { opacity: 1, scale: 1 },
-            exit: { opacity: 0, scale: 0.9 },
-            className: "absolute right-0 top-full z-50 bg-surface-tertiary border border-border-default rounded-xl shadow-2xl overflow-hidden mt-1 min-w-[140px]",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    setEditName(name || id);
-                    setIsEditing(true);
-                    setMenuOpen(false);
-                  },
-                  className: "flex items-center gap-2 w-full px-3 py-2 text-xs text-text-primary hover:bg-surface-glass transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsx(Edit3, { size: 12 }),
-                    " Renombrar"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    onDuplicate();
-                    setMenuOpen(false);
-                  },
-                  className: "flex items-center gap-2 w-full px-3 py-2 text-xs text-text-primary hover:bg-surface-glass transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsx(Copy, { size: 12 }),
-                    " Duplicar"
-                  ]
-                }
-              ),
-              onDelete && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    onDelete();
-                    setMenuOpen(false);
-                  },
-                  className: "flex items-center gap-2 w-full px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 transition-colors border-t border-border-subtle",
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, { size: 12 }),
-                    " Eliminar"
-                  ]
-                }
-              )
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-};
-
-// src/components/studio/BlueprintManagerPanel.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var BlueprintManagerPanel = ({ isOpen, onClose }) => {
-  const timelines = useTimelineStore((s) => s.timelines);
-  const blueprintLibrary = useTimelineStore((s) => s.blueprintLibrary);
-  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
-  const setPrototypeBrand = usePlaygroundStore((s) => s.setPrototypeBrand);
-  const resetNavigation = useBlueprintNavigation((s) => s.resetNavigation);
-  const createTimeline = useTimelineStore((s) => s.createTimeline);
-  const addKeyframe = useTimelineStore((s) => s.addKeyframe);
-  const addBlueprint = useTimelineStore((s) => s.addBlueprint);
-  const duplicateTimeline = useTimelineStore((s) => s.duplicateTimeline);
-  const renameTimeline = useTimelineStore((s) => s.renameTimeline);
-  const deleteTimeline = useTimelineStore((s) => s.deleteTimeline);
-  const [isCreating, setIsCreating] = useState2(false);
-  const [createType, setCreateType] = useState2("blueprint");
-  const [newName, setNewName] = useState2("");
-  const [showCreateMenu, setShowCreateMenu] = useState2(false);
-  const createMenuRef = useRef2(null);
-  useEffect2(() => {
-    const h = (e) => {
-      if (createMenuRef.current && !createMenuRef.current.contains(e.target)) setShowCreateMenu(false);
-    };
-    document.addEventListener("mousedown", h);
-    return () => document.removeEventListener("mousedown", h);
-  }, []);
-  const handleCreate = useCallback(() => {
-    if (!newName.trim()) return;
-    if (createType === "subflow") {
-      const subKey = `subflow_${newName.trim().toLowerCase().replace(/\s+/g, "_")}`;
-      const id = createTimeline(newName.trim(), subKey);
-      addKeyframe(id, { t: 0, track: "entry", label: "Entrada", position: { x: 300, y: 50 } });
-      addKeyframe(id, { t: 5, track: "return", label: "Retorno", handle: "success", position: { x: 300, y: 300 } });
-      const bpId = `bp_${newName.trim().toLowerCase().replace(/\s+/g, "_")}`;
-      const tl = useTimelineStore.getState().timelines[id];
-      if (tl) addBlueprint({ ...tl, id: bpId, isSubflow: true, signature: { inputs: {}, outputs: {} }, metadata: { author: "user", version: "1.0.0", tags: ["custom"], description: newName.trim(), isPublic: false, createdAt: Date.now(), updatedAt: Date.now() } });
-      setPrototypeBrand(id);
-    } else {
-      setPrototypeBrand(createTimeline(newName.trim()));
-    }
-    setNewName("");
-    setIsCreating(false);
-  }, [newName, createType, createTimeline, addKeyframe, addBlueprint, setPrototypeBrand]);
-  const handleSelect = useCallback((id) => {
-    resetNavigation();
-    setPrototypeBrand(id);
-  }, [setPrototypeBrand, resetNavigation]);
-  const handleDelete = useCallback((id) => {
-    const del = deleteTimeline(id);
-    if (del && activeTimelineId === id) {
-      const rem = Object.keys(timelines).filter((k) => k !== id);
-      if (rem.length > 0) setPrototypeBrand(rem[0]);
-    }
-  }, [deleteTimeline, activeTimelineId, timelines, setPrototypeBrand]);
-  const allBlueprints = Object.entries(timelines);
-  const subflows = Object.entries(blueprintLibrary);
-  const bpToKey = {};
-  for (const [key] of Object.entries(timelines)) {
-    if (key.startsWith("subflow_")) bpToKey[`bp_${key.replace("subflow_", "")}`] = key;
-  }
-  return /* @__PURE__ */ jsx2(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(motion2.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 bg-surface-overlay z-40", onClick: onClose }),
-    /* @__PURE__ */ jsxs2(
-      motion2.div,
-      {
-        initial: { opacity: 0, x: -20, scale: 0.95 },
-        animate: { opacity: 1, x: 0, scale: 1 },
-        exit: { opacity: 0, x: -20, scale: 0.95 },
-        transition: { type: "spring", damping: 25, stiffness: 300 },
-        className: "fixed left-4 bottom-20 z-50 w-80 max-h-[60vh] bg-surface-primary border border-border-default rounded-2xl shadow-2xl overflow-hidden flex flex-col",
-        style: { backdropFilter: "blur(20px)" },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border-default bg-surface-glass", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2(FolderOpen, { size: 16, className: "text-cyan-400" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-sm font-bold text-text-primary tracking-wide", children: "Blueprints" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-[10px] bg-surface-glass text-text-secondary px-1.5 py-0.5 rounded-full font-mono", children: allBlueprints.length })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "relative", ref: createMenuRef, children: [
-              /* @__PURE__ */ jsx2("button", { onClick: () => setShowCreateMenu(!showCreateMenu), className: "p-1.5 rounded-lg hover:bg-cyan-500/20 text-cyan-400 transition-colors", title: "Crear nuevo", children: /* @__PURE__ */ jsx2(Plus, { size: 16 }) }),
-              /* @__PURE__ */ jsx2(AnimatePresence2, { children: showCreateMenu && /* @__PURE__ */ jsxs2(
-                motion2.div,
-                {
-                  initial: { opacity: 0, scale: 0.9, y: -5 },
-                  animate: { opacity: 1, scale: 1, y: 0 },
-                  exit: { opacity: 0, scale: 0.9, y: -5 },
-                  className: "absolute right-0 top-full mt-1 z-50 bg-surface-tertiary border border-border-default rounded-xl shadow-2xl overflow-hidden min-w-[180px]",
-                  children: [
-                    /* @__PURE__ */ jsxs2("button", { onClick: () => {
-                      setCreateType("blueprint");
-                      setIsCreating(true);
-                      setShowCreateMenu(false);
-                    }, className: "flex items-center gap-2 w-full px-3 py-2.5 text-xs text-text-primary hover:bg-surface-glass transition-colors", children: [
-                      /* @__PURE__ */ jsx2(FileText2, { size: 13, className: "text-cyan-400" }),
-                      /* @__PURE__ */ jsxs2("div", { className: "text-left", children: [
-                        /* @__PURE__ */ jsx2("div", { className: "font-medium", children: "Nuevo Blueprint" }),
-                        /* @__PURE__ */ jsx2("div", { className: "text-[10px] text-text-muted", children: "Flujo principal" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxs2("button", { onClick: () => {
-                      setCreateType("subflow");
-                      setIsCreating(true);
-                      setShowCreateMenu(false);
-                    }, className: "flex items-center gap-2 w-full px-3 py-2.5 text-xs text-text-primary hover:bg-surface-glass transition-colors border-t border-border-subtle", children: [
-                      /* @__PURE__ */ jsx2(Network2, { size: 13, className: "text-violet-400" }),
-                      /* @__PURE__ */ jsxs2("div", { className: "text-left", children: [
-                        /* @__PURE__ */ jsx2("div", { className: "font-medium", children: "Nuevo SubFlow" }),
-                        /* @__PURE__ */ jsx2("div", { className: "text-[10px] text-text-muted", children: "Con Entry + Return" })
-                      ] })
-                    ] })
-                  ]
-                }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx2(AnimatePresence2, { children: isCreating && /* @__PURE__ */ jsx2(motion2.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, className: "overflow-hidden border-b border-border-default", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-4 py-3", children: [
-            createType === "subflow" ? /* @__PURE__ */ jsx2(Network2, { size: 14, className: "text-violet-400 shrink-0" }) : /* @__PURE__ */ jsx2(FileText2, { size: 14, className: "text-cyan-400 shrink-0" }),
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                autoFocus: true,
-                value: newName,
-                onChange: (e) => setNewName(e.target.value),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") handleCreate();
-                  if (e.key === "Escape") setIsCreating(false);
-                },
-                placeholder: createType === "subflow" ? "Nombre del subflow..." : "Nombre del blueprint...",
-                className: "flex-1 bg-surface-glass border border-border-default rounded-lg px-3 py-1.5 text-xs text-text-primary focus:outline-hidden focus:border-cyan-500/50 font-mono"
-              }
-            ),
-            /* @__PURE__ */ jsx2("button", { onClick: handleCreate, className: "p-1.5 rounded-lg bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30", children: /* @__PURE__ */ jsx2(Check, { size: 14 }) }),
-            /* @__PURE__ */ jsx2("button", { onClick: () => setIsCreating(false), className: "p-1.5 rounded-lg hover:bg-surface-glass text-text-muted", children: /* @__PURE__ */ jsx2(X, { size: 14 }) })
-          ] }) }) }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "px-2 py-1", children: [
-              /* @__PURE__ */ jsx2("div", { className: "px-2 py-1.5 text-[9px] font-bold text-text-muted uppercase tracking-widest", children: "Blueprints Principales" }),
-              allBlueprints.map(([id, tl]) => /* @__PURE__ */ jsx2(
-                BlueprintCard,
-                {
-                  id,
-                  name: tl.name || id,
-                  nodeCount: tl.keyframes?.length || 0,
-                  isActive: id === activeTimelineId,
-                  onSelect: () => handleSelect(id),
-                  onRename: (name) => renameTimeline(id, name),
-                  onDuplicate: () => {
-                    setPrototypeBrand(duplicateTimeline(id));
-                  },
-                  onDelete: allBlueprints.length > 1 ? () => handleDelete(id) : void 0
-                },
-                id
-              ))
-            ] }),
-            subflows.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "px-2 py-1 border-t border-border-subtle", children: [
-              /* @__PURE__ */ jsx2("div", { className: "px-2 py-1.5 text-[9px] font-bold text-text-muted uppercase tracking-widest", children: "Subflujos" }),
-              subflows.map(([id, bp]) => {
-                const tk = bpToKey[id] || "";
-                return /* @__PURE__ */ jsx2(
-                  BlueprintCard,
-                  {
-                    id,
-                    name: bp.name || id,
-                    nodeCount: bp.keyframes?.length || 0,
-                    isActive: tk === activeTimelineId,
-                    isSubflow: true,
-                    onSelect: () => tk && handleSelect(tk),
-                    onRename: (name) => tk && renameTimeline(tk, name),
-                    onDuplicate: () => tk && setPrototypeBrand(duplicateTimeline(tk)),
-                    onDelete: () => tk && handleDelete(tk)
-                  },
-                  id
-                );
-              })
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] }) });
-};
-
-// src/components/studio/DependencyTreePanel.tsx
-import { useMemo } from "react";
-import { motion as motion3, AnimatePresence as AnimatePresence3 } from "motion/react";
-import { AlertTriangle as AlertTriangle2, X as X2, TreePine } from "lucide-react";
-import { useTimelineStore as useTimelineStore2 } from "@decido/engine";
-import { useBlueprintNavigation as useBlueprintNavigation2 } from "@decido/engine";
-
-// src/components/studio/editor/TreeNodeItem.tsx
-import { useState as useState3 } from "react";
-import {
-  ChevronRight,
-  ChevronDown,
-  FileText as FileText3,
-  Network as Network3,
-  Zap,
-  AlertTriangle
-} from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var TreeNodeItem = ({ node, activeId, onNavigate }) => {
-  const [isExpanded, setIsExpanded] = useState3(node.depth < 2);
-  const hasChildren = node.children.length > 0;
-  const isActive = node.id === activeId;
-  const icon = node.type === "trigger" ? /* @__PURE__ */ jsx3(Zap, { size: 13, className: "text-amber-400" }) : node.type === "subflow" ? /* @__PURE__ */ jsx3(Network3, { size: 13, className: node.isCyclic ? "text-red-400" : "text-violet-400" }) : node.type === "orphan" ? /* @__PURE__ */ jsx3(AlertTriangle, { size: 13, className: "text-text-muted" }) : /* @__PURE__ */ jsx3(FileText3, { size: 13, className: "text-cyan-400" });
-  return /* @__PURE__ */ jsxs3("div", { children: [
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        className: `flex items-center gap-1.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all mb-0.5 ${isActive ? "bg-cyan-500/15 border border-cyan-500/30" : node.isCyclic ? "bg-red-500/5 border border-red-500/20 hover:bg-red-500/10" : "hover:bg-surface-glass border border-transparent"}`,
-        style: { paddingLeft: `${8 + node.depth * 16}px` },
-        onClick: () => onNavigate(node.id),
-        children: [
-          hasChildren ? /* @__PURE__ */ jsx3(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                setIsExpanded(!isExpanded);
-              },
-              className: "p-0.5 rounded hover:bg-surface-glass text-text-muted shrink-0",
-              children: isExpanded ? /* @__PURE__ */ jsx3(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx3(ChevronRight, { size: 12 })
-            }
-          ) : /* @__PURE__ */ jsx3("span", { className: "w-5 shrink-0" }),
-          icon,
-          /* @__PURE__ */ jsx3("span", { className: `text-xs truncate flex-1 ${isActive ? "text-text-primary font-medium" : node.isCyclic ? "text-red-300" : "text-text-secondary"}`, children: node.name }),
-          node.isCyclic && /* @__PURE__ */ jsx3("span", { className: "text-[8px] bg-red-500/20 text-red-400 px-1 py-0.5 rounded font-mono", children: "CICLO" }),
-          node.type === "trigger" && /* @__PURE__ */ jsx3("span", { className: "text-[8px] bg-amber-500/10 text-amber-400 px-1 py-0.5 rounded font-mono", children: "\u26A1" })
-        ]
-      }
-    ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx3("div", { children: node.children.map((child) => /* @__PURE__ */ jsx3(
-      TreeNodeItem,
-      {
-        node: child,
-        activeId,
-        onNavigate
-      },
-      child.id
-    )) })
-  ] });
-};
-
-// src/components/studio/DependencyTreePanel.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var DependencyTreePanel = ({ isOpen, onClose }) => {
-  const timelines = useTimelineStore2((s) => s.timelines);
-  const blueprintLibrary = useTimelineStore2((s) => s.blueprintLibrary);
-  const setPrototypeBrand = usePlaygroundStore((s) => s.setPrototypeBrand);
-  const resetNavigation = useBlueprintNavigation2((s) => s.resetNavigation);
-  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
-  const { roots, orphans, cycleWarnings } = useMemo(() => {
-    const references = {};
-    const referencedBpIds = /* @__PURE__ */ new Set();
-    for (const [key, timeline] of Object.entries(timelines)) {
-      const subflowNodes = (timeline.keyframes || []).filter(
-        (kf) => kf.track === "subflow" && kf.targetBlueprintId
-      );
-      if (subflowNodes.length > 0) {
-        references[key] = subflowNodes.map((kf) => kf.targetBlueprintId);
-        subflowNodes.forEach((kf) => referencedBpIds.add(kf.targetBlueprintId));
-      }
-    }
-    const bpToTimelineKey = {};
-    for (const key of Object.keys(timelines)) {
-      if (key.startsWith("subflow_")) {
-        const bpId = `bp_${key.replace("subflow_", "")}`;
-        bpToTimelineKey[bpId] = key;
-      }
-    }
-    const referencedTimelineKeys = new Set(
-      [...referencedBpIds].map((bpId) => bpToTimelineKey[bpId]).filter(Boolean)
-    );
-    const cycleWarnings2 = [];
-    const buildNode = (tlKey, visited, depth) => {
-      const timeline = timelines[tlKey];
-      const name = timeline?.name || tlKey;
-      const isSubflow = tlKey.startsWith("subflow_");
-      const hasTrigger = (timeline?.keyframes || []).some((kf) => kf.track === "trigger");
-      if (visited.has(tlKey)) {
-        cycleWarnings2.push(`Ciclo: ${[...visited].join(" \u2192 ")} \u2192 ${tlKey}`);
-        return {
-          id: tlKey,
-          name,
-          type: "subflow",
-          children: [],
-          isCyclic: true,
-          depth
-        };
-      }
-      const newVisited = new Set(visited);
-      newVisited.add(tlKey);
-      const childBpIds = references[tlKey] || [];
-      const children = childBpIds.map((bpId) => {
-        const childKey = bpToTimelineKey[bpId];
-        if (childKey) {
-          return buildNode(childKey, newVisited, depth + 1);
-        }
-        return {
-          id: bpId,
-          name: bpId,
-          type: "orphan",
-          children: [],
-          depth: depth + 1
-        };
-      });
-      return {
-        id: tlKey,
-        name,
-        type: hasTrigger ? "trigger" : isSubflow ? "subflow" : "blueprint",
-        children,
-        depth
-      };
-    };
-    const rootKeys = Object.keys(references).filter((key) => !referencedTimelineKeys.has(key));
-    const roots2 = rootKeys.map((key) => buildNode(key, /* @__PURE__ */ new Set(), 0));
-    const orphanBpIds = Object.keys(blueprintLibrary).filter((bpId) => {
-      const tlKey = bpToTimelineKey[bpId];
-      if (!tlKey) return false;
-      return !referencedBpIds.has(bpId) && !rootKeys.includes(tlKey);
-    });
-    const orphans2 = orphanBpIds.map((bpId) => ({
-      id: bpToTimelineKey[bpId] || bpId,
-      name: blueprintLibrary[bpId]?.name || bpId,
-      type: "subflow",
-      children: [],
-      depth: 0
-    }));
-    return { roots: roots2, orphans: orphans2, cycleWarnings: cycleWarnings2 };
-  }, [timelines, blueprintLibrary]);
-  const handleNavigate = (nodeId) => {
-    resetNavigation();
-    setPrototypeBrand(nodeId);
-  };
-  return /* @__PURE__ */ jsx4(AnimatePresence3, { children: isOpen && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(
-      motion3.div,
-      {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        className: "fixed inset-0 bg-surface-overlay z-40",
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs4(
-      motion3.div,
-      {
-        initial: { opacity: 0, x: -20, scale: 0.95 },
-        animate: { opacity: 1, x: 0, scale: 1 },
-        exit: { opacity: 0, x: -20, scale: 0.95 },
-        transition: { type: "spring", damping: 25, stiffness: 300 },
-        className: "fixed left-4 bottom-20 z-50 w-96 max-h-[60vh] bg-surface-primary border border-border-default rounded-2xl shadow-2xl overflow-hidden flex flex-col",
-        style: { backdropFilter: "blur(20px)" },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border-default bg-surface-glass", children: [
-            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx4(TreePine, { size: 16, className: "text-emerald-400" }),
-              /* @__PURE__ */ jsx4("span", { className: "text-sm font-bold text-text-primary tracking-wide", children: "Jerarqu\xEDa" }),
-              cycleWarnings.length > 0 && /* @__PURE__ */ jsxs4("span", { className: "text-[10px] bg-red-500/20 text-red-400 px-1.5 py-0.5 rounded-full font-mono flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx4(AlertTriangle2, { size: 10 }),
-                " ",
-                cycleWarnings.length,
-                " ciclo(s)"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx4("button", { onClick: onClose, className: "p-1.5 rounded-lg hover:bg-surface-glass text-text-muted transition-colors", children: /* @__PURE__ */ jsx4(X2, { size: 14 }) })
-          ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2", children: [
-            roots.length === 0 && orphans.length === 0 && /* @__PURE__ */ jsx4("div", { className: "text-center text-text-muted text-xs py-8", children: "No hay flujos con subflows referenciados" }),
-            roots.map((root) => /* @__PURE__ */ jsx4(
-              TreeNodeItem,
-              {
-                node: root,
-                activeId: activeTimelineId,
-                onNavigate: handleNavigate
-              },
-              root.id
-            )),
-            orphans.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "mt-3 pt-3 border-t border-border-subtle", children: [
-              /* @__PURE__ */ jsx4("div", { className: "px-2 py-1 text-[9px] font-bold text-text-muted uppercase tracking-widest", children: "Sin Referencia" }),
-              orphans.map((node) => /* @__PURE__ */ jsx4(
-                TreeNodeItem,
-                {
-                  node,
-                  activeId: activeTimelineId,
-                  onNavigate: handleNavigate
-                },
-                node.id
-              ))
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] }) });
-};
-
-// src/components/controls/TimelineTape.tsx
-import React5 from "react";
-import { Pause, Play, RotateCcw } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var TimelineTape = React5.memo(function TimelineTape2({
-  currentTime,
-  seekTime,
-  playbackSpeed,
-  setPlaybackSpeed,
-  isPlaying,
-  setIsPlaying,
-  handleResetPlayground,
-  currentTimeline
-}) {
-  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 w-full bg-surface-overlay p-2 rounded-xl border border-border-subtle", children: [
-    /* @__PURE__ */ jsxs5("span", { className: "text-xs font-mono text-text-secondary w-10 text-right", children: [
-      currentTime.toFixed(1),
-      "s"
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "relative flex-1 h-6 flex items-center group cursor-pointer", children: [
-      /* @__PURE__ */ jsx5("div", { className: "absolute w-full h-1.5 bg-surface-glass rounded-full overflow-hidden group-hover:bg-surface-glass transition-colors", children: /* @__PURE__ */ jsx5("div", { className: "h-full bg-purple-500/50 group-hover:bg-purple-400 transition-colors", style: { width: `${currentTime / Math.max(currentTimeline.duration, 1) * 100}%` } }) }),
-      /* @__PURE__ */ jsx5("input", { type: "range", min: "0", max: currentTimeline.duration, step: "0.1", value: currentTime, onChange: (e) => seekTime(parseFloat(e.target.value)), className: "absolute w-full h-full opacity-0 cursor-pointer z-20" }),
-      currentTimeline.keyframes.map((kf, i) => /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: "absolute top-1/2 -translate-y-1/2 w-2 h-2 rounded-full border border-[#1e1e1f] z-10 pointer-events-none transition-all group-hover:scale-125",
-          style: { left: `calc(${kf.t / currentTimeline.duration * 100}% - 4px)`, backgroundColor: currentTime >= kf.t ? "#a855f7" : "#52525b" }
-        },
-        i
-      ))
-    ] }),
-    /* @__PURE__ */ jsxs5("span", { className: "text-xs font-mono text-text-muted w-10", children: [
-      currentTimeline.duration.toFixed(1),
-      "s"
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex gap-1 border-l border-border-default pl-2 ml-1", children: [
-      /* @__PURE__ */ jsx5("button", { onClick: () => setIsPlaying(!isPlaying), className: "w-8 h-8 rounded-lg bg-surface-glass hover:bg-purple-500/20 text-text-primary flex items-center justify-center transition-colors", children: isPlaying ? /* @__PURE__ */ jsx5(Pause, { size: 14 }) : /* @__PURE__ */ jsx5(Play, { size: 14, className: "ml-0.5" }) }),
-      /* @__PURE__ */ jsxs5("button", { onClick: () => setPlaybackSpeed(playbackSpeed === 1 ? 2 : 1), className: "w-8 h-8 rounded-lg hover:bg-surface-glass text-text-secondary flex items-center justify-center transition-colors text-[10px] font-bold", children: [
-        playbackSpeed,
-        "x"
-      ] }),
-      /* @__PURE__ */ jsx5("button", { onClick: handleResetPlayground, className: "w-8 h-8 rounded-lg hover:bg-surface-glass text-text-secondary flex items-center justify-center transition-colors", title: "Rewind & Reset Engine", children: /* @__PURE__ */ jsx5(RotateCcw, { size: 14 }) })
-    ] })
-  ] });
-});
-
-// src/components/controls/CreatorInputBar.tsx
-import React6, { useState as useState4, useMemo as useMemo2, useCallback as useCallback2, useEffect as useEffect3 } from "react";
-import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion/react";
-import {
-  Wand2,
-  Clock,
-  Mic,
-  MessageCircle,
-  Terminal,
-  Network as Network4,
-  Variable,
-  Download,
-  Layout,
-  HelpCircle,
-  Trash2 as Trash22
-} from "lucide-react";
-import { useTimelineStore as useTimelineStore3, useEngineStore } from "@decido/engine";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var CREATOR_COMMANDS = [
-  { cmd: "/add", args: "<type> [label]", desc: "Agregar nodo", icon: /* @__PURE__ */ jsx6(MessageCircle, { size: 14, className: "text-blue-400" }) },
-  { cmd: "/shell", args: "<action> [label]", desc: "Nodo Shell", icon: /* @__PURE__ */ jsx6(Terminal, { size: 14, className: "text-teal-400" }) },
-  { cmd: "/connect", args: "<nodeA> <nodeB>", desc: "Conectar nodos", icon: /* @__PURE__ */ jsx6(Network4, { size: 14, className: "text-violet-400" }) },
-  { cmd: "/var", args: "<name> <value>", desc: "Definir variable", icon: /* @__PURE__ */ jsx6(Variable, { size: 14, className: "text-emerald-400" }) },
-  { cmd: "/export", args: "", desc: "Exportar DSD", icon: /* @__PURE__ */ jsx6(Download, { size: 14, className: "text-cyan-400" }) },
-  { cmd: "/ui", args: "[componentId]", desc: "UI Components", icon: /* @__PURE__ */ jsx6(Layout, { size: 14, className: "text-pink-400" }) },
-  { cmd: "/clear", args: "", desc: "Limpiar nodos", icon: /* @__PURE__ */ jsx6(Trash22, { size: 14, className: "text-red-400" }) },
-  { cmd: "/help", args: "", desc: "Ayuda", icon: /* @__PURE__ */ jsx6(HelpCircle, { size: 14, className: "text-text-secondary" }) }
-];
-var CreatorInputBar = React6.memo(function CreatorInputBar2({
-  inputValue = "",
-  setInputValue,
-  isGenerating = false,
-  handleGeneratePlayground,
-  setIsVoiceActive,
-  prototypeBrand = "",
-  handleExport
-}) {
-  const [slashOpen, setSlashOpen] = useState4(false);
-  const [slashIdx, setSlashIdx] = useState4(0);
-  const filteredCmds = useMemo2(() => {
-    if (!inputValue.startsWith("/")) return [];
-    const q = inputValue.split(" ")[0].toLowerCase();
-    return CREATOR_COMMANDS.filter((c) => c.cmd.startsWith(q));
-  }, [inputValue]);
-  useEffect3(() => {
-    setSlashOpen(inputValue.startsWith("/") && filteredCmds.length > 0);
-    setSlashIdx(0);
-  }, [inputValue, filteredCmds.length]);
-  const handleCreatorSlash = useCallback2(() => {
-    const parts = inputValue.trim().split(/\s+/);
-    const cmd = parts[0]?.toLowerCase();
-    if (cmd === "/add" || cmd === "/shell") {
-      const rawType = parts[1] || (cmd === "/shell" ? "config" : "dialogue");
-      const label = parts.slice(2).join(" ") || rawType;
-      const trackMap = {
-        "dialogue": "dialogue",
-        "logic": "logic",
-        "ui": "ui",
-        "render": "render",
-        "subflow": "subflow",
-        "entry": "entry",
-        "return": "return",
-        "trigger": "trigger",
-        "condition": "condition",
-        "set": "set",
-        "registerButton": "shell:registerButton",
-        "activitybar": "shell:registerButton",
-        "registerTab": "shell:registerTab",
-        "tab": "shell:registerTab",
-        "registerPanel": "shell:registerPanel",
-        "panel": "shell:registerPanel",
-        "registerSidebar": "shell:registerSidebar",
-        "sidebar": "shell:registerSidebar",
-        "registerStatusBar": "shell:registerStatusBar",
-        "statusbar": "shell:registerStatusBar",
-        "registerTopBar": "shell:registerTopBar",
-        "topbar": "shell:registerTopBar",
-        "registerAction": "shell:registerAction",
-        "command": "shell:registerAction",
-        "toggleSidebar": "shell:toggleSidebar",
-        "togglePanel": "shell:togglePanel",
-        "splitPane": "shell:splitPane",
-        "focusTab": "shell:focusTab",
-        "closeTab": "shell:closeTab",
-        "setTheme": "shell:setTheme",
-        "theme": "shell:setTheme",
-        "applyPalette": "shell:applyPalette",
-        "palette": "shell:applyPalette",
-        "updateToken": "shell:updateToken",
-        "token": "shell:updateToken",
-        "notification": "shell:notification",
-        "notify": "shell:notification",
-        "modal": "shell:modal",
-        "execCommand": "shell:execCommand",
-        "exec": "shell:execCommand",
-        "shortcut": "shell:shortcut",
-        "emitEvent": "shell:emitEvent",
-        "emit": "shell:emitEvent",
-        "config": "shell:config",
-        "shellConfig": "shell:config"
-      };
-      const shellActionMap = {
-        "shell:registerButton": "registerActivityBarItem",
-        "shell:registerTab": "openTab",
-        "shell:registerPanel": "registerPanelView",
-        "shell:registerSidebar": "registerSidebarView",
-        "shell:registerStatusBar": "registerStatusBarItem",
-        "shell:registerTopBar": "registerTopBarItem",
-        "shell:registerAction": "registerCommand",
-        "shell:toggleSidebar": "toggleSidebar",
-        "shell:togglePanel": "togglePanel",
-        "shell:splitPane": "splitPane",
-        "shell:focusTab": "focusTab",
-        "shell:closeTab": "closeTab",
-        "shell:setTheme": "setTheme",
-        "shell:applyPalette": "applyPalette",
-        "shell:updateToken": "updateToken",
-        "shell:notification": "showNotification",
-        "shell:modal": "showModal",
-        "shell:execCommand": "executeCommand",
-        "shell:shortcut": "registerShortcut",
-        "shell:emitEvent": "emitEvent",
-        "shell:config": "shellConfig"
-      };
-      let resolvedType = rawType;
-      if (cmd === "/shell" && !rawType.startsWith("shell:")) resolvedType = trackMap[rawType] || `shell:${rawType}`;
-      else resolvedType = trackMap[rawType] || rawType;
-      const newKf = { t: Date.now(), track: resolvedType, position: { x: 200 + Math.random() * 600, y: 100 + Math.random() * 400 }, label, state: label };
-      if (resolvedType === "dialogue") {
-        newKf.speech = label;
-        newKf.actorId = "assistant";
-      } else if (resolvedType === "subflow") {
-        newKf.targetBlueprintId = "";
-      }
-      if (resolvedType.startsWith("shell:")) {
-        newKf.track = "shell";
-        newKf.type = resolvedType;
-        newKf.shellAction = shellActionMap[resolvedType] || resolvedType.replace("shell:", "");
-      }
-      useTimelineStore3.getState().addKeyframe(prototypeBrand, newKf);
-      usePlaygroundStore.getState().addLog(`\u2705 Nodo "${label}" (${resolvedType}) agregado al canvas`, "success");
-    } else if (cmd === "/var") {
-      const varName = parts[1];
-      const varValue = parts.slice(2).join(" ");
-      if (varName) {
-        useEngineStore.getState().setVariable(varName, varValue || "");
-        usePlaygroundStore.getState().addLog(`\u{1F4CA} Variable "${varName}" = "${varValue}"`, "info");
-      }
-    } else if (cmd === "/export") {
-      handleExport();
-    } else if (cmd === "/ui") {
-      const comps = Object.values(useUIComponentStore.getState().components);
-      if (parts[1]) {
-        const comp = comps.find((c) => c.id === parts[1] || c.name.toLowerCase().includes(parts[1].toLowerCase()));
-        if (comp) {
-          useTimelineStore3.getState().addKeyframe(prototypeBrand, { t: Date.now(), track: "render", position: { x: 200 + Math.random() * 600, y: 100 + Math.random() * 400 }, label: comp.name, state: comp.name, uiSchema: comp.schema, autoComplete: false });
-          usePlaygroundStore.getState().addLog(`\u{1F5BC}\uFE0F UI Component "${comp.name}" agregado`, "success");
-        }
-      } else {
-        usePlaygroundStore.getState().addLog(`\u{1F3A8} UI Components:
-${comps.map((c) => `\u2022 ${c.name} (${c.source})`).join("\n") || "Ninguno disponible"}`, "info");
-      }
-    } else if (cmd === "/clear") {
-      useTimelineStore3.getState().setDynamicTimelines((prev) => ({ ...prev, [prototypeBrand]: { ...prev[prototypeBrand], keyframes: [], edges: [] } }));
-      usePlaygroundStore.getState().addLog("\u{1F5D1}\uFE0F Canvas limpiado", "warning");
-    } else if (cmd === "/help") {
-      usePlaygroundStore.getState().addLog(`\u{1F4CB} Comandos Creator:
-${CREATOR_COMMANDS.map((c) => `${c.cmd} ${c.args} \u2014 ${c.desc}`).join("\n")}`, "info");
-    } else {
-      return false;
-    }
-    setInputValue("");
-    return true;
-  }, [inputValue, prototypeBrand, handleExport, setInputValue]);
-  const handleCreatorSubmit = useCallback2(() => {
-    inputValue.startsWith("/") ? handleCreatorSlash() : handleGeneratePlayground();
-  }, [inputValue, handleCreatorSlash, handleGeneratePlayground]);
-  const handleCreatorKeyDown = useCallback2((e) => {
-    if (slashOpen) {
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setSlashIdx((i) => Math.min(i + 1, filteredCmds.length - 1));
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setSlashIdx((i) => Math.max(i - 1, 0));
-      } else if (e.key === "Enter" && filteredCmds[slashIdx]) {
-        e.preventDefault();
-        setInputValue(filteredCmds[slashIdx].cmd + " ");
-        setSlashOpen(false);
-        return;
-      } else if (e.key === "Escape") {
-        setSlashOpen(false);
-        return;
-      }
-    }
-    if (e.key === "Enter" && !slashOpen && !isGenerating) handleCreatorSubmit();
-  }, [slashOpen, slashIdx, filteredCmds, isGenerating, handleCreatorSubmit, setInputValue]);
-  return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx6(AnimatePresence4, { children: slashOpen && /* @__PURE__ */ jsxs6(motion4.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 8 }, className: "absolute bottom-full left-0 mb-2 w-full bg-surface-secondary/95 backdrop-blur-xl border border-border-default rounded-xl shadow-2xl shadow-black/50 overflow-hidden z-50", children: [
-      /* @__PURE__ */ jsx6("div", { className: "px-3 py-1.5 border-b border-border-subtle", children: /* @__PURE__ */ jsx6("span", { className: "text-[9px] font-bold text-text-muted uppercase tracking-widest", children: "/ Comandos Creator" }) }),
-      /* @__PURE__ */ jsx6("div", { className: "max-h-[200px] overflow-y-auto py-1", children: filteredCmds.map((c, i) => /* @__PURE__ */ jsxs6("button", { onClick: () => {
-        setInputValue(c.cmd + " ");
-        setSlashOpen(false);
-      }, className: `w-full flex items-center gap-2.5 px-3 py-2 text-xs transition-colors ${i === slashIdx ? "bg-purple-500/15 text-text-primary" : "text-text-secondary hover:text-text-primary hover:bg-surface-glass"}`, children: [
-        c.icon,
-        /* @__PURE__ */ jsx6("span", { className: "font-mono font-bold text-purple-300", children: c.cmd }),
-        /* @__PURE__ */ jsx6("span", { className: "text-text-muted font-mono", children: c.args }),
-        /* @__PURE__ */ jsx6("span", { className: "ml-auto text-[10px] text-text-muted truncate max-w-[150px]", children: c.desc })
-      ] }, c.cmd)) })
-    ] }) }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 sm:gap-3 w-full bg-surface-overlay p-1.5 sm:p-2 rounded-xl border border-border-subtle focus-within:border-cyan-500/30 transition-colors mt-2", children: [
-      /* @__PURE__ */ jsx6(Wand2, { size: 20, className: "text-purple-400 ml-2" }),
-      /* @__PURE__ */ jsx6("input", { type: "text", placeholder: "Escribe / para comandos, o un prompt AI...", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleCreatorKeyDown, className: "w-full bg-transparent text-text-primary placeholder-text-muted outline-hidden text-sm h-10" }),
-      /* @__PURE__ */ jsx6("button", { onClick: handleCreatorSubmit, disabled: isGenerating, className: "px-3 sm:px-4 py-2 rounded-lg font-bold text-xs sm:text-sm transition-colors disabled:opacity-50 min-w-[70px] sm:min-w-[100px] flex justify-center items-center bg-purple-500/20 text-purple-400 hover:bg-purple-500/30", children: isGenerating ? /* @__PURE__ */ jsx6(Clock, { size: 16, className: "animate-spin" }) : "Enviar" }),
-      /* @__PURE__ */ jsx6("div", { className: "w-px h-6 bg-surface-glass mx-1" }),
-      /* @__PURE__ */ jsx6("button", { onClick: () => setIsVoiceActive(true), className: "w-10 h-10 rounded-full flex items-center justify-center border transition-all shadow-[0_0_15px_rgba(6,182,212,0.15)] text-purple-400 bg-purple-500/10 border-purple-500/20 hover:bg-purple-500/20", children: /* @__PURE__ */ jsx6(Mic, { size: 18 }) })
-    ] })
-  ] });
-});
-
-// src/components/controls/OSToolbar.tsx
-import React7 from "react";
-import {
-  Layers,
-  Terminal as Terminal2,
-  Volume2,
-  VolumeX,
-  Minimize,
-  Maximize,
-  FolderOpen as FolderOpen2,
-  TreePine as TreePine2
-} from "lucide-react";
-import { useTimelineStore as useTimelineStore4 } from "@decido/engine";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var OSToolbar = React7.memo(function OSToolbar2({
-  dynamicTimelines,
-  prototypeBrand,
-  showCanvas,
-  setShowCanvas,
-  isTerminalOpen,
-  setIsTerminalOpen,
-  isMuted,
-  setIsMuted,
-  selectedVoice,
-  setSelectedVoice,
-  isFullscreen,
-  toggleFullscreen,
-  handleExport,
-  config,
-  isBlueprintManagerOpen,
-  setIsBlueprintManagerOpen,
-  isTreeOpen,
-  setIsTreeOpen
-}) {
-  return /* @__PURE__ */ jsxs7("div", { className: "flex w-full overflow-x-auto custom-scrollbar pb-2 sm:pb-3 pt-1 mt-1 items-center justify-between gap-2 sm:gap-4", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 sm:gap-2 min-w-max", children: [
-      /* @__PURE__ */ jsxs7("button", { onClick: () => setIsBlueprintManagerOpen(!isBlueprintManagerOpen), className: "bg-surface-secondary hover:bg-surface-tertiary border border-border-default rounded-lg text-xs font-medium text-text-primary px-3 py-2 outline-hidden cursor-pointer hover:border-cyan-400/50 transition-colors flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7(FolderOpen2, { size: 14, className: "text-cyan-400" }),
-        /* @__PURE__ */ jsx7("span", { className: "max-w-[120px] truncate", children: dynamicTimelines[prototypeBrand]?.name || prototypeBrand }),
-        /* @__PURE__ */ jsx7("span", { className: "text-[10px] text-text-muted font-mono", children: dynamicTimelines[prototypeBrand]?.keyframes?.length || 0 })
-      ] }),
-      /* @__PURE__ */ jsx7("button", { onClick: () => setIsTreeOpen(!isTreeOpen), className: "bg-surface-secondary hover:bg-surface-tertiary border border-border-default rounded-lg text-xs font-medium text-text-primary px-2.5 py-2 outline-hidden cursor-pointer hover:border-emerald-400/50 transition-colors flex items-center gap-1.5", title: "Jerarqu\xEDa de dependencias", children: /* @__PURE__ */ jsx7(TreePine2, { size: 14, className: "text-emerald-400" }) }),
-      /* @__PURE__ */ jsx7("div", { className: "w-px h-6 bg-surface-glass mx-1" }),
-      /* @__PURE__ */ jsxs7("button", { onClick: () => setShowCanvas(!showCanvas), className: `px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center gap-2 shrink-0 ${showCanvas ? "text-text-primary bg-surface-glass" : "text-text-secondary hover:text-cyan-400 hover:bg-surface-glass border border-transparent"}`, title: "Panel 3D / Diagrama", children: [
-        /* @__PURE__ */ jsx7(Layers, { size: 14 }),
-        " ",
-        /* @__PURE__ */ jsx7("span", { className: "hidden sm:inline", children: "Visualizador" })
-      ] }),
-      /* @__PURE__ */ jsxs7("button", { onClick: () => setIsTerminalOpen(!isTerminalOpen), className: `px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center gap-2 shrink-0 ${isTerminalOpen ? "text-text-primary bg-surface-glass" : "text-text-secondary hover:text-purple-400 hover:bg-surface-glass border border-transparent"}`, title: "Panel de Logs", children: [
-        /* @__PURE__ */ jsx7(Terminal2, { size: 14 }),
-        " ",
-        /* @__PURE__ */ jsx7("span", { className: "hidden sm:inline", children: "Logs OS" })
-      ] }),
-      /* @__PURE__ */ jsx7("div", { className: "w-px h-6 bg-surface-glass mx-1" }),
-      /* @__PURE__ */ jsx7("button", { onClick: () => setIsMuted(!isMuted), className: `px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center justify-center shrink-0 ${!isMuted ? "text-text-primary bg-surface-glass" : "text-text-muted hover:text-red-400 hover:bg-surface-glass border border-transparent"}`, title: isMuted ? "Activar Audio" : "Silenciar", children: !isMuted ? /* @__PURE__ */ jsx7(Volume2, { size: 16 }) : /* @__PURE__ */ jsx7(VolumeX, { size: 16 }) }),
-      /* @__PURE__ */ jsx7("select", { value: selectedVoice, onChange: (e) => setSelectedVoice(e.target.value), className: "bg-surface-secondary hover:bg-surface-tertiary border border-border-default rounded-lg text-xs font-medium text-text-primary px-3 py-2 outline-hidden cursor-pointer focus:border-cyan-400 transition-colors", children: config?.voices?.map((v) => /* @__PURE__ */ jsxs7("option", { value: v, children: [
-        "Voz: ",
-        v
-      ] }, v)) }),
-      /* @__PURE__ */ jsx7("button", { onClick: toggleFullscreen, className: "px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center justify-center shrink-0 text-text-muted hover:text-text-primary hover:bg-surface-glass border border-transparent", title: "Pantalla Completa", children: isFullscreen ? /* @__PURE__ */ jsx7(Minimize, { size: 16 }) : /* @__PURE__ */ jsx7(Maximize, { size: 16 }) })
-    ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 sm:gap-3 shrink-0 pr-1", children: [
-      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 shrink-0 px-4 py-2 rounded-xl font-medium text-sm transition-colors border bg-cyan-500/10 text-cyan-500 hover:bg-cyan-500/20 border-transparent cursor-pointer", title: "Importar DSD", children: [
-        /* @__PURE__ */ jsx7(Layers, { size: 16 }),
-        " ",
-        /* @__PURE__ */ jsx7("span", { className: "hidden sm:inline", children: "Importar DSD" }),
-        /* @__PURE__ */ jsx7("input", { type: "file", accept: ".dsd,.json", className: "hidden", onChange: (e) => {
-          const file = e.target.files?.[0];
-          if (!file) return;
-          const reader = new FileReader();
-          reader.onload = (ev) => {
-            try {
-              const json = JSON.parse(ev.target?.result);
-              if (json.format === "decido-standard-document" && json.blueprint) {
-                useTimelineStore4.getState().setDynamicTimelines((prev) => ({ ...prev, [json.brand || prototypeBrand]: json.blueprint }));
-                usePlaygroundStore.getState().addLog(`Se ha importado el blueprint de ${json.brand} (${json.blueprint.keyframes.length} nodos)`, "success");
-              } else {
-                usePlaygroundStore.getState().addLog("El archivo no es un DSD v\xE1lido.", "error");
-              }
-            } catch {
-              usePlaygroundStore.getState().addLog("Error al parsear archivo DSD.", "error");
-            }
-          };
-          reader.readAsText(file);
-          e.target.value = "";
-        } })
-      ] }),
-      /* @__PURE__ */ jsxs7("button", { onClick: handleExport, className: "flex items-center gap-2 shrink-0 px-4 py-2 rounded-xl font-medium text-sm transition-colors border bg-purple-500/10 text-purple-400 hover:bg-purple-500/20 border-transparent", title: "Exportar DSD", children: [
-        /* @__PURE__ */ jsx7(Layers, { size: 16 }),
-        " ",
-        /* @__PURE__ */ jsx7("span", { className: "hidden sm:inline", children: "Exportar DSD" })
-      ] })
-    ] })
-  ] });
-});
-
-// src/components/playground/PlaygroundBottomControls.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var PlaygroundBottomControls = React8.memo(function PlaygroundBottomControls2({
-  step,
-  isVoiceActive,
-  setIsVoiceActive,
-  currentTime,
-  seekTime,
-  playbackSpeed,
-  setPlaybackSpeed,
-  isPlaying,
-  setIsPlaying,
-  handleResetPlayground,
-  dynamicTimelines,
-  prototypeBrand,
-  setPrototypeBrand,
-  inputValue,
-  setInputValue,
-  isGenerating,
-  handleGeneratePlayground,
-  showCanvas,
-  setShowCanvas,
-  isTerminalOpen,
-  setIsTerminalOpen,
-  isMuted,
-  setIsMuted,
-  selectedVoice,
-  setSelectedVoice,
-  isFullscreen,
-  toggleFullscreen,
-  handleExport,
-  dynamicPersona,
-  setSuggestions,
-  isCreatorMode,
-  VoiceWidget,
-  config
-}) {
-  if (step === "action" || step === "profile") return null;
-  if (!isCreatorMode && !isVoiceActive) return null;
-  const [isBlueprintManagerOpen, setIsBlueprintManagerOpen] = useState5(false);
-  const [isTreeOpen, setIsTreeOpen] = useState5(false);
-  const currentTimeline = dynamicTimelines[prototypeBrand] || { duration: 10, keyframes: [] };
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx8("div", { className: "absolute bottom-0 left-0 w-full p-3 sm:p-4 md:p-6 bg-linear-to-t from-surface-primary via-surface-primary to-transparent z-40 flex flex-col items-center", children: /* @__PURE__ */ jsx8(motion5.div, { layout: true, className: `w-full max-w-4xl relative ${isVoiceActive ? "h-64" : ""}`, children: !isVoiceActive ? /* @__PURE__ */ jsxs8("div", { className: `bg-surface-tertiary/90 border border-border-default rounded-xl sm:rounded-2xl shadow-xl backdrop-blur-md p-3 sm:p-4 md:p-5 flex flex-col gap-3 sm:gap-4 transition-all ${isCreatorMode ? "border-purple-500/30" : ""}`, children: [
-      isCreatorMode && /* @__PURE__ */ jsx8(
-        TimelineTape,
-        {
-          currentTime,
-          seekTime,
-          playbackSpeed,
-          setPlaybackSpeed,
-          isPlaying,
-          setIsPlaying,
-          handleResetPlayground,
-          currentTimeline
-        }
-      ),
-      isCreatorMode && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-        /* @__PURE__ */ jsx8(
-          CreatorInputBar,
-          {
-            inputValue,
-            setInputValue,
-            isGenerating,
-            handleGeneratePlayground,
-            setIsVoiceActive,
-            prototypeBrand,
-            handleExport
-          }
-        ),
-        /* @__PURE__ */ jsx8(
-          OSToolbar,
-          {
-            dynamicTimelines,
-            prototypeBrand,
-            showCanvas,
-            setShowCanvas,
-            isTerminalOpen,
-            setIsTerminalOpen,
-            isMuted,
-            setIsMuted,
-            selectedVoice,
-            setSelectedVoice,
-            isFullscreen,
-            toggleFullscreen,
-            handleExport,
-            config,
-            isBlueprintManagerOpen,
-            setIsBlueprintManagerOpen,
-            isTreeOpen,
-            setIsTreeOpen
-          }
-        )
-      ] })
-    ] }) : /* @__PURE__ */ jsxs8("div", { className: "flex flex-col w-full h-full relative p-2 bg-surface-tertiary border border-cyan-500/30 rounded-4xl shadow-lg", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center justify-between mb-2", children: [
-        /* @__PURE__ */ jsx8("span", { className: "text-cyan-400 font-medium px-4 bg-linear-to-r from-cyan-400 via-purple-400 to-indigo-400 text-transparent bg-clip-text animate-pulse", children: "Capturando Audio de IA..." }),
-        /* @__PURE__ */ jsx8("button", { onClick: () => setIsVoiceActive(false), className: "w-8 h-8 rounded-full bg-surface-glass hover:bg-surface-glass flex items-center justify-center text-text-secondary hover:text-text-primary transition-colors", children: /* @__PURE__ */ jsx8(X3, { size: 16 }) })
-      ] }),
-      /* @__PURE__ */ jsx8("div", { className: "flex-1 w-full rounded-2xl overflow-hidden relative", children: VoiceWidget ? /* @__PURE__ */ jsx8(
-        VoiceWidget,
-        {
-          isCompact: true,
-          persona: dynamicPersona,
-          onSuggestionsUpdate: setSuggestions,
-          selectedVoice,
-          controls: { setPrototypeBrand, setShowCanvas, setIsPlaying, handleExport, setInputValue, handleGeneratePlayground }
-        }
-      ) : /* @__PURE__ */ jsx8("div", { className: "p-4 flex flex-col items-center justify-center h-full text-text-muted font-mono text-sm border border-border-subtle rounded-xl bg-surface-glass", children: "M\xF3dulo de Voz no proporcionado." }) })
-    ] }) }) }),
-    /* @__PURE__ */ jsx8(BlueprintManagerPanel, { isOpen: isBlueprintManagerOpen, onClose: () => setIsBlueprintManagerOpen(false) }),
-    /* @__PURE__ */ jsx8(DependencyTreePanel, { isOpen: isTreeOpen, onClose: () => setIsTreeOpen(false) })
-  ] });
-});
-
-// src/components/shell/CenterComposite.tsx
-import { useTimelineStore as useTimelineStore7 } from "@decido/engine";
-
-// src/hooks/usePlaygroundCommander.ts
-import { useCallback as useCallback3, useEffect as useEffect4 } from "react";
-import { useTimelineStore as useTimelineStore5 } from "@decido/engine";
-import { useEngineStore as useEngineStore2 } from "@decido/engine";
-import { useReactiveEngine } from "@decido/engine";
-import { useAIDirector } from "@decido/engine";
-import { AudioController } from "@decido/engine";
-var usePlaygroundCommander = (aiProvider) => {
-  const prototypeBrand = usePlaygroundStore((state) => state.prototypeBrand);
-  const setInputValue = usePlaygroundStore((state) => state.setInputValue);
-  const addLog = usePlaygroundStore((state) => state.addLog);
-  const addChatMessage = usePlaygroundStore((state) => state.addChatMessage);
-  const timelines = useTimelineStore5((state) => state.timelines);
-  const { semanticMatch, isThinking } = useReactiveEngine(aiProvider);
-  const { generateKeyframeOnTheFly, generateTimeline, isGenerating } = useAIDirector(aiProvider);
-  const { emitEvent, isConnected } = useNetwork();
-  const currentBlueprint = timelines[prototypeBrand];
-  const lastEvent = useEngineStore2((state) => state.lastEvent);
-  useEffect4(() => {
-    const handleRenderPreview = (e) => {
-      const html = e.detail?.html;
-      if (html) {
-        const instanceId = `web-${Date.now()}`;
-        bridgeToMorph({
-          chatId: instanceId,
-          shellType: "nexusai-preview",
-          label: "Reporte en Vivo",
-          data: { html, css: "", javascript: "" }
-        });
-        usePlaygroundStore.getState().setIsSidebarOpen(false);
-      }
-    };
-    const handleSearchOrder = (e) => {
-      const query = e.detail?.query;
-      if (query) {
-        usePlaygroundStore.getState().setIsSidebarOpen(false);
-      }
-    };
-    window.addEventListener("studio:render-preview", handleRenderPreview);
-    window.addEventListener("studio:search-order", handleSearchOrder);
-    return () => {
-      window.removeEventListener("studio:render-preview", handleRenderPreview);
-      window.removeEventListener("studio:search-order", handleSearchOrder);
-    };
-  }, []);
-  const jumpToNode = useCallback3((nodeId) => {
-    if (!currentBlueprint) return;
-    const targetNode = currentBlueprint.keyframes.find((kf) => kf.id === nodeId);
-    if (targetNode) {
-      addLog(`Reaccionando a Nodo: ${targetNode.state || targetNode.id}`, "system");
-      useEngineStore2.getState().dispatchEvent({
-        type: "USER_INTENT_MATCHED",
-        targetNodeId: nodeId,
-        routeHandle: "success"
-      });
-    }
-  }, [currentBlueprint, addLog]);
-  const handleUserCommand = useCallback3(async (input) => {
-    if (!input || !input.trim()) return;
-    addLog(`Analizando intenci\xF3n: "${input}"`, "system");
-    AudioController.stop();
-    addChatMessage({ type: "text", sender: "user", text: input });
-    const selectedShell = localStorage.getItem("decido_selected_shell");
-    if (selectedShell === "nexusai-preview" || selectedShell === "iframe") {
-      addLog("\u{1F310} Web Preview mode \u2014 generando HTML directo...", "system");
-      addChatMessage({ type: "text", sender: "system", text: "\u{1F310} Generando dise\xF1o web..." });
-      const apiKey = localStorage.getItem("google_gemini_api_key") || window.__DECIDO__?._apiKey || import.meta.env?.VITE_GEMINI_API_KEY || "";
-      const model = localStorage.getItem("decido_gemini_model") || "gemini-3-flash-preview";
-      if (!apiKey) {
-        addChatMessage({ type: "error", sender: "system", text: "\u26A0\uFE0F No se encontr\xF3 API key de Gemini." });
-        return;
-      }
-      const activeInst = useMorphInstanceStore.getState().getActiveInstance();
-      const existingHtml = activeInst?.data?.html || "";
-      const existingCss = activeInst?.data?.css || "";
-      const existingJs = activeInst?.data?.javascript || "";
-      const hasContext = !!existingHtml.trim();
-      const selectedSelector = window.__DECIDO__?.selectedElementSelector || null;
-      const elementContext = selectedSelector ? `
-
-IMPORTANT: The user has SELECTED a specific element: \`${selectedSelector}\`. Focus your changes ONLY on this element and its children. Do not modify other parts of the page.` : "";
-      const systemPrompt = hasContext ? `You are an expert web developer. The user has an EXISTING web page and wants to MODIFY it.${elementContext}
-
-CURRENT HTML:
-\`\`\`html
-${existingHtml}
-\`\`\`
-
-CURRENT CSS:
-\`\`\`css
-${existingCss}
-\`\`\`
-
-CURRENT JavaScript:
-\`\`\`javascript
-${existingJs}
-\`\`\`
-
-Apply the user's requested changes to the EXISTING code above. Keep everything else intact.
-IMPORTANT: DO NOT USE JSON. Instead, strictly format your response using these XML-like tags:
-<decido-html>
-  <!-- your html here without <html> or <body> tags -->
-</decido-html>
-<decido-css>
-  /* your tailwind/custom css here */
-</decido-css>
-<decido-js>
-  // your javascript here
-</decido-js>
-Use Tailwind CSS classes. Do not include explanatory text outside the tags.` : `You are an expert web developer. Generate HTML, CSS, and JavaScript for the user's request.
-IMPORTANT: DO NOT USE JSON. Instead, strictly format your response using these XML-like tags:
-<decido-html>
-  <!-- your html here without <html> or <body> tags -->
-</decido-html>
-<decido-css>
-  /* your tailwind/custom css here */
-</decido-css>
-<decido-js>
-  // your javascript here
-</decido-js>
-Use Tailwind CSS classes for styling (it will be auto-loaded). Write modern, responsive, visually stunning code.
-Use vibrant gradients, dark backgrounds (#0a0a0a, #1a1a2e), neon accent colors, smooth animations, and premium typography.
-Do not include any explanatory text outside the tags.`;
-      try {
-        const chatId = usePlaygroundStore.getState().activeChatId || "_default";
-        const allMessages = usePlaygroundStore.getState().chatMessagesByInstance[chatId] || [];
-        const recentMsgs = allMessages.filter((m) => (m.sender === "user" || m.sender === "agent") && m.type === "text" && m.text?.trim()).slice(-10);
-        const contents = [];
-        for (const m of recentMsgs) {
-          const role = m.sender === "user" ? "user" : "model";
-          if (contents.length > 0 && contents[contents.length - 1].role === role) {
-            contents[contents.length - 1].parts[0].text += "\n" + (m.text || "");
-          } else {
-            contents.push({ role, parts: [{ text: m.text || "" }] });
-          }
-        }
-        if (contents.length === 0 || contents[contents.length - 1].role !== "user") {
-          contents.push({ role: "user", parts: [{ text: input }] });
-        }
-        const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
-        dlog.gemini(`POST ${model} | ${contents.length} turns | prompt: ${systemPrompt.length} chars`, { model, turnsCount: contents.length });
-        const _t0 = performance.now();
-        const res = await fetch(url, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            contents,
-            systemInstruction: { parts: [{ text: systemPrompt }] },
-            generationConfig: { temperature: 0.7, maxOutputTokens: 16384 }
-          })
-        });
-        const _dur = Math.round(performance.now() - _t0);
-        const data = await res.json();
-        const rawText = data?.candidates?.[0]?.content?.parts?.[0]?.text || "";
-        const tokenCount = data?.usageMetadata?.totalTokenCount || 0;
-        dlog.gemini(`Response ${res.status} | ${_dur}ms | ${tokenCount} tokens | ${rawText.length} chars`, { status: res.status, duration: _dur, tokens: tokenCount });
-        let code = { html: "", css: "", javascript: "" };
-        const htmlMatch = /<decido-html>([\s\S]*?)<\/decido-html>/i.exec(rawText);
-        const cssMatch = /<decido-css>([\s\S]*?)<\/decido-css>/i.exec(rawText);
-        const jsMatch = /<decido-js>([\s\S]*?)<\/decido-js>/i.exec(rawText);
-        if (htmlMatch || cssMatch || jsMatch) {
-          code.html = htmlMatch ? htmlMatch[1].trim() : "";
-          code.css = cssMatch ? cssMatch[1].trim() : "";
-          code.javascript = jsMatch ? jsMatch[1].trim() : "";
-        } else {
-          let jsonText = rawText.trim();
-          const jsonMatch = /```(?:json)?\s*([\s\S]*?)```/i.exec(rawText);
-          if (jsonMatch) {
-            jsonText = jsonMatch[1].trim();
-          } else {
-            jsonText = jsonText.replace(/^```json\s*/i, "").replace(/\s*```$/i, "").trim();
-          }
-          try {
-            code = JSON.parse(jsonText);
-          } catch (e) {
-            console.error("Web Preview Parse Error:", e, rawText);
-            code.html = `
-                        <div class="fixed inset-0 flex flex-col items-center justify-center bg-gray-900 text-white p-6 text-center font-sans z-[9999]">
-                            <div class="bg-red-500/10 border border-red-500 text-red-400 p-4 rounded-xl max-w-lg shadow-2xl">
-                                <h3 class="font-bold text-lg mb-2">Error de Generaci\xF3n AI</h3>
-                                <p class="text-sm opacity-80 mb-4">El modelo gener\xF3 c\xF3digo que no cumple con el formato XML o JSON estricto.</p>
-                                <div class="text-xs text-left bg-black/50 p-2 rounded overflow-auto max-h-48 text-gray-300">
-                                    ${e.message}
-                                </div>
-                            </div>
-                        </div>`;
-          }
-        }
-        let instanceId;
-        if (hasContext && activeInst) {
-          instanceId = activeInst.id;
-          useMorphInstanceStore.getState().upsertInstance({
-            id: instanceId,
-            sourceChatId: activeInst.sourceChatId,
-            shellType: "nexusai-preview",
-            label: activeInst.label,
-            data: { html: code.html, css: code.css, javascript: code.javascript }
-          });
-        } else {
-          instanceId = `web-${Date.now()}`;
-          bridgeToMorph({
-            chatId: instanceId,
-            shellType: "nexusai-preview",
-            label: input.slice(0, 40),
-            data: { html: code.html, css: code.css, javascript: code.javascript }
-          });
-        }
-        const verb = hasContext ? "\u{1F504} Dise\xF1o actualizado" : "\u2705 Dise\xF1o web generado";
-        addChatMessage({ type: "text", sender: "agent", text: `${verb}. Revisa el panel derecho.`, morphInstanceId: instanceId });
-        addLog(`\u{1F310} HTML ${hasContext ? "actualizado" : "generado"} en Web Preview`, "success");
-      } catch (err) {
-        dlog.gemini(`ERROR: ${err.message}`, { error: err.message }, "error");
-        addChatMessage({ type: "error", sender: "system", text: `Error generando HTML: ${err.message}` });
-      }
-      return;
-    } else if (selectedShell === "dataway-studio") {
-      addLog("Dataway Studio \u2014 generando M-Script...", "system");
-      const activeResource = localStorage.getItem("dataway_active_resource");
-      const activeConnector = localStorage.getItem("dataway_active_connector") || "google_sheets";
-      if (!activeResource) {
-        addChatMessage({ type: "error", sender: "system", text: "Debes seleccionar una tabla en el panel Recursos de Dataway primero." });
-        return;
-      }
-      const loadingId = `loading-${Date.now()}`;
-      addChatMessage({ id: loadingId, type: "text", sender: "system", text: "Analizando esquema y generando M-Script..." });
-      try {
-        const baseUrl = import.meta.env?.VITE_API_BASE_URL || "http://localhost:3001";
-        const res = await fetch(`${baseUrl}/api/dataway/copilot`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            prompt: input,
-            connectorId: activeConnector,
-            resource: activeResource
-          })
-        });
-        if (!res.ok) {
-          const errData = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
-          throw new Error(errData.error || `Error del servidor HTTP ${res.status}`);
-        }
-        const data = await res.json();
-        if (data.script) {
-          const explanationText = data.explanation ? `**An\xE1lisis de la IA:** ${data.explanation}
-
-` : "";
-          addChatMessage({
-            type: "text",
-            sender: "agent",
-            text: `${explanationText}Pipeline actualizado. Revisa el resultado:
-
-\`\`\`dataway
-${data.script}
-\`\`\``
-          });
-          window.dispatchEvent(new CustomEvent("intent:dataway-generate-script", { detail: {
-            script: data.script,
-            resource: data.targetResource
-          } }));
-        } else {
-          addChatMessage({ type: "error", sender: "system", text: "El agente no retorn\xF3 c\xF3digo." });
-        }
-      } catch (err) {
-        addChatMessage({ type: "error", sender: "system", text: `Error de IA: ${err.message}` });
-      }
-      return;
-    }
-    if (!currentBlueprint) {
-      addLog(`No hay blueprint activo para evaluar.`, "error");
-      return;
-    }
-    const intentEnabled = typeof window !== "undefined" && window.__DECIDO__?.intentEnabled !== false;
-    const isEditRequest = intentEnabled && /agrega|suma|añade|conecta|modifica|cambia|elimina|borra|parchea|actualiza|inserta|mueve/i.test(input);
-    const isCreateRequest = intentEnabled && /grafo|flujo|nodos|complejo|historia|blueprint|escenario|onboarding|proceso|workflow|pipeline|crea\s+(un|una|el|la|los|las)\s|diseña|genera\s+(un|una)|construye|orquest|trigger|subflujo|set\s+variable|marque\s+user\.|shell|tema|theme|sidebar|panel|activity\s*bar|status\s*bar|top\s*bar|notificaci[oó]n|shortcut|atajo|layout|configura\s+(el|la|los|las)\s/i.test(input);
-    if (isCreateRequest || isEditRequest) {
-      addLog(`Intenci\xF3n compleja detectada. ${isEditRequest ? "Editando Grafo..." : "Construyendo Nuevo Grafo..."}`, "system");
-      const result = await generateTimeline(input, prototypeBrand, 15, isEditRequest, currentBlueprint);
-      if (result === true) {
-        addChatMessage({ type: "text", sender: "system", text: `Se ha modificado el grafo contextualmente seg\xFAn tus instrucciones.` });
-      } else if (result && result.keyframes && result.keyframes.length > 0) {
-        jumpToNode(result.keyframes[0].id);
-        addChatMessage({ type: "text", sender: "system", text: `Se ha creado un nuevo grafo.` });
-      } else {
-        addLog(`Fallo al generar el Blueprint con IA.`, "error");
-      }
-      return;
-    }
-    const matchResult = intentEnabled ? await semanticMatch(input, currentBlueprint) : null;
-    if (matchResult && matchResult !== "GENERATE" && typeof matchResult === "string") {
-      jumpToNode(matchResult);
-    } else if (matchResult && typeof matchResult === "object" && matchResult.intent === "UI_ACTION") {
-      addLog(`\u{1F3A8} UI_ACTION detectada. Montando artefacto: ${matchResult.artifact}`, "system");
-      usePlaygroundStore.getState().setActiveArtifactData({
-        artifact: matchResult.artifact,
-        ...matchResult.payload
-      });
-      const uiInstanceId = `ui-${matchResult.artifact}-${Date.now()}`;
-      bridgeToMorph({
-        chatId: uiInstanceId,
-        shellType: "nexusai-preview",
-        label: matchResult.artifact || "Visualizaci\xF3n",
-        data: { artifact: matchResult.artifact, ...matchResult.payload }
-      });
-      addChatMessage({ type: "text", sender: "agent", text: "He preparado la visualizaci\xF3n solicitada en el panel derecho.", morphInstanceId: uiInstanceId });
-    } else if (matchResult && typeof matchResult === "object" && matchResult.intent === "MCP_ACTION") {
-      addLog(`Manejando intenci\xF3n MCP_ACTION: ${matchResult.tool}`, "system");
-      useEngineStore2.getState().dispatchEvent({
-        type: "MCP_EXECUTION_REQUESTED",
-        payload: { tool: matchResult.tool, parameters: matchResult.parameters }
-      });
-      addChatMessage({ type: "text", sender: "system", text: `Ejecutando herramienta externa: ${matchResult.tool}` });
-    } else if (matchResult && typeof matchResult === "object" && matchResult.intent === "UI_COMPONENT") {
-      addLog(`\u{1F3A8} UI_COMPONENT generado por IA: ${matchResult.name}`, "system");
-      const componentId = `ai_${Date.now()}`;
-      useUIComponentStore.getState().addComponent({
-        id: componentId,
-        name: matchResult.name || "AI Component",
-        category: matchResult.category || "custom",
-        schema: matchResult.schema,
-        dataContract: { inputs: {}, outputs: {} },
-        tags: matchResult.tags || ["ai-generated"],
-        source: "ai-generated",
-        createdAt: Date.now(),
-        updatedAt: Date.now()
-      });
-      bridgeToMorph({
-        chatId: `comp-${componentId}`,
-        shellType: "nexusai-preview",
-        label: matchResult.name || "AI Component",
-        data: { html: matchResult.schema, schema: matchResult.schema },
-        artifact: {
-          id: componentId,
-          name: matchResult.name || "AI Component",
-          data: { html: matchResult.schema, schema: matchResult.schema }
-        }
-      });
-      addChatMessage({
-        type: "ui-artifact",
-        sender: "agent",
-        text: `\u{1F3A8} ${matchResult.name}`,
-        actorId: "system",
-        uiSchema: JSON.stringify(matchResult.schema),
-        morphInstanceId: `comp-${componentId}`
-      });
-      addChatMessage({ type: "text", sender: "system", text: `Componente "${matchResult.name}" guardado en la biblioteca UI. Accede con /ui.`, morphInstanceId: `comp-${componentId}` });
-    } else {
-      addLog(`Intenci\xF3n reactiva detectada. Inventando nodo en vivo...`, "system");
-      const newKf = await generateKeyframeOnTheFly(input, prototypeBrand, currentBlueprint);
-      if (newKf) {
-        jumpToNode(newKf.id);
-      } else {
-        addLog(`Fallo al generar morfolog\xEDa reactiva.`, "error");
-      }
-    }
-  }, [currentBlueprint, prototypeBrand, semanticMatch, generateKeyframeOnTheFly, generateTimeline, jumpToNode, addLog, addChatMessage, emitEvent, isConnected]);
-  const handleGeneratePlayground = useCallback3(async (eOrOverride) => {
-    let promptOverride = typeof eOrOverride === "string" ? eOrOverride : void 0;
-    if (eOrOverride && typeof eOrOverride.preventDefault === "function") {
-      eOrOverride.preventDefault();
-    }
-    let currentInput = usePlaygroundStore.getState().inputValue;
-    const promptToUse = promptOverride || currentInput;
-    if (!promptToUse || typeof promptToUse !== "string" || !promptToUse.trim()) return;
-    await handleUserCommand(promptToUse);
-    setInputValue("");
-  }, [handleUserCommand, setInputValue]);
-  return {
-    handleUserCommand,
-    handleGeneratePlayground,
-    isGenerating: isGenerating || isThinking
-  };
-};
-
-// src/hooks/useScreenRecorder.ts
-import { useState as useState6, useRef as useRef3, useCallback as useCallback4 } from "react";
-function useScreenRecorder() {
-  const [isRecording, setIsRecording] = useState6(false);
-  const [countdown, setCountdown] = useState6(null);
-  const mediaRecorderRef = useRef3(null);
-  const startRecording = useCallback4(async () => {
-    try {
-      const stream = await navigator.mediaDevices.getDisplayMedia({
-        video: { displaySurface: "browser", frameRate: { ideal: 60 } },
-        audio: true
-      });
-      const preferredCodecs = [
-        { mimeType: "video/webm;codecs=vp9,opus", videoBitsPerSecond: 8e6 },
-        { mimeType: "video/webm;codecs=h264,opus", videoBitsPerSecond: 8e6 },
-        { mimeType: "video/webm;codecs=vp8,opus", videoBitsPerSecond: 5e6 },
-        { mimeType: "video/webm", videoBitsPerSecond: 25e5 }
-      ];
-      let mType = preferredCodecs.find((opt) => MediaRecorder.isTypeSupported(opt.mimeType));
-      if (!mType) mType = { mimeType: "", videoBitsPerSecond: 25e5 };
-      const mediaRecorder = new MediaRecorder(stream, mType);
-      let currentChunks = [];
-      mediaRecorder.ondataavailable = (e) => {
-        if (e.data.size > 0) currentChunks.push(e.data);
-      };
-      mediaRecorder.onstop = () => {
-        const blob = new Blob(currentChunks, { type: "video/webm" });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.style.display = "none";
-        a.href = url;
-        a.download = `decido-demo-${(/* @__PURE__ */ new Date()).getTime()}.webm`;
-        document.body.appendChild(a);
-        a.click();
-        URL.revokeObjectURL(url);
-        setIsRecording(false);
-      };
-      mediaRecorderRef.current = mediaRecorder;
-      return new Promise((resolve) => {
-        let count = 3;
-        setCountdown(count);
-        const interval = setInterval(() => {
-          count -= 1;
-          if (count > 0) {
-            setCountdown(count);
-          } else {
-            clearInterval(interval);
-            setCountdown(null);
-            mediaRecorder.start();
-            setIsRecording(true);
-            stream.getVideoTracks()[0].onended = () => {
-              if (mediaRecorder.state !== "inactive") mediaRecorder.stop();
-            };
-            resolve(true);
-          }
-        }, 1e3);
-      });
-    } catch (err) {
-      console.error("Error starting recording:", err);
-      setIsRecording(false);
-      setCountdown(null);
-      return false;
-    }
-  }, []);
-  const stopRecording = useCallback4(() => {
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") mediaRecorderRef.current.stop();
-  }, []);
-  return { isRecording, countdown, startRecording, stopRecording };
-}
-
-// src/hooks/usePlaybackEngine.ts
-import { useMemo as useMemo3 } from "react";
-import { usePlaybackSimulator } from "@decido/engine";
-function usePlaybackEngine(prototypeBrand) {
-  const mockTape = useMemo3(() => ({
-    id: `tape-${prototypeBrand}`,
-    events: [
-      { t: 0.1, event: { type: "SYSTEM_START" }, description: "Arranque Autom\xE1tico" }
-    ]
-  }), [prototypeBrand]);
-  return usePlaybackSimulator(mockTape);
-}
-
-// src/hooks/useExportDSD.ts
-import { useTimelineStore as useTimelineStore6 } from "@decido/engine";
-function useExportDSD() {
-  const { prototypeBrand, addLog } = usePlaygroundStore();
-  const currentBlueprint = useTimelineStore6(
-    (s) => s.timelines[prototypeBrand]
-  );
-  const handleExport = async () => {
-    if (!currentBlueprint) {
-      addLog("No hay un blueprint activo para exportar.", "error");
-      return;
-    }
-    try {
-      const dsdPayload = {
-        format: "decido-standard-document",
-        version: "1.0",
-        exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
-        brand: prototypeBrand,
-        blueprint: currentBlueprint
-      };
-      const blob = new Blob([JSON.stringify(dsdPayload, null, 2)], {
-        type: "application/json"
-      });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${prototypeBrand}-demo.dsd`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-      addLog(
-        `Grafo exportado exitosamente como ${prototypeBrand}-demo.dsd`,
-        "success"
-      );
-    } catch (e) {
-      addLog(`Error exportando DSD: ${e}`, "error");
-      console.error(e);
-    }
-  };
-  return { handleExport };
-}
-
-// src/hooks/useFullscreen.ts
-import { useEffect as useEffect5, useCallback as useCallback5 } from "react";
-function useFullscreen() {
-  const isFullscreen = usePlaygroundStore((s) => s.isFullscreen);
-  const setIsFullscreen = usePlaygroundStore((s) => s.setIsFullscreen);
-  const toggleFullscreen = useCallback5(() => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen().catch(
-        (err) => console.error(`Fullscreen err: ${err.message}`)
-      );
-    } else {
-      if (document.exitFullscreen) document.exitFullscreen();
-    }
-  }, []);
-  useEffect5(() => {
-    const handleChange = () => setIsFullscreen(!!document.fullscreenElement);
-    document.addEventListener("fullscreenchange", handleChange);
-    return () => document.removeEventListener("fullscreenchange", handleChange);
-  }, [setIsFullscreen]);
-  return { isFullscreen, toggleFullscreen };
-}
-
-// src/components/shell/CenterComposite.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-function CenterComposite({ aiProvider, VoiceWidget, config }) {
-  const store = usePlaygroundStore();
-  const {
-    step,
-    selectedProfile,
-    prototypeBrand,
-    setPrototypeBrand,
-    isMuted,
-    setIsMuted,
-    selectedVoice,
-    setSelectedVoice,
-    isVoiceActive,
-    setIsVoiceActive,
-    isTerminalOpen,
-    setIsTerminalOpen,
-    isCreatorMode,
-    setIsCreatorMode,
-    inputValue,
-    setInputValue,
-    logs,
-    setLogs
-  } = store;
-  const logsEndRef = useRef4(null);
-  useEffect6(() => {
-    if (logsEndRef.current) logsEndRef.current.scrollIntoView({ behavior: "smooth" });
-  }, [logs]);
-  const timelines = useTimelineStore7((s) => s.timelines);
-  const { handleGeneratePlayground, isGenerating } = usePlaygroundCommander(aiProvider);
-  const { demoState, showCanvas, setShowCanvas } = useUIStateListener();
-  const { currentTime, isPlaying, setIsPlaying, playbackSpeed, setPlaybackSpeed, seekTime, resetSimulation } = usePlaybackEngine(prototypeBrand);
-  const { safeConfig, activeConfig, suggestions, setSuggestions, dynamicPersona, authAvailableLicenses, handleProfileSelect } = useStudioConfig(config, prototypeBrand);
-  const { handleExport } = useExportDSD();
-  const { isFullscreen, toggleFullscreen } = useFullscreen();
-  const { isRecording } = useScreenRecorder();
-  const debugIsOpen = useDebugPanelStore((s) => s.isOpen);
-  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col h-full relative min-w-0 min-h-0", children: /* @__PURE__ */ jsxs9(PanelGroup, { orientation: "vertical", className: "flex-1 min-h-0 min-w-0", children: [
-    /* @__PURE__ */ jsxs9(Panel, { id: "chat-area", defaultSize: debugIsOpen ? 65 : 100, className: "flex flex-col relative min-h-0 min-w-0", children: [
-      /* @__PURE__ */ jsx9("div", { className: `flex-1 z-10 flex flex-col relative min-h-0 min-w-0 ${isCreatorMode ? "overflow-y-auto p-4 md:p-6 pb-48 justify-end" : "overflow-hidden"}`, children: /* @__PURE__ */ jsx9(PlaygroundErrorBoundary, { fallbackName: "Motor de Chat", children: /* @__PURE__ */ jsx9(
-        PlaygroundChat,
-        {
-          step,
-          selectedProfile,
-          authAvailableLicenses,
-          handleProfileSelect,
-          activeConfig,
-          demoState,
-          suggestions,
-          setInputValue,
-          isGenerating,
-          config: safeConfig,
-          isCreatorMode,
-          handleGeneratePlayground,
-          isVoiceActive,
-          setIsVoiceActive,
-          VoiceWidget,
-          dynamicPersona,
-          setSuggestions,
-          selectedVoice,
-          showCanvas,
-          setShowCanvas
-        }
-      ) }) }),
-      isCreatorMode && /* @__PURE__ */ jsx9(PlaygroundErrorBoundary, { fallbackName: "Terminal de Logs", children: /* @__PURE__ */ jsx9(PlaygroundTerminal, { isOpen: isTerminalOpen, setIsOpen: setIsTerminalOpen, logs, setLogs, logsEndRef }) }),
-      /* @__PURE__ */ jsx9(
-        PlaygroundBottomControls,
-        {
-          step,
-          isVoiceActive,
-          setIsVoiceActive,
-          currentTime,
-          seekTime,
-          playbackSpeed,
-          setPlaybackSpeed,
-          dynamicTimelines: timelines,
-          prototypeBrand,
-          setPrototypeBrand,
-          inputValue,
-          setInputValue,
-          isGenerating,
-          handleGeneratePlayground,
-          isPlaying,
-          setIsPlaying,
-          handleResetPlayground: resetSimulation,
-          showCanvas,
-          setShowCanvas,
-          isTerminalOpen,
-          setIsTerminalOpen,
-          isMuted,
-          setIsMuted,
-          selectedVoice,
-          setSelectedVoice,
-          isFullscreen,
-          toggleFullscreen,
-          demoState,
-          isRecording,
-          handleExport,
-          dynamicPersona,
-          setSuggestions,
-          isCreatorMode,
-          setIsCreatorMode,
-          VoiceWidget,
-          config: safeConfig
-        }
-      )
-    ] }),
-    debugIsOpen && /* @__PURE__ */ jsxs9(Fragment5, { children: [
-      /* @__PURE__ */ jsx9(PanelResizeHandle, { className: "h-2 hover:bg-cyan-500/20 active:bg-cyan-500/30 transition-colors cursor-row-resize z-40 relative group flex items-center justify-center", children: /* @__PURE__ */ jsx9("div", { className: "h-[2px] w-12 bg-surface-glass rounded-full group-hover:bg-cyan-500 transition-colors" }) }),
-      /* @__PURE__ */ jsx9(Panel, { id: "debug-panel", defaultSize: 35, minSize: 15, children: /* @__PURE__ */ jsx9(DebugPanel, {}) })
-    ] })
-  ] }) });
-}
-export {
-  CenterComposite
-};