@decido/shell 4.0.1 → 4.0.3

package/dist/chunk-2YMI4N5I.mjs

@@ -0,0 +1,2004 @@
+import {
+  getRegisteredShellTypes,
+  registerShell,
+  resolveShell
+} from "./chunk-IMHORBTL.mjs";
+import {
+  useTheme
+} from "./chunk-JF5QSJYT.mjs";
+import {
+  getMorphComponent,
+  useMorphologyStore
+} from "./chunk-ZCCCBHE6.mjs";
+import {
+  useMorphInstanceStore
+} from "./chunk-UHT6FIYF.mjs";
+import {
+  useLayoutStore
+} from "./chunk-MSVEFEXE.mjs";
+import {
+  usePlaygroundStore
+} from "./chunk-XMSU6UWD.mjs";
+
+// src/components/shell/MorphShell.tsx
+import React9, { useCallback as useCallback6 } from "react";
+import { AnimatePresence as AnimatePresence3, motion as motion4 } from "motion/react";
+import { ArrowLeft as ArrowLeft2, X as X4, Maximize2 as Maximize22, Minimize2 as Minimize22 } from "lucide-react";
+
+// src/components/playground/PlaygroundCanvas.tsx
+import React2 from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { X, ArrowLeft, Layers, Code2 as Code22, Droplets, MonitorPlay } from "lucide-react";
+
+// src/components/studio/editor/StageContentRenderer.tsx
+import React, { Suspense } from "react";
+import { Code2, Loader2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LazyRecharts = React.lazy(() => import("recharts").then((m) => ({
+  default: ({ chartData, color }) => /* @__PURE__ */ jsx(m.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(m.AreaChart, { data: chartData, children: /* @__PURE__ */ jsx(m.Area, { type: "monotone", dataKey: "val", stroke: "currentColor", fill: "currentColor", strokeWidth: 2, className: color }) }) })
+})));
+var DataTableArtifact = ({ columns, rows }) => /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-auto bg-surface-primary border border-border-default rounded-2xl shadow-xl p-4 custom-scrollbar", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left text-sm text-text-primary", children: [
+  /* @__PURE__ */ jsx("thead", { className: "text-xs text-text-muted uppercase bg-surface-glass", children: /* @__PURE__ */ jsx("tr", { children: columns?.map((col, i) => /* @__PURE__ */ jsx("th", { className: "px-6 py-3", children: col }, i)) }) }),
+  /* @__PURE__ */ jsx("tbody", { children: rows?.map((row, i) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border-subtle hover:bg-surface-glass transition-colors", children: row?.map((cell, j) => /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: cell }, j)) }, i)) })
+] }) });
+var MarkdownArtifact = ({ content }) => /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-auto bg-surface-primary border border-border-default rounded-2xl shadow-xl p-8 whitespace-pre-wrap text-text-primary font-sans leading-relaxed text-sm custom-scrollbar", children: content });
+function StageContentRenderer(props) {
+  const { renderingType, activeStage, activeArtifactData, activeConfig, activeState, prototypeBrand, chartData, dragConstraintsRef, defaultViewMode, instanceId } = props;
+  const RegisteredShell = resolveShell(renderingType);
+  if (RegisteredShell) {
+    return /* @__PURE__ */ jsx(
+      RegisteredShell,
+      {
+        instanceId: instanceId || activeStage?.sourceNodeId || "default",
+        data: activeStage?.data || {},
+        artifacts: [],
+        activeArtifactIndex: 0
+      }
+    );
+  }
+  if (renderingType === "workbench") {
+    const WC = getMorphComponent("AdminWorkbench") || getMorphComponent("Workbench");
+    if (WC) return /* @__PURE__ */ jsx(WC, { ...activeStage?.data || {} });
+    return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-text-muted font-mono text-sm", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Code2, { size: 48, className: "mx-auto mb-4 text-text-muted" }),
+      /* @__PURE__ */ jsx("p", { children: "AdminWorkbench no registrado" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-text-muted mt-1", children: "Usa registerShell('shell-vscode', Component)" })
+    ] }) });
+  }
+  if (renderingType === "liquid") {
+    const LC = getMorphComponent("SafeLiquidUI");
+    if (LC && activeStage?.data) return /* @__PURE__ */ jsx("div", { className: "w-full h-full p-6 overflow-auto", children: /* @__PURE__ */ jsx(LC, { uiSchema: activeStage.data.code || activeStage.data, tenantId: "system" }) });
+    return /* @__PURE__ */ jsx("div", { className: "w-full h-full p-6 overflow-auto", children: /* @__PURE__ */ jsx("pre", { className: "text-xs text-text-secondary font-mono bg-surface-glass rounded-xl p-4 border border-border-subtle", children: JSON.stringify(activeStage?.data || {}, null, 2) }) });
+  }
+  if (renderingType === "custom" && activeStage?.componentId) {
+    const CC = getMorphComponent(activeStage.componentId);
+    if (CC) return /* @__PURE__ */ jsx(CC, { ...activeStage?.data || {} });
+    return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex items-center justify-center text-text-muted font-mono text-sm", children: [
+      "Componente '",
+      activeStage.componentId,
+      "' no registrado"
+    ] });
+  }
+  if (renderingType === "artifact" && (activeArtifactData || activeStage?.data)) {
+    const d = activeStage?.data || activeArtifactData;
+    if (d.artifact === "graph-visualizer") return /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-6 text-text-muted font-mono", children: "Graph Visualizer temporalmente deshabilitado por conflictos CSS." });
+    if (d.artifact === "data-table") return /* @__PURE__ */ jsx("div", { className: "flex-1 w-full h-full p-6 py-2", children: /* @__PURE__ */ jsx(DataTableArtifact, { columns: d.columns, rows: d.rows }) });
+    if (d.artifact === "markdown") return /* @__PURE__ */ jsx("div", { className: "flex-1 w-full h-full p-6 py-2", children: /* @__PURE__ */ jsx(MarkdownArtifact, { content: d.content }) });
+    return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center p-6 text-text-muted font-mono", children: [
+      "Componente ",
+      d.artifact,
+      " desconocido."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: dragConstraintsRef, className: "flex-1 h-full rounded-2xl bg-surface-overlay flex items-center justify-center relative overflow-hidden group border border-border-subtle m-6 mt-2", children: [
+    /* @__PURE__ */ jsx("svg", { className: "absolute inset-0 pointer-events-none z-0 w-full h-full opacity-30", children: /* @__PURE__ */ jsx("path", { d: "M 150 75 C 250 150, 350 50, 400 100", stroke: "cyan", strokeWidth: 2, fill: "none", strokeDasharray: "10, 10" }) }),
+    activeConfig?.widgets?.map((w) => {
+      const IC = w.icon;
+      return /* @__PURE__ */ jsxs("div", { className: `absolute cursor-grab rounded-2xl border ${w.bg} ${w.border} p-4 shadow-xl backdrop-blur-md flex flex-col justify-between`, style: { width: w.w, height: w.h, left: w.x, top: w.y }, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start pointer-events-none z-10", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-text-primary/80", children: w.title }),
+          /* @__PURE__ */ jsx("div", { className: `p-1.5 rounded-lg bg-surface-glass ${w.color}`, children: /* @__PURE__ */ jsx(IC, { size: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `text-2xl font-bold mt-2 ${w.color} pointer-events-none z-10`, children: w.value }),
+        w.chart && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 w-full h-16 opacity-30 pointer-events-none rounded-b-2xl overflow-hidden", children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyRecharts, { chartData, color: w.color }) }) })
+      ] }, `${prototypeBrand}-${w.id}`);
+    })
+  ] });
+}
+
+// src/components/playground/PlaygroundCanvas.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STAGE_META = {
+  "workbench": { icon: Code22, label: "Workbench", color: "text-purple-400" },
+  "liquid": { icon: Droplets, label: "UI Din\xE1mica", color: "text-amber-400" },
+  "artifact": { icon: MonitorPlay, label: "Artefacto", color: "text-emerald-400" },
+  "custom": { icon: Layers, label: "Custom", color: "text-violet-400" }
+};
+var PlaygroundCanvas = React2.memo(function PlaygroundCanvas2({
+  showCanvas,
+  setShowCanvas,
+  activeConfig,
+  prototypeBrand,
+  activeState,
+  chartData,
+  dragConstraintsRef
+}) {
+  if (!showCanvas) return null;
+  const activeStage = useMorphologyStore((s) => s.activeStage);
+  const stageHistory = useMorphologyStore((s) => s.stageHistory);
+  const popStage = useMorphologyStore((s) => s.popStage);
+  const clearStages = useMorphologyStore((s) => s.clearStages);
+  const activeArtifactData = usePlaygroundStore((s) => s.activeArtifactData);
+  const [defaultViewMode, setDefaultViewMode] = React2.useState("3d");
+  const effectiveStage = activeStage || (activeArtifactData ? { type: "artifact", data: activeArtifactData } : null);
+  const renderingType = effectiveStage?.type || defaultViewMode;
+  const stageMeta = STAGE_META[renderingType] || STAGE_META["custom"];
+  const StageIcon = stageMeta.icon;
+  const handleClose = () => {
+    clearStages();
+    usePlaygroundStore.getState().setActiveArtifactData(null);
+    setShowCanvas(false);
+  };
+  const handleBack = () => {
+    stageHistory.length > 0 ? popStage() : clearStages();
+  };
+  return /* @__PURE__ */ jsx2(AnimatePresence, { children: /* @__PURE__ */ jsxs2(
+    motion.div,
+    {
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 },
+      className: "w-full h-full bg-surface-secondary flex flex-col overflow-hidden relative border-l border-border-subtle",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center pl-2 z-10 p-4 pb-0 shrink-0", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+            (activeStage || activeArtifactData) && /* @__PURE__ */ jsx2("button", { onClick: handleBack, className: "p-1.5 rounded-lg hover:bg-surface-glass text-text-muted hover:text-text-primary transition-colors", title: "Volver", children: /* @__PURE__ */ jsx2(ArrowLeft, { size: 16 }) }),
+            /* @__PURE__ */ jsxs2("h2", { className: "text-lg font-bold flex items-center gap-2 text-text-primary", children: [
+              /* @__PURE__ */ jsx2("div", { className: "w-7 h-7 rounded-lg flex items-center justify-center bg-surface-glass", children: /* @__PURE__ */ jsx2(StageIcon, { size: 14, className: stageMeta.color }) }),
+              /* @__PURE__ */ jsx2("span", { className: "truncate max-w-[200px]", children: activeStage?.label || (activeArtifactData ? "Artefacto" : "Lienzo de Trabajo") }),
+              /* @__PURE__ */ jsx2("span", { className: "text-text-muted font-mono text-[10px] ml-1", children: renderingType.toUpperCase() })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+            stageHistory.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "hidden md:flex items-center gap-1 text-[10px] text-text-muted font-mono", children: [
+              stageHistory.map((s, i) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+                /* @__PURE__ */ jsx2("span", { className: "hover:text-text-secondary cursor-pointer", onClick: () => {
+                  const st = useMorphologyStore.getState();
+                  for (let j = 0; j < stageHistory.length - i; j++) st.popStage();
+                }, children: s.label || s.type }),
+                /* @__PURE__ */ jsx2("span", { children: "\u203A" })
+              ] }, i)),
+              /* @__PURE__ */ jsx2("span", { className: "text-text-secondary", children: activeStage?.label || renderingType })
+            ] }),
+            !effectiveStage && /* @__PURE__ */ jsxs2("div", { className: "flex bg-surface-glass border border-border-default rounded-full p-1", children: [
+              /* @__PURE__ */ jsx2("button", { onClick: () => setDefaultViewMode("2d"), className: `px-3 py-1 text-[10px] font-bold tracking-wider rounded-full transition-all ${defaultViewMode === "2d" ? "bg-surface-glass text-text-primary shadow-xs" : "text-text-muted hover:text-text-primary"}`, children: "2D DATA" }),
+              /* @__PURE__ */ jsx2("button", { onClick: () => setDefaultViewMode("3d"), className: `px-3 py-1 text-[10px] font-bold tracking-wider rounded-full transition-all ${defaultViewMode === "3d" ? "bg-cyan-500/20 text-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.3)]" : "text-text-muted hover:text-text-primary"}`, children: "3D SCENE" })
+            ] }),
+            /* @__PURE__ */ jsx2("button", { onClick: handleClose, className: "p-2 bg-surface-glass hover:bg-red-500/20 text-text-secondary hover:text-red-400 rounded-full transition-colors", children: /* @__PURE__ */ jsx2(X, { size: 16 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsx2(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx2(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, className: "w-full h-full", children: /* @__PURE__ */ jsx2(
+          StageContentRenderer,
+          {
+            renderingType,
+            activeStage,
+            activeArtifactData,
+            activeConfig,
+            activeState,
+            prototypeBrand,
+            chartData,
+            dragConstraintsRef,
+            defaultViewMode
+          }
+        ) }, renderingType + (activeStage?.componentId || "")) }) })
+      ]
+    }
+  ) });
+});
+
+// src/components/shell/ArtifactBar.tsx
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { X as X2, FileCode, FileText, Globe, Layers as Layers2, MessageSquare } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SHELL_ICONS = {
+  "markdown": FileText,
+  "iframe": Globe,
+  "shell-vscode": FileCode,
+  "shell-canvas": Layers2,
+  "shell-omnichannel": MessageSquare
+};
+function getArtifactIcon(shellType) {
+  return SHELL_ICONS[shellType] || FileCode;
+}
+function ArtifactBar({ instanceId, className = "" }) {
+  const instance = useMorphInstanceStore((s) => s.getInstance(instanceId));
+  const setActiveArtifact = useMorphInstanceStore((s) => s.setActiveArtifact);
+  const removeArtifact = useMorphInstanceStore((s) => s.removeArtifact);
+  if (!instance || instance.artifacts.length <= 1) return null;
+  return /* @__PURE__ */ jsx3("div", { className: `flex items-center gap-0.5 px-2 py-1 bg-surface-primary border-b border-border-subtle overflow-x-auto scrollbar-hide ${className}`, children: /* @__PURE__ */ jsx3(AnimatePresence2, { mode: "popLayout", children: instance.artifacts.map((artifact, index) => {
+    const isActive = index === instance.activeArtifactIndex;
+    const Icon = getArtifactIcon(artifact.shellType);
+    return /* @__PURE__ */ jsxs3(
+      motion2.button,
+      {
+        layout: true,
+        initial: { opacity: 0, scale: 0.9, width: 0 },
+        animate: { opacity: 1, scale: 1, width: "auto" },
+        exit: { opacity: 0, scale: 0.9, width: 0 },
+        onClick: () => setActiveArtifact(instanceId, index),
+        className: `
+                                flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium
+                                transition-colors whitespace-nowrap group relative shrink-0
+                                ${isActive ? "bg-surface-glass text-text-primary border border-border-default" : "text-text-muted hover:text-text-primary hover:bg-surface-glass border border-transparent"}
+                            `,
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { size: 10, className: isActive ? "text-cyan-400" : "text-text-muted" }),
+          /* @__PURE__ */ jsx3("span", { className: "truncate max-w-[100px]", children: artifact.name }),
+          artifact.version > 1 && /* @__PURE__ */ jsxs3("span", { className: "text-[8px] text-text-muted font-mono", children: [
+            "v",
+            artifact.version
+          ] }),
+          instance.artifacts.length > 1 && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                removeArtifact(instanceId, artifact.id);
+              },
+              className: "w-3.5 h-3.5 rounded flex items-center justify-center\n                                        opacity-0 group-hover:opacity-100 hover:bg-surface-glass hover:text-red-400\n                                        transition-all ml-0.5",
+              children: /* @__PURE__ */ jsx3(X2, { size: 8 })
+            }
+          ),
+          isActive && /* @__PURE__ */ jsx3(
+            motion2.div,
+            {
+              layoutId: "artifact-indicator",
+              className: "absolute bottom-0 left-1 right-1 h-[1.5px] bg-cyan-500/50 rounded-full"
+            }
+          )
+        ]
+      },
+      artifact.id
+    );
+  }) }) });
+}
+
+// src/components/shell/morphStageMeta.ts
+import { Box, CodeXml, Droplets as Droplets2, Puzzle, FileBox, LayoutDashboard } from "lucide-react";
+var STAGE_META2 = {
+  "3d": { icon: Box, color: "text-cyan-400" },
+  "2d": { icon: LayoutDashboard, color: "text-emerald-400" },
+  "workbench": { icon: CodeXml, color: "text-purple-400" },
+  "liquid": { icon: Droplets2, color: "text-blue-400" },
+  "custom": { icon: Puzzle, color: "text-orange-400" },
+  "artifact": { icon: FileBox, color: "text-yellow-400" }
+};
+
+// src/components/shell/shells/BuiltInShells.tsx
+import { useMemo, useRef, useEffect, useState, useCallback } from "react";
+import {
+  Paintbrush,
+  X as X3,
+  Plus as Plus2,
+  Copy,
+  RotateCcw,
+  Search,
+  MousePointer,
+  ChevronDown,
+  ChevronRight
+} from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var MarkdownShell = ({ data }) => {
+  const content = data?.content || data?.markdown || "";
+  return /* @__PURE__ */ jsx4("div", { className: "w-full h-full overflow-auto bg-surface-primary p-8 custom-scrollbar", children: /* @__PURE__ */ jsx4("div", { className: "max-w-3xl mx-auto prose prose-invert prose-sm prose-zinc", children: /* @__PURE__ */ jsx4("div", { className: "whitespace-pre-wrap text-text-primary font-sans leading-relaxed text-sm", children: content }) }) });
+};
+var TW_BRIDGE_SCRIPT = `
+<script>
+(function() {
+  var inspectorActive = false;
+  var selectedEl = null;
+  var hoveredEl = null;
+
+  function generateSelector(el) {
+    var parts = [];
+    var cur = el;
+    while (cur && cur !== document.body && cur !== document.documentElement) {
+      var part = cur.tagName.toLowerCase();
+      if (cur.id) { parts.unshift('#' + cur.id); break; }
+      var parent = cur.parentElement;
+      if (parent) {
+        var sibs = Array.from(parent.children).filter(function(c) { return c.tagName === cur.tagName; });
+        if (sibs.length > 1) {
+          part += ':nth-of-type(' + (sibs.indexOf(cur) + 1) + ')';
+        }
+      }
+      parts.unshift(part);
+      cur = cur.parentElement;
+    }
+    return parts.join(' > ');
+  }
+
+  window.addEventListener('message', function(e) {
+    if (e.data && e.data.type === 'tw-bridge:toggle') {
+      inspectorActive = !!e.data.enabled;
+      document.body.style.cursor = inspectorActive ? 'crosshair' : '';
+      if (!inspectorActive) {
+        if (hoveredEl) { hoveredEl.style.outline = ''; hoveredEl.style.outlineOffset = ''; hoveredEl = null; }
+        if (selectedEl) { selectedEl.style.outline = ''; selectedEl.style.outlineOffset = ''; selectedEl = null; }
+      }
+    }
+    if (e.data && e.data.type === 'tw-bridge:apply') {
+      var el = document.querySelector(e.data.selector);
+      if (el) el.className = e.data.classes.join(' ');
+    }
+  });
+
+  document.addEventListener('mouseover', function(e) {
+    if (!inspectorActive) return;
+    var t = e.target;
+    if (hoveredEl && hoveredEl !== selectedEl) {
+      hoveredEl.style.outline = '';
+      hoveredEl.style.outlineOffset = '';
+    }
+    t.style.outline = '2px dashed rgba(139, 92, 246, 0.6)';
+    t.style.outlineOffset = '2px';
+    hoveredEl = t;
+  });
+
+  document.addEventListener('mouseout', function(e) {
+    if (!inspectorActive) return;
+    if (e.target !== selectedEl) {
+      e.target.style.outline = '';
+      e.target.style.outlineOffset = '';
+    }
+  });
+
+  document.addEventListener('click', function(e) {
+    if (!inspectorActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    var t = e.target;
+    if (selectedEl) { selectedEl.style.outline = ''; selectedEl.style.outlineOffset = ''; }
+    t.style.outline = '2px solid rgba(139, 92, 246, 0.9)';
+    t.style.outlineOffset = '2px';
+    selectedEl = t;
+    var classes = t.className ? t.className.split(/\\s+/).filter(Boolean) : [];
+    var rect = t.getBoundingClientRect();
+    window.parent.postMessage({
+      type: 'tw-bridge:select',
+      selector: generateSelector(t),
+      tagName: t.tagName,
+      classes: classes,
+      originalClasses: classes,
+      rect: { width: rect.width, height: rect.height }
+    }, '*');
+  }, true);
+})();
+</script>`;
+var TW_CATS = [
+  { id: "layout", label: "Layout", classes: ["flex", "inline-flex", "grid", "block", "hidden", "flex-row", "flex-col", "items-center", "items-start", "items-end", "justify-center", "justify-between", "justify-start", "justify-end", "relative", "absolute", "fixed", "overflow-hidden", "overflow-auto"] },
+  { id: "spacing", label: "Spacing", classes: ["p-0", "p-1", "p-2", "p-3", "p-4", "p-6", "p-8", "px-2", "px-4", "px-6", "py-1", "py-2", "py-3", "py-4", "m-0", "m-1", "m-2", "m-4", "mx-auto", "my-2", "my-4", "gap-1", "gap-2", "gap-3", "gap-4", "gap-6"] },
+  { id: "sizing", label: "Sizing", classes: ["w-full", "w-auto", "w-1/2", "w-1/3", "h-full", "h-auto", "h-screen", "min-w-0", "max-w-sm", "max-w-md", "max-w-lg"] },
+  { id: "typography", label: "Type", classes: ["text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "text-left", "text-center", "text-right", "truncate"] },
+  { id: "colors", label: "Colors", classes: ["text-white", "text-black", "text-gray-500", "bg-white", "bg-black", "bg-transparent", "bg-gray-100", "bg-gray-800", "bg-gray-900", "bg-blue-500", "bg-green-500", "bg-red-500", "bg-purple-500", "bg-cyan-500"] },
+  { id: "borders", label: "Borders", classes: ["border", "border-0", "border-2", "rounded-none", "rounded-sm", "rounded", "rounded-md", "rounded-lg", "rounded-xl", "rounded-2xl", "rounded-full"] },
+  { id: "effects", label: "Effects", classes: ["shadow-sm", "shadow", "shadow-md", "shadow-lg", "shadow-xl", "opacity-0", "opacity-50", "opacity-100", "transition-all", "transition-colors", "cursor-pointer"] }
+];
+function InlineTwEditor({ iframeRef, isOpen, onClose }) {
+  const [selected, setSelected] = useState(null);
+  const [inspectorOn, setInspectorOn] = useState(true);
+  const [addInput, setAddInput] = useState("");
+  const [expandedCat, setExpandedCat] = useState("layout");
+  const [filter, setFilter] = useState("");
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (e.data?.type === "tw-bridge:select") {
+        setSelected({
+          selector: e.data.selector,
+          tagName: e.data.tagName,
+          classes: e.data.classes || [],
+          originalClasses: e.data.originalClasses || e.data.classes || [],
+          rect: e.data.rect || { width: 0, height: 0 }
+        });
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    iframeRef.current?.contentWindow?.postMessage({ type: "tw-bridge:toggle", enabled: inspectorOn }, "*");
+  }, [inspectorOn, isOpen, iframeRef]);
+  useEffect(() => {
+    if (isOpen) {
+      setInspectorOn(true);
+      iframeRef.current?.contentWindow?.postMessage({ type: "tw-bridge:toggle", enabled: true }, "*");
+    } else {
+      iframeRef.current?.contentWindow?.postMessage({ type: "tw-bridge:toggle", enabled: false }, "*");
+    }
+  }, [isOpen, iframeRef]);
+  const applyClasses = useCallback((newClasses) => {
+    if (!selected) return;
+    setSelected((prev) => prev ? { ...prev, classes: newClasses } : null);
+    iframeRef.current?.contentWindow?.postMessage({
+      type: "tw-bridge:apply",
+      selector: selected.selector,
+      classes: newClasses
+    }, "*");
+  }, [selected, iframeRef]);
+  const removeClass = useCallback((cls) => {
+    if (!selected) return;
+    applyClasses(selected.classes.filter((c) => c !== cls));
+  }, [selected, applyClasses]);
+  const addClass = useCallback((cls) => {
+    if (!selected) return;
+    const t = cls.trim();
+    if (!t || selected.classes.includes(t)) return;
+    applyClasses([...selected.classes, t]);
+    setAddInput("");
+  }, [selected, applyClasses]);
+  const resetClasses = useCallback(() => {
+    if (!selected) return;
+    applyClasses([...selected.originalClasses]);
+  }, [selected, applyClasses]);
+  const copyClasses = useCallback(() => {
+    if (!selected) return;
+    navigator.clipboard.writeText(selected.classes.join(" "));
+  }, [selected]);
+  const hasChanges = selected && JSON.stringify(selected.classes) !== JSON.stringify(selected.originalClasses);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs4("div", { className: "w-[280px] shrink-0 flex flex-col bg-surface-primary border-l border-border-subtle h-full text-text-primary", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "px-3 py-2 border-b border-border-subtle shrink-0", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mb-1.5", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx4(Paintbrush, { size: 12, className: "text-accent-purple" }),
+          /* @__PURE__ */ jsx4("span", { className: "text-[11px] font-bold", children: "TW Editor" }),
+          /* @__PURE__ */ jsx4("span", { className: "text-[7px] px-1 py-0.5 rounded-full bg-accent-purple/15 text-accent-purple font-mono font-bold", children: "LIVE" })
+        ] }),
+        /* @__PURE__ */ jsx4("button", { onClick: onClose, className: "text-text-muted hover:text-text-primary transition-colors", children: /* @__PURE__ */ jsx4(X3, { size: 12 }) })
+      ] }),
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          onClick: () => setInspectorOn(!inspectorOn),
+          className: `w-full flex items-center gap-1.5 px-2 py-1 rounded text-[10px] font-medium transition-all cursor-pointer ${inspectorOn ? "bg-accent-purple/15 text-accent-purple border border-accent-purple/30" : "bg-surface-glass text-text-muted border border-border-subtle"}`,
+          children: [
+            /* @__PURE__ */ jsx4(MousePointer, { size: 10 }),
+            inspectorOn ? "Click un elemento" : "Inspector off",
+            /* @__PURE__ */ jsx4("span", { className: `ml-auto w-1.5 h-1.5 rounded-full ${inspectorOn ? "bg-accent-green animate-pulse" : "bg-text-muted/30"}` })
+          ]
+        }
+      )
+    ] }),
+    selected ? /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx4("div", { className: "px-3 py-1.5 border-b border-border-subtle/50 shrink-0", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs4("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-surface-glass text-text-muted", children: [
+          "<",
+          selected.tagName.toLowerCase(),
+          ">"
+        ] }),
+        /* @__PURE__ */ jsxs4("span", { className: "text-[8px] font-mono text-text-muted/40 ml-auto", children: [
+          Math.round(selected.rect.width),
+          "\xD7",
+          Math.round(selected.rect.height)
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs4("div", { className: "px-3 py-1.5 border-b border-border-subtle/50 shrink-0", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mb-1", children: [
+          /* @__PURE__ */ jsxs4("span", { className: "text-[8px] font-mono text-text-muted/60 uppercase tracking-wider", children: [
+            "Clases (",
+            selected.classes.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex gap-1", children: [
+            hasChanges && /* @__PURE__ */ jsxs4("button", { onClick: resetClasses, className: "text-[7px] text-accent-amber flex items-center gap-0.5 cursor-pointer", children: [
+              /* @__PURE__ */ jsx4(RotateCcw, { size: 7 }),
+              " Undo"
+            ] }),
+            /* @__PURE__ */ jsxs4("button", { onClick: copyClasses, className: "text-[7px] text-text-muted/40 hover:text-accent-cyan flex items-center gap-0.5 cursor-pointer", children: [
+              /* @__PURE__ */ jsx4(Copy, { size: 7 }),
+              " Copy"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-0.5 max-h-[100px] overflow-y-auto custom-scrollbar", children: selected.classes.map((cls) => {
+          const isNew = !selected.originalClasses.includes(cls);
+          return /* @__PURE__ */ jsxs4("span", { className: `group inline-flex items-center gap-0.5 px-1 py-0.5 rounded text-[8px] font-mono transition-all ${isNew ? "bg-accent-green/15 text-accent-green border border-accent-green/30" : "bg-surface-glass text-text-secondary border border-border-subtle"}`, children: [
+            cls,
+            /* @__PURE__ */ jsx4("button", { onClick: () => removeClass(cls), className: "opacity-0 group-hover:opacity-100 text-red-400 cursor-pointer", children: /* @__PURE__ */ jsx4(X3, { size: 7 }) })
+          ] }, cls);
+        }) }),
+        hasChanges && /* @__PURE__ */ jsx4("div", { className: "mt-1 flex flex-wrap gap-0.5", children: selected.originalClasses.filter((c) => !selected.classes.includes(c)).map((cls) => /* @__PURE__ */ jsx4("button", { onClick: () => addClass(cls), className: "px-1 py-0.5 rounded text-[8px] font-mono bg-red-500/10 text-red-400/60 border border-red-500/20 line-through hover:no-underline cursor-pointer", children: cls }, `rm-${cls}`)) })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "px-3 py-1.5 border-b border-border-subtle/50 shrink-0 flex gap-1", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex-1 relative", children: [
+          /* @__PURE__ */ jsx4(Plus2, { size: 9, className: "absolute left-1.5 top-1/2 -translate-y-1/2 text-text-muted/40" }),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "text",
+              value: addInput,
+              onChange: (e) => setAddInput(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && addInput.trim()) addClass(addInput);
+              },
+              placeholder: "Agregar clase...",
+              className: "w-full pl-5 pr-1 py-1 text-[10px] font-mono bg-surface-glass border border-border-subtle rounded text-text-primary placeholder:text-text-muted/30 focus:outline-none focus:border-accent-purple/40"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx4("button", { onClick: () => addClass(addInput), disabled: !addInput.trim(), className: "px-2 py-1 rounded bg-accent-purple/15 text-accent-purple text-[9px] font-bold disabled:opacity-30 cursor-pointer", children: "+" })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: [
+        /* @__PURE__ */ jsx4("div", { className: "px-3 py-1 border-b border-border-subtle/30 sticky top-0 bg-surface-primary z-10", children: /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx4(Search, { size: 9, className: "absolute left-1.5 top-1/2 -translate-y-1/2 text-text-muted/30" }),
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "text",
+              value: filter,
+              onChange: (e) => setFilter(e.target.value),
+              placeholder: "Filtrar...",
+              className: "w-full pl-5 pr-1 py-0.5 text-[9px] font-mono bg-surface-glass border border-border-subtle/50 rounded text-text-primary placeholder:text-text-muted/20 focus:outline-none"
+            }
+          )
+        ] }) }),
+        TW_CATS.map((cat) => {
+          const filtered = filter ? cat.classes.filter((c) => c.includes(filter.toLowerCase())) : cat.classes;
+          if (filtered.length === 0) return null;
+          const isOpen2 = expandedCat === cat.id;
+          return /* @__PURE__ */ jsxs4("div", { className: "border-b border-border-subtle/20", children: [
+            /* @__PURE__ */ jsxs4("button", { onClick: () => setExpandedCat(isOpen2 ? null : cat.id), className: "w-full flex items-center gap-1.5 px-3 py-1 hover:bg-surface-glass text-left cursor-pointer", children: [
+              isOpen2 ? /* @__PURE__ */ jsx4(ChevronDown, { size: 8 }) : /* @__PURE__ */ jsx4(ChevronRight, { size: 8 }),
+              /* @__PURE__ */ jsx4("span", { className: "text-[9px] font-semibold text-text-primary flex-1", children: cat.label }),
+              /* @__PURE__ */ jsx4("span", { className: "text-[7px] font-mono text-text-muted/40", children: filtered.length })
+            ] }),
+            isOpen2 && /* @__PURE__ */ jsx4("div", { className: "px-3 pb-1.5 flex flex-wrap gap-0.5", children: filtered.map((cls) => {
+              const active = selected.classes.includes(cls);
+              return /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  onClick: () => active ? removeClass(cls) : addClass(cls),
+                  className: `px-1 py-0.5 rounded text-[8px] font-mono cursor-pointer transition-all ${active ? "bg-accent-green/15 text-accent-green border border-accent-green/30" : "bg-surface-glass text-text-muted border border-border-subtle/50 hover:border-accent-purple/30"}`,
+                  children: [
+                    active ? "\u2713 " : "",
+                    cls
+                  ]
+                },
+                cls
+              );
+            }) })
+          ] }, cat.id);
+        })
+      ] }),
+      hasChanges && /* @__PURE__ */ jsxs4("div", { className: "px-3 py-1.5 border-t border-border-subtle bg-surface-secondary/50 shrink-0", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mb-0.5", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-[7px] font-mono text-accent-green/60 uppercase", children: "className" }),
+          /* @__PURE__ */ jsxs4("button", { onClick: copyClasses, className: "text-[7px] text-text-muted/40 hover:text-accent-cyan flex items-center gap-0.5 cursor-pointer", children: [
+            /* @__PURE__ */ jsx4(Copy, { size: 7 }),
+            " Copy"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "text-[8px] font-mono text-text-secondary bg-surface-primary p-1.5 rounded border border-border-subtle max-h-[48px] overflow-y-auto break-all", children: selected.classes.join(" ") })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col items-center justify-center p-4 text-center", children: [
+      /* @__PURE__ */ jsx4(MousePointer, { size: 20, className: "text-accent-purple/30 mb-2" }),
+      /* @__PURE__ */ jsx4("p", { className: "text-[10px] text-text-muted", children: "Click un elemento del preview" }),
+      /* @__PURE__ */ jsx4("p", { className: "text-[8px] text-text-muted/40 mt-0.5", children: "para editar sus clases Tailwind" })
+    ] })
+  ] });
+}
+var IframeShell = ({ data, instanceId }) => {
+  const iframeRef = useRef(null);
+  const content = data?.content || data?.html || "";
+  const url = data?.url || "";
+  const [twEditorOpen, setTwEditorOpen] = useState(false);
+  const blobUrl = useMemo(() => {
+    if (url) return url;
+    if (!content) return "about:blank";
+    const twCdn = '<script src="https://cdn.tailwindcss.com"></script>';
+    let enrichedContent = content;
+    if (enrichedContent.includes("</body>")) {
+      enrichedContent = enrichedContent.replace("</body>", `${twCdn}${TW_BRIDGE_SCRIPT}</body>`);
+    } else if (enrichedContent.includes("</html>")) {
+      enrichedContent = enrichedContent.replace("</html>", `${twCdn}${TW_BRIDGE_SCRIPT}</html>`);
+    } else {
+      enrichedContent += `${twCdn}${TW_BRIDGE_SCRIPT}`;
+    }
+    const blob = new Blob([enrichedContent], { type: "text/html" });
+    return URL.createObjectURL(blob);
+  }, [content, url]);
+  useEffect(() => {
+    return () => {
+      if (!url && blobUrl !== "about:blank") {
+        URL.revokeObjectURL(blobUrl);
+      }
+    };
+  }, [blobUrl, url]);
+  return /* @__PURE__ */ jsxs4("div", { className: "w-full h-full bg-surface-secondary rounded-lg overflow-hidden flex", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex-1 relative", children: [
+      /* @__PURE__ */ jsx4(
+        "iframe",
+        {
+          ref: iframeRef,
+          src: blobUrl,
+          title: `sandbox-${instanceId}`,
+          sandbox: "allow-scripts allow-same-origin allow-forms",
+          className: "w-full h-full border-none"
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          onClick: () => setTwEditorOpen(!twEditorOpen),
+          className: `absolute top-2 right-2 z-10 flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-semibold transition-all shadow-lg cursor-pointer ${twEditorOpen ? "bg-accent-purple text-white" : "bg-black/60 text-white/80 hover:bg-accent-purple/80 hover:text-white backdrop-blur-sm"}`,
+          title: "Tailwind Editor",
+          children: [
+            /* @__PURE__ */ jsx4(Paintbrush, { size: 11 }),
+            " TW"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(
+      InlineTwEditor,
+      {
+        iframeRef,
+        isOpen: twEditorOpen,
+        onClose: () => setTwEditorOpen(false)
+      }
+    )
+  ] });
+};
+
+// src/components/shell/shells/TokenPreview.tsx
+import { useState as useState2, useCallback as useCallback2 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TOKEN_GROUPS = [
+  {
+    title: "Surfaces",
+    icon: "\u25FB\uFE0F",
+    tokens: [
+      { key: "surface-primary", label: "Primary" },
+      { key: "surface-secondary", label: "Secondary" },
+      { key: "surface-tertiary", label: "Tertiary" },
+      { key: "surface-elevated", label: "Elevated" }
+    ]
+  },
+  {
+    title: "Text",
+    icon: "\u270F\uFE0F",
+    tokens: [
+      { key: "text-primary", label: "Primary" },
+      { key: "text-secondary", label: "Secondary" },
+      { key: "text-muted", label: "Muted" }
+    ]
+  },
+  {
+    title: "Accents",
+    icon: "\u{1F48E}",
+    tokens: [
+      { key: "accent-blue", label: "Blue" },
+      { key: "accent-purple", label: "Purple" },
+      { key: "accent-green", label: "Green" },
+      { key: "accent-red", label: "Red" },
+      { key: "accent-amber", label: "Amber" },
+      { key: "accent-cyan", label: "Cyan" }
+    ]
+  },
+  {
+    title: "Borders",
+    icon: "\u25AC",
+    tokens: [
+      { key: "border-subtle", label: "Subtle" },
+      { key: "border-default", label: "Default" },
+      { key: "border-strong", label: "Strong" },
+      { key: "border-glow", label: "Glow" }
+    ]
+  },
+  {
+    title: "Status",
+    icon: "\u25CF",
+    tokens: [
+      { key: "status-ok", label: "Success" },
+      { key: "status-warn", label: "Warning" },
+      { key: "status-error", label: "Error" },
+      { key: "status-info", label: "Info" }
+    ]
+  }
+];
+function TokenSwatch({ tokenKey, label }) {
+  const { getCurrentPreset, setToken } = useTheme();
+  const preset = getCurrentPreset();
+  const value = preset.tokens[tokenKey];
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 py-1.5 px-2 rounded-lg bg-surface-glass hover:bg-surface-elevated/50 transition-colors group", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "relative w-6 h-6 shrink-0", children: [
+      /* @__PURE__ */ jsx5("div", { className: "w-6 h-6 rounded-md border border-border-default", style: { background: value } }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "color",
+          value: value.startsWith("#") ? value : "#888888",
+          onChange: (e) => setToken(tokenKey, e.target.value),
+          className: "absolute inset-0 opacity-0 w-full h-full cursor-pointer"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx5("div", { className: "text-[11px] font-semibold text-text-primary truncate", children: label }),
+      /* @__PURE__ */ jsxs5("div", { className: "text-[9px] text-text-muted font-mono", children: [
+        "--ds-",
+        tokenKey
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-text-muted font-mono opacity-0 group-hover:opacity-100 transition-opacity", children: value.slice(0, 9) })
+  ] });
+}
+function PresetCard({ preset, isActive, onSelect }) {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      onClick: onSelect,
+      className: `flex flex-col items-center gap-2 p-3 rounded-xl border transition-all duration-200 cursor-pointer ${isActive ? "border-accent-purple bg-accent-purple/10 shadow-glow-sm" : "border-border-subtle bg-surface-glass hover:border-border-default hover:bg-surface-elevated/30"}`,
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "flex gap-1", children: [preset.preview.bg, preset.preview.accent, preset.preview.text].map((c, i) => /* @__PURE__ */ jsx5("div", { className: "w-3 h-3 rounded-full border border-border-subtle", style: { background: c } }, i)) }),
+        /* @__PURE__ */ jsx5("span", { className: "text-[10px] font-medium text-text-secondary", children: preset.name })
+      ]
+    }
+  );
+}
+function ComponentShowroom() {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4 p-3", children: [
+    /* @__PURE__ */ jsx5(ShowSection, { title: "Buttons", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx5("button", { className: "px-4 py-2 bg-accent-purple text-text-inverse rounded-lg text-xs font-semibold hover:opacity-90 transition-opacity", children: "Primary" }),
+      /* @__PURE__ */ jsx5("button", { className: "px-4 py-2 bg-surface-glass border border-border-default text-text-primary rounded-lg text-xs font-semibold hover:bg-surface-elevated transition-colors", children: "Secondary" }),
+      /* @__PURE__ */ jsx5("button", { className: "px-4 py-2 bg-accent-red/10 text-accent-red border border-accent-red/20 rounded-lg text-xs font-semibold hover:bg-accent-red/20 transition-colors", children: "Destructive" }),
+      /* @__PURE__ */ jsx5("button", { className: "px-3 py-1.5 text-text-secondary text-xs hover:text-text-primary transition-colors", children: "Ghost" })
+    ] }) }),
+    /* @__PURE__ */ jsxs5(ShowSection, { title: "Cards", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "surface-card p-4", children: [
+        /* @__PURE__ */ jsx5("div", { className: "text-sm font-semibold text-text-primary mb-1", children: "Glass Card" }),
+        /* @__PURE__ */ jsx5("div", { className: "text-xs text-text-secondary", children: "Surface secondary con border subtle y hover." })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "glass-panel rounded-xl p-4 mt-2", children: [
+        /* @__PURE__ */ jsx5("div", { className: "text-sm font-semibold text-text-primary mb-1", children: "Glass Panel" }),
+        /* @__PURE__ */ jsx5("div", { className: "text-xs text-text-secondary", children: "Overlay + backdrop blur + border default." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(ShowSection, { title: "Inputs", children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          placeholder: "Escribe algo...",
+          className: "w-full px-3 py-2 bg-surface-primary border border-border-default rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:border-accent-purple focus:ring-1 focus:ring-accent-purple/30 outline-hidden transition-all"
+        }
+      ),
+      /* @__PURE__ */ jsxs5("div", { className: "flex gap-2 mt-2", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "text",
+            value: "Readonly",
+            readOnly: true,
+            className: "flex-1 px-3 py-2 bg-surface-glass border border-border-subtle rounded-lg text-sm text-text-secondary"
+          }
+        ),
+        /* @__PURE__ */ jsxs5("select", { className: "px-3 py-2 bg-surface-primary border border-border-default rounded-lg text-sm text-text-primary outline-hidden", children: [
+          /* @__PURE__ */ jsx5("option", { children: "Opci\xF3n A" }),
+          /* @__PURE__ */ jsx5("option", { children: "Opci\xF3n B" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5(ShowSection, { title: "Badges & Status", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx5("span", { className: "px-2 py-0.5 bg-status-ok/10 text-status-ok border border-status-ok/20 rounded-full text-[10px] font-semibold", children: "Active" }),
+      /* @__PURE__ */ jsx5("span", { className: "px-2 py-0.5 bg-status-warn/10 text-status-warn border border-status-warn/20 rounded-full text-[10px] font-semibold", children: "Pending" }),
+      /* @__PURE__ */ jsx5("span", { className: "px-2 py-0.5 bg-status-error/10 text-status-error border border-status-error/20 rounded-full text-[10px] font-semibold", children: "Error" }),
+      /* @__PURE__ */ jsx5("span", { className: "px-2 py-0.5 bg-status-info/10 text-status-info border border-status-info/20 rounded-full text-[10px] font-semibold", children: "Info" }),
+      /* @__PURE__ */ jsx5("span", { className: "px-2 py-0.5 bg-accent-purple/10 text-accent-purple border border-accent-purple/20 rounded-full text-[10px] font-semibold", children: "Plugin" })
+    ] }) }),
+    /* @__PURE__ */ jsx5(ShowSection, { title: "Chat Bubbles", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx5("div", { className: "self-end max-w-[80%] px-3 py-2 bg-accent-purple/10 border border-accent-purple/20 rounded-2xl rounded-br-sm", children: /* @__PURE__ */ jsx5("div", { className: "text-xs text-text-primary", children: "Hola, \xBFc\xF3mo puedo ayudarte hoy?" }) }),
+      /* @__PURE__ */ jsx5("div", { className: "self-start max-w-[80%] px-3 py-2 bg-surface-glass border border-border-subtle rounded-2xl rounded-bl-sm", children: /* @__PURE__ */ jsx5("div", { className: "text-xs text-text-primary", children: "Muestra el dashboard de ventas" }) }),
+      /* @__PURE__ */ jsx5("div", { className: "self-end max-w-[80%] px-3 py-2 bg-accent-blue/10 border border-accent-blue/20 rounded-2xl rounded-br-sm", children: /* @__PURE__ */ jsx5("span", { className: "inline-flex items-center gap-1 text-xs text-accent-blue font-medium", children: "\u25CF Generando dise\xF1o web..." }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs5(ShowSection, { title: "Typography", children: [
+      /* @__PURE__ */ jsx5("h1", { className: "text-xl font-bold text-text-primary", children: "Heading Primary" }),
+      /* @__PURE__ */ jsx5("h2", { className: "text-base font-semibold text-text-secondary", children: "Heading Secondary" }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-text-secondary mt-1", children: "Body text con color secundario para contenido descriptivo." }),
+      /* @__PURE__ */ jsx5("p", { className: "text-xs text-text-muted mt-1", children: "Caption text en muted para metadata y timestamps." }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-gradient font-bold mt-2", children: "\u2726 Gradient text premium" })
+    ] }),
+    /* @__PURE__ */ jsx5(ShowSection, { title: "Accent Palette", children: /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-6 gap-1", children: ["accent-blue", "accent-purple", "accent-green", "accent-red", "accent-amber", "accent-cyan"].map((c) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx5("div", { className: `w-8 h-8 rounded-lg bg-${c}` }),
+      /* @__PURE__ */ jsx5("span", { className: "text-[8px] text-text-muted", children: c.split("-")[1] })
+    ] }, c)) }) }),
+    /* @__PURE__ */ jsx5(ShowSection, { title: "Graph Nodes", children: /* @__PURE__ */ jsx5("div", { className: "flex gap-2", children: [
+      { name: "Dialogue", border: "border-accent-purple/30", header: "bg-accent-purple/10" },
+      { name: "Logic", border: "border-accent-amber/30", header: "bg-accent-amber/10" },
+      { name: "State", border: "border-accent-cyan/30", header: "bg-accent-cyan/10" }
+    ].map((n) => /* @__PURE__ */ jsxs5("div", { className: `flex-1 bg-surface-tertiary ${n.border} border rounded-lg overflow-hidden`, children: [
+      /* @__PURE__ */ jsx5("div", { className: `${n.header} px-2 py-1 text-[10px] font-semibold text-text-primary`, children: n.name }),
+      /* @__PURE__ */ jsx5("div", { className: "px-2 py-2 text-[9px] text-text-muted", children: "Node content" })
+    ] }, n.name)) }) })
+  ] });
+}
+function ShowSection({ title, children }) {
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx5("div", { className: "text-[10px] font-bold uppercase tracking-wider text-text-muted mb-2", children: title }),
+    children
+  ] });
+}
+function TokenPreview() {
+  const [tab, setTab] = useState2("themes");
+  const { currentThemeId, setTheme, exportCSS, getAllPresets, getCurrentPreset } = useTheme();
+  const handleExport = useCallback2(() => {
+    const css = exportCSS();
+    navigator.clipboard.writeText(css);
+  }, [exportCSS]);
+  const tabs = [
+    { id: "themes", icon: "\u{1F3A8}", label: "Temas" },
+    { id: "tokens", icon: "\u{1F527}", label: "Tokens" },
+    { id: "showroom", icon: "\u{1F3DB}\uFE0F", label: "Showroom" }
+  ];
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col h-full bg-surface-primary text-text-primary font-sans overflow-hidden", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-3 py-2.5 border-b border-border-subtle bg-surface-glass", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-sm", children: "\u{1F3A8}" }),
+      /* @__PURE__ */ jsx5("span", { className: "text-xs font-bold flex-1", children: "Design System" }),
+      /* @__PURE__ */ jsx5("span", { className: "text-[9px] px-1.5 py-0.5 bg-accent-purple/10 text-accent-purple rounded font-mono", children: getCurrentPreset().name }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: handleExport,
+          className: "px-2.5 py-1 border border-border-default rounded-md bg-accent-purple hover:bg-accent-purple/80 text-[10px] text-text-primary font-medium cursor-pointer transition-colors",
+          children: "Export CSS"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "flex border-b border-border-subtle", children: tabs.map((t) => /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        onClick: () => setTab(t.id),
+        className: `flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-semibold transition-all cursor-pointer ${tab === t.id ? "text-accent-purple border-b-2 border-accent-purple bg-accent-purple/5" : "text-text-muted hover:text-text-secondary hover:bg-surface-glass"}`,
+        children: [
+          /* @__PURE__ */ jsx5("span", { children: t.icon }),
+          /* @__PURE__ */ jsx5("span", { children: t.label })
+        ]
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex-1 overflow-auto custom-scrollbar", children: [
+      tab === "themes" && /* @__PURE__ */ jsxs5("div", { className: "p-3 flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx5("div", { className: "text-[10px] font-bold uppercase tracking-wider text-text-muted", children: "Presets" }),
+        /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-2 gap-2", children: getAllPresets().map((p) => /* @__PURE__ */ jsx5(
+          PresetCard,
+          {
+            preset: p,
+            isActive: currentThemeId === p.id,
+            onSelect: () => setTheme(p.id)
+          },
+          p.id
+        )) }),
+        /* @__PURE__ */ jsxs5("div", { className: "mt-2", children: [
+          /* @__PURE__ */ jsx5("div", { className: "text-[10px] font-bold uppercase tracking-wider text-text-muted mb-2", children: "Vista R\xE1pida" }),
+          /* @__PURE__ */ jsxs5("div", { className: "surface-card p-3 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 rounded-full bg-accent-purple flex items-center justify-center text-text-inverse text-[10px] font-bold", children: "Z" }),
+              /* @__PURE__ */ jsxs5("div", { children: [
+                /* @__PURE__ */ jsx5("div", { className: "text-xs font-semibold text-text-primary", children: "Zephyr AI" }),
+                /* @__PURE__ */ jsx5("div", { className: "text-[10px] text-text-muted", children: "Agente activo \u2022 ahora" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 bg-surface-glass rounded-xl text-xs text-text-secondary", children: "\xBFEn qu\xE9 puedo ayudarte hoy?" }),
+            /* @__PURE__ */ jsxs5("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsx5("span", { className: "px-2 py-0.5 bg-status-ok/10 text-status-ok rounded-full text-[9px] font-medium", children: "Online" }),
+              /* @__PURE__ */ jsx5("span", { className: "px-2 py-0.5 bg-accent-blue/10 text-accent-blue rounded-full text-[9px] font-medium", children: "GPT-4" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      tab === "tokens" && /* @__PURE__ */ jsx5("div", { className: "p-3 flex flex-col gap-3", children: TOKEN_GROUPS.map((g) => /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsxs5("div", { className: "text-[10px] font-bold uppercase tracking-wider text-text-muted mb-1.5 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx5("span", { children: g.icon }),
+          " ",
+          g.title
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-1", children: g.tokens.map((t) => /* @__PURE__ */ jsx5(TokenSwatch, { tokenKey: t.key, label: t.label }, t.key)) })
+      ] }, g.title)) }),
+      tab === "showroom" && /* @__PURE__ */ jsx5(ComponentShowroom, {})
+    ] })
+  ] });
+}
+
+// src/components/shell/shells/DatawayChatShell.tsx
+import { useEffect as useEffect2 } from "react";
+import { Database } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DatawayChatShell = ({ artifacts, activeArtifactIndex }) => {
+  const artifact = artifacts?.[activeArtifactIndex];
+  useEffect2(() => {
+    if (!artifact) return;
+    let script = "";
+    if (typeof artifact.content === "string") {
+      script = artifact.content;
+    } else if (artifact.data && typeof artifact.data.content === "string") {
+      script = artifact.data.content;
+    }
+    if (script) {
+      script = script.replace(/```[a-zA-Z-]*\n/gi, "").replace(/```/g, "").trim();
+      window.dispatchEvent(new CustomEvent("intent:dataway-generate-script", { detail: { script } }));
+    }
+  }, [artifact]);
+  if (!artifact) return null;
+  let displayScript = typeof artifact.content === "string" ? artifact.content : artifact.data?.content || "";
+  displayScript = displayScript.replace(/```[a-zA-Z-]*\n/gi, "").replace(/```/g, "").trim();
+  return /* @__PURE__ */ jsxs6("div", { className: "w-full flex tracking-tight flex-col border border-teal-500/20 bg-teal-500/5 rounded-xl overflow-hidden mt-2", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "bg-teal-500/10 px-3 py-2 flex items-center gap-2 border-b border-teal-500/10", children: [
+      /* @__PURE__ */ jsx6(Database, { className: "w-4 h-4 text-teal-600 dark:text-teal-400" }),
+      /* @__PURE__ */ jsx6("span", { className: "text-[11px] font-bold text-teal-800 dark:text-teal-300 uppercase tracking-widest", children: "M-Script Aplicado" })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "p-3", children: /* @__PURE__ */ jsx6("pre", { className: "text-[13px] font-mono text-teal-900/80 dark:text-teal-100/80 whitespace-pre-wrap break-all", children: displayScript }) })
+  ] });
+};
+
+// src/components/shell/ShellNexusPreview.tsx
+import { useState as useState5, useRef as useRef3, useMemo as useMemo2, useCallback as useCallback5, useEffect as useEffect4 } from "react";
+import {
+  Monitor as Monitor2,
+  Tablet,
+  Smartphone,
+  RotateCcw as RotateCcw2,
+  ExternalLink,
+  Maximize2,
+  Minimize2,
+  MousePointer2,
+  Rocket,
+  Copy as Copy2,
+  Check,
+  Loader2 as Loader22,
+  Code2 as Code23,
+  Undo2,
+  Redo2
+} from "lucide-react";
+
+// src/hooks/useNexusaiDeploy.ts
+import { useState as useState3, useCallback as useCallback3 } from "react";
+function buildStandaloneHTML(html, css, js) {
+  return `<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Decido Preview</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+            margin: 0;
+            background: #fff;
+            min-height: 100vh;
+        }
+        ${css}
+    </style>
+</head>
+<body>
+    ${html}
+    <script>try { ${js} } catch(e) { console.error(e); }</script>
+</body>
+</html>`;
+}
+function useNexusaiDeploy() {
+  const [state, setState] = useState3({
+    status: "idle",
+    url: null,
+    error: null,
+    progress: 0
+  });
+  const deploy = useCallback3(async () => {
+    const activeInst = useMorphInstanceStore.getState().getActiveInstance();
+    if (!activeInst?.data?.html) {
+      setState({ status: "error", url: null, error: "No hay contenido para desplegar", progress: 0 });
+      return;
+    }
+    const { html, css, javascript } = activeInst.data;
+    setState({ status: "deploying", url: null, error: null, progress: 10 });
+    const nexusKey = localStorage.getItem("nexusai_api_key");
+    if (nexusKey) {
+      try {
+        setState((s) => ({ ...s, progress: 30 }));
+        const sdkModule = "@nexusai/sdk";
+        const { NexusAI } = await import(
+          /* @vite-ignore */
+          sdkModule
+        );
+        const client = new NexusAI({ apiKey: nexusKey });
+        const standaloneCode = buildStandaloneHTML(html, css || "", javascript || "");
+        const { jobId } = await client.pipeline.deploy({
+          componentName: `preview-${Date.now()}`,
+          componentCode: standaloneCode
+        });
+        setState((s) => ({ ...s, progress: 60 }));
+        const result = await client.pipeline.waitForDeploy(jobId, {
+          timeoutMs: 6e4,
+          onProgress: (s) => setState((prev) => ({ ...prev, progress: 60 + Math.round((s.progress || 0) * 0.4) }))
+        });
+        const deployUrl = result.result?.deploymentUrl || result.result?.url || "";
+        setState({ status: "success", url: deployUrl, error: null, progress: 100 });
+      } catch (err) {
+        const standaloneCode = buildStandaloneHTML(html, css || "", javascript || "");
+        const blob = new Blob([standaloneCode], { type: "text/html" });
+        const blobUrl = URL.createObjectURL(blob);
+        setState({ status: "success", url: blobUrl, error: `SDK fall\xF3 (${err.message}). Preview local generado.`, progress: 100 });
+      }
+    } else {
+      await new Promise((r) => setTimeout(r, 500));
+      setState((s) => ({ ...s, progress: 50 }));
+      const standaloneCode = buildStandaloneHTML(html, css || "", javascript || "");
+      const blob = new Blob([standaloneCode], { type: "text/html" });
+      const blobUrl = URL.createObjectURL(blob);
+      setState({ status: "success", url: blobUrl, error: null, progress: 100 });
+    }
+  }, []);
+  const reset = useCallback3(() => {
+    setState({ status: "idle", url: null, error: null, progress: 0 });
+  }, []);
+  const copyUrl = useCallback3(() => {
+    if (state.url) navigator.clipboard.writeText(state.url);
+  }, [state.url]);
+  return { ...state, deploy, reset, copyUrl };
+}
+
+// src/components/shell/CodeEditorPanel.tsx
+import React6, { useState as useState4, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var TAB_META = {
+  html: { label: "HTML", color: "#e44d26" },
+  css: { label: "CSS", color: "#2965f1" },
+  js: { label: "JS", color: "#f7df1e" }
+};
+var CodeEditorPanel = React6.memo(function CodeEditorPanel2({
+  code = { html: "", css: "", js: "" },
+  onCodeChange
+}) {
+  const [activeTab, setActiveTab] = useState4("html");
+  const textareaRef = useRef2(null);
+  const [localCode, setLocalCode] = useState4(code);
+  useEffect3(() => {
+    setLocalCode(code);
+  }, [code]);
+  const handleChange = useCallback4((value) => {
+    const updated = { ...localCode, [activeTab]: value };
+    setLocalCode(updated);
+    onCodeChange(updated);
+  }, [activeTab, localCode, onCodeChange]);
+  const currentValue = activeTab === "html" ? localCode.html : activeTab === "css" ? localCode.css : localCode.js;
+  const lineCount = (currentValue || "").split("\n").length;
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col h-full bg-surface-tertiary border-l border-border-subtle overflow-hidden", style: { minWidth: 280 }, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-0.5 px-2 py-1.5 bg-surface-secondary border-b border-border-subtle shrink-0", children: [
+      ["html", "css", "js"].map((tab) => /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          onClick: () => setActiveTab(tab),
+          className: `px-3 py-1 rounded text-[10px] font-mono uppercase tracking-wider transition-colors ${activeTab === tab ? "bg-surface-glass text-text-primary" : "text-text-muted hover:text-text-primary hover:bg-surface-glass"}`,
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "inline-block w-2 h-2 rounded-full mr-1.5", style: { background: TAB_META[tab].color } }),
+            TAB_META[tab].label
+          ]
+        },
+        tab
+      )),
+      /* @__PURE__ */ jsxs7("span", { className: "ml-auto text-[9px] text-text-muted font-mono", children: [
+        lineCount,
+        " l\xEDneas"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "flex-1 overflow-auto relative", style: { fontFamily: 'ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace' }, children: /* @__PURE__ */ jsxs7("div", { className: "flex min-h-full", children: [
+      /* @__PURE__ */ jsx7("div", { className: "select-none text-right pr-3 pl-3 py-3 text-[11px] text-text-muted leading-normal shrink-0 bg-surface-tertiary border-r border-border-subtle", children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx7("div", { children: i + 1 }, i)) }),
+      /* @__PURE__ */ jsx7(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: currentValue,
+          onChange: (e) => handleChange(e.target.value),
+          spellCheck: false,
+          className: "flex-1 resize-none bg-transparent text-text-primary text-[11px] leading-normal p-3 outline-hidden min-h-full",
+          style: { tabSize: 2 }
+        }
+      )
+    ] }) })
+  ] });
+});
+
+// src/components/shell/TemplateLibrary.tsx
+import React7 from "react";
+import { motion as motion3 } from "motion/react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var TEMPLATES = [
+  {
+    id: "landing-saas",
+    title: "Landing SaaS",
+    category: "Marketing",
+    emoji: "\u{1F680}",
+    gradient: "from-violet-600 to-indigo-600",
+    description: "Hero con CTA, features, testimonios",
+    html: `<section class="min-h-screen bg-linear-to-br from-violet-950 via-indigo-950 to-black text-text-primary">
+  <nav class="flex items-center justify-between px-8 py-6">
+    <span class="text-xl font-bold bg-linear-to-r from-violet-400 to-indigo-400 bg-clip-text text-transparent">NexusAI</span>
+    <div class="flex gap-6 text-sm text-text-secondary"><a href="#" class="hover:text-text-primary">Features</a><a href="#" class="hover:text-text-primary">Pricing</a><a href="#" class="hover:text-text-primary">Docs</a></div>
+    <button class="px-5 py-2 bg-violet-600 hover:bg-violet-500 rounded-full text-sm font-medium transition">Get Started</button>
+  </nav>
+  <div class="flex flex-col items-center text-center pt-24 px-6">
+    <span class="px-4 py-1.5 bg-violet-500/10 border border-violet-500/20 rounded-full text-xs text-violet-300 mb-6">\u2728 Now in Beta</span>
+    <h1 class="text-5xl md:text-7xl font-bold leading-tight max-w-4xl">Build faster with <span class="bg-linear-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent">AI-powered</span> tools</h1>
+    <p class="text-lg text-text-secondary mt-6 max-w-2xl">Ship products 10x faster. Our AI understands your codebase and generates production-ready code in seconds.</p>
+    <div class="flex gap-4 mt-10"><button class="px-8 py-3 bg-violet-600 hover:bg-violet-500 rounded-full font-medium transition">Start Free Trial</button><button class="px-8 py-3 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-full font-medium transition">Watch Demo \u2192</button></div>
+  </div>
+</section>`,
+    css: "",
+    js: ""
+  },
+  {
+    id: "dashboard",
+    title: "Dashboard",
+    category: "App",
+    emoji: "\u{1F4CA}",
+    gradient: "from-cyan-600 to-blue-600",
+    description: "M\xE9tricas, gr\xE1ficos, sidebar",
+    html: `<div class="flex h-screen bg-surface-primary text-text-primary">
+  <aside class="w-56 bg-surface-secondary border-r border-border-subtle p-4 flex flex-col gap-2">
+    <span class="text-lg font-bold text-cyan-400 mb-4">\u{1F4CA} Dashboard</span>
+    <a class="px-3 py-2 rounded-lg bg-cyan-500/10 text-cyan-300 text-sm">Overview</a>
+    <a class="px-3 py-2 rounded-lg text-text-muted hover:text-text-primary text-sm">Analytics</a>
+    <a class="px-3 py-2 rounded-lg text-text-muted hover:text-text-primary text-sm">Reports</a>
+    <a class="px-3 py-2 rounded-lg text-text-muted hover:text-text-primary text-sm">Settings</a>
+  </aside>
+  <main class="flex-1 p-8 overflow-auto">
+    <h2 class="text-2xl font-bold mb-6">Good morning \u{1F44B}</h2>
+    <div class="grid grid-cols-3 gap-4 mb-8">
+      <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-5"><p class="text-xs text-text-muted mb-1">Revenue</p><p class="text-3xl font-bold text-emerald-400">$48,352</p><p class="text-xs text-emerald-500 mt-1">\u2191 12.5%</p></div>
+      <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-5"><p class="text-xs text-text-muted mb-1">Users</p><p class="text-3xl font-bold text-cyan-400">2,847</p><p class="text-xs text-cyan-500 mt-1">\u2191 8.3%</p></div>
+      <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-5"><p class="text-xs text-text-muted mb-1">Conversion</p><p class="text-3xl font-bold text-violet-400">3.24%</p><p class="text-xs text-violet-500 mt-1">\u2191 2.1%</p></div>
+    </div>
+    <div class="bg-surface-secondary border border-border-subtle rounded-2xl p-6"><h3 class="text-sm font-medium text-text-secondary mb-4">Recent Activity</h3><div class="space-y-3"><div class="flex items-center gap-3 text-sm"><span class="w-8 h-8 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-400">$</span><span class="text-text-primary">New subscription \u2014 Pro Plan</span><span class="ml-auto text-text-muted">2m ago</span></div><div class="flex items-center gap-3 text-sm"><span class="w-8 h-8 rounded-full bg-cyan-500/10 flex items-center justify-center text-cyan-400">\u{1F464}</span><span class="text-text-primary">New user registered</span><span class="ml-auto text-text-muted">15m ago</span></div></div></div>
+  </main>
+</div>`,
+    css: "",
+    js: ""
+  },
+  {
+    id: "portfolio",
+    title: "Portfolio",
+    category: "Personal",
+    emoji: "\u{1F3A8}",
+    gradient: "from-pink-600 to-rose-600",
+    description: "Bio, proyectos, contacto",
+    html: `<div class="min-h-screen bg-surface-primary text-text-primary px-6 py-16 flex flex-col items-center">
+  <div class="max-w-2xl w-full">
+    <div class="flex items-center gap-4 mb-8"><div class="w-16 h-16 rounded-full bg-linear-to-br from-pink-500 to-rose-500 flex items-center justify-center text-2xl">JR</div><div><h1 class="text-2xl font-bold">Maria Garcia</h1><p class="text-text-muted">Full-Stack Designer & Developer</p></div></div>
+    <p class="text-text-secondary leading-relaxed mb-12">I craft beautiful digital experiences that bridge the gap between design and engineering. 5+ years building products for startups and enterprises.</p>
+    <h2 class="text-sm font-bold text-text-muted uppercase tracking-wider mb-4">Selected Work</h2>
+    <div class="grid grid-cols-2 gap-4 mb-12">
+      <div class="group bg-surface-tertiary rounded-2xl overflow-hidden border border-border-subtle hover:border-pink-500/30 transition"><div class="h-32 bg-linear-to-br from-pink-500/20 to-purple-500/20"></div><div class="p-4"><h3 class="font-medium">E-Commerce Platform</h3><p class="text-xs text-text-muted mt-1">React, Node.js, Stripe</p></div></div>
+      <div class="group bg-surface-tertiary rounded-2xl overflow-hidden border border-border-subtle hover:border-cyan-500/30 transition"><div class="h-32 bg-linear-to-br from-cyan-500/20 to-blue-500/20"></div><div class="p-4"><h3 class="font-medium">AI Dashboard</h3><p class="text-xs text-text-muted mt-1">Vue, Python, TensorFlow</p></div></div>
+    </div>
+    <div class="flex gap-4 text-sm text-text-muted"><a href="#" class="hover:text-text-primary">GitHub</a><a href="#" class="hover:text-text-primary">LinkedIn</a><a href="#" class="hover:text-text-primary">Twitter</a><a href="#" class="hover:text-text-primary">Email</a></div>
+  </div>
+</div>`,
+    css: "",
+    js: ""
+  },
+  {
+    id: "pricing",
+    title: "Pricing",
+    category: "Marketing",
+    emoji: "\u{1F4B3}",
+    gradient: "from-emerald-600 to-teal-600",
+    description: "3 planes con toggle mensual/anual",
+    html: `<section class="min-h-screen bg-surface-primary text-text-primary py-20 px-6">
+  <div class="max-w-5xl mx-auto text-center">
+    <h2 class="text-4xl font-bold mb-4">Simple, transparent pricing</h2>
+    <p class="text-text-muted mb-12">No hidden fees. Cancel anytime.</p>
+    <div class="grid md:grid-cols-3 gap-6">
+      <div class="bg-surface-tertiary border border-border-subtle rounded-2xl p-8 text-left"><p class="text-sm text-text-muted mb-2">Starter</p><p class="text-4xl font-bold mb-1">$9<span class="text-lg text-text-muted">/mo</span></p><p class="text-xs text-text-muted mb-6">Perfect for getting started</p><ul class="space-y-2 text-sm text-text-secondary mb-8"><li>\u2713 5 projects</li><li>\u2713 Basic analytics</li><li>\u2713 Email support</li></ul><button class="w-full py-2.5 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-xl text-sm transition">Get Started</button></div>
+      <div class="bg-surface-tertiary border-2 border-emerald-500/50 rounded-2xl p-8 text-left relative"><span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 bg-emerald-500 rounded-full text-xs font-medium">Popular</span><p class="text-sm text-text-muted mb-2">Pro</p><p class="text-4xl font-bold mb-1">$29<span class="text-lg text-text-muted">/mo</span></p><p class="text-xs text-text-muted mb-6">For growing teams</p><ul class="space-y-2 text-sm text-text-secondary mb-8"><li>\u2713 Unlimited projects</li><li>\u2713 Advanced analytics</li><li>\u2713 Priority support</li><li>\u2713 Custom domains</li></ul><button class="w-full py-2.5 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-sm font-medium transition">Get Started</button></div>
+      <div class="bg-surface-tertiary border border-border-subtle rounded-2xl p-8 text-left"><p class="text-sm text-text-muted mb-2">Enterprise</p><p class="text-4xl font-bold mb-1">$99<span class="text-lg text-text-muted">/mo</span></p><p class="text-xs text-text-muted mb-6">For large organizations</p><ul class="space-y-2 text-sm text-text-secondary mb-8"><li>\u2713 Everything in Pro</li><li>\u2713 SSO & SAML</li><li>\u2713 Dedicated support</li><li>\u2713 SLA guarantee</li></ul><button class="w-full py-2.5 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-xl text-sm transition">Contact Sales</button></div>
+    </div>
+  </div>
+</section>`,
+    css: "",
+    js: ""
+  },
+  {
+    id: "login",
+    title: "Login",
+    category: "Auth",
+    emoji: "\u{1F510}",
+    gradient: "from-amber-600 to-orange-600",
+    description: "Form con social login y glassmorphism",
+    html: `<div class="min-h-screen bg-surface-primary flex items-center justify-center p-6">
+  <div class="w-full max-w-sm bg-surface-glass backdrop-blur-xl border border-border-default rounded-3xl p-8 text-text-primary">
+    <div class="text-center mb-8"><span class="text-4xl">\u{1F510}</span><h2 class="text-2xl font-bold mt-3">Welcome back</h2><p class="text-sm text-text-muted mt-1">Sign in to your account</p></div>
+    <div class="space-y-4">
+      <div><label class="text-xs text-text-muted mb-1 block">Email</label><input type="email" placeholder="you@email.com" class="w-full px-4 py-3 bg-surface-glass border border-border-default rounded-xl text-sm outline-hidden focus:border-amber-500/50 transition"/></div>
+      <div><label class="text-xs text-text-muted mb-1 block">Password</label><input type="password" placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" class="w-full px-4 py-3 bg-surface-glass border border-border-default rounded-xl text-sm outline-hidden focus:border-amber-500/50 transition"/></div>
+      <button class="w-full py-3 bg-linear-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 rounded-xl text-sm font-medium transition">Sign In</button>
+      <div class="flex items-center gap-3 my-2"><div class="flex-1 h-px bg-surface-glass"></div><span class="text-xs text-text-muted">or</span><div class="flex-1 h-px bg-surface-glass"></div></div>
+      <button class="w-full py-3 bg-surface-glass hover:bg-surface-glass border border-border-default rounded-xl text-sm transition flex items-center justify-center gap-2">\u{1F310} Continue with Google</button>
+    </div>
+    <p class="text-xs text-text-muted text-center mt-6">Don't have an account? <a href="#" class="text-amber-400 hover:underline">Sign up</a></p>
+  </div>
+</div>`,
+    css: "",
+    js: ""
+  },
+  {
+    id: "blog",
+    title: "Blog",
+    category: "Content",
+    emoji: "\u{1F4DD}",
+    gradient: "from-sky-600 to-blue-600",
+    description: "Lista de art\xEDculos con cards",
+    html: `<div class="min-h-screen bg-surface-primary text-text-primary py-16 px-6">
+  <div class="max-w-3xl mx-auto">
+    <h1 class="text-4xl font-bold mb-2">Blog</h1>
+    <p class="text-text-muted mb-12">Thoughts on design, technology, and building products.</p>
+    <div class="space-y-6">
+      <article class="group bg-surface-tertiary border border-border-subtle rounded-2xl p-6 hover:border-sky-500/30 transition cursor-pointer"><div class="flex items-center gap-2 text-xs text-text-muted mb-3"><span class="px-2 py-0.5 bg-sky-500/10 text-sky-400 rounded">Design</span><span>Mar 15, 2026</span><span>\xB7 5 min read</span></div><h2 class="text-xl font-bold group-hover:text-sky-400 transition">The Future of AI-Powered Design Tools</h2><p class="text-sm text-text-muted mt-2 leading-relaxed">How generative AI is transforming the way we build user interfaces and what it means for designers.</p></article>
+      <article class="group bg-surface-tertiary border border-border-subtle rounded-2xl p-6 hover:border-violet-500/30 transition cursor-pointer"><div class="flex items-center gap-2 text-xs text-text-muted mb-3"><span class="px-2 py-0.5 bg-violet-500/10 text-violet-400 rounded">Engineering</span><span>Mar 10, 2026</span><span>\xB7 8 min read</span></div><h2 class="text-xl font-bold group-hover:text-violet-400 transition">Building a Real-Time Collaboration Engine</h2><p class="text-sm text-text-muted mt-2 leading-relaxed">A deep dive into the architecture behind our multi-user editing system using CRDTs and WebSockets.</p></article>
+      <article class="group bg-surface-tertiary border border-border-subtle rounded-2xl p-6 hover:border-emerald-500/30 transition cursor-pointer"><div class="flex items-center gap-2 text-xs text-text-muted mb-3"><span class="px-2 py-0.5 bg-emerald-500/10 text-emerald-400 rounded">Product</span><span>Mar 5, 2026</span><span>\xB7 3 min read</span></div><h2 class="text-xl font-bold group-hover:text-emerald-400 transition">Shipping Faster with Component Libraries</h2><p class="text-sm text-text-muted mt-2 leading-relaxed">How we reduced our time-to-market by 60% by investing in a robust design system.</p></article>
+    </div>
+  </div>
+</div>`,
+    css: "",
+    js: ""
+  }
+];
+var TemplateLibrary = React7.memo(function TemplateLibrary2({ onSelect }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center justify-center h-full p-6 overflow-auto", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "text-center mb-8", children: [
+      /* @__PURE__ */ jsx8("span", { className: "text-4xl", children: "\u{1F3A8}" }),
+      /* @__PURE__ */ jsx8("h2", { className: "text-xl font-bold text-text-primary mt-3", children: "Elige un template" }),
+      /* @__PURE__ */ jsx8("p", { className: "text-sm text-text-muted mt-1", children: "Click para cargar \u2014 luego refina con IA" })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-3 max-w-3xl w-full", children: TEMPLATES.map((t, i) => /* @__PURE__ */ jsxs8(
+      motion3.button,
+      {
+        initial: { opacity: 0, y: 12 },
+        animate: { opacity: 1, y: 0 },
+        transition: { delay: i * 0.05 },
+        onClick: () => onSelect({ html: t.html, css: t.css, js: t.js }),
+        className: "group bg-surface-tertiary border border-border-subtle hover:border-border-strong rounded-2xl p-4 text-left transition-all hover:scale-[1.02] hover:shadow-xl overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsx8("div", { className: `h-20 rounded-xl bg-linear-to-br ${t.gradient} opacity-30 group-hover:opacity-50 transition mb-3 flex items-center justify-center`, children: /* @__PURE__ */ jsx8("span", { className: "text-3xl opacity-70", children: t.emoji }) }),
+          /* @__PURE__ */ jsx8("h3", { className: "text-sm font-bold text-text-primary", children: t.title }),
+          /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-text-muted mt-0.5", children: t.category }),
+          /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-text-muted mt-1", children: t.description })
+        ]
+      },
+      t.id
+    )) })
+  ] });
+});
+
+// src/components/shell/ShellNexusPreview.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var DEVICE_DIMS = {
+  desktop: { w: "100%", h: "100%", label: "Desktop" },
+  tablet: { w: "768px", h: "1024px", label: "Tablet" },
+  mobile: { w: "375px", h: "667px", label: "Mobile" }
+};
+var DEVICE_ICONS = {
+  desktop: Monitor2,
+  tablet: Tablet,
+  mobile: Smartphone
+};
+var ShellNexusPreview = ({ artifacts, activeArtifactIndex, data }) => {
+  const iframeRef = useRef3(null);
+  const [device, setDevice] = useState5("desktop");
+  const [iframeKey, setIframeKey] = useState5(Date.now());
+  const [isFullscreen, setIsFullscreen] = useState5(false);
+  const [inspectMode, setInspectMode] = useState5(false);
+  const [selectedSelector, setSelectedSelector] = useState5(null);
+  const [copied, setCopied] = useState5(false);
+  const [showCodeEditor, setShowCodeEditor] = useState5(false);
+  const deployHook = useNexusaiDeploy();
+  const code = useMemo2(() => {
+    const src = data || artifacts?.[activeArtifactIndex ?? 0]?.data || {};
+    const html = src.html || src.content || "";
+    const css = src.css || src.styles || "";
+    const js = src.javascript || src.js || "";
+    return { html, css, js };
+  }, [data, artifacts, activeArtifactIndex]);
+  useEffect4(() => {
+    const handler = (e) => {
+      if (e.data?.type === "DECIDO_ELEMENT_SELECTED") {
+        setSelectedSelector(e.data.selector || null);
+        if (window.__DECIDO__) {
+          window.__DECIDO__.selectedElementSelector = e.data.selector || null;
+        }
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, []);
+  const [showShortcuts, setShowShortcuts] = useState5(false);
+  useEffect4(() => {
+    const handler = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      const meta = e.metaKey || e.ctrlKey;
+      if (!meta) return;
+      if (e.code === "KeyI" && !e.shiftKey) {
+        e.preventDefault();
+        setInspectMode((v) => !v);
+        return;
+      }
+      if (e.code === "KeyE" && !e.shiftKey) {
+        e.preventDefault();
+        setShowCodeEditor((v) => !v);
+        return;
+      }
+      if (e.code === "KeyD" && !e.shiftKey) {
+        e.preventDefault();
+        deployHook.deploy();
+        return;
+      }
+      if (e.key === "/") {
+        e.preventDefault();
+        setShowShortcuts((v) => !v);
+        return;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [deployHook]);
+  useEffect4(() => {
+    if (iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.postMessage({ type: "DECIDO_SET_INSPECT", enabled: inspectMode }, "*");
+    }
+  }, [inspectMode, iframeKey]);
+  const srcDoc = useMemo2(() => {
+    const safeJs = (code.js || "").replace(/<\/script/gi, "<\\/script");
+    return `
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <base target="_blank">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; }
+        body { 
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+            margin: 0; 
+            background: #fff; 
+            min-height: 100vh;
+            color: #1a1a1a;
+        }
+        html, body { width: 100%; height: 100%; }
+        .__decido-hover { outline: 2px dashed #06b6d4 !important; outline-offset: 2px; cursor: crosshair !important; }
+        .__decido-selected { outline: 2px solid #06b6d4 !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(6,182,212,0.15) !important; }
+        ${code.css}
+    </style>
+</head>
+<body>
+    ${code.html}
+    <script>
+        try { ${safeJs} } catch(e) { console.error('[Preview]', e); }
+    </script>
+    <script>
+        // Link interceptor
+        document.addEventListener('click', function(e) {
+            var a = e.target.closest('a');
+            if (!a) return;
+            var href = a.getAttribute('href') || '';
+            if (href.startsWith('#')) return;
+            if (href.startsWith('javascript:')) { e.preventDefault(); return; }
+            e.preventDefault();
+            if (href && href !== '#') window.open(href, '_blank', 'noopener,noreferrer');
+        }, true);
+
+        // Element Inspector
+        var _inspectEnabled = false;
+        var _hoveredEl = null;
+        var _selectedEl = null;
+
+        function _getSelector(el) {
+            if (el.id) return '#' + el.id;
+            var path = [];
+            while (el && el !== document.body && el !== document.documentElement) {
+                var tag = el.tagName.toLowerCase();
+                if (el.className && typeof el.className === 'string') {
+                    var cls = el.className.split(/s+/).filter(function(c) { return !c.startsWith('__decido'); }).slice(0, 2).join('.');
+                    if (cls) tag += '.' + cls;
+                }
+                var parent = el.parentElement;
+                if (parent) {
+                    var siblings = Array.from(parent.children).filter(function(c) { return c.tagName === el.tagName; });
+                    if (siblings.length > 1) tag += ':nth-child(' + (Array.from(parent.children).indexOf(el) + 1) + ')';
+                }
+                path.unshift(tag);
+                el = parent;
+                if (path.length >= 3) break;
+            }
+            return path.join(' > ');
+        }
+
+        document.addEventListener('mouseover', function(e) {
+            if (!_inspectEnabled) return;
+            if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
+            _hoveredEl = e.target;
+            if (_hoveredEl !== _selectedEl) _hoveredEl.classList.add('__decido-hover');
+        });
+        document.addEventListener('mouseout', function(e) {
+            if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
+        });
+        document.addEventListener('click', function(e) {
+            if (!_inspectEnabled) return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (_selectedEl) _selectedEl.classList.remove('__decido-selected');
+            _selectedEl = e.target;
+            _selectedEl.classList.add('__decido-selected');
+            _hoveredEl = null;
+            var sel = _getSelector(_selectedEl);
+            window.parent.postMessage({ type: 'DECIDO_ELEMENT_SELECTED', selector: sel, tagName: _selectedEl.tagName }, '*');
+        }, true);
+
+        window.addEventListener('message', function(e) {
+            if (e.data && e.data.type === 'DECIDO_SET_INSPECT') {
+                _inspectEnabled = e.data.enabled;
+                if (!_inspectEnabled) {
+                    if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
+                    if (_selectedEl) _selectedEl.classList.remove('__decido-selected');
+                    _hoveredEl = null; _selectedEl = null;
+                }
+                document.body.style.cursor = _inspectEnabled ? 'crosshair' : '';
+            }
+        });
+    </script>
+</body>
+</html>`;
+  }, [code]);
+  const handleReload = useCallback5(() => setIframeKey(Date.now()), []);
+  const handleOpenInTab = useCallback5(() => {
+    const win = window.open();
+    if (win) {
+      win.document.write(srcDoc);
+      win.document.close();
+    }
+  }, [srcDoc]);
+  const handleToggleInspect = useCallback5(() => {
+    const next = !inspectMode;
+    setInspectMode(next);
+    if (!next) setSelectedSelector(null);
+  }, [inspectMode]);
+  const dims = DEVICE_DIMS[device];
+  const hasContent = !!code.html?.trim();
+  return /* @__PURE__ */ jsxs9("div", { className: `w-full h-full flex flex-col bg-surface-primary overflow-hidden ${isFullscreen ? "fixed inset-0 z-9999" : ""}`, children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-2 py-1.5 bg-surface-secondary border-b border-border-subtle text-[10px] text-text-muted select-none shrink-0", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex gap-1 px-1", children: [
+          /* @__PURE__ */ jsx9("span", { className: "w-2.5 h-2.5 rounded-full bg-red-500/80" }),
+          /* @__PURE__ */ jsx9("span", { className: "w-2.5 h-2.5 rounded-full bg-yellow-500/80" }),
+          /* @__PURE__ */ jsx9("span", { className: "w-2.5 h-2.5 rounded-full bg-green-500/80" })
+        ] }),
+        /* @__PURE__ */ jsx9("button", { onClick: handleReload, className: "p-1 rounded hover:bg-surface-glass transition-colors", title: "Recargar", children: /* @__PURE__ */ jsx9(RotateCcw2, { size: 12 }) }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => useMorphInstanceStore.getState().undo(),
+            disabled: !useMorphInstanceStore.getState().canUndo(),
+            className: `p-1 rounded transition-colors ${useMorphInstanceStore.getState().canUndo() ? "hover:bg-surface-glass text-text-secondary" : "text-text-muted cursor-not-allowed"}`,
+            title: "Deshacer",
+            children: /* @__PURE__ */ jsx9(Undo2, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => useMorphInstanceStore.getState().redo(),
+            disabled: !useMorphInstanceStore.getState().canRedo(),
+            className: `p-1 rounded transition-colors ${useMorphInstanceStore.getState().canRedo() ? "hover:bg-surface-glass text-text-secondary" : "text-text-muted cursor-not-allowed"}`,
+            title: "Rehacer",
+            children: /* @__PURE__ */ jsx9(Redo2, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsxs9("span", { className: "px-2 py-0.5 bg-surface-overlay rounded text-[9px] font-mono", children: [
+          dims.w === "100%" ? "Adaptable" : dims.w,
+          " \xD7 ",
+          dims.h === "100%" ? "100%" : dims.h
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-0.5", children: ["desktop", "tablet", "mobile"].map((d) => {
+        const Icon = DEVICE_ICONS[d];
+        return /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => setDevice(d),
+            className: `p-1.5 rounded transition-colors ${device === d ? "bg-surface-glass text-text-primary" : "hover:bg-surface-glass text-text-muted hover:text-text-primary"}`,
+            title: DEVICE_DIMS[d].label,
+            children: /* @__PURE__ */ jsx9(Icon, { size: 13 })
+          },
+          d
+        );
+      }) }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: handleToggleInspect,
+            className: `p-1 rounded transition-colors ${inspectMode ? "bg-cyan-500/20 text-cyan-400" : "hover:bg-surface-glass text-text-muted"}`,
+            title: inspectMode ? "Desactivar inspector" : "Seleccionar elemento",
+            children: /* @__PURE__ */ jsx9(MousePointer2, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => setShowCodeEditor(!showCodeEditor),
+            className: `p-1 rounded transition-colors ${showCodeEditor ? "bg-violet-500/20 text-violet-400" : "hover:bg-surface-glass text-text-muted"}`,
+            title: showCodeEditor ? "Ocultar c\xF3digo" : "Ver / editar c\xF3digo",
+            children: /* @__PURE__ */ jsx9(Code23, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => {
+              deployHook.deploy();
+            },
+            disabled: !hasContent || deployHook.status === "deploying",
+            className: `p-1 rounded transition-colors ${deployHook.status === "deploying" ? "text-amber-400 animate-pulse" : hasContent ? "hover:bg-emerald-500/10 text-text-muted hover:text-emerald-400" : "text-text-muted cursor-not-allowed"}`,
+            title: "Desplegar preview",
+            children: deployHook.status === "deploying" ? /* @__PURE__ */ jsx9(Loader22, { size: 12, className: "animate-spin" }) : /* @__PURE__ */ jsx9(Rocket, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsx9("button", { onClick: () => setIsFullscreen(!isFullscreen), className: "p-1 rounded hover:bg-surface-glass transition-colors", title: isFullscreen ? "Salir fullscreen" : "Fullscreen", children: isFullscreen ? /* @__PURE__ */ jsx9(Minimize2, { size: 12 }) : /* @__PURE__ */ jsx9(Maximize2, { size: 12 }) }),
+        /* @__PURE__ */ jsx9("button", { onClick: handleOpenInTab, className: "p-1 rounded hover:bg-surface-glass transition-colors", title: "Abrir en nueva pesta\xF1a", children: /* @__PURE__ */ jsx9(ExternalLink, { size: 12 }) })
+      ] })
+    ] }),
+    deployHook.status !== "idle" && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle text-[10px] shrink-0", style: { background: deployHook.status === "success" ? "rgba(16,185,129,0.08)" : deployHook.status === "error" ? "rgba(239,68,68,0.08)" : "rgba(245,158,11,0.08)" }, children: [
+      deployHook.status === "deploying" && /* @__PURE__ */ jsxs9(Fragment, { children: [
+        /* @__PURE__ */ jsx9(Loader22, { size: 10, className: "text-amber-400 animate-spin" }),
+        /* @__PURE__ */ jsxs9("span", { className: "text-amber-300 font-mono", children: [
+          "Desplegando... ",
+          deployHook.progress,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "flex-1 h-1 bg-surface-glass rounded-full overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: "h-full bg-amber-400 transition-all duration-300 rounded-full", style: { width: `${deployHook.progress}%` } }) })
+      ] }),
+      deployHook.status === "success" && deployHook.url && /* @__PURE__ */ jsxs9(Fragment, { children: [
+        /* @__PURE__ */ jsx9(Check, { size: 10, className: "text-emerald-400" }),
+        /* @__PURE__ */ jsx9("a", { href: deployHook.url, target: "_blank", rel: "noopener noreferrer", className: "text-emerald-300 font-mono flex-1 truncate hover:underline", children: deployHook.url.length > 60 ? deployHook.url.slice(0, 60) + "..." : deployHook.url }),
+        /* @__PURE__ */ jsx9("button", { onClick: () => {
+          deployHook.copyUrl();
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        }, className: "text-text-secondary hover:text-text-primary transition-colors", title: "Copiar URL", children: copied ? /* @__PURE__ */ jsx9(Check, { size: 10, className: "text-emerald-400" }) : /* @__PURE__ */ jsx9(Copy2, { size: 10 }) }),
+        /* @__PURE__ */ jsx9("button", { onClick: deployHook.reset, className: "text-text-muted hover:text-text-primary", children: "\u2715" })
+      ] }),
+      deployHook.status === "error" && /* @__PURE__ */ jsxs9(Fragment, { children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-red-400", children: "\u26A0" }),
+        /* @__PURE__ */ jsx9("span", { className: "text-red-300 font-mono flex-1", children: deployHook.error }),
+        /* @__PURE__ */ jsx9("button", { onClick: deployHook.reset, className: "text-text-muted hover:text-text-primary", children: "\u2715" })
+      ] })
+    ] }),
+    selectedSelector && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-cyan-500/10 border-b border-cyan-500/20 text-[10px] shrink-0", children: [
+      /* @__PURE__ */ jsx9(MousePointer2, { size: 10, className: "text-cyan-400" }),
+      /* @__PURE__ */ jsx9("code", { className: "text-cyan-300 font-mono flex-1 truncate", children: selectedSelector }),
+      /* @__PURE__ */ jsx9("span", { className: "text-text-muted", children: "Escribe en el chat para modificar este elemento" }),
+      /* @__PURE__ */ jsx9("button", { onClick: () => {
+        setSelectedSelector(null);
+        setInspectMode(false);
+      }, className: "text-text-muted hover:text-text-primary", children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex-1 flex overflow-hidden", children: [
+      /* @__PURE__ */ jsx9("div", { className: `flex items-center justify-center overflow-auto p-2 ${showCodeEditor ? "w-1/2" : "flex-1"}`, style: { background: "repeating-conic-gradient(#1a1a1b 0% 25%, #141415 0% 50%) 0 0 / 20px 20px" }, children: hasContent ? /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "bg-white shadow-2xl transition-all duration-300 overflow-hidden w-full h-full",
+          style: {
+            maxWidth: showCodeEditor ? "100%" : dims.w,
+            maxHeight: showCodeEditor ? "100%" : dims.h,
+            border: device !== "desktop" ? "6px solid #333" : "1px solid #2a2a2a",
+            borderRadius: device !== "desktop" ? "1.5rem" : "4px"
+          },
+          children: /* @__PURE__ */ jsx9(
+            "iframe",
+            {
+              ref: iframeRef,
+              srcDoc,
+              title: "NexusAI Preview",
+              sandbox: "allow-scripts allow-same-origin allow-forms allow-modals",
+              className: "w-full h-full border-0"
+            },
+            iframeKey
+          )
+        }
+      ) : /* @__PURE__ */ jsx9(TemplateLibrary, { onSelect: (tpl) => {
+        const inst = useMorphInstanceStore.getState().getActiveInstance();
+        if (inst) {
+          useMorphInstanceStore.getState().upsertInstance({
+            ...inst,
+            data: { ...inst.data, html: tpl.html, css: tpl.css, javascript: tpl.js }
+          });
+        } else {
+          const id = "tpl-" + Date.now();
+          useMorphInstanceStore.getState().upsertInstance({
+            id,
+            shellType: "nexusai-preview",
+            sourceChatId: "_default",
+            label: "Template",
+            data: { html: tpl.html, css: tpl.css, javascript: tpl.js }
+          });
+          useMorphInstanceStore.getState().setActiveInstance(id);
+        }
+      } }) }),
+      showCodeEditor && /* @__PURE__ */ jsx9("div", { className: "w-1/2 shrink-0", children: /* @__PURE__ */ jsx9(
+        CodeEditorPanel,
+        {
+          code,
+          onCodeChange: (updated) => {
+            const inst = useMorphInstanceStore.getState().getActiveInstance();
+            if (inst) {
+              useMorphInstanceStore.getState().upsertInstance({
+                ...inst,
+                data: { ...inst.data, html: updated.html, css: updated.css, javascript: updated.js }
+              });
+            }
+          }
+        }
+      ) })
+    ] }),
+    showShortcuts && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-surface-overlay backdrop-blur-xs", onClick: () => setShowShortcuts(false), children: /* @__PURE__ */ jsxs9("div", { className: "bg-surface-tertiary border border-border-default rounded-2xl p-6 max-w-xs w-full shadow-2xl", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx9("h3", { className: "text-sm font-bold text-text-primary mb-4 flex items-center gap-2", children: "\u2328\uFE0F Atajos de Teclado" }),
+      /* @__PURE__ */ jsx9("div", { className: "space-y-2 text-[11px]", children: [
+        ["\u2318 I", "Inspector de elementos"],
+        ["\u2318 E", "Editor de c\xF3digo"],
+        ["\u2318 D", "Desplegar preview"],
+        ["\u2318 Z", "Deshacer (topolog\xEDa)"],
+        ["\u2318 \u21E7 Z", "Rehacer (topolog\xEDa)"],
+        ["\u2318 /", "Esta ayuda"],
+        ["\u2318 B", "Toggle sidebar"],
+        ["\u2318 \u21E7 C", "Toggle modo Creator"],
+        ["\u2318 \u21E7 V", "Toggle canvas"]
+      ].map(([keys, desc]) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-text-secondary", children: desc }),
+        /* @__PURE__ */ jsx9("kbd", { className: "px-2 py-0.5 bg-surface-glass border border-border-default rounded text-text-primary font-mono text-[10px]", children: keys })
+      ] }, keys)) }),
+      /* @__PURE__ */ jsx9("button", { onClick: () => setShowShortcuts(false), className: "w-full mt-4 py-2 bg-surface-glass hover:bg-surface-glass rounded-xl text-xs text-text-secondary transition", children: "Cerrar" })
+    ] }) })
+  ] });
+};
+
+// src/components/shell/shells/bootShells.ts
+var booted = false;
+function bootShells() {
+  if (booted) return;
+  booted = true;
+  registerShell("markdown", MarkdownShell);
+  registerShell("iframe", IframeShell);
+  registerShell("shell-theme-editor", TokenPreview);
+  registerShell("nexusai-preview", ShellNexusPreview, { icon: "\u{1F310}", color: "#3b82f6", label: "Web Preview" });
+  registerShell("dataway-studio", DatawayChatShell, { icon: "\u0192", color: "#14b8a6", label: "Dataway M-Script Studio" });
+}
+
+// src/hooks/useShellKeyboard.ts
+import { useEffect as useEffect5 } from "react";
+function useShellKeyboard() {
+  useEffect5(() => {
+    const handleKeyDown = (e) => {
+      const isMeta = e.metaKey || e.ctrlKey;
+      if (!isMeta) return;
+      const store = useMorphInstanceStore.getState();
+      if (e.key === "w" && store.activeInstanceId) {
+        e.preventDefault();
+        store.removeInstance(store.activeInstanceId);
+      }
+      if (e.key >= "1" && e.key <= "9") {
+        const idx = parseInt(e.key) - 1;
+        const instances = store.getInstances();
+        if (idx < instances.length) {
+          e.preventDefault();
+          store.setActiveInstance(instances[idx].id);
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+}
+
+// src/components/shell/MorphShell.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+bootShells();
+var _abortCtrl = null;
+async function geminiStreamDirect(prompt, model) {
+  const effectiveModel = model || localStorage.getItem("decido_gemini_model") || "gemini-3-flash-preview";
+  const apiKey = localStorage.getItem("google_gemini_api_key") || window.__DECIDO__?._apiKey || import.meta.env?.VITE_GEMINI_API_KEY || "";
+  if (!apiKey) {
+    console.error('\u274C No Gemini API key. Set localStorage "google_gemini_api_key" or VITE_GEMINI_API_KEY');
+    usePlaygroundStore.getState().addChatMessage({ type: "error", sender: "system", text: "\u26A0\uFE0F No se encontr\xF3 API key de Gemini." });
+    return;
+  }
+  const store = usePlaygroundStore.getState();
+  store.addChatMessage({ type: "text", sender: "user", text: prompt });
+  const controller = new AbortController();
+  _abortCtrl = controller;
+  const steps = [
+    { type: "thinking", label: "Processing", startTime: Date.now() }
+  ];
+  try {
+    const url = `https://generativelanguage.googleapis.com/v1beta/models/${effectiveModel}:streamGenerateContent?alt=sse&key=${apiKey}`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        contents: [{ role: "user", parts: [{ text: prompt }] }],
+        systemInstruction: { parts: [{ text: "Eres Decido AI, un asistente del sistema operativo Decido OS. Responde en espa\xF1ol, s\xE9 conciso y \xFAtil." }] },
+        generationConfig: { temperature: 0.7, maxOutputTokens: 4096 }
+      }),
+      signal: controller.signal
+    });
+    if (!res.ok) throw new Error(`Gemini API ${res.status}: ${(await res.text()).slice(0, 200)}`);
+    steps[0].endTime = Date.now();
+    steps.push({ type: "text_delta", label: "Streaming", startTime: Date.now() });
+    const reader = res.body?.getReader();
+    if (!reader) throw new Error("No reader");
+    const decoder = new TextDecoder();
+    let fullText = "";
+    const msgId = `gemini-${Date.now()}`;
+    let lineBuffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      lineBuffer += decoder.decode(value, { stream: true });
+      const lines = lineBuffer.split("\n");
+      lineBuffer = lines.pop() || "";
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed.startsWith("data: ")) continue;
+        const jsonStr = trimmed.slice(6);
+        if (!jsonStr || jsonStr === "[DONE]") continue;
+        try {
+          const data = JSON.parse(jsonStr);
+          const text = data?.candidates?.[0]?.content?.parts?.[0]?.text;
+          if (text) {
+            fullText += text;
+            usePlaygroundStore.getState().upsertChatMessage(msgId, {
+              id: msgId,
+              type: "text",
+              sender: "agent",
+              text: fullText,
+              timestamp: Date.now(),
+              executionSteps: [...steps]
+            });
+          }
+        } catch (parseErr) {
+          console.warn("[SSE] JSON parse failed:", jsonStr.slice(0, 100), parseErr);
+        }
+      }
+    }
+    if (lineBuffer.trim().startsWith("data: ")) {
+      try {
+        const text = JSON.parse(lineBuffer.trim().slice(6))?.candidates?.[0]?.content?.parts?.[0]?.text;
+        if (text) fullText += text;
+      } catch {
+      }
+    }
+    steps[1].endTime = Date.now();
+    steps.push({ type: "text_complete", label: "Complete", startTime: Date.now(), endTime: Date.now() });
+    usePlaygroundStore.getState().upsertChatMessage(msgId, {
+      id: msgId,
+      type: "text",
+      sender: "agent",
+      text: fullText,
+      timestamp: Date.now(),
+      executionSteps: steps
+    });
+    console.log("\u2705 Streaming complete:", fullText.length, "chars");
+  } catch (err) {
+    if (err.name === "AbortError") {
+      usePlaygroundStore.getState().addChatMessage({ type: "alert", sender: "system", text: "\u23F9\uFE0F Generaci\xF3n cancelada." });
+    } else {
+      console.error("\u274C", err.message);
+      usePlaygroundStore.getState().addChatMessage({ type: "error", sender: "system", text: `\u274C ${err.message}` });
+    }
+  } finally {
+    _abortCtrl = null;
+  }
+}
+if (typeof window !== "undefined") {
+  window.__DECIDO__ = {
+    ...window.__DECIDO__,
+    useMorphInstanceStore,
+    useLayoutStore,
+    useMorphologyStore,
+    usePlaygroundStore,
+    registerShell,
+    resolveShell,
+    getRegisteredShellTypes,
+    geminiStream: geminiStreamDirect,
+    geminiAbort: () => _abortCtrl?.abort(),
+    // SDK: Plugin extensibility (lazy-loaded to avoid circular deps at module eval)
+    registerSuggestions: (pluginId, items) => {
+      import("./useSuggestionsStore-4L2AIZ2D.mjs").then((m) => m.useSuggestionsStore.getState().registerPluginSuggestions(pluginId, items));
+    },
+    registerIntent: (p) => {
+      import("./useIntentLens-LEQCAXCK.mjs").then((m) => m.registerIntentPattern(p));
+    },
+    getIntentPatterns: () => {
+      return import("./useIntentLens-LEQCAXCK.mjs").then((m) => m.getIntentPatterns());
+    }
+  };
+}
+function MorphShell({
+  showCanvas = true,
+  setShowCanvas,
+  activeConfig,
+  prototypeBrand = "",
+  activeState,
+  chartData = [],
+  dragConstraintsRef
+}) {
+  useShellKeyboard();
+  const activeInstance = useMorphInstanceStore((s) => s.getActiveInstance());
+  const removeInstance = useMorphInstanceStore((s) => s.removeInstance);
+  const layoutStage = useLayoutStore((s) => s.activeStage);
+  const layoutHistory = useLayoutStore((s) => s.stageHistory);
+  const morphStage = useMorphologyStore((s) => s.activeStage);
+  const morphHistory = useMorphologyStore((s) => s.stageHistory);
+  const isImmersive = useLayoutStore((s) => s.isImmersive);
+  const setIsImmersive = useLayoutStore((s) => s.setIsImmersive);
+  const activeStage = layoutStage || morphStage;
+  const stageHistory = layoutStage ? layoutHistory : morphHistory;
+  const activeArtifactData = usePlaygroundStore((s) => s.activeArtifactData);
+  const effectiveStage = activeStage || (activeArtifactData ? { type: "artifact", data: activeArtifactData } : null);
+  const renderingType = effectiveStage?.type || "3d";
+  const stageMeta = STAGE_META2[renderingType] || STAGE_META2["custom"];
+  const StageIcon = stageMeta.icon;
+  const addTab = useLayoutStore((s) => s.addTab);
+  React9.useEffect(() => {
+    if (!effectiveStage && !activeInstance) return;
+    if (activeInstance) {
+      addTab({
+        id: `morph-${activeInstance.id}`,
+        label: activeInstance.label,
+        componentId: `morph:${activeInstance.shellType}`,
+        closeable: true,
+        data: activeInstance
+      });
+    } else if (effectiveStage) {
+      const tabId = `morph-${renderingType}-${effectiveStage.label || "stage"}`;
+      addTab({
+        id: tabId,
+        label: effectiveStage.label || renderingType.toUpperCase(),
+        componentId: `morph:${renderingType}`,
+        closeable: true,
+        data: effectiveStage
+      });
+    }
+  }, [effectiveStage?.type, effectiveStage?.label, activeInstance?.id, activeInstance?.shellType]);
+  const handleClose = useCallback6(() => {
+    if (activeInstance) {
+      removeInstance(activeInstance.id);
+    }
+    useLayoutStore.getState().clearStages();
+    useMorphologyStore.getState().clearStages();
+    usePlaygroundStore.getState().setActiveArtifactData(null);
+    setShowCanvas?.(false);
+  }, [setShowCanvas, activeInstance, removeInstance]);
+  const handleBack = useCallback6(() => {
+    if (activeInstance) {
+      const instances = Array.from(useMorphInstanceStore.getState().instances.keys());
+      const currentIdx = instances.indexOf(activeInstance.id);
+      useLayoutStore.getState().removeTab(`morph-${activeInstance.id}`);
+      removeInstance(activeInstance.id);
+      if (instances.length > 1) {
+        const prevIdx = currentIdx > 0 ? currentIdx - 1 : instances.length - 2;
+        const prevId = instances.filter((id) => id !== activeInstance.id)[Math.min(prevIdx, instances.length - 2)];
+        if (prevId) {
+          useMorphInstanceStore.getState().setActiveInstance(prevId);
+          const prevInstance = useMorphInstanceStore.getState().instances.get(prevId);
+          if (prevInstance?.sourceChatId) {
+            usePlaygroundStore.getState().setActiveChatId(prevInstance.sourceChatId);
+          }
+        }
+      } else {
+        handleClose();
+      }
+    } else if (stageHistory.length > 0) {
+      useLayoutStore.getState().popStage();
+      useMorphologyStore.getState().popStage();
+    } else {
+      handleClose();
+    }
+  }, [activeInstance, stageHistory.length, handleClose, removeInstance]);
+  const toggleImmersive = useCallback6(() => {
+    setIsImmersive(!isImmersive);
+  }, [isImmersive, setIsImmersive]);
+  if (!showCanvas) return null;
+  const renderNewAPI = activeInstance && resolveShell(activeInstance.shellType);
+  const displayLabel = activeInstance?.label || activeStage?.label || (activeArtifactData ? "Artefacto" : "Lienzo");
+  const displayType = activeInstance?.shellType || renderingType;
+  return /* @__PURE__ */ jsx10(AnimatePresence3, { children: /* @__PURE__ */ jsxs10(
+    motion4.div,
+    {
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 },
+      className: "w-full h-full bg-surface-secondary flex flex-col overflow-hidden relative border-l border-border-subtle",
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-center pl-2 z-10 p-3 pb-0 shrink-0", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            (activeStage || activeArtifactData || activeInstance) && /* @__PURE__ */ jsx10("button", { onClick: handleBack, className: "p-1.5 rounded-lg hover:bg-surface-glass text-text-muted hover:text-text-primary transition-colors", title: "Volver", children: /* @__PURE__ */ jsx10(ArrowLeft2, { size: 16 }) }),
+            /* @__PURE__ */ jsxs10("h2", { className: "text-sm font-bold flex items-center gap-2 text-text-primary", children: [
+              /* @__PURE__ */ jsx10("div", { className: "w-6 h-6 rounded-lg flex items-center justify-center bg-surface-glass", children: /* @__PURE__ */ jsx10(StageIcon, { size: 12, className: stageMeta.color }) }),
+              /* @__PURE__ */ jsx10("span", { className: "truncate max-w-[180px]", children: displayLabel }),
+              /* @__PURE__ */ jsx10("span", { className: "text-text-muted font-mono text-[9px] ml-1", children: String(displayType).toUpperCase() })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            stageHistory.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "hidden md:flex items-center gap-1 text-[9px] text-text-muted font-mono", children: [
+              stageHistory.map((s, i) => /* @__PURE__ */ jsxs10(React9.Fragment, { children: [
+                /* @__PURE__ */ jsx10(
+                  "span",
+                  {
+                    className: "hover:text-text-secondary cursor-pointer",
+                    onClick: () => {
+                      const popsNeeded = stageHistory.length - i;
+                      for (let j = 0; j < popsNeeded; j++) {
+                        useLayoutStore.getState().popStage();
+                        useMorphologyStore.getState().popStage();
+                      }
+                    },
+                    children: s.label || s.type
+                  }
+                ),
+                /* @__PURE__ */ jsx10("span", { children: "\u203A" })
+              ] }, i)),
+              /* @__PURE__ */ jsx10("span", { className: "text-text-secondary", children: displayLabel })
+            ] }),
+            /* @__PURE__ */ jsx10("button", { onClick: toggleImmersive, className: "p-1.5 rounded-lg hover:bg-surface-glass text-text-muted hover:text-text-primary transition-colors", title: isImmersive ? "Salir de inmersivo" : "Modo inmersivo", children: isImmersive ? /* @__PURE__ */ jsx10(Minimize22, { size: 14 }) : /* @__PURE__ */ jsx10(Maximize22, { size: 14 }) }),
+            /* @__PURE__ */ jsx10("button", { onClick: handleClose, className: "p-1.5 bg-surface-glass hover:bg-red-500/20 text-text-secondary hover:text-red-400 rounded-full transition-colors", children: /* @__PURE__ */ jsx10(X4, { size: 14 }) })
+          ] })
+        ] }),
+        activeInstance && /* @__PURE__ */ jsx10(ArtifactBar, { instanceId: activeInstance.id }),
+        /* @__PURE__ */ jsx10("div", { className: "flex-1 relative overflow-hidden", children: renderNewAPI ? (
+          // New API: render shell from registry
+          React9.createElement(resolveShell(activeInstance.shellType), {
+            instanceId: activeInstance.id,
+            data: activeInstance.data,
+            artifacts: activeInstance.artifacts,
+            activeArtifactIndex: activeInstance.activeArtifactIndex
+          })
+        ) : (
+          // Legacy: delegate to PlaygroundCanvas
+          /* @__PURE__ */ jsx10(
+            PlaygroundCanvas,
+            {
+              showCanvas: true,
+              setShowCanvas: setShowCanvas || (() => {
+              }),
+              activeConfig,
+              prototypeBrand,
+              activeState,
+              chartData,
+              dragConstraintsRef: dragConstraintsRef || void 0
+            }
+          )
+        ) })
+      ]
+    }
+  ) });
+}
+
+export {
+  PlaygroundCanvas,
+  ArtifactBar,
+  useShellKeyboard,
+  MorphShell
+};