@decido/shell 4.0.1 → 4.0.3

package/dist/chunk-VBPGEFNM.mjs

@@ -0,0 +1,2381 @@
+import {
+  THEME_PRESETS,
+  useTheme
+} from "./chunk-JF5QSJYT.mjs";
+import {
+  useMorphologyStore
+} from "./chunk-ZCCCBHE6.mjs";
+import {
+  useMorphInstanceStore
+} from "./chunk-UHT6FIYF.mjs";
+import {
+  useUIComponentStore
+} from "./chunk-3BZX7LF2.mjs";
+import {
+  useLayoutStore
+} from "./chunk-MSVEFEXE.mjs";
+import {
+  useActionTimelineStore,
+  useDebugPanelStore
+} from "./chunk-3P4P3M54.mjs";
+import {
+  usePlaygroundStore
+} from "./chunk-XMSU6UWD.mjs";
+
+// src/components/playground/DebugPanel.tsx
+import React13 from "react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { X as X3, Bug as Bug2, Activity, Map as Map3, PlayCircle, Database as Database2, Layers as Layers3, Globe as Globe2, UserCog, Clock as Clock3, Gauge as Gauge2, Download as Download3, Palette as Palette2 } from "lucide-react";
+
+// src/components/debug/LogsTab.tsx
+import { useEffect, useRef, useMemo, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { Filter, Trash2, Copy, Check } from "lucide-react";
+
+// src/components/debug/debugConfig.tsx
+import React from "react";
+import {
+  Info,
+  AlertTriangle,
+  AlertCircle,
+  Bug,
+  Zap,
+  MessageSquare,
+  Settings,
+  GitBranch,
+  ArrowRight,
+  Circle,
+  Map as Map2
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LEVEL_CONFIG = {
+  info: { icon: Info, color: "text-blue-400", bg: "bg-blue-500/10", label: "INFO" },
+  warn: { icon: AlertTriangle, color: "text-amber-400", bg: "bg-amber-500/10", label: "WARN" },
+  error: { icon: AlertCircle, color: "text-red-400", bg: "bg-red-500/10", label: "ERROR" },
+  debug: { icon: Bug, color: "text-purple-400", bg: "bg-purple-500/10", label: "DEBUG" }
+};
+var TRACK_CONFIG = {
+  trigger: { icon: Zap, color: "text-yellow-400", label: "Trigger" },
+  dialogue: { icon: MessageSquare, color: "text-blue-400", label: "Di\xE1logo" },
+  logic: { icon: Settings, color: "text-orange-400", label: "L\xF3gica" },
+  ui: { icon: Map2, color: "text-green-400", label: "UI" },
+  render: { icon: Map2, color: "text-pink-400", label: "Render" },
+  condition: { icon: GitBranch, color: "text-amber-400", label: "Condici\xF3n" },
+  subflow: { icon: ArrowRight, color: "text-purple-400", label: "Subflow" },
+  entry: { icon: Circle, color: "text-emerald-400", label: "Entry" },
+  return: { icon: ArrowRight, color: "text-red-400", label: "Return" },
+  set: { icon: Settings, color: "text-cyan-400", label: "Variable" },
+  morph: { icon: Map2, color: "text-violet-400", label: "Morph" }
+};
+var LogRow = React.memo(function LogRow2({ entry }) {
+  const cfg = LEVEL_CONFIG[entry.level];
+  const Icon = cfg.icon;
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-start gap-2 px-3 py-1 hover:bg-surface-glass font-mono text-[11px] leading-relaxed border-b border-border-subtle ${cfg.bg}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-text-muted shrink-0 w-[70px] pt-0.5", children: entry.timestamp }),
+    /* @__PURE__ */ jsx(Icon, { size: 12, className: `${cfg.color} shrink-0 mt-0.5` }),
+    /* @__PURE__ */ jsx("span", { className: `font-bold shrink-0 w-[38px] ${cfg.color}`, children: cfg.label }),
+    entry.categories.length > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex gap-1", children: entry.categories.map((c, i) => /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 rounded text-[9px] font-bold bg-surface-glass text-text-secondary uppercase tracking-widest", children: c }, i)) }),
+    /* @__PURE__ */ jsx("span", { className: "text-text-primary flex-1 break-all", children: entry.message }),
+    entry.data !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-text-muted shrink-0 truncate max-w-[200px]", children: typeof entry.data === "object" ? JSON.stringify(entry.data) : String(entry.data) })
+  ] });
+});
+
+// src/components/debug/LogsTab.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function LogsTab() {
+  const logEntries = useDebugPanelStore((s) => s.logEntries);
+  const logFilters = useDebugPanelStore((s) => s.logFilters);
+  const allCategories = useDebugPanelStore((s) => s.allCategories);
+  const clearLogs = useDebugPanelStore((s) => s.clearLogs);
+  const toggleLevel = useDebugPanelStore((s) => s.toggleLevel);
+  const toggleCategory = useDebugPanelStore((s) => s.toggleCategory);
+  const [showFilters, setShowFilters] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [logEntries.length]);
+  const filteredEntries = useMemo(() => {
+    return logEntries.filter((e) => {
+      if (!logFilters.levels.has(e.level)) return false;
+      if (logFilters.categories.size > 0 && !e.categories.some((c) => logFilters.categories.has(c))) return false;
+      return true;
+    });
+  }, [logEntries, logFilters]);
+  const catArray = useMemo(() => Array.from(allCategories).sort(), [allCategories]);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle shrink-0 bg-surface-primary/50", children: [
+      /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: Object.keys(LEVEL_CONFIG).map((lvl) => {
+        const cfg = LEVEL_CONFIG[lvl];
+        const active = logFilters.levels.has(lvl);
+        const count = logEntries.filter((e) => e.level === lvl).length;
+        return /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            onClick: () => toggleLevel(lvl),
+            className: `flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold transition-all border ${active ? `${cfg.bg} ${cfg.color} border-current/20` : "bg-transparent text-text-muted border-transparent hover:text-text-secondary"}`,
+            children: [
+              cfg.label,
+              count > 0 && /* @__PURE__ */ jsx2("span", { className: "text-[9px] opacity-60", children: count })
+            ]
+          },
+          lvl
+        );
+      }) }),
+      /* @__PURE__ */ jsx2("div", { className: "flex-1" }),
+      catArray.length > 0 && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => setShowFilters(!showFilters),
+          className: `p-1 rounded transition-colors ${showFilters ? "bg-cyan-500/20 text-cyan-400" : "text-text-muted hover:text-text-primary hover:bg-surface-glass"}`,
+          title: "Filtrar categor\xEDas",
+          children: /* @__PURE__ */ jsx2(Filter, { size: 12 })
+        }
+      ),
+      /* @__PURE__ */ jsxs2("span", { className: "text-[10px] text-text-muted font-mono", children: [
+        filteredEntries.length,
+        "/",
+        logEntries.length
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => {
+            const text = filteredEntries.map((e) => {
+              const cats = e.categories.length > 0 ? ` [${e.categories.join(",")}]` : "";
+              const data = e.data !== void 0 ? ` | ${typeof e.data === "object" ? JSON.stringify(e.data) : String(e.data)}` : "";
+              return `[${e.timestamp}] ${LEVEL_CONFIG[e.level].label}${cats}  ${e.message}${data}`;
+            }).join("\n");
+            navigator.clipboard.writeText(text).then(() => {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1500);
+            });
+          },
+          className: `p-1 rounded transition-colors ${copied ? "text-green-400 bg-green-500/10" : "text-text-muted hover:text-cyan-400 hover:bg-cyan-500/10"}`,
+          title: "Copiar logs visibles",
+          children: copied ? /* @__PURE__ */ jsx2(Check, { size: 12 }) : /* @__PURE__ */ jsx2(Copy, { size: 12 })
+        }
+      ),
+      /* @__PURE__ */ jsx2("button", { onClick: clearLogs, className: "p-1 rounded text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors", title: "Limpiar logs", children: /* @__PURE__ */ jsx2(Trash2, { size: 12 }) })
+    ] }),
+    /* @__PURE__ */ jsx2(AnimatePresence, { children: showFilters && catArray.length > 0 && /* @__PURE__ */ jsx2(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, className: "overflow-hidden border-b border-border-subtle", children: /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1 px-3 py-2 bg-surface-primary/80", children: catArray.map((cat) => {
+      const active = logFilters.categories.size === 0 || logFilters.categories.has(cat);
+      return /* @__PURE__ */ jsx2("button", { onClick: () => toggleCategory(cat), className: `px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider transition-all border ${active ? "bg-cyan-500/10 text-cyan-400 border-cyan-500/20" : "bg-transparent text-text-muted border-transparent hover:text-text-secondary"}`, children: cat }, cat);
+    }) }) }) }),
+    /* @__PURE__ */ jsx2("div", { ref: scrollRef, className: "flex-1 overflow-y-auto custom-scrollbar", children: filteredEntries.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center h-full text-text-muted text-xs font-mono", children: "Sin entradas de log" }) : filteredEntries.map((entry) => /* @__PURE__ */ jsx2(LogRow, { entry }, entry.id)) })
+  ] });
+}
+
+// src/components/debug/FlowHealthTab.tsx
+import { useMemo as useMemo2 } from "react";
+import { AlertTriangle as AlertTriangle2, XCircle, Info as Info2, CheckCircle, Circle as Circle2 } from "lucide-react";
+import { useTimelineStore } from "@decido/engine";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FlowHealthTab() {
+  const prototypeBrand = usePlaygroundStore((s) => s.prototypeBrand);
+  const timelines = useTimelineStore((s) => s.timelines);
+  const flow = timelines[prototypeBrand];
+  const analysis = useMemo2(() => {
+    if (!flow) return null;
+    const kfs = flow.keyframes || [];
+    const edges = flow.edges || [];
+    const nodeIds = new Set(kfs.map((k) => k.id));
+    const trackCounts = {};
+    kfs.forEach((k) => {
+      const t = k.track || "unknown";
+      trackCounts[t] = (trackCounts[t] || 0) + 1;
+    });
+    const hasIncoming = new Set(edges.map((e) => e.target));
+    const hasOutgoing = new Set(edges.map((e) => e.source));
+    const orphans = kfs.filter((k) => {
+      if (k.track === "trigger" || k.track === "entry") return false;
+      return !hasIncoming.has(k.id) && edges.length > 0;
+    });
+    const terminals = kfs.filter((k) => hasIncoming.has(k.id) && !hasOutgoing.has(k.id) && k.track !== "return");
+    const deadEdges = edges.filter((e) => !nodeIds.has(e.target) || !nodeIds.has(e.source));
+    const unlabeled = kfs.filter((k) => !k.label && !k.state && k.track !== "trigger");
+    const issues = orphans.length + deadEdges.length + unlabeled.length;
+    const score = Math.max(0, Math.min(100, 100 - issues * 10));
+    return { kfs, edges, trackCounts, orphans, terminals, deadEdges, unlabeled, score, issues };
+  }, [flow]);
+  if (!flow || !analysis) return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center h-full text-text-muted text-xs font-mono", children: "Sin blueprint activo" });
+  const scoreColor = analysis.score >= 80 ? "text-green-400" : analysis.score >= 50 ? "text-amber-400" : "text-red-400";
+  const scoreBg = analysis.score >= 80 ? "bg-green-500/10" : analysis.score >= 50 ? "bg-amber-500/10" : "bg-red-500/10";
+  return /* @__PURE__ */ jsxs3("div", { className: "h-full overflow-y-auto custom-scrollbar p-4 space-y-4", children: [
+    /* @__PURE__ */ jsxs3("div", { className: `flex items-center gap-4 p-4 rounded-xl ${scoreBg} border border-border-subtle`, children: [
+      /* @__PURE__ */ jsx3("div", { className: `text-4xl font-black ${scoreColor} font-mono`, children: analysis.score }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("div", { className: `text-sm font-bold ${scoreColor}`, children: analysis.score >= 80 ? "\u2705 Saludable" : analysis.score >= 50 ? "\u26A0\uFE0F Revisar" : "\u{1F534} Problemas detectados" }),
+        /* @__PURE__ */ jsxs3("div", { className: "text-[11px] text-text-muted", children: [
+          analysis.kfs.length,
+          " nodos \xB7 ",
+          analysis.edges.length,
+          " conexiones \xB7 ",
+          analysis.issues,
+          " problemas"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx3("div", { className: "text-[11px] font-bold text-text-secondary uppercase tracking-widest", children: "Distribuci\xF3n por Track" }),
+      /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-2", children: Object.entries(analysis.trackCounts).map(([track, count]) => {
+        const cfg = TRACK_CONFIG[track] || { icon: Circle2, color: "text-text-secondary", label: track };
+        const Icon = cfg.icon;
+        return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-glass border border-border-subtle", children: [
+          /* @__PURE__ */ jsx3(Icon, { size: 14, className: cfg.color }),
+          /* @__PURE__ */ jsx3("span", { className: "text-[11px] text-text-primary font-semibold", children: cfg.label }),
+          /* @__PURE__ */ jsx3("span", { className: "ml-auto text-[11px] font-mono text-text-muted", children: count })
+        ] }, track);
+      }) })
+    ] }),
+    analysis.orphans.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "text-[11px] font-bold text-amber-400 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx3(AlertTriangle2, { size: 12 }),
+        " Nodos Hu\xE9rfanos (",
+        analysis.orphans.length,
+        ")"
+      ] }),
+      analysis.orphans.map((k) => /* @__PURE__ */ jsxs3("div", { className: "pl-5 text-[11px] text-text-muted font-mono", children: [
+        "\xB7 ",
+        k.label || k.id,
+        " ",
+        /* @__PURE__ */ jsxs3("span", { className: "text-text-muted", children: [
+          "(",
+          k.track,
+          ")"
+        ] })
+      ] }, k.id))
+    ] }),
+    analysis.deadEdges.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "text-[11px] font-bold text-red-400 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx3(XCircle, { size: 12 }),
+        " Conexiones Rotas (",
+        analysis.deadEdges.length,
+        ")"
+      ] }),
+      analysis.deadEdges.map((e, i) => /* @__PURE__ */ jsxs3("div", { className: "pl-5 text-[11px] text-text-muted font-mono", children: [
+        "\xB7 ",
+        e.source,
+        " \u2192 ",
+        e.target
+      ] }, i))
+    ] }),
+    analysis.unlabeled.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "text-[11px] font-bold text-text-muted flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx3(Info2, { size: 12 }),
+        " Sin Etiqueta (",
+        analysis.unlabeled.length,
+        ")"
+      ] }),
+      analysis.unlabeled.slice(0, 5).map((k) => /* @__PURE__ */ jsxs3("div", { className: "pl-5 text-[11px] text-text-muted font-mono", children: [
+        "\xB7 ",
+        k.id,
+        " ",
+        /* @__PURE__ */ jsxs3("span", { className: "text-text-muted", children: [
+          "(",
+          k.track,
+          ")"
+        ] })
+      ] }, k.id))
+    ] }),
+    analysis.terminals.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "text-[11px] font-bold text-text-secondary flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx3(CheckCircle, { size: 12 }),
+        " Nodos Terminales (",
+        analysis.terminals.length,
+        ")"
+      ] }),
+      analysis.terminals.map((k) => /* @__PURE__ */ jsxs3("div", { className: "pl-5 text-[11px] text-text-muted font-mono", children: [
+        "\xB7 ",
+        k.label || k.id,
+        " ",
+        /* @__PURE__ */ jsxs3("span", { className: "text-text-muted", children: [
+          "(",
+          k.track,
+          ")"
+        ] })
+      ] }, k.id))
+    ] })
+  ] });
+}
+
+// src/components/debug/TopologyTab.tsx
+import { ArrowRight as ArrowRight2, Circle as Circle3 } from "lucide-react";
+import { useTimelineStore as useTimelineStore2 } from "@decido/engine";
+import { useEngineStore } from "@decido/engine";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TopologyTab() {
+  const prototypeBrand = usePlaygroundStore((s) => s.prototypeBrand);
+  const timelines = useTimelineStore2((s) => s.timelines);
+  const activeNodeIds = useEngineStore((s) => s.activeNodeIds);
+  const flow = timelines[prototypeBrand];
+  if (!flow) return /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center h-full text-text-muted text-xs font-mono", children: "Sin blueprint activo" });
+  const kfs = flow.keyframes || [];
+  const edges = flow.edges || [];
+  const activeSet = new Set(activeNodeIds);
+  return /* @__PURE__ */ jsxs4("div", { className: "h-full overflow-y-auto custom-scrollbar p-3", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "text-[10px] font-bold text-text-muted uppercase tracking-widest mb-3", children: [
+      "Grafo: ",
+      flow.name || prototypeBrand,
+      " \xB7 ",
+      kfs.length,
+      " nodos \xB7 ",
+      edges.length,
+      " aristas"
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "space-y-1", children: kfs.map((kf) => {
+      const cfg = TRACK_CONFIG[kf.track] || { icon: Circle3, color: "text-text-secondary", label: kf.track };
+      const Icon = cfg.icon;
+      const isActive = activeSet.has(kf.id);
+      const outEdges = edges.filter((e) => e.source === kf.id);
+      return /* @__PURE__ */ jsxs4("div", { className: `group rounded-lg border transition-all ${isActive ? "bg-cyan-500/10 border-cyan-500/30 ring-1 ring-cyan-500/20" : "bg-surface-glass border-border-subtle hover:bg-surface-glass"}`, children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 px-3 py-2", children: [
+          /* @__PURE__ */ jsx4(Icon, { size: 13, className: cfg.color }),
+          /* @__PURE__ */ jsx4("span", { className: `text-[11px] font-semibold flex-1 ${isActive ? "text-cyan-300" : "text-text-primary"}`, children: kf.label || kf.state || kf.id }),
+          /* @__PURE__ */ jsx4("span", { className: "text-[9px] text-text-muted font-mono", children: kf.track }),
+          isActive && /* @__PURE__ */ jsx4("span", { className: "w-2 h-2 rounded-full bg-cyan-400 animate-pulse" })
+        ] }),
+        outEdges.length > 0 && /* @__PURE__ */ jsx4("div", { className: "px-3 pb-2 flex flex-wrap gap-1", children: outEdges.map((e, i) => {
+          const target = kfs.find((k) => k.id === e.target);
+          return /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1 text-[9px] text-text-muted bg-surface-glass rounded px-1.5 py-0.5", children: [
+            /* @__PURE__ */ jsx4(ArrowRight2, { size: 8, className: "text-text-muted" }),
+            target?.label || target?.state || e.target,
+            e.sourceHandle && e.sourceHandle !== "success" && /* @__PURE__ */ jsxs4("span", { className: "text-amber-500/70", children: [
+              "(",
+              e.sourceHandle,
+              ")"
+            ] })
+          ] }, i);
+        }) })
+      ] }, kf.id);
+    }) })
+  ] });
+}
+
+// src/components/debug/ReplayTab.tsx
+import { useMemo as useMemo3, useState as useState2 } from "react";
+import { SkipBack, SkipForward } from "lucide-react";
+import { useEngineStore as useEngineStore2 } from "@decido/engine";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ReplayTab() {
+  const logEntries = useDebugPanelStore((s) => s.logEntries);
+  const activeNodeIds = useEngineStore2((s) => s.activeNodeIds);
+  const [selectedIdx, setSelectedIdx] = useState2(-1);
+  const engineLogs = useMemo3(() => {
+    return logEntries.filter(
+      (e) => e.categories.some((c) => ["ENGINE", "PLUGIN:DIALOGUE", "PLUGIN:LOGIC", "PLUGIN:SUBFLOW", "PLUGIN:RETURN", "PLUGIN:UI", "PLUGIN:UIRENDER"].includes(c.toUpperCase())) || e.message.includes("\u{1F680}") || e.message.includes("\u{1F500}") || e.message.includes("\u{1F5E3}") || e.message.includes("\u26A1") || e.message.includes("\u{1F3C1}")
+    );
+  }, [logEntries]);
+  const selected = selectedIdx >= 0 ? engineLogs[selectedIdx] : null;
+  return /* @__PURE__ */ jsxs5("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border-subtle shrink-0 bg-surface-primary/50", children: [
+      /* @__PURE__ */ jsx5("button", { onClick: () => setSelectedIdx(Math.max(0, selectedIdx - 1)), disabled: selectedIdx <= 0, className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass disabled:opacity-30 transition-colors", children: /* @__PURE__ */ jsx5(SkipBack, { size: 14 }) }),
+      /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-text-muted font-mono w-16 text-center", children: selectedIdx >= 0 ? `${selectedIdx + 1}/${engineLogs.length}` : `\u2014/${engineLogs.length}` }),
+      /* @__PURE__ */ jsx5("button", { onClick: () => setSelectedIdx(Math.min(engineLogs.length - 1, selectedIdx + 1)), disabled: selectedIdx >= engineLogs.length - 1, className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass disabled:opacity-30 transition-colors", children: /* @__PURE__ */ jsx5(SkipForward, { size: 14 }) }),
+      /* @__PURE__ */ jsx5("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-text-muted", children: activeNodeIds.length > 0 && `Nodo activo: ${activeNodeIds[0]?.substring(0, 12)}...` })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: engineLogs.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center h-full text-text-muted text-xs font-mono", children: "Ejecuta un flujo para ver el replay" }) : /* @__PURE__ */ jsx5("div", { className: "py-1", children: engineLogs.map((entry, idx) => {
+      const isSelected = idx === selectedIdx;
+      const isPast = idx < selectedIdx;
+      return /* @__PURE__ */ jsxs5("button", { onClick: () => setSelectedIdx(idx), className: `w-full flex items-start gap-2 px-3 py-1.5 text-left transition-all border-l-2 ${isSelected ? "bg-amber-500/10 border-amber-400 text-amber-300" : isPast ? "border-border-default text-text-muted hover:bg-surface-glass" : "border-transparent text-text-secondary hover:bg-surface-glass"}`, children: [
+        /* @__PURE__ */ jsx5("span", { className: `shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[9px] font-bold mt-0.5 ${isSelected ? "bg-amber-500/20 text-amber-400" : isPast ? "bg-surface-glass text-text-muted" : "bg-surface-glass text-text-muted"}`, children: idx + 1 }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx5("div", { className: "text-[11px] font-mono truncate", children: entry.message }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mt-0.5", children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-[9px] text-text-muted", children: entry.timestamp }),
+            entry.categories.map((c, i) => /* @__PURE__ */ jsx5("span", { className: "text-[8px] px-1 py-0.5 rounded bg-surface-glass text-text-muted uppercase tracking-widest", children: c }, i))
+          ] })
+        ] })
+      ] }, entry.id);
+    }) }) }),
+    selected && /* @__PURE__ */ jsxs5("div", { className: "border-t border-border-subtle px-3 py-2 bg-surface-primary/80 shrink-0", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "text-[10px] font-bold text-text-secondary mb-1", children: [
+        "Detalle del paso ",
+        selectedIdx + 1
+      ] }),
+      /* @__PURE__ */ jsx5("div", { className: "text-[11px] text-text-primary font-mono break-all", children: selected.message }),
+      selected.data && /* @__PURE__ */ jsx5("pre", { className: "text-[10px] text-text-muted font-mono mt-1 max-h-20 overflow-y-auto", children: typeof selected.data === "object" ? JSON.stringify(selected.data, null, 2) : String(selected.data) })
+    ] })
+  ] });
+}
+
+// src/components/debug/StoresTab.tsx
+import { useState as useState3, useMemo as useMemo4, useCallback, useSyncExternalStore } from "react";
+import { Database, Zap as Zap2, ChevronRight, ChevronDown, ToggleLeft, ToggleRight, Camera, ArrowLeftRight, Download } from "lucide-react";
+import { useEngineStore as useEngineStore3, useTimelineStore as useTimelineStore3, useUserStateStore } from "@decido/engine";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var _shellStores = null;
+function getShellStores() {
+  if (_shellStores) return _shellStores;
+  const registry = globalThis.__DECIDO_SHELL_STORES__;
+  _shellStores = registry || [];
+  return _shellStores;
+}
+var STUDIO_STORES = [
+  { name: "Playground", group: "studio", store: usePlaygroundStore },
+  { name: "Engine", group: "studio", store: useEngineStore3 },
+  { name: "Timeline", group: "studio", store: useTimelineStore3 },
+  { name: "Morphology", group: "studio", store: useMorphologyStore },
+  { name: "UserState", group: "studio", store: useUserStateStore },
+  { name: "UIComponents", group: "studio", store: useUIComponentStore }
+];
+function ValueEditor({ value, path, onUpdate, depth = 0 }) {
+  const [collapsed, setCollapsed] = useState3(depth > 1);
+  if (value === null || value === void 0) return /* @__PURE__ */ jsx6("span", { className: "text-text-muted italic text-[10px] font-mono", children: String(value) });
+  if (typeof value === "function") return null;
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsxs6("button", { onClick: () => onUpdate(path, !value), className: `flex items-center gap-1 text-[10px] font-mono transition-colors ${value ? "text-emerald-400" : "text-text-muted"}`, children: [
+      value ? /* @__PURE__ */ jsx6(ToggleRight, { size: 14 }) : /* @__PURE__ */ jsx6(ToggleLeft, { size: 14 }),
+      String(value)
+    ] });
+  }
+  if (typeof value === "number") return /* @__PURE__ */ jsx6("input", { type: "number", value, onChange: (e) => onUpdate(path, Number(e.target.value)), className: "bg-surface-tertiary border border-border-default rounded px-1.5 py-0.5 text-[10px] font-mono text-cyan-300 w-24 outline-hidden focus:border-cyan-500/50" });
+  if (typeof value === "string") return /* @__PURE__ */ jsx6("input", { type: "text", value, onChange: (e) => onUpdate(path, e.target.value), className: "bg-surface-tertiary border border-border-default rounded px-1.5 py-0.5 text-[10px] font-mono text-amber-300 flex-1 min-w-[80px] max-w-[300px] outline-hidden focus:border-amber-500/50" });
+  const tag = Object.prototype.toString.call(value);
+  if (tag === "[object Map]") {
+    const entries = Array.from(value.entries());
+    return /* @__PURE__ */ jsxs6("div", { className: "pl-3 border-l border-border-subtle", children: [
+      /* @__PURE__ */ jsxs6("button", { onClick: () => setCollapsed(!collapsed), className: "flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary", children: [
+        collapsed ? /* @__PURE__ */ jsx6(ChevronRight, { size: 10 }) : /* @__PURE__ */ jsx6(ChevronDown, { size: 10 }),
+        /* @__PURE__ */ jsx6("span", { className: "text-violet-400", children: "Map" }),
+        "(",
+        entries.length,
+        ")"
+      ] }),
+      !collapsed && entries.map((entry, i) => /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 py-0.5 pl-2", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "text-[10px] text-text-muted font-mono shrink-0", children: [
+          String(entry[0]),
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx6(ValueEditor, { value: entry[1], path: `${path}.${String(entry[0])}`, onUpdate: () => {
+        }, depth: depth + 1 })
+      ] }, i))
+    ] });
+  }
+  if (tag === "[object Set]") {
+    const items = Array.from(value);
+    return /* @__PURE__ */ jsxs6("div", { className: "pl-3 border-l border-border-subtle", children: [
+      /* @__PURE__ */ jsxs6("button", { onClick: () => setCollapsed(!collapsed), className: "flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary", children: [
+        collapsed ? /* @__PURE__ */ jsx6(ChevronRight, { size: 10 }) : /* @__PURE__ */ jsx6(ChevronDown, { size: 10 }),
+        /* @__PURE__ */ jsx6("span", { className: "text-violet-400", children: "Set" }),
+        "(",
+        items.length,
+        ")"
+      ] }),
+      !collapsed && items.map((v, i) => /* @__PURE__ */ jsx6("div", { className: "pl-2 py-0.5", children: /* @__PURE__ */ jsx6(ValueEditor, { value: v, path: `${path}[${i}]`, onUpdate: () => {
+      }, depth: depth + 1 }) }, i))
+    ] });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ jsxs6("div", { className: "pl-3 border-l border-border-subtle", children: [
+      /* @__PURE__ */ jsxs6("button", { onClick: () => setCollapsed(!collapsed), className: "flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary", children: [
+        collapsed ? /* @__PURE__ */ jsx6(ChevronRight, { size: 10 }) : /* @__PURE__ */ jsx6(ChevronDown, { size: 10 }),
+        /* @__PURE__ */ jsx6("span", { className: "text-blue-400", children: "Array" }),
+        /* @__PURE__ */ jsxs6("span", { className: "text-text-muted", children: [
+          "[",
+          value.length,
+          "]"
+        ] })
+      ] }),
+      !collapsed && value.slice(0, 50).map((item, i) => /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 py-0.5 pl-2", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-[9px] text-text-muted font-mono shrink-0 w-4 text-right", children: i }),
+        /* @__PURE__ */ jsx6(ValueEditor, { value: item, path: `${path}[${i}]`, onUpdate, depth: depth + 1 })
+      ] }, i)),
+      value.length > 50 && /* @__PURE__ */ jsxs6("span", { className: "text-[9px] text-text-muted pl-2", children: [
+        "... +",
+        value.length - 50,
+        " m\xE1s"
+      ] })
+    ] });
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value).filter(([, v]) => typeof v !== "function");
+    return /* @__PURE__ */ jsxs6("div", { className: "pl-3 border-l border-border-subtle", children: [
+      /* @__PURE__ */ jsxs6("button", { onClick: () => setCollapsed(!collapsed), className: "flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary", children: [
+        collapsed ? /* @__PURE__ */ jsx6(ChevronRight, { size: 10 }) : /* @__PURE__ */ jsx6(ChevronDown, { size: 10 }),
+        /* @__PURE__ */ jsx6("span", { className: "text-orange-400", children: `{${entries.length}}` })
+      ] }),
+      !collapsed && entries.map(([k, v]) => /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 py-0.5 pl-2", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "text-[10px] text-text-secondary font-mono shrink-0", children: [
+          k,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx6(ValueEditor, { value: v, path: `${path}.${k}`, onUpdate, depth: depth + 1 })
+      ] }, k))
+    ] });
+  }
+  return /* @__PURE__ */ jsx6("span", { className: "text-text-muted text-[10px] font-mono", children: String(value) });
+}
+function StoresTab() {
+  const allStores = useMemo4(() => [...getShellStores(), ...STUDIO_STORES], []);
+  const [activeStore, setActiveStore] = useState3(allStores[0]?.name || "");
+  const entry = useMemo4(() => allStores.find((s) => s.name === activeStore), [allStores, activeStore]);
+  const storeSnapshot = useSyncExternalStore(
+    useCallback((cb) => entry?.store?.subscribe?.(cb) || (() => {
+    }), [entry]),
+    useCallback(() => entry?.store?.getState?.() ?? {}, [entry])
+  );
+  const { stateEntries, actionEntries } = useMemo4(() => {
+    const stateE = [];
+    const actionE = [];
+    for (const [k, v] of Object.entries(storeSnapshot)) {
+      if (typeof v === "function") actionE.push([k, v]);
+      else stateE.push([k, v]);
+    }
+    return { stateEntries: stateE, actionEntries: actionE };
+  }, [storeSnapshot]);
+  const handleUpdate = useCallback((path, newValue) => {
+    if (!entry) return;
+    const parts = path.split(".");
+    const topKey = parts[1];
+    if (!topKey) return;
+    if (parts.length === 2) {
+      entry.store.setState({ [topKey]: newValue });
+    } else {
+      const current = entry.store.getState()[topKey];
+      try {
+        const clone = JSON.parse(JSON.stringify(current));
+        let target = clone;
+        for (let i = 2; i < parts.length - 1; i++) target = target[parts[i].replace(/\[(\d+)\]/, ".$1")];
+        const lastKey = parts[parts.length - 1].replace(/\[(\d+)\]/, "$1");
+        target[lastKey] = newValue;
+        entry.store.setState({ [topKey]: clone });
+      } catch {
+        entry.store.setState({ [topKey]: newValue });
+      }
+    }
+  }, [entry]);
+  const [actionFeedback, setActionFeedback] = useState3(null);
+  const [snapshots, setSnapshots] = useState3([]);
+  const [showDiff, setShowDiff] = useState3(null);
+  return /* @__PURE__ */ jsxs6("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsx6("div", { className: "w-32 shrink-0 border-r border-border-subtle overflow-y-auto bg-surface-primary/50", children: ["shell", "studio"].map((group) => {
+      const groupStores = allStores.filter((s) => s.group === group);
+      if (groupStores.length === 0) return null;
+      return /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx6("div", { className: "px-2 py-1 text-[8px] font-bold text-text-muted uppercase tracking-widest", children: group }),
+        groupStores.map((s) => /* @__PURE__ */ jsx6("button", { onClick: () => setActiveStore(s.name), className: `w-full text-left px-2 py-1.5 text-[10px] font-semibold transition-all ${activeStore === s.name ? "bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400" : "text-text-muted hover:text-text-primary hover:bg-surface-glass"}`, children: s.name }, s.name))
+      ] }, group);
+    }) }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-3 space-y-3", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsxs6("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-widest mb-2 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx6(Database, { size: 10 }),
+          " Estado (",
+          stateEntries.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "space-y-1", children: stateEntries.map(([key, value]) => /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 py-0.5", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-[10px] text-text-primary font-mono font-semibold shrink-0 min-w-[100px]", children: key }),
+          /* @__PURE__ */ jsx6(ValueEditor, { value, path: `root.${key}`, onUpdate: handleUpdate, depth: 0 })
+        ] }, key)) })
+      ] }),
+      actionEntries.length > 0 && /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsxs6("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-widest mb-2 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx6(Zap2, { size: 10 }),
+          " Acciones (",
+          actionEntries.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-1", children: actionEntries.map(([name, fn]) => /* @__PURE__ */ jsxs6("button", { onClick: () => {
+          try {
+            const r = fn();
+            if (r instanceof Promise) r.catch((e) => setActionFeedback(`\u274C ${name}: ${e.message}`));
+            setActionFeedback(`\u2705 ${name}()`);
+          } catch (e) {
+            setActionFeedback(`\u274C ${name}: ${e.message}`);
+          }
+          setTimeout(() => setActionFeedback(null), 2e3);
+        }, className: "px-2 py-1 rounded text-[9px] font-mono font-bold bg-surface-glass text-text-secondary hover:text-emerald-400 hover:bg-emerald-500/10 border border-border-subtle hover:border-emerald-500/20 transition-all", title: `Ejecutar ${name}()`, children: [
+          "\u25B6 ",
+          name
+        ] }, name)) }),
+        actionFeedback && /* @__PURE__ */ jsx6("div", { className: "mt-2 text-[10px] font-mono text-text-secondary animate-pulse", children: actionFeedback })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "border-t border-border-subtle pt-3 mt-3", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-widest mb-2 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx6(Camera, { size: 10 }),
+          " Snapshots"
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap gap-1 mb-2", children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: () => {
+                if (!entry) return;
+                const state = entry.store.getState();
+                const snap = {};
+                for (const [k, v] of Object.entries(state)) {
+                  if (typeof v !== "function") snap[k] = v;
+                }
+                setSnapshots((prev) => [...prev, {
+                  id: Date.now(),
+                  label: `${activeStore} @ ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`,
+                  data: JSON.parse(JSON.stringify(snap, (_, v) => {
+                    if (v instanceof Map) return Object.fromEntries(v);
+                    if (v instanceof Set) return Array.from(v);
+                    return v;
+                  }))
+                }]);
+              },
+              className: "px-2 py-1 rounded text-[9px] font-mono font-bold bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 border border-violet-500/20",
+              children: "\u{1F4F8} Snapshot"
+            }
+          ),
+          snapshots.length > 0 && showDiff === null && /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              onClick: () => setShowDiff(snapshots[snapshots.length - 1].id),
+              className: "px-2 py-1 rounded text-[9px] font-mono font-bold bg-cyan-500/10 text-cyan-400 hover:bg-cyan-500/20 border border-cyan-500/20",
+              children: [
+                /* @__PURE__ */ jsx6(ArrowLeftRight, { size: 10, className: "inline mr-1" }),
+                "Diff vs \xFAltimo"
+              ]
+            }
+          ),
+          showDiff !== null && /* @__PURE__ */ jsx6("button", { onClick: () => setShowDiff(null), className: "px-2 py-1 rounded text-[9px] font-mono bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary", children: "Cerrar diff" }),
+          snapshots.length > 0 && /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              onClick: () => {
+                const blob = new Blob([JSON.stringify(snapshots, null, 2)], { type: "application/json" });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url;
+                a.download = `snapshots-${activeStore}.json`;
+                a.click();
+                URL.revokeObjectURL(url);
+              },
+              className: "px-2 py-1 rounded text-[9px] font-mono text-text-muted hover:text-text-primary hover:bg-surface-glass",
+              children: [
+                /* @__PURE__ */ jsx6(Download, { size: 10, className: "inline mr-1" }),
+                "Export"
+              ]
+            }
+          )
+        ] }),
+        snapshots.map((snap, i) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 py-0.5 text-[9px]", children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-text-muted font-mono", children: snap.label }),
+          /* @__PURE__ */ jsx6("button", { onClick: () => setShowDiff(showDiff === snap.id ? null : snap.id), className: `px-1.5 py-0.5 rounded font-bold ${showDiff === snap.id ? "bg-cyan-500/20 text-cyan-400" : "text-text-muted hover:text-cyan-400"}`, children: "diff" }),
+          /* @__PURE__ */ jsx6("button", { onClick: () => setSnapshots((prev) => prev.filter((s) => s.id !== snap.id)), className: "text-text-muted hover:text-red-400", children: "\xD7" })
+        ] }, snap.id)),
+        showDiff !== null && (() => {
+          const snap = snapshots.find((s) => s.id === showDiff);
+          if (!snap) return null;
+          const current = {};
+          for (const [k, v] of stateEntries) current[k] = v;
+          const allKeys = /* @__PURE__ */ new Set([...Object.keys(snap.data), ...Object.keys(current)]);
+          return /* @__PURE__ */ jsxs6("div", { className: "mt-2 bg-surface-primary rounded border border-border-subtle p-2 max-h-[200px] overflow-y-auto custom-scrollbar", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "text-[8px] text-text-muted mb-1", children: [
+              "Diff: ",
+              snap.label,
+              " \u2192 actual"
+            ] }),
+            Array.from(allKeys).map((key) => {
+              const oldVal = JSON.stringify(snap.data[key]);
+              const newVal = JSON.stringify(current[key], (_, v) => {
+                if (v instanceof Map) return Object.fromEntries(v);
+                if (v instanceof Set) return Array.from(v);
+                return v;
+              });
+              if (oldVal === newVal) return null;
+              return /* @__PURE__ */ jsxs6("div", { className: "py-0.5 font-mono text-[9px]", children: [
+                /* @__PURE__ */ jsxs6("span", { className: "text-text-secondary font-semibold", children: [
+                  key,
+                  ":"
+                ] }),
+                oldVal !== void 0 && /* @__PURE__ */ jsxs6("div", { className: "text-red-400/70 pl-3", children: [
+                  "- ",
+                  oldVal?.slice(0, 100)
+                ] }),
+                newVal !== void 0 && /* @__PURE__ */ jsxs6("div", { className: "text-emerald-400/70 pl-3", children: [
+                  "+ ",
+                  newVal?.slice(0, 100)
+                ] })
+              ] }, key);
+            })
+          ] });
+        })()
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/debug/MorphStackTab.tsx
+import { useMemo as useMemo5, useEffect as useEffect2, useState as useState4, useRef as useRef2 } from "react";
+import { Layers, AlertTriangle as AlertTriangle3, ArrowUp, Clock, RotateCcw } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var _eventId = 0;
+var MAX_EVENTS = 100;
+var STAGE_ICONS = {
+  "2d": "\u{1F4CA}",
+  "3d": "\u{1F9CA}",
+  workbench: "\u{1F527}",
+  liquid: "\u{1F4A7}",
+  artifact: "\u{1F4C4}",
+  custom: "\u2699\uFE0F"
+};
+var STAGE_COLORS = {
+  "2d": "border-cyan-500 bg-cyan-500/10",
+  "3d": "border-violet-500 bg-violet-500/10",
+  workbench: "border-amber-500 bg-amber-500/10",
+  liquid: "border-blue-500 bg-blue-500/10",
+  artifact: "border-emerald-500 bg-emerald-500/10",
+  custom: "border-border-default bg-surface-glass"
+};
+function getTimestamp() {
+  const now = /* @__PURE__ */ new Date();
+  return `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}:${String(now.getSeconds()).padStart(2, "0")}`;
+}
+function MorphStackTab() {
+  const morphActiveStage = useMorphologyStore((s) => s.activeStage);
+  const morphHistory = useMorphologyStore((s) => s.stageHistory);
+  const layoutActiveStage = useLayoutStore((s) => s.activeStage);
+  const layoutHistory = useLayoutStore((s) => s.stageHistory);
+  const [events, setEvents] = useState4([]);
+  const eventLogRef = useRef2(null);
+  const isDesync = useMemo5(() => {
+    const morphType = morphActiveStage?.type || null;
+    const layoutType = layoutActiveStage?.type || null;
+    return morphType !== layoutType;
+  }, [morphActiveStage, layoutActiveStage]);
+  const stackDepth = morphHistory.length;
+  const isDeepStack = stackDepth > 5;
+  useEffect2(() => {
+    let prevStage = useMorphologyStore.getState().activeStage;
+    let prevDepth = useMorphologyStore.getState().stageHistory.length;
+    const unsub = useMorphologyStore.subscribe((state) => {
+      const newStage = state.activeStage;
+      const newDepth = state.stageHistory.length;
+      if (newStage !== prevStage || newDepth !== prevDepth) {
+        let action = "change";
+        let level = "info";
+        if (newDepth > prevDepth) {
+          action = "\u2B07\uFE0F pushStage";
+        } else if (newDepth < prevDepth && newStage) {
+          action = "\u2B06\uFE0F popStage";
+        } else if (!newStage && prevStage) {
+          action = "\u{1F5D1}\uFE0F clearStages";
+          level = "warn";
+        } else if (newStage && !prevStage) {
+          action = "\u{1F4CC} setStage";
+        } else {
+          action = "\u{1F504} setStage";
+        }
+        setEvents((prev) => {
+          const updated = [...prev, {
+            id: ++_eventId,
+            timestamp: getTimestamp(),
+            action,
+            stageType: newStage?.type || null,
+            label: newStage?.label || newStage?.type || "null",
+            data: { depth: newDepth, sourceNodeId: newStage?.sourceNodeId },
+            level
+          }];
+          return updated.length > MAX_EVENTS ? updated.slice(-MAX_EVENTS) : updated;
+        });
+        prevStage = newStage;
+        prevDepth = newDepth;
+      }
+    });
+    return unsub;
+  }, []);
+  useEffect2(() => {
+    if (eventLogRef.current) {
+      eventLogRef.current.scrollTop = eventLogRef.current.scrollHeight;
+    }
+  }, [events]);
+  return /* @__PURE__ */ jsxs7("div", { className: "flex h-full text-[10px]", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "w-48 shrink-0 border-r border-border-subtle p-3 space-y-2 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "text-[9px] font-bold text-text-muted uppercase tracking-widest mb-2 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx7(Layers, { size: 10 }),
+        " Stack (",
+        stackDepth + (morphActiveStage ? 1 : 0),
+        ")"
+      ] }),
+      isDesync && /* @__PURE__ */ jsxs7("div", { className: "px-2 py-1.5 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-[9px] font-bold flex items-center gap-1 animate-pulse", children: [
+        /* @__PURE__ */ jsx7(AlertTriangle3, { size: 10 }),
+        " Stores desincronizados"
+      ] }),
+      isDeepStack && /* @__PURE__ */ jsxs7("div", { className: "px-2 py-1.5 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-400 text-[9px] font-bold flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx7(AlertTriangle3, { size: 10 }),
+        " Stack depth: ",
+        stackDepth,
+        " (posible leak)"
+      ] }),
+      morphActiveStage ? /* @__PURE__ */ jsxs7("div", { className: `px-3 py-2 rounded-xl border-2 ${STAGE_COLORS[morphActiveStage.type] || "border-border-default bg-surface-glass"} relative`, children: [
+        /* @__PURE__ */ jsx7("div", { className: "absolute -top-2 right-2 px-1.5 py-0.5 rounded text-[7px] font-bold bg-cyan-500 text-text-inverse uppercase", children: "Activo" }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx7("span", { className: "text-lg", children: STAGE_ICONS[morphActiveStage.type] || "\u2753" }),
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7("div", { className: "font-bold text-text-primary text-[11px]", children: morphActiveStage.type.toUpperCase() }),
+            morphActiveStage.label && /* @__PURE__ */ jsx7("div", { className: "text-text-secondary text-[9px]", children: morphActiveStage.label })
+          ] })
+        ] }),
+        morphActiveStage.sourceNodeId && /* @__PURE__ */ jsxs7("div", { className: "mt-1 text-[8px] text-text-muted font-mono truncate", children: [
+          "src: ",
+          morphActiveStage.sourceNodeId
+        ] })
+      ] }) : /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 rounded-xl border border-dashed border-border-default text-text-muted text-center italic", children: "Sin stage activo" }),
+      morphHistory.length > 0 && /* @__PURE__ */ jsx7("div", { className: "flex justify-center text-text-muted", children: /* @__PURE__ */ jsx7(ArrowUp, { size: 12 }) }),
+      [...morphHistory].reverse().map((stage, i) => /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: `px-3 py-1.5 rounded-lg border ${STAGE_COLORS[stage.type] || "border-border-default bg-surface-tertiary/50"} opacity-50 hover:opacity-80 cursor-pointer transition-all`,
+          onClick: () => {
+            const popsNeeded = i + 1;
+            const ms = useMorphologyStore.getState();
+            const ls = useLayoutStore.getState();
+            for (let j = 0; j < popsNeeded; j++) {
+              ms.popStage();
+              ls.popStage();
+            }
+          },
+          title: `Click para volver a: ${stage.label || stage.type}`,
+          children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx7("span", { children: STAGE_ICONS[stage.type] || "\u2753" }),
+            /* @__PURE__ */ jsx7("span", { className: "font-semibold text-text-primary", children: stage.type }),
+            stage.label && /* @__PURE__ */ jsxs7("span", { className: "text-text-muted truncate max-w-[80px]", children: [
+              " \xB7 ",
+              stage.label
+            ] })
+          ] })
+        },
+        i
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex-1 flex flex-col", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "px-3 py-1.5 border-b border-border-subtle flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "text-[9px] font-bold text-text-muted uppercase tracking-widest flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx7(Clock, { size: 10 }),
+          " Eventos (",
+          events.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx7("button", { onClick: () => setEvents([]), className: "p-0.5 rounded hover:bg-surface-glass text-text-muted hover:text-text-secondary", title: "Limpiar eventos", children: /* @__PURE__ */ jsx7(RotateCcw, { size: 10 }) })
+      ] }),
+      /* @__PURE__ */ jsx7("div", { ref: eventLogRef, className: "flex-1 overflow-y-auto custom-scrollbar", children: events.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full text-text-muted italic", children: "Esperando eventos morph..." }) : events.map((evt) => /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: `flex items-start gap-2 px-3 py-1 border-b border-border-subtle hover:bg-surface-glass ${evt.level === "warn" ? "bg-amber-500/5" : evt.level === "error" ? "bg-red-500/5" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-text-muted shrink-0 font-mono w-[50px]", children: evt.timestamp }),
+            /* @__PURE__ */ jsx7("span", { className: "shrink-0 w-[90px] font-semibold text-text-secondary", children: evt.action }),
+            /* @__PURE__ */ jsx7("span", { className: `font-mono ${evt.stageType ? "text-cyan-400" : "text-text-muted"}`, children: evt.label }),
+            evt.data?.depth !== void 0 && /* @__PURE__ */ jsxs7("span", { className: "text-text-muted ml-auto shrink-0", children: [
+              "depth: ",
+              evt.data.depth
+            ] })
+          ]
+        },
+        evt.id
+      )) }),
+      isDesync && /* @__PURE__ */ jsxs7("div", { className: "px-3 py-2 border-t border-red-500/20 bg-red-500/5", children: [
+        /* @__PURE__ */ jsx7("div", { className: "text-[9px] font-bold text-red-400 mb-1", children: "\u26A0\uFE0F Store Desync Detectado" }),
+        /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-2 gap-2 text-[9px] font-mono", children: [
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-text-muted", children: "morph:" }),
+            " ",
+            /* @__PURE__ */ jsx7("span", { className: "text-violet-400", children: morphActiveStage?.type || "null" }),
+            /* @__PURE__ */ jsxs7("span", { className: "text-text-muted", children: [
+              " (depth: ",
+              morphHistory.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-text-muted", children: "layout:" }),
+            " ",
+            /* @__PURE__ */ jsx7("span", { className: "text-emerald-400", children: layoutActiveStage?.type || "null" }),
+            /* @__PURE__ */ jsxs7("span", { className: "text-text-muted", children: [
+              " (depth: ",
+              layoutHistory.length,
+              ")"
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/debug/NetworkTab.tsx
+import { useState as useState5, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback2, useMemo as useMemo6 } from "react";
+import { Globe, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, RotateCcw as RotateCcw2 } from "lucide-react";
+
+// src/lib/networkInterceptor.ts
+var _networkId = 0;
+var MAX_ENTRIES = 200;
+var _entries = [];
+var _listeners = /* @__PURE__ */ new Set();
+function _getTimestamp() {
+  const now = /* @__PURE__ */ new Date();
+  return `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}:${String(now.getSeconds()).padStart(2, "0")}`;
+}
+function _addEntry(entry) {
+  _entries.push(entry);
+  if (_entries.length > MAX_ENTRIES) _entries.shift();
+  _listeners.forEach((fn) => fn());
+}
+function getNetworkEntries() {
+  return _entries;
+}
+function clearNetworkEntries() {
+  _entries.length = 0;
+  _listeners.forEach((fn) => fn());
+}
+function subscribeNetwork(cb) {
+  _listeners.add(cb);
+  return () => _listeners.delete(cb);
+}
+var _installed = false;
+function installNetworkInterceptor() {
+  if (_installed) return;
+  _installed = true;
+  const _origFetch = window.fetch;
+  window.fetch = async function(input, init) {
+    const method = init?.method?.toUpperCase() || "GET";
+    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    const id = ++_networkId;
+    const t0 = performance.now();
+    let requestBody;
+    try {
+      if (init?.body) {
+        requestBody = typeof init.body === "string" ? init.body.slice(0, 2048) : "[binary]";
+      }
+    } catch {
+    }
+    try {
+      const res = await _origFetch.call(window, input, init);
+      const duration = Math.round(performance.now() - t0);
+      let responseBody;
+      let size = 0;
+      try {
+        const clone = res.clone();
+        const text = await clone.text();
+        size = text.length;
+        responseBody = text.slice(0, 2048);
+      } catch {
+      }
+      _addEntry({
+        id,
+        timestamp: _getTimestamp(),
+        method,
+        url,
+        status: res.status,
+        duration,
+        requestBody,
+        responseBody,
+        size
+      });
+      return res;
+    } catch (err) {
+      const duration = Math.round(performance.now() - t0);
+      _addEntry({
+        id,
+        timestamp: _getTimestamp(),
+        method,
+        url,
+        status: 0,
+        duration,
+        requestBody,
+        size: 0,
+        error: err.message
+      });
+      throw err;
+    }
+  };
+}
+
+// src/components/debug/NetworkTab.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+installNetworkInterceptor();
+var STATUS_COLORS = {
+  "2": "text-emerald-400",
+  "3": "text-amber-400",
+  "4": "text-red-400",
+  "5": "text-red-500",
+  "0": "text-text-muted"
+};
+function getStatusColor(status) {
+  return STATUS_COLORS[String(status).charAt(0)] || "text-text-secondary";
+}
+function truncateUrl(url) {
+  try {
+    const u = new URL(url);
+    const path = u.pathname + u.search;
+    return path.length > 60 ? path.slice(0, 57) + "..." : path;
+  } catch {
+    return url.length > 60 ? url.slice(0, 57) + "..." : url;
+  }
+}
+function getDomain(url) {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return "";
+  }
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+function NetworkRow({ entry, isExpanded, onToggle }) {
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        onClick: onToggle,
+        className: `flex items-center gap-2 px-3 py-1 text-[10px] font-mono cursor-pointer hover:bg-surface-glass border-b border-border-subtle ${entry.error ? "bg-red-500/5" : ""}`,
+        children: [
+          isExpanded ? /* @__PURE__ */ jsx8(ChevronDown2, { size: 10, className: "text-text-muted" }) : /* @__PURE__ */ jsx8(ChevronRight2, { size: 10, className: "text-text-muted" }),
+          /* @__PURE__ */ jsx8("span", { className: "text-text-muted w-[50px] shrink-0", children: entry.timestamp }),
+          /* @__PURE__ */ jsx8("span", { className: `w-[40px] shrink-0 font-bold ${entry.method === "POST" ? "text-amber-400" : "text-cyan-400"}`, children: entry.method }),
+          /* @__PURE__ */ jsx8("span", { className: `w-[30px] shrink-0 font-bold ${getStatusColor(entry.status)}`, children: entry.status || "ERR" }),
+          /* @__PURE__ */ jsx8("span", { className: "flex-1 text-text-primary truncate", title: entry.url, children: truncateUrl(entry.url) }),
+          /* @__PURE__ */ jsxs8("span", { className: "text-text-muted w-[50px] shrink-0 text-right", children: [
+            entry.duration,
+            "ms"
+          ] }),
+          /* @__PURE__ */ jsx8("span", { className: "text-text-muted w-[40px] shrink-0 text-right", children: formatSize(entry.size) })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs8("div", { className: "px-6 py-2 bg-surface-primary/80 border-b border-border-subtle text-[9px] font-mono space-y-2", children: [
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx8("span", { className: "text-text-muted", children: "URL:" }),
+        " ",
+        /* @__PURE__ */ jsx8("span", { className: "text-text-primary break-all", children: entry.url })
+      ] }),
+      entry.error && /* @__PURE__ */ jsxs8("div", { className: "text-red-400", children: [
+        "Error: ",
+        entry.error
+      ] }),
+      entry.requestBody && /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx8("div", { className: "text-text-muted mb-0.5", children: "Request Body:" }),
+        /* @__PURE__ */ jsx8("pre", { className: "bg-surface-secondary rounded p-2 text-text-secondary overflow-x-auto max-h-[150px] overflow-y-auto whitespace-pre-wrap", children: (() => {
+          try {
+            return JSON.stringify(JSON.parse(entry.requestBody), null, 2);
+          } catch {
+            return entry.requestBody;
+          }
+        })() })
+      ] }),
+      entry.responseBody && /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx8("div", { className: "text-text-muted mb-0.5", children: "Response Body:" }),
+        /* @__PURE__ */ jsx8("pre", { className: "bg-surface-secondary rounded p-2 text-text-secondary overflow-x-auto max-h-[150px] overflow-y-auto whitespace-pre-wrap", children: (() => {
+          try {
+            return JSON.stringify(JSON.parse(entry.responseBody), null, 2);
+          } catch {
+            return entry.responseBody;
+          }
+        })() })
+      ] })
+    ] })
+  ] });
+}
+function NetworkTab() {
+  const entries = useSyncExternalStore2(
+    useCallback2((cb) => subscribeNetwork(cb), []),
+    useCallback2(() => getNetworkEntries(), [])
+  );
+  const [expandedIds, setExpandedIds] = useState5(/* @__PURE__ */ new Set());
+  const [domainFilter, setDomainFilter] = useState5("");
+  const domains = useMemo6(() => {
+    const set = /* @__PURE__ */ new Set();
+    entries.forEach((e) => {
+      const d = getDomain(e.url);
+      if (d) set.add(d);
+    });
+    return Array.from(set).sort();
+  }, [entries]);
+  const filtered = useMemo6(() => {
+    if (!domainFilter) return entries;
+    return entries.filter((e) => getDomain(e.url).includes(domainFilter));
+  }, [entries, domainFilter]);
+  const toggleExpand = useCallback2((id) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const totalErrors = useMemo6(() => entries.filter((e) => e.status >= 400 || e.error).length, [entries]);
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle shrink-0", children: [
+      /* @__PURE__ */ jsx8(Globe, { size: 12, className: "text-cyan-400" }),
+      /* @__PURE__ */ jsx8("span", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-widest", children: "Network" }),
+      /* @__PURE__ */ jsxs8("span", { className: "text-[9px] text-text-muted font-mono", children: [
+        filtered.length,
+        "/",
+        entries.length
+      ] }),
+      totalErrors > 0 && /* @__PURE__ */ jsxs8("span", { className: "px-1.5 py-0.5 rounded-full text-[8px] font-bold bg-red-500/20 text-red-400", children: [
+        totalErrors,
+        " err"
+      ] }),
+      /* @__PURE__ */ jsx8("div", { className: "flex-1" }),
+      domains.length > 0 && /* @__PURE__ */ jsxs8(
+        "select",
+        {
+          value: domainFilter,
+          onChange: (e) => setDomainFilter(e.target.value),
+          className: "bg-surface-secondary border border-border-default rounded px-1.5 py-0.5 text-[9px] text-text-secondary outline-hidden",
+          children: [
+            /* @__PURE__ */ jsx8("option", { value: "", children: "All domains" }),
+            domains.map((d) => /* @__PURE__ */ jsx8("option", { value: d, children: d }, d))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx8("button", { onClick: clearNetworkEntries, className: "p-0.5 rounded hover:bg-surface-glass text-text-muted hover:text-text-secondary", title: "Limpiar", children: /* @__PURE__ */ jsx8(RotateCcw2, { size: 10 }) })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 px-3 py-0.5 text-[8px] font-bold text-text-muted uppercase tracking-widest border-b border-border-subtle shrink-0", children: [
+      /* @__PURE__ */ jsx8("span", { className: "w-[14px]" }),
+      /* @__PURE__ */ jsx8("span", { className: "w-[50px]", children: "Time" }),
+      /* @__PURE__ */ jsx8("span", { className: "w-[40px]", children: "Method" }),
+      /* @__PURE__ */ jsx8("span", { className: "w-[30px]", children: "Status" }),
+      /* @__PURE__ */ jsx8("span", { className: "flex-1", children: "URL" }),
+      /* @__PURE__ */ jsx8("span", { className: "w-[50px] text-right", children: "Duration" }),
+      /* @__PURE__ */ jsx8("span", { className: "w-[40px] text-right", children: "Size" })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: filtered.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-center h-full text-text-muted text-[10px] italic", children: "Sin peticiones de red capturadas" }) : filtered.map((entry) => /* @__PURE__ */ jsx8(
+      NetworkRow,
+      {
+        entry,
+        isExpanded: expandedIds.has(entry.id),
+        onToggle: () => toggleExpand(entry.id)
+      },
+      entry.id
+    )) })
+  ] });
+}
+
+// src/components/debug/ProfilesTab.tsx
+import { useState as useState6, useMemo as useMemo7, useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { Plus, Trash2 as Trash22, Eye, Zap as Zap3, StickyNote, X, Star, StarOff } from "lucide-react";
+
+// src/store/useDebugProfileStore.ts
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+var useDebugProfileStore = create()(
+  persist(
+    (set, get) => ({
+      profiles: [],
+      activeProfileId: null,
+      createProfile: (name) => {
+        const profile = {
+          id: Date.now().toString(36),
+          name,
+          watchList: [],
+          pinnedActions: [],
+          logCategories: [],
+          logLevels: ["info", "warn", "error", "debug"],
+          notes: "",
+          createdAt: Date.now()
+        };
+        set((s) => ({ profiles: [...s.profiles, profile], activeProfileId: profile.id }));
+      },
+      updateProfile: (id, partial) => {
+        set((s) => ({
+          profiles: s.profiles.map((p) => p.id === id ? { ...p, ...partial } : p)
+        }));
+      },
+      deleteProfile: (id) => {
+        set((s) => ({
+          profiles: s.profiles.filter((p) => p.id !== id),
+          activeProfileId: s.activeProfileId === id ? null : s.activeProfileId
+        }));
+      },
+      activateProfile: (id) => set({ activeProfileId: id }),
+      getActiveProfile: () => {
+        const { profiles, activeProfileId } = get();
+        return profiles.find((p) => p.id === activeProfileId);
+      },
+      addWatch: (profileId, entry) => {
+        set((s) => ({
+          profiles: s.profiles.map(
+            (p) => p.id === profileId ? { ...p, watchList: [...p.watchList, entry] } : p
+          )
+        }));
+      },
+      removeWatch: (profileId, index) => {
+        set((s) => ({
+          profiles: s.profiles.map(
+            (p) => p.id === profileId ? { ...p, watchList: p.watchList.filter((_, i) => i !== index) } : p
+          )
+        }));
+      },
+      addPinnedAction: (profileId, action) => {
+        set((s) => ({
+          profiles: s.profiles.map(
+            (p) => p.id === profileId ? { ...p, pinnedActions: [...p.pinnedActions, action] } : p
+          )
+        }));
+      },
+      removePinnedAction: (profileId, index) => {
+        set((s) => ({
+          profiles: s.profiles.map(
+            (p) => p.id === profileId ? { ...p, pinnedActions: p.pinnedActions.filter((_, i) => i !== index) } : p
+          )
+        }));
+      }
+    }),
+    {
+      name: "decido-debug-profiles-v1"
+    }
+  )
+);
+
+// src/components/debug/ProfilesTab.tsx
+import { useEngineStore as useEngineStore4, useTimelineStore as useTimelineStore4, useUserStateStore as useUserStateStore2 } from "@decido/engine";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var STORE_MAP = {
+  Playground: usePlaygroundStore,
+  Engine: useEngineStore4,
+  Timeline: useTimelineStore4,
+  Morphology: useMorphologyStore,
+  UserState: useUserStateStore2,
+  UIComponents: useUIComponentStore,
+  MorphInstance: useMorphInstanceStore
+};
+function getNestedValue(obj, path) {
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current == null) return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function formatValue(val) {
+  if (val === null || val === void 0) return String(val);
+  if (typeof val === "function") return "[fn]";
+  if (typeof val === "object") {
+    const tag = Object.prototype.toString.call(val);
+    if (tag === "[object Map]") return `Map(${val.size})`;
+    if (tag === "[object Set]") return `Set(${val.size})`;
+    if (Array.isArray(val)) return `Array(${val.length})`;
+    try {
+      return JSON.stringify(val).slice(0, 100);
+    } catch {
+      return "[object]";
+    }
+  }
+  return String(val);
+}
+function WatchValue({ storeName, path }) {
+  const store = STORE_MAP[storeName];
+  const snapshot = useSyncExternalStore3(
+    useCallback3((cb) => store?.subscribe?.(cb) || (() => {
+    }), [store]),
+    useCallback3(() => store?.getState?.() ?? {}, [store])
+  );
+  const value = getNestedValue(snapshot, path);
+  const formatted = formatValue(value);
+  const color = typeof value === "number" ? "text-cyan-300" : typeof value === "string" ? "text-amber-300" : typeof value === "boolean" ? value ? "text-emerald-400" : "text-text-muted" : value === null || value === void 0 ? "text-text-muted italic" : "text-text-secondary";
+  return /* @__PURE__ */ jsx9("span", { className: `font-mono text-[9px] ${color} max-w-[200px] truncate`, title: formatted, children: formatted });
+}
+function ProfileEditor({ profile }) {
+  const { updateProfile, addWatch, removeWatch, addPinnedAction, removePinnedAction, deleteProfile } = useDebugProfileStore();
+  const [newWatchStore, setNewWatchStore] = useState6(Object.keys(STORE_MAP)[0]);
+  const [newWatchPath, setNewWatchPath] = useState6("");
+  const [newActionStore, setNewActionStore] = useState6(Object.keys(STORE_MAP)[0]);
+  const [newActionName, setNewActionName] = useState6("");
+  const storeKeys = useMemo7(() => {
+    const store = STORE_MAP[newWatchStore];
+    if (!store) return [];
+    const state = store.getState();
+    return Object.entries(state).filter(([, v]) => typeof v !== "function").map(([k]) => k);
+  }, [newWatchStore]);
+  const actionKeys = useMemo7(() => {
+    const store = STORE_MAP[newActionStore];
+    if (!store) return [];
+    const state = store.getState();
+    return Object.entries(state).filter(([, v]) => typeof v === "function").map(([k]) => k);
+  }, [newActionStore]);
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-3 p-3", children: [
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsxs9("div", { className: "text-[9px] font-bold text-text-secondary uppercase tracking-widest mb-1.5 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(Eye, { size: 10 }),
+        " Watch List (",
+        profile.watchList.length,
+        ")"
+      ] }),
+      profile.watchList.map((w, i) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 py-0.5 group", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-[8px] text-text-muted font-bold uppercase", children: w.storeName }),
+        /* @__PURE__ */ jsx9("span", { className: "text-[9px] text-text-secondary font-mono", children: w.path }),
+        /* @__PURE__ */ jsx9("span", { className: "text-text-muted", children: "=" }),
+        /* @__PURE__ */ jsx9(WatchValue, { storeName: w.storeName, path: w.path }),
+        /* @__PURE__ */ jsx9("button", { onClick: () => removeWatch(profile.id, i), className: "opacity-0 group-hover:opacity-100 text-text-muted hover:text-red-400 transition-all ml-auto", children: /* @__PURE__ */ jsx9(X, { size: 10 }) })
+      ] }, i)),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 mt-1", children: [
+        /* @__PURE__ */ jsx9("select", { value: newWatchStore, onChange: (e) => setNewWatchStore(e.target.value), className: "bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary", children: Object.keys(STORE_MAP).map((n) => /* @__PURE__ */ jsx9("option", { value: n, children: n }, n)) }),
+        /* @__PURE__ */ jsxs9("select", { value: newWatchPath, onChange: (e) => setNewWatchPath(e.target.value), className: "bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary flex-1", children: [
+          /* @__PURE__ */ jsx9("option", { value: "", children: "Select property..." }),
+          storeKeys.map((k) => /* @__PURE__ */ jsx9("option", { value: k, children: k }, k))
+        ] }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => {
+              if (newWatchPath) {
+                addWatch(profile.id, { storeName: newWatchStore, path: newWatchPath });
+                setNewWatchPath("");
+              }
+            },
+            disabled: !newWatchPath,
+            className: "px-1.5 py-0.5 rounded text-[8px] font-bold bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/20 disabled:opacity-30",
+            children: /* @__PURE__ */ jsx9(Plus, { size: 10 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsxs9("div", { className: "text-[9px] font-bold text-text-secondary uppercase tracking-widest mb-1.5 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(Zap3, { size: 10 }),
+        " Quick Actions (",
+        profile.pinnedActions.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-1 mb-1", children: profile.pinnedActions.map((a, i) => /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          onClick: () => {
+            const store = STORE_MAP[a.storeName];
+            if (store) {
+              const fn = store.getState()[a.actionName];
+              if (typeof fn === "function") fn();
+            }
+          },
+          className: "group px-2 py-0.5 rounded text-[8px] font-mono bg-surface-glass text-text-secondary hover:text-amber-400 hover:bg-amber-500/10 border border-border-subtle hover:border-amber-500/20 flex items-center gap-1",
+          children: [
+            "\u25B6 ",
+            a.storeName,
+            ".",
+            a.actionName,
+            /* @__PURE__ */ jsx9("span", { onClick: (e) => {
+              e.stopPropagation();
+              removePinnedAction(profile.id, i);
+            }, className: "opacity-0 group-hover:opacity-100 text-text-muted hover:text-red-400", children: /* @__PURE__ */ jsx9(X, { size: 8 }) })
+          ]
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9("select", { value: newActionStore, onChange: (e) => setNewActionStore(e.target.value), className: "bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary", children: Object.keys(STORE_MAP).map((n) => /* @__PURE__ */ jsx9("option", { value: n, children: n }, n)) }),
+        /* @__PURE__ */ jsxs9("select", { value: newActionName, onChange: (e) => setNewActionName(e.target.value), className: "bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary flex-1", children: [
+          /* @__PURE__ */ jsx9("option", { value: "", children: "Select action..." }),
+          actionKeys.map((k) => /* @__PURE__ */ jsx9("option", { value: k, children: k }, k))
+        ] }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => {
+              if (newActionName) {
+                addPinnedAction(profile.id, { storeName: newActionStore, actionName: newActionName });
+                setNewActionName("");
+              }
+            },
+            disabled: !newActionName,
+            className: "px-1.5 py-0.5 rounded text-[8px] font-bold bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 border border-amber-500/20 disabled:opacity-30",
+            children: /* @__PURE__ */ jsx9(Plus, { size: 10 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsxs9("div", { className: "text-[9px] font-bold text-text-secondary uppercase tracking-widest mb-1 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(StickyNote, { size: 10 }),
+        " Notas"
+      ] }),
+      /* @__PURE__ */ jsx9(
+        "textarea",
+        {
+          value: profile.notes,
+          onChange: (e) => updateProfile(profile.id, { notes: e.target.value }),
+          placeholder: "Hip\xF3tesis de debugging, observaciones...",
+          className: "w-full bg-surface-secondary border border-border-default rounded px-2 py-1.5 text-[9px] text-text-primary font-mono outline-hidden focus:border-violet-500/50 resize-y min-h-[40px] max-h-[120px]"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("button", { onClick: () => deleteProfile(profile.id), className: "flex items-center gap-1 px-2 py-1 rounded text-[9px] text-red-400/60 hover:text-red-400 hover:bg-red-500/10 transition-all", children: [
+      /* @__PURE__ */ jsx9(Trash22, { size: 10 }),
+      " Eliminar perfil"
+    ] })
+  ] });
+}
+function ProfilesTab() {
+  const profiles = useDebugProfileStore((s) => s.profiles);
+  const activeProfileId = useDebugProfileStore((s) => s.activeProfileId);
+  const { createProfile, activateProfile } = useDebugProfileStore();
+  const [newName, setNewName] = useState6("");
+  const activeProfile = useMemo7(() => profiles.find((p) => p.id === activeProfileId), [profiles, activeProfileId]);
+  return /* @__PURE__ */ jsxs9("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "w-40 shrink-0 border-r border-border-subtle overflow-y-auto bg-surface-primary/50 flex flex-col", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "p-2", children: [
+        /* @__PURE__ */ jsx9("div", { className: "text-[8px] font-bold text-text-muted uppercase tracking-widest mb-1", children: "Perfiles" }),
+        profiles.map((p) => /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            onClick: () => activateProfile(p.id),
+            className: `w-full text-left px-2 py-1.5 text-[10px] font-semibold transition-all rounded mb-0.5 flex items-center gap-1.5 ${activeProfileId === p.id ? "bg-violet-500/10 text-violet-400 border-r-2 border-violet-400" : "text-text-muted hover:text-text-primary hover:bg-surface-glass"}`,
+            children: [
+              activeProfileId === p.id ? /* @__PURE__ */ jsx9(Star, { size: 10 }) : /* @__PURE__ */ jsx9(StarOff, { size: 10, className: "opacity-30" }),
+              /* @__PURE__ */ jsx9("span", { className: "truncate", children: p.name }),
+              /* @__PURE__ */ jsx9("span", { className: "ml-auto text-[8px] text-text-muted", children: p.watchList.length })
+            ]
+          },
+          p.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsx9("div", { className: "mt-auto p-2 border-t border-border-subtle", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            value: newName,
+            onChange: (e) => setNewName(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && newName.trim()) {
+                createProfile(newName.trim());
+                setNewName("");
+              }
+            },
+            placeholder: "Nuevo perfil...",
+            className: "flex-1 bg-surface-secondary border border-border-default rounded px-1.5 py-0.5 text-[9px] text-text-primary outline-hidden focus:border-violet-500/50"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => {
+              if (newName.trim()) {
+                createProfile(newName.trim());
+                setNewName("");
+              }
+            },
+            disabled: !newName.trim(),
+            className: "p-1 rounded bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 disabled:opacity-30",
+            children: /* @__PURE__ */ jsx9(Plus, { size: 12 })
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: activeProfile ? /* @__PURE__ */ jsx9(ProfileEditor, { profile: activeProfile }) : /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-center h-full text-text-muted text-[10px] italic flex-col gap-2", children: [
+      /* @__PURE__ */ jsx9("span", { children: "Selecciona o crea un perfil de debug" }),
+      /* @__PURE__ */ jsx9("span", { className: "text-[8px] text-text-muted", children: "Los perfiles te permiten monitorear variables espec\xEDficas, ejecutar acciones, y tomar notas" })
+    ] }) })
+  ] });
+}
+
+// src/components/debug/ActionTimelineTab.tsx
+import { useMemo as useMemo8, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { Clock as Clock2, Pause, Play, RotateCcw as RotateCcw3, Search } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var STORE_COLORS = {
+  morph: "border-l-violet-500 bg-violet-500/5",
+  layout: "border-l-emerald-500 bg-emerald-500/5",
+  gemini: "border-l-blue-500 bg-blue-500/5",
+  chat: "border-l-cyan-500 bg-cyan-500/5",
+  store: "border-l-amber-500 bg-amber-500/5",
+  engine: "border-l-orange-500 bg-orange-500/5",
+  network: "border-l-teal-500 bg-teal-500/5",
+  shell: "border-l-pink-500 bg-pink-500/5",
+  system: "border-l-text-muted bg-surface-glass"
+};
+var STORE_BADGES = {
+  morph: "bg-violet-500/20 text-violet-400",
+  layout: "bg-emerald-500/20 text-emerald-400",
+  gemini: "bg-blue-500/20 text-blue-400",
+  chat: "bg-cyan-500/20 text-cyan-400",
+  store: "bg-amber-500/20 text-amber-400",
+  engine: "bg-orange-500/20 text-orange-400",
+  network: "bg-teal-500/20 text-teal-400",
+  shell: "bg-pink-500/20 text-pink-400",
+  system: "bg-surface-glass text-text-secondary"
+};
+function TimelineCard({ event }) {
+  const colors = STORE_COLORS[event.storeName] || "border-l-text-muted bg-surface-glass";
+  const badge = STORE_BADGES[event.storeName] || "bg-surface-glass text-text-secondary";
+  return /* @__PURE__ */ jsxs10("div", { className: `border-l-2 ${colors} px-3 py-1.5 hover:bg-surface-glass transition-colors`, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-[10px]", children: [
+      /* @__PURE__ */ jsx10("span", { className: "text-text-muted font-mono shrink-0 w-[65px]", children: event.timestamp }),
+      /* @__PURE__ */ jsx10("span", { className: `px-1.5 py-0.5 rounded text-[8px] font-bold uppercase tracking-wider ${badge}`, children: event.storeName }),
+      /* @__PURE__ */ jsx10("span", { className: "font-semibold text-text-primary truncate", children: event.actionName }),
+      event.level === "warn" && /* @__PURE__ */ jsx10("span", { className: "text-[8px] text-amber-400", children: "\u26A0" }),
+      event.level === "error" && /* @__PURE__ */ jsx10("span", { className: "text-[8px] text-red-400", children: "\u2715" })
+    ] }),
+    event.data && /* @__PURE__ */ jsx10("div", { className: "mt-0.5 text-[9px] text-text-muted font-mono truncate max-w-full", children: typeof event.data === "object" ? JSON.stringify(event.data) : String(event.data) })
+  ] });
+}
+function ActionTimelineTab() {
+  const events = useActionTimelineStore((s) => s.events);
+  const isPaused = useActionTimelineStore((s) => s.isPaused);
+  const filter = useActionTimelineStore((s) => s.filter);
+  const { clear, togglePause, setFilter } = useActionTimelineStore();
+  const scrollRef = useRef3(null);
+  const filtered = useMemo8(() => {
+    if (!filter) return events;
+    const q = filter.toLowerCase();
+    return events.filter(
+      (e) => e.storeName.includes(q) || e.actionName.toLowerCase().includes(q)
+    );
+  }, [events, filter]);
+  useEffect3(() => {
+    if (!isPaused && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filtered, isPaused]);
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle shrink-0", children: [
+      /* @__PURE__ */ jsx10(Clock2, { size: 12, className: "text-amber-400" }),
+      /* @__PURE__ */ jsx10("span", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-widest", children: "Timeline" }),
+      /* @__PURE__ */ jsxs10("span", { className: "text-[9px] text-text-muted font-mono", children: [
+        filtered.length,
+        "/",
+        events.length
+      ] }),
+      isPaused && /* @__PURE__ */ jsx10("span", { className: "px-1.5 py-0.5 rounded text-[8px] font-bold bg-amber-500/20 text-amber-400 animate-pulse", children: "PAUSADO" }),
+      /* @__PURE__ */ jsx10("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center bg-surface-secondary border border-border-default rounded px-1.5 gap-1", children: [
+        /* @__PURE__ */ jsx10(Search, { size: 10, className: "text-text-muted" }),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            value: filter,
+            onChange: (e) => setFilter(e.target.value),
+            placeholder: "Filtrar...",
+            className: "bg-transparent text-[9px] text-text-primary outline-hidden w-24 py-0.5"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx10("button", { onClick: togglePause, className: `p-1 rounded transition-colors ${isPaused ? "bg-amber-500/10 text-amber-400" : "text-text-muted hover:text-text-secondary hover:bg-surface-glass"}`, title: isPaused ? "Reanudar" : "Pausar", children: isPaused ? /* @__PURE__ */ jsx10(Play, { size: 10 }) : /* @__PURE__ */ jsx10(Pause, { size: 10 }) }),
+      /* @__PURE__ */ jsx10("button", { onClick: clear, className: "p-0.5 rounded hover:bg-surface-glass text-text-muted hover:text-text-secondary", title: "Limpiar", children: /* @__PURE__ */ jsx10(RotateCcw3, { size: 10 }) })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { ref: scrollRef, className: "flex-1 overflow-y-auto custom-scrollbar", children: filtered.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center h-full text-text-muted text-[10px] italic", children: events.length === 0 ? "Esperando acciones..." : "Sin resultados para el filtro" }) : filtered.map((evt) => /* @__PURE__ */ jsx10(TimelineCard, { event: evt }, evt.id)) })
+  ] });
+}
+
+// src/components/debug/PerformanceTab.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
+import { Cpu, HardDrive, BarChart3 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function usePerfMetrics(intervalMs = 1e3) {
+  const [metrics, setMetrics] = useState7({ fps: 0, memory: null, domNodes: 0 });
+  const framesRef = useRef4(0);
+  const lastTimeRef = useRef4(performance.now());
+  useEffect4(() => {
+    let rafId;
+    const countFrame = () => {
+      framesRef.current++;
+      rafId = requestAnimationFrame(countFrame);
+    };
+    rafId = requestAnimationFrame(countFrame);
+    const timer = setInterval(() => {
+      const now = performance.now();
+      const elapsed = (now - lastTimeRef.current) / 1e3;
+      const fps = Math.round(framesRef.current / elapsed);
+      framesRef.current = 0;
+      lastTimeRef.current = now;
+      let memory = null;
+      const perfMemory = performance.memory;
+      if (perfMemory) {
+        const usedMB = Math.round(perfMemory.usedJSHeapSize / 1024 / 1024);
+        const totalMB = Math.round(perfMemory.jsHeapSizeLimit / 1024 / 1024);
+        memory = { usedMB, totalMB, percent: Math.round(usedMB / totalMB * 100) };
+      }
+      const domNodes = document.querySelectorAll("*").length;
+      setMetrics({ fps, memory, domNodes });
+    }, intervalMs);
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearInterval(timer);
+    };
+  }, [intervalMs]);
+  return metrics;
+}
+function Sparkline({ data, color, height = 24, width = 80 }) {
+  if (data.length < 2) return null;
+  const max = Math.max(...data, 1);
+  const min = Math.min(...data, 0);
+  const range = max - min || 1;
+  const points = data.map((v, i) => {
+    const x = i / (data.length - 1) * width;
+    const y = height - (v - min) / range * height;
+    return `${x},${y}`;
+  }).join(" ");
+  return /* @__PURE__ */ jsx11("svg", { width, height, className: "shrink-0", children: /* @__PURE__ */ jsx11("polyline", { points, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }) });
+}
+function FpsGauge({ fps }) {
+  const color = fps >= 50 ? "text-emerald-400" : fps >= 30 ? "text-amber-400" : "text-red-400";
+  const bg = fps >= 50 ? "bg-emerald-500/10" : fps >= 30 ? "bg-amber-500/10" : "bg-red-500/10";
+  const pct = Math.min(fps / 60, 1);
+  return /* @__PURE__ */ jsxs11("div", { className: `rounded-xl ${bg} px-4 py-3 flex items-center gap-3`, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "relative w-12 h-12", children: [
+      /* @__PURE__ */ jsxs11("svg", { className: "w-12 h-12 -rotate-90", viewBox: "0 0 48 48", children: [
+        /* @__PURE__ */ jsx11("circle", { cx: "24", cy: "24", r: "20", fill: "none", stroke: "currentColor", className: "text-text-muted", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx11(
+          "circle",
+          {
+            cx: "24",
+            cy: "24",
+            r: "20",
+            fill: "none",
+            stroke: "currentColor",
+            className: color,
+            strokeWidth: "3",
+            strokeDasharray: `${pct * 125.6} 125.6`,
+            strokeLinecap: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx11("span", { className: `absolute inset-0 flex items-center justify-center text-[11px] font-bold ${color}`, children: fps })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx11("div", { className: "text-[10px] font-bold text-text-primary", children: "FPS" }),
+      /* @__PURE__ */ jsx11("div", { className: `text-[9px] ${color}`, children: fps >= 50 ? "\u2705 Excelente" : fps >= 30 ? "\u26A0\uFE0F Aceptable" : "\u{1F534} Bajo" })
+    ] })
+  ] });
+}
+function PerformanceTab() {
+  const metrics = usePerfMetrics(500);
+  const [fpsHistory, setFpsHistory] = useState7([]);
+  const [memHistory, setMemHistory] = useState7([]);
+  useEffect4(() => {
+    setFpsHistory((prev) => {
+      const next = [...prev, metrics.fps];
+      return next.length > 60 ? next.slice(-60) : next;
+    });
+    if (metrics.memory) {
+      setMemHistory((prev) => {
+        const next = [...prev, metrics.memory.usedMB];
+        return next.length > 60 ? next.slice(-60) : next;
+      });
+    }
+  }, [metrics.fps, metrics.memory?.usedMB]);
+  return /* @__PURE__ */ jsxs11("div", { className: "p-3 space-y-3 overflow-y-auto h-full custom-scrollbar", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "text-[9px] font-bold text-text-muted uppercase tracking-widest flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx11(BarChart3, { size: 10 }),
+      " Performance Dashboard"
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-3 gap-3", children: [
+      /* @__PURE__ */ jsx11(FpsGauge, { fps: metrics.fps }),
+      /* @__PURE__ */ jsxs11("div", { className: "rounded-xl bg-blue-500/10 px-4 py-3", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 mb-1", children: [
+          /* @__PURE__ */ jsx11(HardDrive, { size: 12, className: "text-blue-400" }),
+          /* @__PURE__ */ jsx11("span", { className: "text-[10px] font-bold text-text-primary", children: "Memoria" })
+        ] }),
+        metrics.memory ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          /* @__PURE__ */ jsxs11("div", { className: "text-[14px] font-bold text-blue-400", children: [
+            metrics.memory.usedMB,
+            "MB"
+          ] }),
+          /* @__PURE__ */ jsxs11("div", { className: "text-[9px] text-text-muted", children: [
+            metrics.memory.percent,
+            "% de ",
+            metrics.memory.totalMB,
+            "MB"
+          ] }),
+          /* @__PURE__ */ jsx11("div", { className: "mt-1 h-1.5 bg-surface-tertiary rounded-full overflow-hidden", children: /* @__PURE__ */ jsx11(
+            "div",
+            {
+              className: `h-full rounded-full transition-all ${metrics.memory.percent > 80 ? "bg-red-500" : metrics.memory.percent > 50 ? "bg-amber-500" : "bg-blue-500"}`,
+              style: { width: `${metrics.memory.percent}%` }
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsx11("div", { className: "text-[9px] text-text-muted italic", children: "No disponible" })
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { className: "rounded-xl bg-violet-500/10 px-4 py-3", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 mb-1", children: [
+          /* @__PURE__ */ jsx11(Cpu, { size: 12, className: "text-violet-400" }),
+          /* @__PURE__ */ jsx11("span", { className: "text-[10px] font-bold text-text-primary", children: "DOM" })
+        ] }),
+        /* @__PURE__ */ jsx11("div", { className: "text-[14px] font-bold text-violet-400", children: metrics.domNodes.toLocaleString() }),
+        /* @__PURE__ */ jsx11("div", { className: "text-[9px] text-text-muted", children: metrics.domNodes > 5e3 ? "\u26A0\uFE0F Alto" : metrics.domNodes > 2e3 ? "Normal" : "\u2705 Ligero" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "rounded-xl bg-surface-secondary/50 border border-border-subtle px-3 py-2", children: [
+        /* @__PURE__ */ jsx11("div", { className: "text-[9px] text-text-muted mb-1", children: "FPS (\xFAltimos 30s)" }),
+        /* @__PURE__ */ jsx11(Sparkline, { data: fpsHistory, color: "#34d399", width: 200, height: 30 })
+      ] }),
+      metrics.memory && /* @__PURE__ */ jsxs11("div", { className: "rounded-xl bg-surface-secondary/50 border border-border-subtle px-3 py-2", children: [
+        /* @__PURE__ */ jsx11("div", { className: "text-[9px] text-text-muted mb-1", children: "Memoria (\xFAltimos 30s)" }),
+        /* @__PURE__ */ jsx11(Sparkline, { data: memHistory, color: "#60a5fa", width: 200, height: 30 })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/debug/ExportTab.tsx
+import { useCallback as useCallback5, useState as useState8 } from "react";
+import { Download as Download2, Copy as Copy2, Check as Check2, FileJson, FileText } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function generateReport() {
+  const now = /* @__PURE__ */ new Date();
+  return {
+    meta: {
+      exportedAt: now.toISOString(),
+      userAgent: navigator.userAgent,
+      url: window.location.href,
+      screenSize: `${window.innerWidth}x${window.innerHeight}`
+    },
+    logs: useDebugPanelStore.getState().logEntries.slice(-100),
+    timeline: useActionTimelineStore.getState().events,
+    network: getNetworkEntries(),
+    morphology: {
+      activeStage: useMorphologyStore.getState().activeStage,
+      stageHistory: useMorphologyStore.getState().stageHistory
+    },
+    layout: {
+      activeStage: useLayoutStore.getState().activeStage,
+      stageHistory: useLayoutStore.getState().stageHistory,
+      slots: useLayoutStore.getState().slots
+    },
+    instances: (() => {
+      const inst = useMorphInstanceStore.getState().instances;
+      const arr = [];
+      inst.forEach((v, k) => arr.push({ instanceId: k, ...v }));
+      return arr;
+    })(),
+    profiles: useDebugProfileStore.getState().profiles
+  };
+}
+function generateMarkdownReport() {
+  const report = generateReport();
+  const lines = [];
+  const ts = (/* @__PURE__ */ new Date()).toLocaleString();
+  lines.push(`# Debug Report \u2014 ${ts}
+`);
+  lines.push(`## Meta`);
+  lines.push(`- **Screen**: ${report.meta.screenSize}`);
+  lines.push(`- **URL**: ${report.meta.url}`);
+  lines.push(`- **UA**: ${report.meta.userAgent}
+`);
+  lines.push(`## Morphology State`);
+  lines.push(`- **Active Stage**: ${report.morphology.activeStage?.type || "null"} (${report.morphology.activeStage?.label || "\u2013"})`);
+  lines.push(`- **History Depth**: ${report.morphology.stageHistory.length}`);
+  const layoutSync = report.morphology.activeStage?.type === report.layout.activeStage?.type ? "\u2705 Sincronizado" : "\u26A0\uFE0F DESINCRONIZADO";
+  lines.push(`- **Layout Sync**: ${layoutSync}
+`);
+  const logsByLevel = { info: 0, warn: 0, error: 0, debug: 0 };
+  report.logs.forEach((l) => {
+    logsByLevel[l.level]++;
+  });
+  lines.push(`## Logs Summary (${report.logs.length})`);
+  lines.push(`| Level | Count |
+|-------|-------|
+| info | ${logsByLevel.info} |
+| warn | ${logsByLevel.warn} |
+| error | ${logsByLevel.error} |
+| debug | ${logsByLevel.debug} |
+`);
+  const netErrors = report.network.filter((n) => n.status >= 400 || n.error).length;
+  lines.push(`## Network (${report.network.length} requests, ${netErrors} errors)`);
+  if (report.network.length > 0) {
+    lines.push(`| Time | Method | Status | URL | Duration |`);
+    lines.push(`|------|--------|--------|-----|----------|`);
+    report.network.slice(-20).forEach((n) => {
+      const url = n.url.length > 50 ? n.url.slice(0, 47) + "..." : n.url;
+      lines.push(`| ${n.timestamp} | ${n.method} | ${n.status || "ERR"} | ${url} | ${n.duration}ms |`);
+    });
+  }
+  lines.push("");
+  lines.push(`## Timeline Events (${report.timeline.length})`);
+  report.timeline.slice(-30).forEach((e) => {
+    lines.push(`- \`${e.timestamp}\` **${e.storeName}**.${e.actionName} ${e.level !== "info" ? `(${e.level})` : ""}`);
+  });
+  return lines.join("\n");
+}
+function downloadFile(content, filename, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function ExportTab() {
+  const [copied, setCopied] = useState8(false);
+  const [lastAction, setLastAction] = useState8(null);
+  const handleExportJSON = useCallback5(() => {
+    const report = generateReport();
+    const ts = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    downloadFile(JSON.stringify(report, null, 2), `debug-report-${ts}.json`, "application/json");
+    setLastAction("\u{1F4E6} JSON exportado");
+    setTimeout(() => setLastAction(null), 2e3);
+  }, []);
+  const handleExportMD = useCallback5(() => {
+    const md = generateMarkdownReport();
+    const ts = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
+    downloadFile(md, `debug-report-${ts}.md`, "text/markdown");
+    setLastAction("\u{1F4DD} Markdown exportado");
+    setTimeout(() => setLastAction(null), 2e3);
+  }, []);
+  const handleCopyClipboard = useCallback5(async () => {
+    const md = generateMarkdownReport();
+    await navigator.clipboard.writeText(md);
+    setCopied(true);
+    setLastAction("\u{1F4CB} Copiado al portapapeles");
+    setTimeout(() => {
+      setCopied(false);
+      setLastAction(null);
+    }, 2e3);
+  }, []);
+  const logCount = useDebugPanelStore((s) => s.logEntries.length);
+  const timelineCount = useActionTimelineStore((s) => s.events.length);
+  return /* @__PURE__ */ jsxs12("div", { className: "p-4 space-y-4 overflow-y-auto h-full custom-scrollbar", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-widest flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx12(Download2, { size: 10 }),
+      " Exportar Sesi\xF3n de Debug"
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-3 gap-3", children: [
+      /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          onClick: handleExportJSON,
+          className: "rounded-xl bg-blue-500/10 border border-blue-500/20 p-4 hover:bg-blue-500/15 transition-all group",
+          children: [
+            /* @__PURE__ */ jsx12(FileJson, { size: 24, className: "text-blue-400 mb-2 group-hover:scale-110 transition-transform" }),
+            /* @__PURE__ */ jsx12("div", { className: "text-[11px] font-bold text-text-primary", children: "JSON Completo" }),
+            /* @__PURE__ */ jsx12("div", { className: "text-[9px] text-text-muted mt-1", children: "Logs, timeline, network, morph state, profiles" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          onClick: handleExportMD,
+          className: "rounded-xl bg-violet-500/10 border border-violet-500/20 p-4 hover:bg-violet-500/15 transition-all group",
+          children: [
+            /* @__PURE__ */ jsx12(FileText, { size: 24, className: "text-violet-400 mb-2 group-hover:scale-110 transition-transform" }),
+            /* @__PURE__ */ jsx12("div", { className: "text-[11px] font-bold text-text-primary", children: "Markdown Report" }),
+            /* @__PURE__ */ jsx12("div", { className: "text-[9px] text-text-muted mt-1", children: "Resumen legible con tablas y m\xE9tricas" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          onClick: handleCopyClipboard,
+          className: "rounded-xl bg-emerald-500/10 border border-emerald-500/20 p-4 hover:bg-emerald-500/15 transition-all group",
+          children: [
+            copied ? /* @__PURE__ */ jsx12(Check2, { size: 24, className: "text-emerald-400 mb-2" }) : /* @__PURE__ */ jsx12(Copy2, { size: 24, className: "text-emerald-400 mb-2 group-hover:scale-110 transition-transform" }),
+            /* @__PURE__ */ jsx12("div", { className: "text-[11px] font-bold text-text-primary", children: "Copiar al Clipboard" }),
+            /* @__PURE__ */ jsx12("div", { className: "text-[9px] text-text-muted mt-1", children: "Pegar en chat, issue, o documento" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "rounded-xl bg-surface-secondary/50 border border-border-subtle p-3", children: [
+      /* @__PURE__ */ jsx12("div", { className: "text-[9px] font-bold text-text-muted uppercase tracking-widest mb-2", children: "Datos a exportar" }),
+      /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-4 gap-3 text-center", children: [
+        /* @__PURE__ */ jsxs12("div", { children: [
+          /* @__PURE__ */ jsx12("div", { className: "text-[14px] font-bold text-green-400", children: logCount }),
+          /* @__PURE__ */ jsx12("div", { className: "text-[8px] text-text-muted", children: "Logs" })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { children: [
+          /* @__PURE__ */ jsx12("div", { className: "text-[14px] font-bold text-amber-400", children: timelineCount }),
+          /* @__PURE__ */ jsx12("div", { className: "text-[8px] text-text-muted", children: "Timeline" })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { children: [
+          /* @__PURE__ */ jsx12("div", { className: "text-[14px] font-bold text-cyan-400", children: getNetworkEntries().length }),
+          /* @__PURE__ */ jsx12("div", { className: "text-[8px] text-text-muted", children: "Network" })
+        ] }),
+        /* @__PURE__ */ jsxs12("div", { children: [
+          /* @__PURE__ */ jsx12("div", { className: "text-[14px] font-bold text-violet-400", children: useDebugProfileStore.getState().profiles.length }),
+          /* @__PURE__ */ jsx12("div", { className: "text-[8px] text-text-muted", children: "Profiles" })
+        ] })
+      ] })
+    ] }),
+    lastAction && /* @__PURE__ */ jsx12("div", { className: "text-[10px] text-emerald-400 font-mono animate-pulse text-center", children: lastAction })
+  ] });
+}
+
+// src/components/debug/CSSInspectorTab.tsx
+import { useState as useState9, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo9 } from "react";
+import { Eye as Eye2, EyeOff, Search as Search2, Palette, Copy as Copy3, X as X2, Plus as Plus2, AlertTriangle as AlertTriangle4, Box, Layers as Layers2 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var OutlineOverlay = ({ target, color = "#3b82f6" }) => {
+  const [rect, setRect] = useState9(null);
+  useEffect5(() => {
+    if (!target) {
+      setRect(null);
+      return;
+    }
+    const update = () => setRect(target.getBoundingClientRect());
+    update();
+    const obs = new ResizeObserver(update);
+    obs.observe(target);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      obs.disconnect();
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [target]);
+  if (!rect) return null;
+  return /* @__PURE__ */ jsx13("div", { className: "fixed pointer-events-none z-99999", style: {
+    left: rect.left - 2,
+    top: rect.top - 2,
+    width: rect.width + 4,
+    height: rect.height + 4,
+    border: `2px solid ${color}`,
+    borderRadius: 4,
+    background: `${color}11`,
+    transition: "all 0.15s ease"
+  }, children: /* @__PURE__ */ jsxs13("span", { className: "absolute -top-5 left-0 text-[9px] font-mono px-1.5 py-0.5 rounded", style: { background: color, color: "#fff" }, children: [
+    target?.tagName.toLowerCase(),
+    target?.id ? `#${target.id}` : "",
+    target?.classList.length ? `.${Array.from(target.classList).slice(0, 2).join(".")}` : ""
+  ] }) });
+};
+var KEY_PROPS = [
+  "display",
+  "position",
+  "z-index",
+  "opacity",
+  "width",
+  "height",
+  "max-width",
+  "max-height",
+  "margin",
+  "padding",
+  "gap",
+  "flex",
+  "flex-direction",
+  "align-items",
+  "justify-content",
+  "background-color",
+  "color",
+  "font-size",
+  "font-weight",
+  "border",
+  "border-radius",
+  "box-shadow",
+  "backdrop-filter",
+  "overflow",
+  "transform",
+  "pointer-events"
+];
+function isHardcodedColor(value) {
+  if (!value) return false;
+  return /^#[0-9a-f]{3,8}$/i.test(value) || /^rgb/i.test(value);
+}
+function getActiveTokens(el) {
+  const style = getComputedStyle(el);
+  const root = getComputedStyle(document.documentElement);
+  const tokens = [];
+  const dsVars = [
+    "surface-primary",
+    "surface-secondary",
+    "surface-tertiary",
+    "surface-elevated",
+    "surface-glass",
+    "text-primary",
+    "text-secondary",
+    "text-muted",
+    "accent-blue",
+    "accent-purple",
+    "accent-green",
+    "accent-red",
+    "accent-amber",
+    "accent-cyan",
+    "border-subtle",
+    "border-default",
+    "border-strong",
+    "border-glow"
+  ];
+  const bgColor = style.backgroundColor;
+  const textColor = style.color;
+  const borderColor = style.borderColor;
+  for (const v of dsVars) {
+    const tokenVal = root.getPropertyValue(`--ds-${v}`).trim();
+    if (!tokenVal) continue;
+    if (bgColor === tokenVal || textColor === tokenVal || borderColor === tokenVal) {
+      tokens.push({ token: `--ds-${v}`, value: tokenVal });
+    }
+  }
+  return tokens;
+}
+var BoxModelViz = ({ el }) => {
+  const style = getComputedStyle(el);
+  const m = { t: style.marginTop, r: style.marginRight, b: style.marginBottom, l: style.marginLeft };
+  const p = { t: style.paddingTop, r: style.paddingRight, b: style.paddingBottom, l: style.paddingLeft };
+  const w = el.offsetWidth;
+  const h = el.offsetHeight;
+  return /* @__PURE__ */ jsx13("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx13("div", { className: "relative text-[8px] font-mono select-none", children: /* @__PURE__ */ jsxs13("div", { className: "border border-dashed border-accent-amber/40 bg-accent-amber/5 px-6 py-4 rounded", children: [
+    /* @__PURE__ */ jsx13("span", { className: "absolute top-0.5 left-1 text-accent-amber/60", children: "margin" }),
+    /* @__PURE__ */ jsx13("span", { className: "absolute top-1 left-1/2 -translate-x-1/2 text-accent-amber", children: m.t }),
+    /* @__PURE__ */ jsx13("span", { className: "absolute bottom-1 left-1/2 -translate-x-1/2 text-accent-amber", children: m.b }),
+    /* @__PURE__ */ jsx13("span", { className: "absolute left-1 top-1/2 -translate-y-1/2 text-accent-amber", children: m.l }),
+    /* @__PURE__ */ jsx13("span", { className: "absolute right-1 top-1/2 -translate-y-1/2 text-accent-amber", children: m.r }),
+    /* @__PURE__ */ jsxs13("div", { className: "border border-dashed border-accent-green/40 bg-accent-green/5 px-6 py-4 rounded relative", children: [
+      /* @__PURE__ */ jsx13("span", { className: "absolute top-0.5 left-1 text-accent-green/60", children: "padding" }),
+      /* @__PURE__ */ jsx13("span", { className: "absolute top-1 left-1/2 -translate-x-1/2 text-accent-green", children: p.t }),
+      /* @__PURE__ */ jsx13("span", { className: "absolute bottom-1 left-1/2 -translate-x-1/2 text-accent-green", children: p.b }),
+      /* @__PURE__ */ jsx13("span", { className: "absolute left-1 top-1/2 -translate-y-1/2 text-accent-green", children: p.l }),
+      /* @__PURE__ */ jsx13("span", { className: "absolute right-1 top-1/2 -translate-y-1/2 text-accent-green", children: p.r }),
+      /* @__PURE__ */ jsxs13("div", { className: "bg-accent-blue/10 border border-accent-blue/30 rounded px-4 py-2 text-center text-accent-blue", children: [
+        w,
+        " \xD7 ",
+        h
+      ] })
+    ] })
+  ] }) }) });
+};
+var CSSInspectorTab = () => {
+  const [selected, setSelected] = useState9(null);
+  const [hovered, setHovered] = useState9(null);
+  const [pickMode, setPickMode] = useState9(false);
+  const [subTab, setSubTab] = useState9("classes");
+  const [filter, setFilter] = useState9("");
+  const [showAll, setShowAll] = useState9(false);
+  const [addClass, setAddClass] = useState9("");
+  const [hardcodedEls, setHardcodedEls] = useState9([]);
+  const setTheme = useTheme((s) => s.setTheme);
+  const currentThemeId = useTheme((s) => s.currentThemeId);
+  useEffect5(() => {
+    if (!pickMode) return;
+    const onClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const t = e.target;
+      if (t.closest("[data-debug-panel]")) return;
+      setSelected(t);
+      setPickMode(false);
+    };
+    const onMove = (e) => {
+      const t = e.target;
+      if (!t.closest("[data-debug-panel]")) setHovered(t);
+    };
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("mousemove", onMove, true);
+    document.body.style.cursor = "crosshair";
+    return () => {
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("mousemove", onMove, true);
+      document.body.style.cursor = "";
+    };
+  }, [pickMode]);
+  const classes = useMemo9(() => {
+    if (!selected) return [];
+    return Array.from(selected.classList).filter((c) => !filter || c.includes(filter));
+  }, [selected, filter]);
+  const computedProps = useMemo9(() => {
+    if (!selected) return [];
+    const computed = getComputedStyle(selected);
+    const props = showAll ? Array.from({ length: computed.length }, (_, i) => computed[i]) : KEY_PROPS;
+    return props.map((p) => ({ prop: p, value: computed.getPropertyValue(p) })).filter((p) => p.value && p.value !== "none" && p.value !== "normal" && p.value !== "auto" && p.value !== "0px").filter((p) => !filter || p.prop.includes(filter) || p.value.includes(filter));
+  }, [selected, filter, showAll]);
+  const tokens = useMemo9(() => selected ? getActiveTokens(selected) : [], [selected]);
+  const toggleClass = useCallback6((cls) => {
+    if (!selected) return;
+    selected.classList.toggle(cls);
+    setSelected(selected);
+    setFilter((f) => f);
+  }, [selected]);
+  const handleAddClass = useCallback6(() => {
+    if (!selected || !addClass.trim()) return;
+    selected.classList.add(...addClass.trim().split(/\s+/));
+    setAddClass("");
+    setFilter((f) => f);
+  }, [selected, addClass]);
+  const findHardcoded = useCallback6(() => {
+    const root = document.getElementById("root");
+    if (!root) return;
+    const els = [];
+    root.querySelectorAll("*").forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      const s = getComputedStyle(el);
+      const bg = s.backgroundColor;
+      const color = s.color;
+      if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+        const hasBgToken = Array.from(el.classList).some((c) => c.startsWith("bg-surface-") || c.startsWith("bg-accent-"));
+        if (!hasBgToken && isHardcodedColor(bg)) {
+          els.push(el);
+        }
+      }
+    });
+    setHardcodedEls(els);
+  }, []);
+  const SUB_TABS = [
+    { id: "classes", label: "Classes", icon: Layers2 },
+    { id: "computed", label: "CSS", icon: Box },
+    { id: "tokens", label: "Tokens", icon: Palette },
+    { id: "box", label: "Box", icon: Box }
+  ];
+  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col h-full text-text-primary", "data-debug-panel": true, children: [
+    /* @__PURE__ */ jsx13(OutlineOverlay, { target: pickMode ? hovered : selected, color: pickMode ? "#f59e0b" : "#3b82f6" }),
+    hovered && !pickMode && hovered !== selected && /* @__PURE__ */ jsx13(OutlineOverlay, { target: hovered, color: "#22d3ee44" }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1 px-2 py-1.5 border-b border-border-subtle bg-surface-secondary/50 shrink-0", children: [
+      /* @__PURE__ */ jsxs13(
+        "button",
+        {
+          onClick: () => setPickMode(!pickMode),
+          className: `flex items-center gap-1 px-2 py-1 rounded text-[10px] font-semibold transition-all ${pickMode ? "bg-accent-amber/20 text-accent-amber ring-1 ring-accent-amber/40" : "text-text-muted hover:text-text-primary hover:bg-surface-glass"}`,
+          title: "Pick Element",
+          children: [
+            pickMode ? /* @__PURE__ */ jsx13(Eye2, { size: 11 }) : /* @__PURE__ */ jsx13(EyeOff, { size: 11 }),
+            "Pick"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx13("div", { className: "w-px h-4 bg-border-subtle mx-1" }),
+      /* @__PURE__ */ jsx13(
+        "select",
+        {
+          value: currentThemeId,
+          onChange: (e) => setTheme(e.target.value),
+          className: "bg-surface-tertiary text-text-primary text-[10px] font-mono rounded px-1.5 py-1 border border-border-subtle outline-none cursor-pointer",
+          children: THEME_PRESETS.map((t) => /* @__PURE__ */ jsx13("option", { value: t.id, children: t.name }, t.id))
+        }
+      ),
+      /* @__PURE__ */ jsx13("div", { className: "w-px h-4 bg-border-subtle mx-1" }),
+      /* @__PURE__ */ jsxs13(
+        "button",
+        {
+          onClick: findHardcoded,
+          className: "flex items-center gap-1 px-2 py-1 rounded text-[10px] font-semibold text-text-muted hover:text-accent-red hover:bg-accent-red/10 transition-all",
+          title: "Find elements with hardcoded colors",
+          children: [
+            /* @__PURE__ */ jsx13(AlertTriangle4, { size: 10 }),
+            "Audit",
+            hardcodedEls.length > 0 && /* @__PURE__ */ jsx13("span", { className: "text-[8px] bg-accent-red/20 text-accent-red px-1 rounded-full", children: hardcodedEls.length })
+          ]
+        }
+      ),
+      selected && /* @__PURE__ */ jsxs13("div", { className: "ml-auto text-[9px] font-mono text-text-muted truncate max-w-[180px]", children: [
+        "<",
+        selected.tagName.toLowerCase(),
+        selected.id ? `#${selected.id}` : "",
+        ">",
+        /* @__PURE__ */ jsxs13("span", { className: "text-text-muted/50 ml-1", children: [
+          selected.offsetWidth,
+          "\xD7",
+          selected.offsetHeight
+        ] })
+      ] })
+    ] }),
+    selected ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-0.5 px-2 py-1 border-b border-border-subtle shrink-0", children: [
+        SUB_TABS.map((t) => /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: () => setSubTab(t.id),
+            className: `px-2 py-0.5 rounded text-[10px] font-semibold transition-all ${subTab === t.id ? "bg-surface-glass text-text-primary" : "text-text-muted hover:text-text-primary"}`,
+            children: t.label
+          },
+          t.id
+        )),
+        /* @__PURE__ */ jsxs13("div", { className: "ml-auto flex items-center gap-1 bg-surface-tertiary rounded px-1.5 py-0.5 border border-border-subtle", children: [
+          /* @__PURE__ */ jsx13(Search2, { size: 9, className: "text-text-muted" }),
+          /* @__PURE__ */ jsx13(
+            "input",
+            {
+              value: filter,
+              onChange: (e) => setFilter(e.target.value),
+              placeholder: "Filter...",
+              className: "bg-transparent text-text-primary text-[10px] font-mono outline-none w-20"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex-1 overflow-auto scrollbar-thin", children: [
+        subTab === "classes" && /* @__PURE__ */ jsxs13("div", { className: "p-2", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1 mb-2", children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                value: addClass,
+                onChange: (e) => setAddClass(e.target.value),
+                onKeyDown: (e) => e.key === "Enter" && handleAddClass(),
+                placeholder: "Add TW class...",
+                className: "flex-1 bg-surface-tertiary text-text-primary text-[10px] font-mono px-2 py-1 rounded border border-border-subtle outline-none focus:border-accent-blue/50"
+              }
+            ),
+            /* @__PURE__ */ jsx13("button", { onClick: handleAddClass, className: "p-1 rounded text-text-muted hover:text-accent-green hover:bg-accent-green/10", children: /* @__PURE__ */ jsx13(Plus2, { size: 11 }) })
+          ] }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap gap-1", children: [
+            classes.map((cls) => /* @__PURE__ */ jsxs13(
+              "button",
+              {
+                onClick: () => toggleClass(cls),
+                className: "group flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[9px] font-mono bg-surface-glass border border-border-subtle text-text-secondary hover:text-text-primary hover:border-accent-blue/40 transition-all",
+                children: [
+                  cls,
+                  /* @__PURE__ */ jsx13(X2, { size: 8, className: "opacity-0 group-hover:opacity-100 text-accent-red" })
+                ]
+              },
+              cls
+            )),
+            classes.length === 0 && /* @__PURE__ */ jsx13("span", { className: "text-[10px] text-text-muted italic", children: "No classes match filter" })
+          ] }),
+          /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              onClick: () => selected && navigator.clipboard.writeText(Array.from(selected.classList).join(" ")),
+              className: "mt-2 flex items-center gap-1 text-[9px] text-text-muted hover:text-accent-cyan transition-colors",
+              children: [
+                /* @__PURE__ */ jsx13(Copy3, { size: 9 }),
+                " Copy all classes"
+              ]
+            }
+          )
+        ] }),
+        subTab === "computed" && /* @__PURE__ */ jsxs13("div", { children: [
+          /* @__PURE__ */ jsx13("div", { className: "px-2 py-1 flex justify-end", children: /* @__PURE__ */ jsx13(
+            "button",
+            {
+              onClick: () => setShowAll(!showAll),
+              className: `text-[9px] font-mono px-1.5 py-0.5 rounded ${showAll ? "bg-accent-purple/20 text-accent-purple" : "text-text-muted hover:text-text-primary"}`,
+              children: showAll ? "ALL" : "KEY"
+            }
+          ) }),
+          computedProps.map(({ prop, value }) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1 px-2 py-0.5 text-[10px] font-mono hover:bg-surface-glass group", children: [
+            /* @__PURE__ */ jsxs13("span", { className: "text-accent-purple shrink-0 w-[110px] truncate", children: [
+              prop,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx13("span", { className: "flex-1 text-text-secondary truncate", children: value }),
+            (prop.includes("color") || prop === "background-color") && value !== "transparent" && value !== "rgba(0, 0, 0, 0)" && /* @__PURE__ */ jsx13("span", { className: "w-3 h-3 rounded-sm border border-border-subtle shrink-0", style: { backgroundColor: value } }),
+            /* @__PURE__ */ jsx13("button", { onClick: () => navigator.clipboard.writeText(`${prop}: ${value}`), className: "opacity-0 group-hover:opacity-100 text-text-muted hover:text-accent-cyan", children: /* @__PURE__ */ jsx13(Copy3, { size: 9 }) })
+          ] }, prop))
+        ] }),
+        subTab === "tokens" && /* @__PURE__ */ jsxs13("div", { className: "p-2", children: [
+          /* @__PURE__ */ jsx13("div", { className: "text-[9px] font-mono text-text-muted uppercase tracking-wider mb-2", children: "Active Design Tokens" }),
+          tokens.length > 0 ? tokens.map(({ token, value }) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 px-2 py-1 rounded hover:bg-surface-glass text-[10px] font-mono", children: [
+            /* @__PURE__ */ jsx13("span", { className: "w-4 h-4 rounded border border-border-subtle shrink-0", style: { backgroundColor: value } }),
+            /* @__PURE__ */ jsx13("span", { className: "text-accent-cyan", children: token }),
+            /* @__PURE__ */ jsx13("span", { className: "text-text-muted ml-auto", children: value })
+          ] }, token)) : /* @__PURE__ */ jsxs13("div", { className: "text-text-muted text-[10px] italic", children: [
+            "No `--ds-*` tokens detected on this element.",
+            /* @__PURE__ */ jsx13("br", {}),
+            "This might use hardcoded colors."
+          ] }),
+          selected?.style.cssText && /* @__PURE__ */ jsxs13("div", { className: "mt-3", children: [
+            /* @__PURE__ */ jsx13("div", { className: "text-[9px] font-mono text-text-muted uppercase tracking-wider mb-1", children: "Inline Styles" }),
+            /* @__PURE__ */ jsx13("div", { className: "text-[10px] font-mono text-accent-amber bg-surface-glass rounded p-2 break-all", children: selected.style.cssText })
+          ] })
+        ] }),
+        subTab === "box" && selected && /* @__PURE__ */ jsx13(BoxModelViz, { el: selected })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex-1 flex flex-col items-center justify-center text-text-muted text-xs gap-2 py-8", children: [
+      /* @__PURE__ */ jsx13(Eye2, { size: 24, className: "opacity-30" }),
+      /* @__PURE__ */ jsxs13("span", { children: [
+        "Click ",
+        /* @__PURE__ */ jsx13("strong", { children: '"Pick"' }),
+        " to select an element"
+      ] }),
+      /* @__PURE__ */ jsxs13("span", { className: "text-[9px]", children: [
+        "or use ",
+        /* @__PURE__ */ jsx13("strong", { children: '"Audit"' }),
+        " to find hardcoded colors"
+      ] })
+    ] }),
+    hardcodedEls.length > 0 && /* @__PURE__ */ jsxs13("div", { className: "shrink-0 border-t border-border-subtle px-2 py-1 bg-accent-red/5", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "text-[9px] font-mono text-accent-red mb-1", children: [
+        "\u26A0 ",
+        hardcodedEls.length,
+        " elements with potential hardcoded colors"
+      ] }),
+      /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-1 max-h-12 overflow-auto", children: hardcodedEls.slice(0, 20).map((el, i) => /* @__PURE__ */ jsxs13(
+        "button",
+        {
+          onClick: () => {
+            setSelected(el);
+            setSubTab("computed");
+          },
+          className: "text-[8px] font-mono text-text-muted hover:text-accent-red bg-surface-glass rounded px-1 py-0.5",
+          children: [
+            el.tagName.toLowerCase(),
+            el.className && typeof el.className === "string" ? `.${el.className.split(" ")[0]}` : ""
+          ]
+        },
+        i
+      )) })
+    ] })
+  ] });
+};
+
+// src/components/playground/DebugPanel.tsx
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var TABS = [
+  { id: "logs", label: "Logs", icon: Bug2, color: "text-green-400" },
+  { id: "flow-health", label: "Health", icon: Activity, color: "text-cyan-400" },
+  { id: "topology", label: "Topology", icon: Map3, color: "text-purple-400" },
+  { id: "replay", label: "Replay", icon: PlayCircle, color: "text-amber-400" },
+  { id: "stores", label: "Stores", icon: Database2, color: "text-emerald-400" },
+  { id: "morph-stack", label: "Morph", icon: Layers3, color: "text-violet-400" },
+  { id: "network", label: "Network", icon: Globe2, color: "text-cyan-400" },
+  { id: "profiles", label: "Profiles", icon: UserCog, color: "text-rose-400" },
+  { id: "timeline", label: "Timeline", icon: Clock3, color: "text-amber-400" },
+  { id: "performance", label: "Perf", icon: Gauge2, color: "text-lime-400" },
+  { id: "export", label: "Export", icon: Download3, color: "text-text-secondary" },
+  { id: "css-inspector", label: "CSS", icon: Palette2, color: "text-indigo-400" }
+];
+var TAB_COMPONENTS = {
+  "logs": LogsTab,
+  "flow-health": FlowHealthTab,
+  "topology": TopologyTab,
+  "replay": ReplayTab,
+  "stores": StoresTab,
+  "morph-stack": MorphStackTab,
+  "network": NetworkTab,
+  "profiles": ProfilesTab,
+  "timeline": ActionTimelineTab,
+  "performance": PerformanceTab,
+  "export": ExportTab,
+  "css-inspector": CSSInspectorTab
+};
+var DebugPanel = React13.memo(function DebugPanel2({ className }) {
+  const isOpen = useDebugPanelStore((s) => s.isOpen);
+  const activeTab = useDebugPanelStore((s) => s.activeTab);
+  const setActiveTab = useDebugPanelStore((s) => s.setActiveTab);
+  const togglePanel = useDebugPanelStore((s) => s.togglePanel);
+  const errorCount = useDebugPanelStore((s) => s.errorCount);
+  if (!isOpen) return null;
+  const ActiveComponent = TAB_COMPONENTS[activeTab];
+  return /* @__PURE__ */ jsx14(AnimatePresence2, { children: /* @__PURE__ */ jsxs14(
+    motion2.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "100%", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.15, ease: "easeOut" },
+      className: `flex flex-col bg-surface-primary border-t border-border-default overflow-hidden ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between px-2 py-1 border-b border-border-subtle shrink-0 bg-surface-primary/80", children: [
+          /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-0.5 overflow-x-auto flex-1 min-w-0", style: { scrollbarWidth: "none" }, children: TABS.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = activeTab === tab.id;
+            return /* @__PURE__ */ jsxs14(
+              "button",
+              {
+                onClick: () => setActiveTab(tab.id),
+                className: `flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-semibold transition-all whitespace-nowrap shrink-0 ${isActive ? `bg-surface-glass text-text-primary shadow-xs` : "text-text-muted hover:text-text-primary hover:bg-surface-glass"}`,
+                children: [
+                  /* @__PURE__ */ jsx14(Icon, { size: 11, className: isActive ? tab.color : "" }),
+                  tab.label,
+                  tab.id === "logs" && errorCount > 0 && /* @__PURE__ */ jsx14("span", { className: "ml-0.5 px-1 py-0.5 rounded-full text-[8px] font-bold bg-red-500/20 text-red-400", children: errorCount })
+                ]
+              },
+              tab.id
+            );
+          }) }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1 shrink-0 ml-1", children: [
+            /* @__PURE__ */ jsx14("span", { className: "text-[9px] text-text-muted font-mono mr-1", children: "\u2303\u21E7D" }),
+            /* @__PURE__ */ jsx14("button", { onClick: togglePanel, className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors", title: "Cerrar panel", children: /* @__PURE__ */ jsx14(X3, { size: 14 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx14(ActiveComponent, {}) })
+      ]
+    }
+  ) });
+});
+
+export {
+  DebugPanel
+};