@decido/shell 4.0.1 → 4.0.3

package/dist/ReactFlowEditor-RTF2652X.mjs

@@ -0,0 +1,3574 @@
+import {
+  Background,
+  Controls,
+  Handle,
+  MarkerType,
+  MiniMap,
+  Position,
+  ReactFlowProvider,
+  SelectionMode,
+  addEdge,
+  index,
+  useEdgesState,
+  useNodesState,
+  useReactFlow
+} from "./chunk-V3CYNPGL.mjs";
+import {
+  getRegisteredMorphComponents
+} from "./chunk-ZCCCBHE6.mjs";
+import {
+  useUIComponentStore
+} from "./chunk-3BZX7LF2.mjs";
+import "./chunk-3P4P3M54.mjs";
+import {
+  usePlaygroundStore
+} from "./chunk-XMSU6UWD.mjs";
+import "./chunk-UJCSKKID.mjs";
+
+// src/components/studio/ReactFlowEditor.tsx
+import React5, { useCallback as useCallback2, useEffect, useRef, useState as useState3 } from "react";
+import { useEngineStore as useEngineStore3, useTimelineStore as useTimelineStore13 } from "@decido/engine";
+import { convertLegacyTimelineToBlueprint } from "@decido/core";
+import { useBlueprintNavigation } from "@decido/engine";
+
+// ../../node_modules/.pnpm/@dagrejs+dagre@2.0.4/node_modules/@dagrejs/dagre/dist/dagre.esm.js
+var v = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports);
+var y = v((Fi, ee) => {
+  var Vt = Object.defineProperty, At = (e, t, r) => t in e ? Vt(e, t, { enumerable: true, configurable: true, writable: true, value: r }) : e[t] = r, E = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), k = (e, t, r) => At(e, typeof t != "symbol" ? t + "" : t, r), R = E((e, t) => {
+    "use strict";
+    var r = "\0", n = "\0", i = "
", o = class {
+      constructor(d) {
+        k(this, "_isDirected", true), k(this, "_isMultigraph", false), k(this, "_isCompound", false), k(this, "_label"), k(this, "_defaultNodeLabelFn", () => {
+        }), k(this, "_defaultEdgeLabelFn", () => {
+        }), k(this, "_nodes", {}), k(this, "_in", {}), k(this, "_preds", {}), k(this, "_out", {}), k(this, "_sucs", {}), k(this, "_edgeObjs", {}), k(this, "_edgeLabels", {}), k(this, "_nodeCount", 0), k(this, "_edgeCount", 0), k(this, "_parent"), k(this, "_children"), d && (this._isDirected = Object.hasOwn(d, "directed") ? d.directed : true, this._isMultigraph = Object.hasOwn(d, "multigraph") ? d.multigraph : false, this._isCompound = Object.hasOwn(d, "compound") ? d.compound : false), this._isCompound && (this._parent = {}, this._children = {}, this._children[n] = {});
+      }
+      isDirected() {
+        return this._isDirected;
+      }
+      isMultigraph() {
+        return this._isMultigraph;
+      }
+      isCompound() {
+        return this._isCompound;
+      }
+      setGraph(d) {
+        return this._label = d, this;
+      }
+      graph() {
+        return this._label;
+      }
+      setDefaultNodeLabel(d) {
+        return this._defaultNodeLabelFn = d, typeof d != "function" && (this._defaultNodeLabelFn = () => d), this;
+      }
+      nodeCount() {
+        return this._nodeCount;
+      }
+      nodes() {
+        return Object.keys(this._nodes);
+      }
+      sources() {
+        var d = this;
+        return this.nodes().filter((h) => Object.keys(d._in[h]).length === 0);
+      }
+      sinks() {
+        var d = this;
+        return this.nodes().filter((h) => Object.keys(d._out[h]).length === 0);
+      }
+      setNodes(d, h) {
+        var f = arguments, m = this;
+        return d.forEach(function(p) {
+          f.length > 1 ? m.setNode(p, h) : m.setNode(p);
+        }), this;
+      }
+      setNode(d, h) {
+        return Object.hasOwn(this._nodes, d) ? (arguments.length > 1 && (this._nodes[d] = h), this) : (this._nodes[d] = arguments.length > 1 ? h : this._defaultNodeLabelFn(d), this._isCompound && (this._parent[d] = n, this._children[d] = {}, this._children[n][d] = true), this._in[d] = {}, this._preds[d] = {}, this._out[d] = {}, this._sucs[d] = {}, ++this._nodeCount, this);
+      }
+      node(d) {
+        return this._nodes[d];
+      }
+      hasNode(d) {
+        return Object.hasOwn(this._nodes, d);
+      }
+      removeNode(d) {
+        var h = this;
+        if (Object.hasOwn(this._nodes, d)) {
+          var f = (m) => h.removeEdge(h._edgeObjs[m]);
+          delete this._nodes[d], this._isCompound && (this._removeFromParentsChildList(d), delete this._parent[d], this.children(d).forEach(function(m) {
+            h.setParent(m);
+          }), delete this._children[d]), Object.keys(this._in[d]).forEach(f), delete this._in[d], delete this._preds[d], Object.keys(this._out[d]).forEach(f), delete this._out[d], delete this._sucs[d], --this._nodeCount;
+        }
+        return this;
+      }
+      setParent(d, h) {
+        if (!this._isCompound) throw new Error("Cannot set parent in a non-compound graph");
+        if (h === void 0) h = n;
+        else {
+          h += "";
+          for (var f = h; f !== void 0; f = this.parent(f)) if (f === d) throw new Error("Setting " + h + " as parent of " + d + " would create a cycle");
+          this.setNode(h);
+        }
+        return this.setNode(d), this._removeFromParentsChildList(d), this._parent[d] = h, this._children[h][d] = true, this;
+      }
+      _removeFromParentsChildList(d) {
+        delete this._children[this._parent[d]][d];
+      }
+      parent(d) {
+        if (this._isCompound) {
+          var h = this._parent[d];
+          if (h !== n) return h;
+        }
+      }
+      children(d = n) {
+        if (this._isCompound) {
+          var h = this._children[d];
+          if (h) return Object.keys(h);
+        } else {
+          if (d === n) return this.nodes();
+          if (this.hasNode(d)) return [];
+        }
+      }
+      predecessors(d) {
+        var h = this._preds[d];
+        if (h) return Object.keys(h);
+      }
+      successors(d) {
+        var h = this._sucs[d];
+        if (h) return Object.keys(h);
+      }
+      neighbors(d) {
+        var h = this.predecessors(d);
+        if (h) {
+          let m = new Set(h);
+          for (var f of this.successors(d)) m.add(f);
+          return Array.from(m.values());
+        }
+      }
+      isLeaf(d) {
+        var h;
+        return this.isDirected() ? h = this.successors(d) : h = this.neighbors(d), h.length === 0;
+      }
+      filterNodes(d) {
+        var h = new this.constructor({ directed: this._isDirected, multigraph: this._isMultigraph, compound: this._isCompound });
+        h.setGraph(this.graph());
+        var f = this;
+        Object.entries(this._nodes).forEach(function([w, b]) {
+          d(w) && h.setNode(w, b);
+        }), Object.values(this._edgeObjs).forEach(function(w) {
+          h.hasNode(w.v) && h.hasNode(w.w) && h.setEdge(w, f.edge(w));
+        });
+        var m = {};
+        function p(w) {
+          var b = f.parent(w);
+          return b === void 0 || h.hasNode(b) ? (m[w] = b, b) : b in m ? m[b] : p(b);
+        }
+        return this._isCompound && h.nodes().forEach((w) => h.setParent(w, p(w))), h;
+      }
+      setDefaultEdgeLabel(d) {
+        return this._defaultEdgeLabelFn = d, typeof d != "function" && (this._defaultEdgeLabelFn = () => d), this;
+      }
+      edgeCount() {
+        return this._edgeCount;
+      }
+      edges() {
+        return Object.values(this._edgeObjs);
+      }
+      setPath(d, h) {
+        var f = this, m = arguments;
+        return d.reduce(function(p, w) {
+          return m.length > 1 ? f.setEdge(p, w, h) : f.setEdge(p, w), w;
+        }), this;
+      }
+      setEdge() {
+        var d, h, f, m, p = false, w = arguments[0];
+        typeof w == "object" && w !== null && "v" in w ? (d = w.v, h = w.w, f = w.name, arguments.length === 2 && (m = arguments[1], p = true)) : (d = w, h = arguments[1], f = arguments[3], arguments.length > 2 && (m = arguments[2], p = true)), d = "" + d, h = "" + h, f !== void 0 && (f = "" + f);
+        var b = l(this._isDirected, d, h, f);
+        if (Object.hasOwn(this._edgeLabels, b)) return p && (this._edgeLabels[b] = m), this;
+        if (f !== void 0 && !this._isMultigraph) throw new Error("Cannot set a named edge when isMultigraph = false");
+        this.setNode(d), this.setNode(h), this._edgeLabels[b] = p ? m : this._defaultEdgeLabelFn(d, h, f);
+        var g = u(this._isDirected, d, h, f);
+        return d = g.v, h = g.w, Object.freeze(g), this._edgeObjs[b] = g, s(this._preds[h], d), s(this._sucs[d], h), this._in[h][b] = g, this._out[d][b] = g, this._edgeCount++, this;
+      }
+      edge(d, h, f) {
+        var m = arguments.length === 1 ? c(this._isDirected, arguments[0]) : l(this._isDirected, d, h, f);
+        return this._edgeLabels[m];
+      }
+      edgeAsObj() {
+        let d = this.edge(...arguments);
+        return typeof d != "object" ? { label: d } : d;
+      }
+      hasEdge(d, h, f) {
+        var m = arguments.length === 1 ? c(this._isDirected, arguments[0]) : l(this._isDirected, d, h, f);
+        return Object.hasOwn(this._edgeLabels, m);
+      }
+      removeEdge(d, h, f) {
+        var m = arguments.length === 1 ? c(this._isDirected, arguments[0]) : l(this._isDirected, d, h, f), p = this._edgeObjs[m];
+        return p && (d = p.v, h = p.w, delete this._edgeLabels[m], delete this._edgeObjs[m], a(this._preds[h], d), a(this._sucs[d], h), delete this._in[h][m], delete this._out[d][m], this._edgeCount--), this;
+      }
+      inEdges(d, h) {
+        return this.isDirected() ? this.filterEdges(this._in[d], d, h) : this.nodeEdges(d, h);
+      }
+      outEdges(d, h) {
+        return this.isDirected() ? this.filterEdges(this._out[d], d, h) : this.nodeEdges(d, h);
+      }
+      nodeEdges(d, h) {
+        if (d in this._nodes) return this.filterEdges({ ...this._in[d], ...this._out[d] }, d, h);
+      }
+      filterEdges(d, h, f) {
+        if (d) {
+          var m = Object.values(d);
+          return f ? m.filter(function(p) {
+            return p.v === h && p.w === f || p.v === f && p.w === h;
+          }) : m;
+        }
+      }
+    };
+    function s(d, h) {
+      d[h] ? d[h]++ : d[h] = 1;
+    }
+    function a(d, h) {
+      --d[h] || delete d[h];
+    }
+    function l(d, h, f, m) {
+      var p = "" + h, w = "" + f;
+      if (!d && p > w) {
+        var b = p;
+        p = w, w = b;
+      }
+      return p + i + w + i + (m === void 0 ? r : m);
+    }
+    function u(d, h, f, m) {
+      var p = "" + h, w = "" + f;
+      if (!d && p > w) {
+        var b = p;
+        p = w, w = b;
+      }
+      var g = { v: p, w };
+      return m && (g.name = m), g;
+    }
+    function c(d, h) {
+      return l(d, h.v, h.w, h.name);
+    }
+    t.exports = o;
+  }), Yt = E((e, t) => {
+    t.exports = "3.0.2";
+  }), Bt = E((e, t) => {
+    t.exports = { Graph: R(), version: Yt() };
+  }), Wt = E((e, t) => {
+    var r = R();
+    t.exports = { write: n, read: s };
+    function n(a) {
+      var l = { options: { directed: a.isDirected(), multigraph: a.isMultigraph(), compound: a.isCompound() }, nodes: i(a), edges: o(a) };
+      return a.graph() !== void 0 && (l.value = structuredClone(a.graph())), l;
+    }
+    function i(a) {
+      return a.nodes().map(function(l) {
+        var u = a.node(l), c = a.parent(l), d = { v: l };
+        return u !== void 0 && (d.value = u), c !== void 0 && (d.parent = c), d;
+      });
+    }
+    function o(a) {
+      return a.edges().map(function(l) {
+        var u = a.edge(l), c = { v: l.v, w: l.w };
+        return l.name !== void 0 && (c.name = l.name), u !== void 0 && (c.value = u), c;
+      });
+    }
+    function s(a) {
+      var l = new r(a.options).setGraph(a.value);
+      return a.nodes.forEach(function(u) {
+        l.setNode(u.v, u.value), u.parent && l.setParent(u.v, u.parent);
+      }), a.edges.forEach(function(u) {
+        l.setEdge({ v: u.v, w: u.w, name: u.name }, u.value);
+      }), l;
+    }
+  }), U = E((e, t) => {
+    t.exports = n;
+    var r = () => 1;
+    function n(o, s, a, l) {
+      return i(o, String(s), a || r, l || function(u) {
+        return o.outEdges(u);
+      });
+    }
+    function i(o, s, a, l) {
+      var u = {}, c = true, d = 0, h = o.nodes(), f = function(b) {
+        var g = a(b);
+        u[b.v].distance + g < u[b.w].distance && (u[b.w] = { distance: u[b.v].distance + g, predecessor: b.v }, c = true);
+      }, m = function() {
+        h.forEach(function(b) {
+          l(b).forEach(function(g) {
+            var I = g.v === b ? g.v : g.w, Gt = I === g.v ? g.w : g.v;
+            f({ v: I, w: Gt });
+          });
+        });
+      };
+      h.forEach(function(b) {
+        var g = b === s ? 0 : Number.POSITIVE_INFINITY;
+        u[b] = { distance: g };
+      });
+      for (var p = h.length, w = 1; w < p && (c = false, d++, m(), !!c); w++) ;
+      if (d === p - 1 && (c = false, m(), c)) throw new Error("The graph contains a negative weight cycle");
+      return u;
+    }
+  }), zt = E((e, t) => {
+    t.exports = r;
+    function r(n) {
+      var i = {}, o = [], s;
+      function a(l) {
+        Object.hasOwn(i, l) || (i[l] = true, s.push(l), n.successors(l).forEach(a), n.predecessors(l).forEach(a));
+      }
+      return n.nodes().forEach(function(l) {
+        s = [], a(l), s.length && o.push(s);
+      }), o;
+    }
+  }), K = E((e, t) => {
+    var r = class {
+      constructor() {
+        k(this, "_arr", []), k(this, "_keyIndices", {});
+      }
+      size() {
+        return this._arr.length;
+      }
+      keys() {
+        return this._arr.map(function(n) {
+          return n.key;
+        });
+      }
+      has(n) {
+        return Object.hasOwn(this._keyIndices, n);
+      }
+      priority(n) {
+        var i = this._keyIndices[n];
+        if (i !== void 0) return this._arr[i].priority;
+      }
+      min() {
+        if (this.size() === 0) throw new Error("Queue underflow");
+        return this._arr[0].key;
+      }
+      add(n, i) {
+        var o = this._keyIndices;
+        if (n = String(n), !Object.hasOwn(o, n)) {
+          var s = this._arr, a = s.length;
+          return o[n] = a, s.push({ key: n, priority: i }), this._decrease(a), true;
+        }
+        return false;
+      }
+      removeMin() {
+        this._swap(0, this._arr.length - 1);
+        var n = this._arr.pop();
+        return delete this._keyIndices[n.key], this._heapify(0), n.key;
+      }
+      decrease(n, i) {
+        var o = this._keyIndices[n];
+        if (i > this._arr[o].priority) throw new Error("New priority is greater than current priority. Key: " + n + " Old: " + this._arr[o].priority + " New: " + i);
+        this._arr[o].priority = i, this._decrease(o);
+      }
+      _heapify(n) {
+        var i = this._arr, o = 2 * n, s = o + 1, a = n;
+        o < i.length && (a = i[o].priority < i[a].priority ? o : a, s < i.length && (a = i[s].priority < i[a].priority ? s : a), a !== n && (this._swap(n, a), this._heapify(a)));
+      }
+      _decrease(n) {
+        for (var i = this._arr, o = i[n].priority, s; n !== 0 && (s = n >> 1, !(i[s].priority < o)); ) this._swap(n, s), n = s;
+      }
+      _swap(n, i) {
+        var o = this._arr, s = this._keyIndices, a = o[n], l = o[i];
+        o[n] = l, o[i] = a, s[l.key] = n, s[a.key] = i;
+      }
+    };
+    t.exports = r;
+  }), T = E((e, t) => {
+    var r = K();
+    t.exports = i;
+    var n = () => 1;
+    function i(s, a, l, u) {
+      var c = function(d) {
+        return s.outEdges(d);
+      };
+      return o(s, String(a), l || n, u || c);
+    }
+    function o(s, a, l, u) {
+      var c = {}, d = new r(), h, f, m = function(p) {
+        var w = p.v !== h ? p.v : p.w, b = c[w], g = l(p), I = f.distance + g;
+        if (g < 0) throw new Error("dijkstra does not allow negative edge weights. Bad edge: " + p + " Weight: " + g);
+        I < b.distance && (b.distance = I, b.predecessor = h, d.decrease(w, I));
+      };
+      for (s.nodes().forEach(function(p) {
+        var w = p === a ? 0 : Number.POSITIVE_INFINITY;
+        c[p] = { distance: w }, d.add(p, w);
+      }); d.size() > 0 && (h = d.removeMin(), f = c[h], f.distance !== Number.POSITIVE_INFINITY); ) u(h).forEach(m);
+      return c;
+    }
+  }), Xt = E((e, t) => {
+    var r = T();
+    t.exports = n;
+    function n(i, o, s) {
+      return i.nodes().reduce(function(a, l) {
+        return a[l] = r(i, l, o, s), a;
+      }, {});
+    }
+  }), Ht = E((e, t) => {
+    t.exports = r;
+    function r(i, o, s) {
+      if (i[o].predecessor !== void 0) throw new Error("Invalid source vertex");
+      if (i[s].predecessor === void 0 && s !== o) throw new Error("Invalid destination vertex");
+      return { weight: i[s].distance, path: n(i, o, s) };
+    }
+    function n(i, o, s) {
+      for (var a = [], l = s; l !== o; ) a.push(l), l = i[l].predecessor;
+      return a.push(o), a.reverse();
+    }
+  }), Q = E((e, t) => {
+    t.exports = r;
+    function r(n) {
+      var i = 0, o = [], s = {}, a = [];
+      function l(u) {
+        var c = s[u] = { onStack: true, lowlink: i, index: i++ };
+        if (o.push(u), n.successors(u).forEach(function(f) {
+          Object.hasOwn(s, f) ? s[f].onStack && (c.lowlink = Math.min(c.lowlink, s[f].index)) : (l(f), c.lowlink = Math.min(c.lowlink, s[f].lowlink));
+        }), c.lowlink === c.index) {
+          var d = [], h;
+          do
+            h = o.pop(), s[h].onStack = false, d.push(h);
+          while (u !== h);
+          a.push(d);
+        }
+      }
+      return n.nodes().forEach(function(u) {
+        Object.hasOwn(s, u) || l(u);
+      }), a;
+    }
+  }), Ut = E((e, t) => {
+    var r = Q();
+    t.exports = n;
+    function n(i) {
+      return r(i).filter(function(o) {
+        return o.length > 1 || o.length === 1 && i.hasEdge(o[0], o[0]);
+      });
+    }
+  }), Kt = E((e, t) => {
+    t.exports = n;
+    var r = () => 1;
+    function n(o, s, a) {
+      return i(o, s || r, a || function(l) {
+        return o.outEdges(l);
+      });
+    }
+    function i(o, s, a) {
+      var l = {}, u = o.nodes();
+      return u.forEach(function(c) {
+        l[c] = {}, l[c][c] = { distance: 0 }, u.forEach(function(d) {
+          c !== d && (l[c][d] = { distance: Number.POSITIVE_INFINITY });
+        }), a(c).forEach(function(d) {
+          var h = d.v === c ? d.w : d.v, f = s(d);
+          l[c][h] = { distance: f, predecessor: c };
+        });
+      }), u.forEach(function(c) {
+        var d = l[c];
+        u.forEach(function(h) {
+          var f = l[h];
+          u.forEach(function(m) {
+            var p = f[c], w = d[m], b = f[m], g = p.distance + w.distance;
+            g < b.distance && (b.distance = g, b.predecessor = w.predecessor);
+          });
+        });
+      }), l;
+    }
+  }), J = E((e, t) => {
+    function r(i) {
+      var o = {}, s = {}, a = [];
+      function l(u) {
+        if (Object.hasOwn(s, u)) throw new n();
+        Object.hasOwn(o, u) || (s[u] = true, o[u] = true, i.predecessors(u).forEach(l), delete s[u], a.push(u));
+      }
+      if (i.sinks().forEach(l), Object.keys(o).length !== i.nodeCount()) throw new n();
+      return a;
+    }
+    var n = class extends Error {
+      constructor() {
+        super(...arguments);
+      }
+    };
+    t.exports = r, r.CycleException = n;
+  }), Qt = E((e, t) => {
+    var r = J();
+    t.exports = n;
+    function n(i) {
+      try {
+        r(i);
+      } catch (o) {
+        if (o instanceof r.CycleException) return false;
+        throw o;
+      }
+      return true;
+    }
+  }), Z = E((e, t) => {
+    t.exports = r;
+    function r(i, o, s, a, l) {
+      Array.isArray(o) || (o = [o]);
+      var u = (i.isDirected() ? i.successors : i.neighbors).bind(i), c = {};
+      return o.forEach(function(d) {
+        if (!i.hasNode(d)) throw new Error("Graph does not have node: " + d);
+        l = n(i, d, s === "post", c, u, a, l);
+      }), l;
+    }
+    function n(i, o, s, a, l, u, c) {
+      return Object.hasOwn(a, o) || (a[o] = true, s || (c = u(c, o)), l(o).forEach(function(d) {
+        c = n(i, d, s, a, l, u, c);
+      }), s && (c = u(c, o))), c;
+    }
+  }), $ = E((e, t) => {
+    var r = Z();
+    t.exports = n;
+    function n(i, o, s) {
+      return r(i, o, s, function(a, l) {
+        return a.push(l), a;
+      }, []);
+    }
+  }), Jt = E((e, t) => {
+    var r = $();
+    t.exports = n;
+    function n(i, o) {
+      return r(i, o, "post");
+    }
+  }), Zt = E((e, t) => {
+    var r = $();
+    t.exports = n;
+    function n(i, o) {
+      return r(i, o, "pre");
+    }
+  }), $t = E((e, t) => {
+    var r = R(), n = K();
+    t.exports = i;
+    function i(o, s) {
+      var a = new r(), l = {}, u = new n(), c;
+      function d(f) {
+        var m = f.v === c ? f.w : f.v, p = u.priority(m);
+        if (p !== void 0) {
+          var w = s(f);
+          w < p && (l[m] = c, u.decrease(m, w));
+        }
+      }
+      if (o.nodeCount() === 0) return a;
+      o.nodes().forEach(function(f) {
+        u.add(f, Number.POSITIVE_INFINITY), a.setNode(f);
+      }), u.decrease(o.nodes()[0], 0);
+      for (var h = false; u.size() > 0; ) {
+        if (c = u.removeMin(), Object.hasOwn(l, c)) a.setEdge(c, l[c]);
+        else {
+          if (h) throw new Error("Input graph is not connected: " + o);
+          h = true;
+        }
+        o.nodeEdges(c).forEach(d);
+      }
+      return a;
+    }
+  }), er = E((e, t) => {
+    var r = T(), n = U();
+    t.exports = i;
+    function i(s, a, l, u) {
+      return o(s, a, l, u || function(c) {
+        return s.outEdges(c);
+      });
+    }
+    function o(s, a, l, u) {
+      if (l === void 0) return r(s, a, l, u);
+      for (var c = false, d = s.nodes(), h = 0; h < d.length; h++) {
+        for (var f = u(d[h]), m = 0; m < f.length; m++) {
+          var p = f[m], w = p.v === d[h] ? p.v : p.w, b = w === p.v ? p.w : p.v;
+          l({ v: w, w: b }) < 0 && (c = true);
+        }
+        if (c) return n(s, a, l, u);
+      }
+      return r(s, a, l, u);
+    }
+  }), tr = E((e, t) => {
+    t.exports = { bellmanFord: U(), components: zt(), dijkstra: T(), dijkstraAll: Xt(), extractPath: Ht(), findCycles: Ut(), floydWarshall: Kt(), isAcyclic: Qt(), postorder: Jt(), preorder: Zt(), prim: $t(), shortestPaths: er(), reduce: Z(), tarjan: Q(), topsort: J() };
+  }), H = Bt();
+  ee.exports = { Graph: H.Graph, json: Wt(), alg: tr(), version: H.version };
+});
+var ne = v((Ai, re) => {
+  var S = class {
+    constructor() {
+      let t = {};
+      t._next = t._prev = t, this._sentinel = t;
+    }
+    dequeue() {
+      let t = this._sentinel, r = t._prev;
+      if (r !== t) return te(r), r;
+    }
+    enqueue(t) {
+      let r = this._sentinel;
+      t._prev && t._next && te(t), t._next = r._next, r._next._prev = t, r._next = t, t._prev = r;
+    }
+    toString() {
+      let t = [], r = this._sentinel, n = r._prev;
+      for (; n !== r; ) t.push(JSON.stringify(n, rr)), n = n._prev;
+      return "[" + t.join(", ") + "]";
+    }
+  };
+  function te(e) {
+    e._prev._next = e._next, e._next._prev = e._prev, delete e._next, delete e._prev;
+  }
+  function rr(e, t) {
+    if (e !== "_next" && e !== "_prev") return t;
+  }
+  re.exports = S;
+});
+var oe = v((Yi, ie) => {
+  var nr = y().Graph, ir = ne();
+  ie.exports = sr;
+  var or = () => 1;
+  function sr(e, t) {
+    if (e.nodeCount() <= 1) return [];
+    let r = dr(e, t || or);
+    return ar(r.graph, r.buckets, r.zeroIdx).flatMap((i) => e.outEdges(i.v, i.w));
+  }
+  function ar(e, t, r) {
+    let n = [], i = t[t.length - 1], o = t[0], s;
+    for (; e.nodeCount(); ) {
+      for (; s = o.dequeue(); ) P(e, t, r, s);
+      for (; s = i.dequeue(); ) P(e, t, r, s);
+      if (e.nodeCount()) {
+        for (let a = t.length - 2; a > 0; --a) if (s = t[a].dequeue(), s) {
+          n = n.concat(P(e, t, r, s, true));
+          break;
+        }
+      }
+    }
+    return n;
+  }
+  function P(e, t, r, n, i) {
+    let o = i ? [] : void 0;
+    return e.inEdges(n.v).forEach((s) => {
+      let a = e.edge(s), l = e.node(s.v);
+      i && o.push({ v: s.v, w: s.w }), l.out -= a, F(t, r, l);
+    }), e.outEdges(n.v).forEach((s) => {
+      let a = e.edge(s), l = s.w, u = e.node(l);
+      u.in -= a, F(t, r, u);
+    }), e.removeNode(n.v), o;
+  }
+  function dr(e, t) {
+    let r = new nr(), n = 0, i = 0;
+    e.nodes().forEach((a) => {
+      r.setNode(a, { v: a, in: 0, out: 0 });
+    }), e.edges().forEach((a) => {
+      let l = r.edge(a.v, a.w) || 0, u = t(a), c = l + u;
+      r.setEdge(a.v, a.w, c), i = Math.max(i, r.node(a.v).out += u), n = Math.max(n, r.node(a.w).in += u);
+    });
+    let o = lr(i + n + 3).map(() => new ir()), s = n + 1;
+    return r.nodes().forEach((a) => {
+      F(o, s, r.node(a));
+    }), { graph: r, buckets: o, zeroIdx: s };
+  }
+  function F(e, t, r) {
+    r.out ? r.in ? e[r.out - r.in + t].enqueue(r) : e[e.length - 1].enqueue(r) : e[0].enqueue(r);
+  }
+  function lr(e) {
+    let t = [];
+    for (let r = 0; r < e; r++) t.push(r);
+    return t;
+  }
+});
+var _ = v((Bi, ce) => {
+  "use strict";
+  var se = y().Graph;
+  ce.exports = { addBorderNode: vr, addDummyNode: ae, applyWithChunking: C, asNonCompoundGraph: hr, buildLayerMatrix: mr, intersectRect: pr, mapValues: Or, maxRank: le, normalizeRanks: wr, notime: kr, partition: Er, pick: xr, predecessorWeights: fr, range: he, removeEmptyRanks: br, simplify: ur, successorWeights: cr, time: _r, uniqueId: ue, zipObject: D };
+  function ae(e, t, r, n) {
+    for (var i = n; e.hasNode(i); ) i = ue(n);
+    return r.dummy = t, e.setNode(i, r), i;
+  }
+  function ur(e) {
+    let t = new se().setGraph(e.graph());
+    return e.nodes().forEach((r) => t.setNode(r, e.node(r))), e.edges().forEach((r) => {
+      let n = t.edge(r.v, r.w) || { weight: 0, minlen: 1 }, i = e.edge(r);
+      t.setEdge(r.v, r.w, { weight: n.weight + i.weight, minlen: Math.max(n.minlen, i.minlen) });
+    }), t;
+  }
+  function hr(e) {
+    let t = new se({ multigraph: e.isMultigraph() }).setGraph(e.graph());
+    return e.nodes().forEach((r) => {
+      e.children(r).length || t.setNode(r, e.node(r));
+    }), e.edges().forEach((r) => {
+      t.setEdge(r, e.edge(r));
+    }), t;
+  }
+  function cr(e) {
+    let t = e.nodes().map((r) => {
+      let n = {};
+      return e.outEdges(r).forEach((i) => {
+        n[i.w] = (n[i.w] || 0) + e.edge(i).weight;
+      }), n;
+    });
+    return D(e.nodes(), t);
+  }
+  function fr(e) {
+    let t = e.nodes().map((r) => {
+      let n = {};
+      return e.inEdges(r).forEach((i) => {
+        n[i.v] = (n[i.v] || 0) + e.edge(i).weight;
+      }), n;
+    });
+    return D(e.nodes(), t);
+  }
+  function pr(e, t) {
+    let r = e.x, n = e.y, i = t.x - r, o = t.y - n, s = e.width / 2, a = e.height / 2;
+    if (!i && !o) throw new Error("Not possible to find intersection inside of the rectangle");
+    let l, u;
+    return Math.abs(o) * s > Math.abs(i) * a ? (o < 0 && (a = -a), l = a * i / o, u = a) : (i < 0 && (s = -s), l = s, u = s * o / i), { x: r + l, y: n + u };
+  }
+  function mr(e) {
+    let t = he(le(e) + 1).map(() => []);
+    return e.nodes().forEach((r) => {
+      let n = e.node(r), i = n.rank;
+      i !== void 0 && (t[i][n.order] = r);
+    }), t;
+  }
+  function wr(e) {
+    let t = e.nodes().map((n) => {
+      let i = e.node(n).rank;
+      return i === void 0 ? Number.MAX_VALUE : i;
+    }), r = C(Math.min, t);
+    e.nodes().forEach((n) => {
+      let i = e.node(n);
+      Object.hasOwn(i, "rank") && (i.rank -= r);
+    });
+  }
+  function br(e) {
+    let t = e.nodes().map((s) => e.node(s).rank).filter((s) => s !== void 0), r = C(Math.min, t), n = [];
+    e.nodes().forEach((s) => {
+      let a = e.node(s).rank - r;
+      n[a] || (n[a] = []), n[a].push(s);
+    });
+    let i = 0, o = e.graph().nodeRankFactor;
+    Array.from(n).forEach((s, a) => {
+      s === void 0 && a % o !== 0 ? --i : s !== void 0 && i && s.forEach((l) => e.node(l).rank += i);
+    });
+  }
+  function vr(e, t, r, n) {
+    let i = { width: 0, height: 0 };
+    return arguments.length >= 4 && (i.rank = r, i.order = n), ae(e, "border", i, t);
+  }
+  function gr(e, t = de) {
+    let r = [];
+    for (let n = 0; n < e.length; n += t) {
+      let i = e.slice(n, n + t);
+      r.push(i);
+    }
+    return r;
+  }
+  var de = 65535;
+  function C(e, t) {
+    if (t.length > de) {
+      let r = gr(t);
+      return e.apply(null, r.map((n) => e.apply(null, n)));
+    } else return e.apply(null, t);
+  }
+  function le(e) {
+    let r = e.nodes().map((n) => {
+      let i = e.node(n).rank;
+      return i === void 0 ? Number.MIN_VALUE : i;
+    });
+    return C(Math.max, r);
+  }
+  function Er(e, t) {
+    let r = { lhs: [], rhs: [] };
+    return e.forEach((n) => {
+      t(n) ? r.lhs.push(n) : r.rhs.push(n);
+    }), r;
+  }
+  function _r(e, t) {
+    let r = Date.now();
+    try {
+      return t();
+    } finally {
+      console.log(e + " time: " + (Date.now() - r) + "ms");
+    }
+  }
+  function kr(e, t) {
+    return t();
+  }
+  var yr = 0;
+  function ue(e) {
+    var t = ++yr;
+    return e + ("" + t);
+  }
+  function he(e, t, r = 1) {
+    t == null && (t = e, e = 0);
+    let n = (o) => o < t;
+    r < 0 && (n = (o) => t < o);
+    let i = [];
+    for (let o = e; n(o); o += r) i.push(o);
+    return i;
+  }
+  function xr(e, t) {
+    let r = {};
+    for (let n of t) e[n] !== void 0 && (r[n] = e[n]);
+    return r;
+  }
+  function Or(e, t) {
+    let r = t;
+    return typeof t == "string" && (r = (n) => n[t]), Object.entries(e).reduce((n, [i, o]) => (n[i] = r(o, i), n), {});
+  }
+  function D(e, t) {
+    return e.reduce((r, n, i) => (r[n] = t[i], r), {});
+  }
+});
+var pe = v((Wi, fe) => {
+  "use strict";
+  var Nr = oe(), Ir = _().uniqueId;
+  fe.exports = { run: jr, undo: Lr };
+  function jr(e) {
+    (e.graph().acyclicer === "greedy" ? Nr(e, r(e)) : Cr(e)).forEach((n) => {
+      let i = e.edge(n);
+      e.removeEdge(n), i.forwardName = n.name, i.reversed = true, e.setEdge(n.w, n.v, i, Ir("rev"));
+    });
+    function r(n) {
+      return (i) => n.edge(i).weight;
+    }
+  }
+  function Cr(e) {
+    let t = [], r = {}, n = {};
+    function i(o) {
+      Object.hasOwn(n, o) || (n[o] = true, r[o] = true, e.outEdges(o).forEach((s) => {
+        Object.hasOwn(r, s.w) ? t.push(s) : i(s.w);
+      }), delete r[o]);
+    }
+    return e.nodes().forEach(i), t;
+  }
+  function Lr(e) {
+    e.edges().forEach((t) => {
+      let r = e.edge(t);
+      if (r.reversed) {
+        e.removeEdge(t);
+        let n = r.forwardName;
+        delete r.reversed, delete r.forwardName, e.setEdge(t.w, t.v, r, n);
+      }
+    });
+  }
+});
+var we = v((zi, me) => {
+  "use strict";
+  var qr = _();
+  me.exports = { run: Mr, undo: Tr };
+  function Mr(e) {
+    e.graph().dummyChains = [], e.edges().forEach((t) => Rr(e, t));
+  }
+  function Rr(e, t) {
+    let r = t.v, n = e.node(r).rank, i = t.w, o = e.node(i).rank, s = t.name, a = e.edge(t), l = a.labelRank;
+    if (o === n + 1) return;
+    e.removeEdge(t);
+    let u, c, d;
+    for (d = 0, ++n; n < o; ++d, ++n) a.points = [], c = { width: 0, height: 0, edgeLabel: a, edgeObj: t, rank: n }, u = qr.addDummyNode(e, "edge", c, "_d"), n === l && (c.width = a.width, c.height = a.height, c.dummy = "edge-label", c.labelpos = a.labelpos), e.setEdge(r, u, { weight: a.weight }, s), d === 0 && e.graph().dummyChains.push(u), r = u;
+    e.setEdge(r, i, { weight: a.weight }, s);
+  }
+  function Tr(e) {
+    e.graph().dummyChains.forEach((t) => {
+      let r = e.node(t), n = r.edgeLabel, i;
+      for (e.setEdge(r.edgeObj, n); r.dummy; ) i = e.successors(t)[0], e.removeNode(t), n.points.push({ x: r.x, y: r.y }), r.dummy === "edge-label" && (n.x = r.x, n.y = r.y, n.width = r.width, n.height = r.height), t = i, r = e.node(t);
+    });
+  }
+});
+var j = v((Xi, be) => {
+  "use strict";
+  var { applyWithChunking: Sr } = _();
+  be.exports = { longestPath: Pr, slack: Fr };
+  function Pr(e) {
+    var t = {};
+    function r(n) {
+      var i = e.node(n);
+      if (Object.hasOwn(t, n)) return i.rank;
+      t[n] = true;
+      let o = e.outEdges(n).map((a) => a == null ? Number.POSITIVE_INFINITY : r(a.w) - e.edge(a).minlen);
+      var s = Sr(Math.min, o);
+      return s === Number.POSITIVE_INFINITY && (s = 0), i.rank = s;
+    }
+    e.sources().forEach(r);
+  }
+  function Fr(e, t) {
+    return e.node(t.w).rank - e.node(t.v).rank - e.edge(t).minlen;
+  }
+});
+var G = v((Hi, ve) => {
+  "use strict";
+  var Dr = y().Graph, L = j().slack;
+  ve.exports = Gr;
+  function Gr(e) {
+    var t = new Dr({ directed: false }), r = e.nodes()[0], n = e.nodeCount();
+    t.setNode(r, {});
+    for (var i, o; Vr(t, e) < n; ) i = Ar(t, e), o = t.hasNode(i.v) ? L(e, i) : -L(e, i), Yr(t, e, o);
+    return t;
+  }
+  function Vr(e, t) {
+    function r(n) {
+      t.nodeEdges(n).forEach((i) => {
+        var o = i.v, s = n === o ? i.w : o;
+        !e.hasNode(s) && !L(t, i) && (e.setNode(s, {}), e.setEdge(n, s, {}), r(s));
+      });
+    }
+    return e.nodes().forEach(r), e.nodeCount();
+  }
+  function Ar(e, t) {
+    return t.edges().reduce((n, i) => {
+      let o = Number.POSITIVE_INFINITY;
+      return e.hasNode(i.v) !== e.hasNode(i.w) && (o = L(t, i)), o < n[0] ? [o, i] : n;
+    }, [Number.POSITIVE_INFINITY, null])[1];
+  }
+  function Yr(e, t, r) {
+    e.nodes().forEach((n) => t.node(n).rank += r);
+  }
+});
+var Ie = v((Ui, Ne) => {
+  "use strict";
+  var Br = G(), ge = j().slack, Wr = j().longestPath, zr = y().alg.preorder, Xr = y().alg.postorder, Hr = _().simplify;
+  Ne.exports = N;
+  N.initLowLimValues = A;
+  N.initCutValues = V;
+  N.calcCutValue = _e;
+  N.leaveEdge = ye;
+  N.enterEdge = xe;
+  N.exchangeEdges = Oe;
+  function N(e) {
+    e = Hr(e), Wr(e);
+    var t = Br(e);
+    A(t), V(t, e);
+    for (var r, n; r = ye(t); ) n = xe(t, e, r), Oe(t, e, r, n);
+  }
+  function V(e, t) {
+    var r = Xr(e, e.nodes());
+    r = r.slice(0, r.length - 1), r.forEach((n) => Ur(e, t, n));
+  }
+  function Ur(e, t, r) {
+    var n = e.node(r), i = n.parent;
+    e.edge(r, i).cutvalue = _e(e, t, r);
+  }
+  function _e(e, t, r) {
+    var n = e.node(r), i = n.parent, o = true, s = t.edge(r, i), a = 0;
+    return s || (o = false, s = t.edge(i, r)), a = s.weight, t.nodeEdges(r).forEach((l) => {
+      var u = l.v === r, c = u ? l.w : l.v;
+      if (c !== i) {
+        var d = u === o, h = t.edge(l).weight;
+        if (a += d ? h : -h, Qr(e, r, c)) {
+          var f = e.edge(r, c).cutvalue;
+          a += d ? -f : f;
+        }
+      }
+    }), a;
+  }
+  function A(e, t) {
+    arguments.length < 2 && (t = e.nodes()[0]), ke(e, {}, 1, t);
+  }
+  function ke(e, t, r, n, i) {
+    var o = r, s = e.node(n);
+    return t[n] = true, e.neighbors(n).forEach((a) => {
+      Object.hasOwn(t, a) || (r = ke(e, t, r, a, n));
+    }), s.low = o, s.lim = r++, i ? s.parent = i : delete s.parent, r;
+  }
+  function ye(e) {
+    return e.edges().find((t) => e.edge(t).cutvalue < 0);
+  }
+  function xe(e, t, r) {
+    var n = r.v, i = r.w;
+    t.hasEdge(n, i) || (n = r.w, i = r.v);
+    var o = e.node(n), s = e.node(i), a = o, l = false;
+    o.lim > s.lim && (a = s, l = true);
+    var u = t.edges().filter((c) => l === Ee(e, e.node(c.v), a) && l !== Ee(e, e.node(c.w), a));
+    return u.reduce((c, d) => ge(t, d) < ge(t, c) ? d : c);
+  }
+  function Oe(e, t, r, n) {
+    var i = r.v, o = r.w;
+    e.removeEdge(i, o), e.setEdge(n.v, n.w, {}), A(e), V(e, t), Kr(e, t);
+  }
+  function Kr(e, t) {
+    var r = e.nodes().find((i) => !t.node(i).parent), n = zr(e, r);
+    n = n.slice(1), n.forEach((i) => {
+      var o = e.node(i).parent, s = t.edge(i, o), a = false;
+      s || (s = t.edge(o, i), a = true), t.node(i).rank = t.node(o).rank + (a ? s.minlen : -s.minlen);
+    });
+  }
+  function Qr(e, t, r) {
+    return e.hasEdge(t, r);
+  }
+  function Ee(e, t, r) {
+    return r.low <= t.lim && t.lim <= r.lim;
+  }
+});
+var qe = v((Ki, Le) => {
+  "use strict";
+  var Jr = j(), Ce = Jr.longestPath, Zr = G(), $r = Ie();
+  Le.exports = en;
+  function en(e) {
+    var t = e.graph().ranker;
+    if (t instanceof Function) return t(e);
+    switch (e.graph().ranker) {
+      case "network-simplex":
+        je(e);
+        break;
+      case "tight-tree":
+        rn(e);
+        break;
+      case "longest-path":
+        tn(e);
+        break;
+      case "none":
+        break;
+      default:
+        je(e);
+    }
+  }
+  var tn = Ce;
+  function rn(e) {
+    Ce(e), Zr(e);
+  }
+  function je(e) {
+    $r(e);
+  }
+});
+var Re = v((Qi, Me) => {
+  Me.exports = nn;
+  function nn(e) {
+    let t = sn(e);
+    e.graph().dummyChains.forEach((r) => {
+      let n = e.node(r), i = n.edgeObj, o = on(e, t, i.v, i.w), s = o.path, a = o.lca, l = 0, u = s[l], c = true;
+      for (; r !== i.w; ) {
+        if (n = e.node(r), c) {
+          for (; (u = s[l]) !== a && e.node(u).maxRank < n.rank; ) l++;
+          u === a && (c = false);
+        }
+        if (!c) {
+          for (; l < s.length - 1 && e.node(u = s[l + 1]).minRank <= n.rank; ) l++;
+          u = s[l];
+        }
+        e.setParent(r, u), r = e.successors(r)[0];
+      }
+    });
+  }
+  function on(e, t, r, n) {
+    let i = [], o = [], s = Math.min(t[r].low, t[n].low), a = Math.max(t[r].lim, t[n].lim), l, u;
+    l = r;
+    do
+      l = e.parent(l), i.push(l);
+    while (l && (t[l].low > s || a > t[l].lim));
+    for (u = l, l = n; (l = e.parent(l)) !== u; ) o.push(l);
+    return { path: i.concat(o.reverse()), lca: u };
+  }
+  function sn(e) {
+    let t = {}, r = 0;
+    function n(i) {
+      let o = r;
+      e.children(i).forEach(n), t[i] = { low: o, lim: r++ };
+    }
+    return e.children().forEach(n), t;
+  }
+});
+var Pe = v((Ji, Se) => {
+  var q = _();
+  Se.exports = { run: an, cleanup: un };
+  function an(e) {
+    let t = q.addDummyNode(e, "root", {}, "_root"), r = dn(e), n = Object.values(r), i = q.applyWithChunking(Math.max, n) - 1, o = 2 * i + 1;
+    e.graph().nestingRoot = t, e.edges().forEach((a) => e.edge(a).minlen *= o);
+    let s = ln(e) + 1;
+    e.children().forEach((a) => Te(e, t, o, s, i, r, a)), e.graph().nodeRankFactor = o;
+  }
+  function Te(e, t, r, n, i, o, s) {
+    let a = e.children(s);
+    if (!a.length) {
+      s !== t && e.setEdge(t, s, { weight: 0, minlen: r });
+      return;
+    }
+    let l = q.addBorderNode(e, "_bt"), u = q.addBorderNode(e, "_bb"), c = e.node(s);
+    e.setParent(l, s), c.borderTop = l, e.setParent(u, s), c.borderBottom = u, a.forEach((d) => {
+      Te(e, t, r, n, i, o, d);
+      let h = e.node(d), f = h.borderTop ? h.borderTop : d, m = h.borderBottom ? h.borderBottom : d, p = h.borderTop ? n : 2 * n, w = f !== m ? 1 : i - o[s] + 1;
+      e.setEdge(l, f, { weight: p, minlen: w, nestingEdge: true }), e.setEdge(m, u, { weight: p, minlen: w, nestingEdge: true });
+    }), e.parent(s) || e.setEdge(t, l, { weight: 0, minlen: i + o[s] });
+  }
+  function dn(e) {
+    var t = {};
+    function r(n, i) {
+      var o = e.children(n);
+      o && o.length && o.forEach((s) => r(s, i + 1)), t[n] = i;
+    }
+    return e.children().forEach((n) => r(n, 1)), t;
+  }
+  function ln(e) {
+    return e.edges().reduce((t, r) => t + e.edge(r).weight, 0);
+  }
+  function un(e) {
+    var t = e.graph();
+    e.removeNode(t.nestingRoot), delete t.nestingRoot, e.edges().forEach((r) => {
+      var n = e.edge(r);
+      n.nestingEdge && e.removeEdge(r);
+    });
+  }
+});
+var Ge = v((Zi, De) => {
+  var hn = _();
+  De.exports = cn;
+  function cn(e) {
+    function t(r) {
+      let n = e.children(r), i = e.node(r);
+      if (n.length && n.forEach(t), Object.hasOwn(i, "minRank")) {
+        i.borderLeft = [], i.borderRight = [];
+        for (let o = i.minRank, s = i.maxRank + 1; o < s; ++o) Fe(e, "borderLeft", "_bl", r, i, o), Fe(e, "borderRight", "_br", r, i, o);
+      }
+    }
+    e.children().forEach(t);
+  }
+  function Fe(e, t, r, n, i, o) {
+    let s = { width: 0, height: 0, rank: o, borderType: t }, a = i[t][o - 1], l = hn.addDummyNode(e, "border", s, r);
+    i[t][o] = l, e.setParent(l, n), a && e.setEdge(a, l, { weight: 1 });
+  }
+});
+var Be = v(($i, Ye) => {
+  "use strict";
+  Ye.exports = { adjust: fn, undo: pn };
+  function fn(e) {
+    let t = e.graph().rankdir.toLowerCase();
+    (t === "lr" || t === "rl") && Ae(e);
+  }
+  function pn(e) {
+    let t = e.graph().rankdir.toLowerCase();
+    (t === "bt" || t === "rl") && mn(e), (t === "lr" || t === "rl") && (wn(e), Ae(e));
+  }
+  function Ae(e) {
+    e.nodes().forEach((t) => Ve(e.node(t))), e.edges().forEach((t) => Ve(e.edge(t)));
+  }
+  function Ve(e) {
+    let t = e.width;
+    e.width = e.height, e.height = t;
+  }
+  function mn(e) {
+    e.nodes().forEach((t) => Y(e.node(t))), e.edges().forEach((t) => {
+      let r = e.edge(t);
+      r.points.forEach(Y), Object.hasOwn(r, "y") && Y(r);
+    });
+  }
+  function Y(e) {
+    e.y = -e.y;
+  }
+  function wn(e) {
+    e.nodes().forEach((t) => B(e.node(t))), e.edges().forEach((t) => {
+      let r = e.edge(t);
+      r.points.forEach(B), Object.hasOwn(r, "x") && B(r);
+    });
+  }
+  function B(e) {
+    let t = e.x;
+    e.x = e.y, e.y = t;
+  }
+});
+var Xe = v((eo, ze) => {
+  "use strict";
+  var We = _();
+  ze.exports = bn;
+  function bn(e) {
+    let t = {}, r = e.nodes().filter((l) => !e.children(l).length), n = r.map((l) => e.node(l).rank), i = We.applyWithChunking(Math.max, n), o = We.range(i + 1).map(() => []);
+    function s(l) {
+      if (t[l]) return;
+      t[l] = true;
+      let u = e.node(l);
+      o[u.rank].push(l), e.successors(l).forEach(s);
+    }
+    return r.sort((l, u) => e.node(l).rank - e.node(u).rank).forEach(s), o;
+  }
+});
+var Ue = v((to, He) => {
+  "use strict";
+  var vn = _().zipObject;
+  He.exports = gn;
+  function gn(e, t) {
+    let r = 0;
+    for (let n = 1; n < t.length; ++n) r += En(e, t[n - 1], t[n]);
+    return r;
+  }
+  function En(e, t, r) {
+    let n = vn(r, r.map((u, c) => c)), i = t.flatMap((u) => e.outEdges(u).map((c) => ({ pos: n[c.w], weight: e.edge(c).weight })).sort((c, d) => c.pos - d.pos)), o = 1;
+    for (; o < r.length; ) o <<= 1;
+    let s = 2 * o - 1;
+    o -= 1;
+    let a = new Array(s).fill(0), l = 0;
+    return i.forEach((u) => {
+      let c = u.pos + o;
+      a[c] += u.weight;
+      let d = 0;
+      for (; c > 0; ) c % 2 && (d += a[c + 1]), c = c - 1 >> 1, a[c] += u.weight;
+      l += u.weight * d;
+    }), l;
+  }
+});
+var Qe = v((ro, Ke) => {
+  Ke.exports = _n;
+  function _n(e, t = []) {
+    return t.map((r) => {
+      let n = e.inEdges(r);
+      if (n.length) {
+        let i = n.reduce((o, s) => {
+          let a = e.edge(s), l = e.node(s.v);
+          return { sum: o.sum + a.weight * l.order, weight: o.weight + a.weight };
+        }, { sum: 0, weight: 0 });
+        return { v: r, barycenter: i.sum / i.weight, weight: i.weight };
+      } else return { v: r };
+    });
+  }
+});
+var Ze = v((no, Je) => {
+  "use strict";
+  var kn = _();
+  Je.exports = yn;
+  function yn(e, t) {
+    let r = {};
+    e.forEach((i, o) => {
+      let s = r[i.v] = { indegree: 0, in: [], out: [], vs: [i.v], i: o };
+      i.barycenter !== void 0 && (s.barycenter = i.barycenter, s.weight = i.weight);
+    }), t.edges().forEach((i) => {
+      let o = r[i.v], s = r[i.w];
+      o !== void 0 && s !== void 0 && (s.indegree++, o.out.push(r[i.w]));
+    });
+    let n = Object.values(r).filter((i) => !i.indegree);
+    return xn(n);
+  }
+  function xn(e) {
+    let t = [];
+    function r(i) {
+      return (o) => {
+        o.merged || (o.barycenter === void 0 || i.barycenter === void 0 || o.barycenter >= i.barycenter) && On(i, o);
+      };
+    }
+    function n(i) {
+      return (o) => {
+        o.in.push(i), --o.indegree === 0 && e.push(o);
+      };
+    }
+    for (; e.length; ) {
+      let i = e.pop();
+      t.push(i), i.in.reverse().forEach(r(i)), i.out.forEach(n(i));
+    }
+    return t.filter((i) => !i.merged).map((i) => kn.pick(i, ["vs", "i", "barycenter", "weight"]));
+  }
+  function On(e, t) {
+    let r = 0, n = 0;
+    e.weight && (r += e.barycenter * e.weight, n += e.weight), t.weight && (r += t.barycenter * t.weight, n += t.weight), e.vs = t.vs.concat(e.vs), e.barycenter = r / n, e.weight = n, e.i = Math.min(t.i, e.i), t.merged = true;
+  }
+});
+var tt = v((io, et) => {
+  var Nn = _();
+  et.exports = In;
+  function In(e, t) {
+    let r = Nn.partition(e, (c) => Object.hasOwn(c, "barycenter")), n = r.lhs, i = r.rhs.sort((c, d) => d.i - c.i), o = [], s = 0, a = 0, l = 0;
+    n.sort(jn(!!t)), l = $e(o, i, l), n.forEach((c) => {
+      l += c.vs.length, o.push(c.vs), s += c.barycenter * c.weight, a += c.weight, l = $e(o, i, l);
+    });
+    let u = { vs: o.flat(true) };
+    return a && (u.barycenter = s / a, u.weight = a), u;
+  }
+  function $e(e, t, r) {
+    let n;
+    for (; t.length && (n = t[t.length - 1]).i <= r; ) t.pop(), e.push(n.vs), r++;
+    return r;
+  }
+  function jn(e) {
+    return (t, r) => t.barycenter < r.barycenter ? -1 : t.barycenter > r.barycenter ? 1 : e ? r.i - t.i : t.i - r.i;
+  }
+});
+var it = v((oo, nt) => {
+  var Cn = Qe(), Ln = Ze(), qn = tt();
+  nt.exports = rt;
+  function rt(e, t, r, n) {
+    let i = e.children(t), o = e.node(t), s = o ? o.borderLeft : void 0, a = o ? o.borderRight : void 0, l = {};
+    s && (i = i.filter((h) => h !== s && h !== a));
+    let u = Cn(e, i);
+    u.forEach((h) => {
+      if (e.children(h.v).length) {
+        let f = rt(e, h.v, r, n);
+        l[h.v] = f, Object.hasOwn(f, "barycenter") && Rn(h, f);
+      }
+    });
+    let c = Ln(u, r);
+    Mn(c, l);
+    let d = qn(c, n);
+    if (s && (d.vs = [s, d.vs, a].flat(true), e.predecessors(s).length)) {
+      let h = e.node(e.predecessors(s)[0]), f = e.node(e.predecessors(a)[0]);
+      Object.hasOwn(d, "barycenter") || (d.barycenter = 0, d.weight = 0), d.barycenter = (d.barycenter * d.weight + h.order + f.order) / (d.weight + 2), d.weight += 2;
+    }
+    return d;
+  }
+  function Mn(e, t) {
+    e.forEach((r) => {
+      r.vs = r.vs.flatMap((n) => t[n] ? t[n].vs : n);
+    });
+  }
+  function Rn(e, t) {
+    e.barycenter !== void 0 ? (e.barycenter = (e.barycenter * e.weight + t.barycenter * t.weight) / (e.weight + t.weight), e.weight += t.weight) : (e.barycenter = t.barycenter, e.weight = t.weight);
+  }
+});
+var st = v((so, ot) => {
+  var Tn = y().Graph, Sn = _();
+  ot.exports = Pn;
+  function Pn(e, t, r, n) {
+    n || (n = e.nodes());
+    let i = Fn(e), o = new Tn({ compound: true }).setGraph({ root: i }).setDefaultNodeLabel((s) => e.node(s));
+    return n.forEach((s) => {
+      let a = e.node(s), l = e.parent(s);
+      (a.rank === t || a.minRank <= t && t <= a.maxRank) && (o.setNode(s), o.setParent(s, l || i), e[r](s).forEach((u) => {
+        let c = u.v === s ? u.w : u.v, d = o.edge(c, s), h = d !== void 0 ? d.weight : 0;
+        o.setEdge(c, s, { weight: e.edge(u).weight + h });
+      }), Object.hasOwn(a, "minRank") && o.setNode(s, { borderLeft: a.borderLeft[t], borderRight: a.borderRight[t] }));
+    }), o;
+  }
+  function Fn(e) {
+    for (var t; e.hasNode(t = Sn.uniqueId("_root")); ) ;
+    return t;
+  }
+});
+var dt = v((ao, at) => {
+  at.exports = Dn;
+  function Dn(e, t, r) {
+    let n = {}, i;
+    r.forEach((o) => {
+      let s = e.parent(o), a, l;
+      for (; s; ) {
+        if (a = e.parent(s), a ? (l = n[a], n[a] = s) : (l = i, i = s), l && l !== s) {
+          t.setEdge(l, s);
+          return;
+        }
+        s = a;
+      }
+    });
+  }
+});
+var ft = v((lo, ct) => {
+  "use strict";
+  var Gn = Xe(), Vn = Ue(), An = it(), Yn = st(), Bn = dt(), Wn = y().Graph, M = _();
+  ct.exports = ht;
+  function ht(e, t = {}) {
+    if (typeof t.customOrder == "function") {
+      t.customOrder(e, ht);
+      return;
+    }
+    let r = M.maxRank(e), n = lt(e, M.range(1, r + 1), "inEdges"), i = lt(e, M.range(r - 1, -1, -1), "outEdges"), o = Gn(e);
+    if (ut(e, o), t.disableOptimalOrderHeuristic) return;
+    let s = Number.POSITIVE_INFINITY, a, l = t.constraints || [];
+    for (let u = 0, c = 0; c < 4; ++u, ++c) {
+      zn(u % 2 ? n : i, u % 4 >= 2, l), o = M.buildLayerMatrix(e);
+      let d = Vn(e, o);
+      d < s ? (c = 0, a = Object.assign({}, o), s = d) : d === s && (a = structuredClone(o));
+    }
+    ut(e, a);
+  }
+  function lt(e, t, r) {
+    let n = /* @__PURE__ */ new Map(), i = (o, s) => {
+      n.has(o) || n.set(o, []), n.get(o).push(s);
+    };
+    for (let o of e.nodes()) {
+      let s = e.node(o);
+      if (typeof s.rank == "number" && i(s.rank, o), typeof s.minRank == "number" && typeof s.maxRank == "number") for (let a = s.minRank; a <= s.maxRank; a++) a !== s.rank && i(a, o);
+    }
+    return t.map(function(o) {
+      return Yn(e, o, r, n.get(o) || []);
+    });
+  }
+  function zn(e, t, r) {
+    let n = new Wn();
+    e.forEach(function(i) {
+      r.forEach((a) => n.setEdge(a.left, a.right));
+      let o = i.graph().root, s = An(i, o, n, t);
+      s.vs.forEach((a, l) => i.node(a).order = l), Bn(i, n, s.vs);
+    });
+  }
+  function ut(e, t) {
+    Object.values(t).forEach((r) => r.forEach((n, i) => e.node(n).order = i));
+  }
+});
+var yt = v((uo, kt) => {
+  "use strict";
+  var Xn = y().Graph, O = _();
+  kt.exports = { positionX: Kn, findType1Conflicts: pt, findType2Conflicts: mt, addConflict: W, hasConflict: wt, verticalAlignment: bt, horizontalCompaction: vt, alignCoordinates: Et, findSmallestWidthAlignment: gt, balance: _t };
+  function pt(e, t) {
+    let r = {};
+    function n(i, o) {
+      let s = 0, a = 0, l = i.length, u = o[o.length - 1];
+      return o.forEach((c, d) => {
+        let h = Hn(e, c), f = h ? e.node(h).order : l;
+        (h || c === u) && (o.slice(a, d + 1).forEach((m) => {
+          e.predecessors(m).forEach((p) => {
+            let w = e.node(p), b = w.order;
+            (b < s || f < b) && !(w.dummy && e.node(m).dummy) && W(r, p, m);
+          });
+        }), a = d + 1, s = f);
+      }), o;
+    }
+    return t.length && t.reduce(n), r;
+  }
+  function mt(e, t) {
+    let r = {};
+    function n(o, s, a, l, u) {
+      let c;
+      O.range(s, a).forEach((d) => {
+        c = o[d], e.node(c).dummy && e.predecessors(c).forEach((h) => {
+          let f = e.node(h);
+          f.dummy && (f.order < l || f.order > u) && W(r, h, c);
+        });
+      });
+    }
+    function i(o, s) {
+      let a = -1, l, u = 0;
+      return s.forEach((c, d) => {
+        if (e.node(c).dummy === "border") {
+          let h = e.predecessors(c);
+          h.length && (l = e.node(h[0]).order, n(s, u, d, a, l), u = d, a = l);
+        }
+        n(s, u, s.length, l, o.length);
+      }), s;
+    }
+    return t.length && t.reduce(i), r;
+  }
+  function Hn(e, t) {
+    if (e.node(t).dummy) return e.predecessors(t).find((r) => e.node(r).dummy);
+  }
+  function W(e, t, r) {
+    if (t > r) {
+      let i = t;
+      t = r, r = i;
+    }
+    let n = e[t];
+    n || (e[t] = n = {}), n[r] = true;
+  }
+  function wt(e, t, r) {
+    if (t > r) {
+      let n = t;
+      t = r, r = n;
+    }
+    return !!e[t] && Object.hasOwn(e[t], r);
+  }
+  function bt(e, t, r, n) {
+    let i = {}, o = {}, s = {};
+    return t.forEach((a) => {
+      a.forEach((l, u) => {
+        i[l] = l, o[l] = l, s[l] = u;
+      });
+    }), t.forEach((a) => {
+      let l = -1;
+      a.forEach((u) => {
+        let c = n(u);
+        if (c.length) {
+          c = c.sort((h, f) => s[h] - s[f]);
+          let d = (c.length - 1) / 2;
+          for (let h = Math.floor(d), f = Math.ceil(d); h <= f; ++h) {
+            let m = c[h];
+            o[u] === u && l < s[m] && !wt(r, u, m) && (o[m] = u, o[u] = i[u] = i[m], l = s[m]);
+          }
+        }
+      });
+    }), { root: i, align: o };
+  }
+  function vt(e, t, r, n, i) {
+    let o = {}, s = Un(e, t, r, i), a = i ? "borderLeft" : "borderRight";
+    function l(d, h) {
+      let f = s.nodes().slice(), m = {}, p = f.pop();
+      for (; p; ) {
+        if (m[p]) d(p);
+        else {
+          m[p] = true, f.push(p);
+          for (let w of h(p)) f.push(w);
+        }
+        p = f.pop();
+      }
+    }
+    function u(d) {
+      o[d] = s.inEdges(d).reduce((h, f) => Math.max(h, o[f.v] + s.edge(f)), 0);
+    }
+    function c(d) {
+      let h = s.outEdges(d).reduce((m, p) => Math.min(m, o[p.w] - s.edge(p)), Number.POSITIVE_INFINITY), f = e.node(d);
+      h !== Number.POSITIVE_INFINITY && f.borderType !== a && (o[d] = Math.max(o[d], h));
+    }
+    return l(u, s.predecessors.bind(s)), l(c, s.successors.bind(s)), Object.keys(n).forEach((d) => o[d] = o[r[d]]), o;
+  }
+  function Un(e, t, r, n) {
+    let i = new Xn(), o = e.graph(), s = Qn(o.nodesep, o.edgesep, n);
+    return t.forEach((a) => {
+      let l;
+      a.forEach((u) => {
+        let c = r[u];
+        if (i.setNode(c), l) {
+          var d = r[l], h = i.edge(d, c);
+          i.setEdge(d, c, Math.max(s(e, u, l), h || 0));
+        }
+        l = u;
+      });
+    }), i;
+  }
+  function gt(e, t) {
+    return Object.values(t).reduce((r, n) => {
+      let i = Number.NEGATIVE_INFINITY, o = Number.POSITIVE_INFINITY;
+      Object.entries(n).forEach(([a, l]) => {
+        let u = Jn(e, a) / 2;
+        i = Math.max(l + u, i), o = Math.min(l - u, o);
+      });
+      let s = i - o;
+      return s < r[0] && (r = [s, n]), r;
+    }, [Number.POSITIVE_INFINITY, null])[1];
+  }
+  function Et(e, t) {
+    let r = Object.values(t), n = O.applyWithChunking(Math.min, r), i = O.applyWithChunking(Math.max, r);
+    ["u", "d"].forEach((o) => {
+      ["l", "r"].forEach((s) => {
+        let a = o + s, l = e[a];
+        if (l === t) return;
+        let u = Object.values(l), c = n - O.applyWithChunking(Math.min, u);
+        s !== "l" && (c = i - O.applyWithChunking(Math.max, u)), c && (e[a] = O.mapValues(l, (d) => d + c));
+      });
+    });
+  }
+  function _t(e, t) {
+    return O.mapValues(e.ul, (r, n) => {
+      if (t) return e[t.toLowerCase()][n];
+      {
+        let i = Object.values(e).map((o) => o[n]).sort((o, s) => o - s);
+        return (i[1] + i[2]) / 2;
+      }
+    });
+  }
+  function Kn(e) {
+    let t = O.buildLayerMatrix(e), r = Object.assign(pt(e, t), mt(e, t)), n = {}, i;
+    ["u", "d"].forEach((s) => {
+      i = s === "u" ? t : Object.values(t).reverse(), ["l", "r"].forEach((a) => {
+        a === "r" && (i = i.map((d) => Object.values(d).reverse()));
+        let l = (s === "u" ? e.predecessors : e.successors).bind(e), u = bt(e, i, r, l), c = vt(e, i, u.root, u.align, a === "r");
+        a === "r" && (c = O.mapValues(c, (d) => -d)), n[s + a] = c;
+      });
+    });
+    let o = gt(e, n);
+    return Et(n, o), _t(n, e.graph().align);
+  }
+  function Qn(e, t, r) {
+    return (n, i, o) => {
+      let s = n.node(i), a = n.node(o), l = 0, u;
+      if (l += s.width / 2, Object.hasOwn(s, "labelpos")) switch (s.labelpos.toLowerCase()) {
+        case "l":
+          u = -s.width / 2;
+          break;
+        case "r":
+          u = s.width / 2;
+          break;
+      }
+      if (u && (l += r ? u : -u), u = 0, l += (s.dummy ? t : e) / 2, l += (a.dummy ? t : e) / 2, l += a.width / 2, Object.hasOwn(a, "labelpos")) switch (a.labelpos.toLowerCase()) {
+        case "l":
+          u = a.width / 2;
+          break;
+        case "r":
+          u = -a.width / 2;
+          break;
+      }
+      return u && (l += r ? u : -u), u = 0, l;
+    };
+  }
+  function Jn(e, t) {
+    return e.node(t).width;
+  }
+});
+var Nt = v((ho, Ot) => {
+  "use strict";
+  var xt = _(), Zn = yt().positionX;
+  Ot.exports = $n;
+  function $n(e) {
+    e = xt.asNonCompoundGraph(e), ei(e), Object.entries(Zn(e)).forEach(([t, r]) => e.node(t).x = r);
+  }
+  function ei(e) {
+    let t = xt.buildLayerMatrix(e), r = e.graph().ranksep, n = e.graph().rankalign, i = 0;
+    t.forEach((o) => {
+      let s = o.reduce((a, l) => {
+        let u = e.node(l).height;
+        return a > u ? a : u;
+      }, 0);
+      o.forEach((a) => {
+        let l = e.node(a);
+        n === "top" ? l.y = i + l.height / 2 : n === "bottom" ? l.y = i + s - l.height / 2 : l.y = i + s / 2;
+      }), i += s + r;
+    });
+  }
+});
+var Rt = v((co, Mt) => {
+  "use strict";
+  var It = pe(), jt = we(), ti = qe(), ri = _().normalizeRanks, ni = Re(), ii = _().removeEmptyRanks, Ct = Pe(), oi = Ge(), Lt = Be(), si = ft(), ai = Nt(), x = _(), di = y().Graph;
+  Mt.exports = li;
+  function li(e, t = {}) {
+    let r = t.debugTiming ? x.time : x.notime;
+    return r("layout", () => {
+      let n = r("  buildLayoutGraph", () => gi(e));
+      return r("  runLayout", () => ui(n, r, t)), r("  updateInputGraph", () => hi(e, n)), n;
+    });
+  }
+  function ui(e, t, r) {
+    t("    makeSpaceForEdgeLabels", () => Ei(e)), t("    removeSelfEdges", () => Ci(e)), t("    acyclic", () => It.run(e)), t("    nestingGraph.run", () => Ct.run(e)), t("    rank", () => ti(x.asNonCompoundGraph(e))), t("    injectEdgeLabelProxies", () => _i(e)), t("    removeEmptyRanks", () => ii(e)), t("    nestingGraph.cleanup", () => Ct.cleanup(e)), t("    normalizeRanks", () => ri(e)), t("    assignRankMinMax", () => ki(e)), t("    removeEdgeLabelProxies", () => yi(e)), t("    normalize.run", () => jt.run(e)), t("    parentDummyChains", () => ni(e)), t("    addBorderSegments", () => oi(e)), t("    order", () => si(e, r)), t("    insertSelfEdges", () => Li(e)), t("    adjustCoordinateSystem", () => Lt.adjust(e)), t("    position", () => ai(e)), t("    positionSelfEdges", () => qi(e)), t("    removeBorderNodes", () => ji(e)), t("    normalize.undo", () => jt.undo(e)), t("    fixupEdgeLabelCoords", () => Ni(e)), t("    undoCoordinateSystem", () => Lt.undo(e)), t("    translateGraph", () => xi(e)), t("    assignNodeIntersects", () => Oi(e)), t("    reversePoints", () => Ii(e)), t("    acyclic.undo", () => It.undo(e));
+  }
+  function hi(e, t) {
+    e.nodes().forEach((r) => {
+      let n = e.node(r), i = t.node(r);
+      n && (n.x = i.x, n.y = i.y, n.order = i.order, n.rank = i.rank, t.children(r).length && (n.width = i.width, n.height = i.height));
+    }), e.edges().forEach((r) => {
+      let n = e.edge(r), i = t.edge(r);
+      n.points = i.points, Object.hasOwn(i, "x") && (n.x = i.x, n.y = i.y);
+    }), e.graph().width = t.graph().width, e.graph().height = t.graph().height;
+  }
+  var ci = ["nodesep", "edgesep", "ranksep", "marginx", "marginy"], fi = { ranksep: 50, edgesep: 20, nodesep: 50, rankdir: "tb", rankalign: "center" }, pi = ["acyclicer", "ranker", "rankdir", "align", "rankalign"], mi = ["width", "height", "rank"], qt = { width: 0, height: 0 }, wi = ["minlen", "weight", "width", "height", "labeloffset"], bi = { minlen: 1, weight: 1, width: 0, height: 0, labeloffset: 10, labelpos: "r" }, vi = ["labelpos"];
+  function gi(e) {
+    let t = new di({ multigraph: true, compound: true }), r = X4(e.graph());
+    return t.setGraph(Object.assign({}, fi, z(r, ci), x.pick(r, pi))), e.nodes().forEach((n) => {
+      let i = X4(e.node(n)), o = z(i, mi);
+      Object.keys(qt).forEach((s) => {
+        o[s] === void 0 && (o[s] = qt[s]);
+      }), t.setNode(n, o), t.setParent(n, e.parent(n));
+    }), e.edges().forEach((n) => {
+      let i = X4(e.edge(n));
+      t.setEdge(n, Object.assign({}, bi, z(i, wi), x.pick(i, vi)));
+    }), t;
+  }
+  function Ei(e) {
+    let t = e.graph();
+    t.ranksep /= 2, e.edges().forEach((r) => {
+      let n = e.edge(r);
+      n.minlen *= 2, n.labelpos.toLowerCase() !== "c" && (t.rankdir === "TB" || t.rankdir === "BT" ? n.width += n.labeloffset : n.height += n.labeloffset);
+    });
+  }
+  function _i(e) {
+    e.edges().forEach((t) => {
+      let r = e.edge(t);
+      if (r.width && r.height) {
+        let n = e.node(t.v), o = { rank: (e.node(t.w).rank - n.rank) / 2 + n.rank, e: t };
+        x.addDummyNode(e, "edge-proxy", o, "_ep");
+      }
+    });
+  }
+  function ki(e) {
+    let t = 0;
+    e.nodes().forEach((r) => {
+      let n = e.node(r);
+      n.borderTop && (n.minRank = e.node(n.borderTop).rank, n.maxRank = e.node(n.borderBottom).rank, t = Math.max(t, n.maxRank));
+    }), e.graph().maxRank = t;
+  }
+  function yi(e) {
+    e.nodes().forEach((t) => {
+      let r = e.node(t);
+      r.dummy === "edge-proxy" && (e.edge(r.e).labelRank = r.rank, e.removeNode(t));
+    });
+  }
+  function xi(e) {
+    let t = Number.POSITIVE_INFINITY, r = 0, n = Number.POSITIVE_INFINITY, i = 0, o = e.graph(), s = o.marginx || 0, a = o.marginy || 0;
+    function l(u) {
+      let c = u.x, d = u.y, h = u.width, f = u.height;
+      t = Math.min(t, c - h / 2), r = Math.max(r, c + h / 2), n = Math.min(n, d - f / 2), i = Math.max(i, d + f / 2);
+    }
+    e.nodes().forEach((u) => l(e.node(u))), e.edges().forEach((u) => {
+      let c = e.edge(u);
+      Object.hasOwn(c, "x") && l(c);
+    }), t -= s, n -= a, e.nodes().forEach((u) => {
+      let c = e.node(u);
+      c.x -= t, c.y -= n;
+    }), e.edges().forEach((u) => {
+      let c = e.edge(u);
+      c.points.forEach((d) => {
+        d.x -= t, d.y -= n;
+      }), Object.hasOwn(c, "x") && (c.x -= t), Object.hasOwn(c, "y") && (c.y -= n);
+    }), o.width = r - t + s, o.height = i - n + a;
+  }
+  function Oi(e) {
+    e.edges().forEach((t) => {
+      let r = e.edge(t), n = e.node(t.v), i = e.node(t.w), o, s;
+      r.points ? (o = r.points[0], s = r.points[r.points.length - 1]) : (r.points = [], o = i, s = n), r.points.unshift(x.intersectRect(n, o)), r.points.push(x.intersectRect(i, s));
+    });
+  }
+  function Ni(e) {
+    e.edges().forEach((t) => {
+      let r = e.edge(t);
+      if (Object.hasOwn(r, "x")) switch ((r.labelpos === "l" || r.labelpos === "r") && (r.width -= r.labeloffset), r.labelpos) {
+        case "l":
+          r.x -= r.width / 2 + r.labeloffset;
+          break;
+        case "r":
+          r.x += r.width / 2 + r.labeloffset;
+          break;
+      }
+    });
+  }
+  function Ii(e) {
+    e.edges().forEach((t) => {
+      let r = e.edge(t);
+      r.reversed && r.points.reverse();
+    });
+  }
+  function ji(e) {
+    e.nodes().forEach((t) => {
+      if (e.children(t).length) {
+        let r = e.node(t), n = e.node(r.borderTop), i = e.node(r.borderBottom), o = e.node(r.borderLeft[r.borderLeft.length - 1]), s = e.node(r.borderRight[r.borderRight.length - 1]);
+        r.width = Math.abs(s.x - o.x), r.height = Math.abs(i.y - n.y), r.x = o.x + r.width / 2, r.y = n.y + r.height / 2;
+      }
+    }), e.nodes().forEach((t) => {
+      e.node(t).dummy === "border" && e.removeNode(t);
+    });
+  }
+  function Ci(e) {
+    e.edges().forEach((t) => {
+      if (t.v === t.w) {
+        var r = e.node(t.v);
+        r.selfEdges || (r.selfEdges = []), r.selfEdges.push({ e: t, label: e.edge(t) }), e.removeEdge(t);
+      }
+    });
+  }
+  function Li(e) {
+    var t = x.buildLayerMatrix(e);
+    t.forEach((r) => {
+      var n = 0;
+      r.forEach((i, o) => {
+        var s = e.node(i);
+        s.order = o + n, (s.selfEdges || []).forEach((a) => {
+          x.addDummyNode(e, "selfedge", { width: a.label.width, height: a.label.height, rank: s.rank, order: o + ++n, e: a.e, label: a.label }, "_se");
+        }), delete s.selfEdges;
+      });
+    });
+  }
+  function qi(e) {
+    e.nodes().forEach((t) => {
+      var r = e.node(t);
+      if (r.dummy === "selfedge") {
+        var n = e.node(r.e.v), i = n.x + n.width / 2, o = n.y, s = r.x - i, a = n.height / 2;
+        e.setEdge(r.e, r.label), e.removeNode(t), r.label.points = [{ x: i + 2 * s / 3, y: o - a }, { x: i + 5 * s / 6, y: o - a }, { x: i + s, y: o }, { x: i + 5 * s / 6, y: o + a }, { x: i + 2 * s / 3, y: o + a }], r.label.x = r.x, r.label.y = r.y;
+      }
+    });
+  }
+  function z(e, t) {
+    return x.mapValues(x.pick(e, t), Number);
+  }
+  function X4(e) {
+    var t = {};
+    return e && Object.entries(e).forEach(([r, n]) => {
+      typeof r == "string" && (r = r.toLowerCase()), t[r] = n;
+    }), t;
+  }
+});
+var St = v((fo, Tt) => {
+  var Mi = _(), Ri = y().Graph;
+  Tt.exports = { debugOrdering: Ti };
+  function Ti(e) {
+    let t = Mi.buildLayerMatrix(e), r = new Ri({ compound: true, multigraph: true }).setGraph({});
+    return e.nodes().forEach((n) => {
+      r.setNode(n, { label: n }), r.setParent(n, "layer" + e.node(n).rank);
+    }), e.edges().forEach((n) => r.setEdge(n.v, n.w, {}, n.name)), t.forEach((n, i) => {
+      let o = "layer" + i;
+      r.setNode(o, { rank: "same" }), n.reduce((s, a) => (r.setEdge(s, a, { style: "invis" }), a));
+    }), r;
+  }
+});
+var Ft = v((po, Pt) => {
+  Pt.exports = "2.0.4";
+});
+var Si = v((mo, Dt) => {
+  Dt.exports = { graphlib: y(), layout: Rt(), debug: St(), util: { time: _().time, notime: _().notime }, version: Ft() };
+});
+var dagre_esm_default = Si();
+
+// src/utils/layoutGraph.ts
+function getLayoutedElements(nodes, edges, options = {}) {
+  const {
+    direction = "TB",
+    nodeWidth = 260,
+    nodeHeight = 180,
+    rankSep = 100,
+    nodeSep = 80
+  } = options;
+  const g = new dagre_esm_default.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  g.setGraph({
+    rankdir: direction,
+    ranksep: rankSep,
+    nodesep: nodeSep,
+    marginx: 50,
+    marginy: 50
+  });
+  nodes.forEach((node) => {
+    const w = node.measured?.width || nodeWidth;
+    const h = node.measured?.height || nodeHeight;
+    g.setNode(node.id, { width: w, height: h });
+  });
+  edges.forEach((edge) => {
+    g.setEdge(edge.source, edge.target);
+  });
+  dagre_esm_default.layout(g);
+  const layoutedNodes = nodes.map((node) => {
+    const dagNode = g.node(node.id);
+    const w = node.measured?.width || nodeWidth;
+    const h = node.measured?.height || nodeHeight;
+    return {
+      ...node,
+      position: {
+        x: dagNode.x - w / 2,
+        y: dagNode.y - h / 2
+      }
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+}
+
+// src/components/studio/ReactFlowEditor.tsx
+import { Home, ChevronRight as ChevronRight3 } from "lucide-react";
+
+// src/components/studio/editor/nodeTypeRegistry.ts
+import {
+  DialogueNode,
+  LogicNode,
+  StateNode,
+  SubflowNode,
+  EntryNode,
+  ReturnNode,
+  RenderNode,
+  TriggerNode,
+  ConditionalNode,
+  SetVariableNode,
+  MorphNode
+} from "@decido/canvas-core";
+
+// src/components/studio/nodes/shell/RegisterButtonNode.tsx
+import { PanelLeft } from "lucide-react";
+
+// src/components/studio/nodes/shell/ShellNodeBase.tsx
+import { GripVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLOR_MAP = {
+  teal: { border: "border-teal-500/30", bg: "from-teal-500/15 to-cyan-500/10", text: "text-teal-400", ring: "ring-teal-400", glow: "rgba(20,184,166,0.6)" },
+  cyan: { border: "border-cyan-500/30", bg: "from-cyan-500/15 to-sky-500/10", text: "text-cyan-400", ring: "ring-cyan-400", glow: "rgba(6,182,212,0.6)" },
+  sky: { border: "border-sky-500/30", bg: "from-sky-500/15 to-blue-500/10", text: "text-sky-400", ring: "ring-sky-400", glow: "rgba(14,165,233,0.6)" },
+  indigo: { border: "border-indigo-500/30", bg: "from-indigo-500/15 to-violet-500/10", text: "text-indigo-400", ring: "ring-indigo-400", glow: "rgba(99,102,241,0.6)" },
+  rose: { border: "border-rose-500/30", bg: "from-rose-500/15 to-pink-500/10", text: "text-rose-400", ring: "ring-rose-400", glow: "rgba(244,63,94,0.6)" },
+  amber: { border: "border-amber-500/30", bg: "from-amber-500/15 to-orange-500/10", text: "text-amber-400", ring: "ring-amber-400", glow: "rgba(245,158,11,0.6)" },
+  emerald: { border: "border-emerald-500/30", bg: "from-emerald-500/15 to-green-500/10", text: "text-emerald-400", ring: "ring-emerald-400", glow: "rgba(16,185,129,0.6)" },
+  violet: { border: "border-violet-500/30", bg: "from-violet-500/15 to-purple-500/10", text: "text-violet-400", ring: "ring-violet-400", glow: "rgba(139,92,246,0.6)" },
+  pink: { border: "border-pink-500/30", bg: "from-pink-500/15 to-rose-500/10", text: "text-pink-400", ring: "ring-pink-400", glow: "rgba(236,72,153,0.6)" },
+  orange: { border: "border-orange-500/30", bg: "from-orange-500/15 to-amber-500/10", text: "text-orange-400", ring: "ring-orange-400", glow: "rgba(249,115,22,0.6)" }
+};
+var ShellNodeBase = ({ label, icon, accentColor, isExecuting, children, extraHandles }) => {
+  const c = COLOR_MAP[accentColor] || COLOR_MAP.teal;
+  const executionStyle = isExecuting ? `ring-2 ${c.ring} shadow-[0_0_20px_${c.glow}] scale-105 z-50` : "";
+  return /* @__PURE__ */ jsxs("div", { className: `bg-surface-tertiary ${c.border} border rounded-xl shadow-2xl w-[240px] overflow-hidden group hover:${c.border.replace("/30", "/60")} transition-all duration-300 ${executionStyle}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `bg-linear-to-r ${c.bg} px-3 py-2 border-b ${c.border.replace("/30", "/20")} flex items-center justify-between`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: c.text, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: `text-xs font-bold ${c.text} uppercase tracking-widest`, children: label })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: `${c.text} opacity-30 cursor-grab active:cursor-grabbing hover:opacity-80 transition-colors custom-drag-handle`, children: /* @__PURE__ */ jsx(GripVertical, { size: 14 }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-3 flex flex-col gap-3", children }),
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: `w-3! h-3! bg-teal-500! border-teal-400/50! -top-1.5!` }),
+    /* @__PURE__ */ jsx(Handle, { type: "source", id: "success", position: Position.Bottom, className: `w-3! h-3! bg-emerald-500! border-emerald-400/50! -bottom-1.5!` }),
+    extraHandles?.map((h) => /* @__PURE__ */ jsx(Handle, { type: "source", id: h.id, position: h.position, className: h.className }, h.id))
+  ] });
+};
+var ShellField = ({ label, value, onChange, placeholder, type = "text", options }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsx("label", { className: "text-[10px] uppercase tracking-wider text-text-muted", children: label }),
+  type === "select" && options ? /* @__PURE__ */ jsx(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: "bg-surface-tertiary/50 border border-border-subtle rounded-lg px-2 py-1.5 text-xs text-text-primary w-full focus:outline-hidden focus:border-teal-500/50 transition-colors appearance-none cursor-pointer",
+      children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+    }
+  ) : /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: "bg-surface-tertiary/50 border border-border-subtle rounded-lg px-2 py-1.5 text-xs text-text-primary w-full focus:outline-hidden focus:border-teal-500/50 transition-colors font-mono",
+      placeholder
+    }
+  )
+] });
+
+// src/components/studio/nodes/shell/RegisterButtonNode.tsx
+import { useTimelineStore } from "@decido/engine";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RegisterButtonNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs2(ShellNodeBase, { id, label: "Activity Bar", icon: /* @__PURE__ */ jsx2(PanelLeft, { size: 14 }), accentColor: "teal", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx2(ShellField, { label: "ID", value: data.shellItemId || "", onChange: (v2) => u("shellItemId", v2), placeholder: "btn-explorer" }),
+    /* @__PURE__ */ jsx2(ShellField, { label: "T\xEDtulo", value: data.shellTitle || "", onChange: (v2) => u("shellTitle", v2), placeholder: "Explorador" }),
+    /* @__PURE__ */ jsx2(ShellField, { label: "\xCDcono", value: data.shellIcon || "", onChange: (v2) => u("shellIcon", v2), placeholder: "fas fa-folder" }),
+    /* @__PURE__ */ jsx2(ShellField, { label: "View ID", value: data.shellViewId || "", onChange: (v2) => u("shellViewId", v2), placeholder: "explorer-view" }),
+    /* @__PURE__ */ jsx2(ShellField, { label: "Orden", value: String(data.shellOrder || 0), onChange: (v2) => u("shellOrder", parseInt(v2) || 0), type: "number" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/RegisterTabNode.tsx
+import { FileText } from "lucide-react";
+import { useTimelineStore as useTimelineStore2 } from "@decido/engine";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var RegisterTabNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore2((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs3(ShellNodeBase, { id, label: "Open Tab", icon: /* @__PURE__ */ jsx3(FileText, { size: 14 }), accentColor: "cyan", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx3(ShellField, { label: "Tab ID", value: data.shellTabId || "", onChange: (v2) => u("shellTabId", v2), placeholder: "settings-tab" }),
+    /* @__PURE__ */ jsx3(ShellField, { label: "T\xEDtulo", value: data.shellTabTitle || "", onChange: (v2) => u("shellTabTitle", v2), placeholder: "Configuraci\xF3n" }),
+    /* @__PURE__ */ jsx3(ShellField, { label: "Componente", value: data.shellTabComponent || "", onChange: (v2) => u("shellTabComponent", v2), placeholder: "settings-view" }),
+    /* @__PURE__ */ jsx3(ShellField, { label: "\xCDcono", value: data.shellIcon || "", onChange: (v2) => u("shellIcon", v2), placeholder: "fas fa-cog" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/RegisterPanelNode.tsx
+import { PanelBottom } from "lucide-react";
+import { useTimelineStore as useTimelineStore3 } from "@decido/engine";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var RegisterPanelNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore3((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs4(ShellNodeBase, { id, label: "Panel View", icon: /* @__PURE__ */ jsx4(PanelBottom, { size: 14 }), accentColor: "indigo", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx4(ShellField, { label: "Panel ID", value: data.shellPanelId || "", onChange: (v2) => u("shellPanelId", v2), placeholder: "output-panel" }),
+    /* @__PURE__ */ jsx4(ShellField, { label: "T\xEDtulo", value: data.shellPanelTitle || "", onChange: (v2) => u("shellPanelTitle", v2), placeholder: "Output" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/RegisterSidebarNode.tsx
+import { Sidebar } from "lucide-react";
+import { useTimelineStore as useTimelineStore4 } from "@decido/engine";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var RegisterSidebarNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore4((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs5(ShellNodeBase, { id, label: "Sidebar View", icon: /* @__PURE__ */ jsx5(Sidebar, { size: 14 }), accentColor: "sky", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx5(ShellField, { label: "View ID", value: data.shellSidebarId || "", onChange: (v2) => u("shellSidebarId", v2), placeholder: "file-explorer" }),
+    /* @__PURE__ */ jsx5(ShellField, { label: "T\xEDtulo", value: data.shellSidebarTitle || "", onChange: (v2) => u("shellSidebarTitle", v2), placeholder: "Archivos" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/RegisterStatusBarNode.tsx
+import { Minus } from "lucide-react";
+import { useTimelineStore as useTimelineStore5 } from "@decido/engine";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var RegisterStatusBarNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore5((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs6(ShellNodeBase, { id, label: "Status Bar", icon: /* @__PURE__ */ jsx6(Minus, { size: 14 }), accentColor: "emerald", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx6(ShellField, { label: "Item ID", value: data.shellStatusId || "", onChange: (v2) => u("shellStatusId", v2), placeholder: "git-branch" }),
+    /* @__PURE__ */ jsx6(ShellField, { label: "Texto", value: data.shellStatusText || "", onChange: (v2) => u("shellStatusText", v2), placeholder: "main \u2713" }),
+    /* @__PURE__ */ jsx6(
+      ShellField,
+      {
+        label: "Alineaci\xF3n",
+        value: data.shellStatusAlign || "left",
+        onChange: (v2) => u("shellStatusAlign", v2),
+        type: "select",
+        options: [{ value: "left", label: "\u2190 Izquierda" }, { value: "right", label: "\u2192 Derecha" }]
+      }
+    ),
+    /* @__PURE__ */ jsx6(ShellField, { label: "Orden", value: String(data.shellOrder || 0), onChange: (v2) => u("shellOrder", parseInt(v2) || 0), type: "number" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/RegisterTopBarNode.tsx
+import { ArrowUpFromDot } from "lucide-react";
+import { useTimelineStore as useTimelineStore6 } from "@decido/engine";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var RegisterTopBarNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore6((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs7(ShellNodeBase, { id, label: "Top Bar", icon: /* @__PURE__ */ jsx7(ArrowUpFromDot, { size: 14 }), accentColor: "violet", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx7(ShellField, { label: "Item ID", value: data.shellTopBarId || "", onChange: (v2) => u("shellTopBarId", v2), placeholder: "toggle-sidebar" }),
+    /* @__PURE__ */ jsx7(ShellField, { label: "T\xEDtulo", value: data.shellTitle || "", onChange: (v2) => u("shellTitle", v2), placeholder: "Panel Izquierdo" }),
+    /* @__PURE__ */ jsx7(ShellField, { label: "\xCDcono", value: data.shellIcon || "", onChange: (v2) => u("shellIcon", v2), placeholder: "fas fa-bars" }),
+    /* @__PURE__ */ jsx7(ShellField, { label: "Command ID", value: data.shellCommandId || "", onChange: (v2) => u("shellCommandId", v2), placeholder: "layout.toggleSidebar" }),
+    /* @__PURE__ */ jsx7(ShellField, { label: "Orden", value: String(data.shellOrder || 0), onChange: (v2) => u("shellOrder", parseInt(v2) || 0), type: "number" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/RegisterActionNode.tsx
+import { Terminal } from "lucide-react";
+import { useTimelineStore as useTimelineStore7 } from "@decido/engine";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var RegisterActionNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore7((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs8(ShellNodeBase, { id, label: "Register Cmd", icon: /* @__PURE__ */ jsx8(Terminal, { size: 14 }), accentColor: "amber", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx8(ShellField, { label: "Command ID", value: data.shellCommandId || "", onChange: (v2) => u("shellCommandId", v2), placeholder: "myModule.doSomething" }),
+    /* @__PURE__ */ jsx8(ShellField, { label: "T\xEDtulo", value: data.shellTitle || "", onChange: (v2) => u("shellTitle", v2), placeholder: "Hacer algo" }),
+    /* @__PURE__ */ jsx8(ShellField, { label: "Categor\xEDa", value: data.shellCategory || "", onChange: (v2) => u("shellCategory", v2), placeholder: "General" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/LayoutControlNodes.tsx
+import { PanelLeftClose, PanelBottomClose, Columns2, Focus, X } from "lucide-react";
+import { useTimelineStore as useTimelineStore8 } from "@decido/engine";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var ToggleSidebarNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore8((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsx9(ShellNodeBase, { id, label: "Toggle Sidebar", icon: /* @__PURE__ */ jsx9(PanelLeftClose, { size: 14 }), accentColor: "sky", isExecuting: data.isExecuting, children: /* @__PURE__ */ jsx9(
+    ShellField,
+    {
+      label: "Estado",
+      value: data.shellVisible || "toggle",
+      onChange: (v2) => u("shellVisible", v2),
+      type: "select",
+      options: [{ value: "toggle", label: "\u2194 Toggle" }, { value: "true", label: "\u{1F441} Mostrar" }, { value: "false", label: "\u{1F6AB} Ocultar" }]
+    }
+  ) });
+};
+var TogglePanelNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore8((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsx9(ShellNodeBase, { id, label: "Toggle Panel", icon: /* @__PURE__ */ jsx9(PanelBottomClose, { size: 14 }), accentColor: "indigo", isExecuting: data.isExecuting, children: /* @__PURE__ */ jsx9(
+    ShellField,
+    {
+      label: "Estado",
+      value: data.shellVisible || "toggle",
+      onChange: (v2) => u("shellVisible", v2),
+      type: "select",
+      options: [{ value: "toggle", label: "\u2194 Toggle" }, { value: "true", label: "\u{1F441} Mostrar" }, { value: "false", label: "\u{1F6AB} Ocultar" }]
+    }
+  ) });
+};
+var SplitPaneNode = ({ id, data }) => /* @__PURE__ */ jsx9(ShellNodeBase, { id, label: "Split Pane", icon: /* @__PURE__ */ jsx9(Columns2, { size: 14 }), accentColor: "violet", isExecuting: data.isExecuting, children: /* @__PURE__ */ jsx9("div", { className: "text-[10px] text-text-muted italic", children: "Divide el editor en un nuevo panel" }) });
+var FocusTabNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore8((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs9(ShellNodeBase, { id, label: "Focus Tab", icon: /* @__PURE__ */ jsx9(Focus, { size: 14 }), accentColor: "cyan", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx9(ShellField, { label: "Pane ID", value: data.shellPaneId || "", onChange: (v2) => u("shellPaneId", v2), placeholder: "pane-main" }),
+    /* @__PURE__ */ jsx9(ShellField, { label: "Tab ID", value: data.shellTabId || "", onChange: (v2) => u("shellTabId", v2), placeholder: "settings-tab" })
+  ] });
+};
+var CloseTabNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore8((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs9(ShellNodeBase, { id, label: "Close Tab", icon: /* @__PURE__ */ jsx9(X, { size: 14 }), accentColor: "rose", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx9(ShellField, { label: "Pane ID", value: data.shellPaneId || "", onChange: (v2) => u("shellPaneId", v2), placeholder: "pane-main" }),
+    /* @__PURE__ */ jsx9(ShellField, { label: "Tab ID", value: data.shellTabId || "", onChange: (v2) => u("shellTabId", v2), placeholder: "settings-tab" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/ThemeNodes.tsx
+import { Palette, Paintbrush, Pipette } from "lucide-react";
+import { useTimelineStore as useTimelineStore9 } from "@decido/engine";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var SetThemeNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore9((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsx10(ShellNodeBase, { id, label: "Set Theme", icon: /* @__PURE__ */ jsx10(Palette, { size: 14 }), accentColor: "amber", isExecuting: data.isExecuting, children: /* @__PURE__ */ jsx10(
+    ShellField,
+    {
+      label: "Tema",
+      value: data.shellTheme || "dark",
+      onChange: (v2) => u("shellTheme", v2),
+      type: "select",
+      options: [{ value: "dark", label: "\u{1F319} Dark" }, { value: "light", label: "\u2600\uFE0F Light" }]
+    }
+  ) });
+};
+var ApplyPaletteNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore9((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs10(ShellNodeBase, { id, label: "Apply Palette", icon: /* @__PURE__ */ jsx10(Paintbrush, { size: 14 }), accentColor: "pink", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx10(ShellField, { label: "Primary", value: data.shellPrimary || "", onChange: (v2) => u("shellPrimary", v2), placeholder: "#6366f1" }),
+    /* @__PURE__ */ jsx10(ShellField, { label: "Secondary", value: data.shellSecondary || "", onChange: (v2) => u("shellSecondary", v2), placeholder: "#8b5cf6" }),
+    /* @__PURE__ */ jsx10(ShellField, { label: "Accent", value: data.shellAccent || "", onChange: (v2) => u("shellAccent", v2), placeholder: "#f59e0b" }),
+    /* @__PURE__ */ jsx10(ShellField, { label: "BG Main", value: data.shellBgMain || "", onChange: (v2) => u("shellBgMain", v2), placeholder: "#070720" }),
+    /* @__PURE__ */ jsx10(ShellField, { label: "BG Content", value: data.shellBgContent || "", onChange: (v2) => u("shellBgContent", v2), placeholder: "#0F0F23" })
+  ] });
+};
+var UpdateTokenNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore9((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs10(ShellNodeBase, { id, label: "CSS Token", icon: /* @__PURE__ */ jsx10(Pipette, { size: 14 }), accentColor: "orange", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx10(ShellField, { label: "Token", value: data.shellToken || "", onChange: (v2) => u("shellToken", v2), placeholder: "--color-primary" }),
+    /* @__PURE__ */ jsx10(ShellField, { label: "Valor", value: data.shellTokenValue || "", onChange: (v2) => u("shellTokenValue", v2), placeholder: "#6366f1" })
+  ] });
+};
+
+// src/components/studio/nodes/shell/InteractionNodes.tsx
+import { Bell, SquareStack, Play, Keyboard, Radio } from "lucide-react";
+import { useTimelineStore as useTimelineStore10 } from "@decido/engine";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var ShowNotificationNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore10((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs11(ShellNodeBase, { id, label: "Notification", icon: /* @__PURE__ */ jsx11(Bell, { size: 14 }), accentColor: "emerald", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx11(
+      ShellField,
+      {
+        label: "Tipo",
+        value: data.shellNotifType || "info",
+        onChange: (v2) => u("shellNotifType", v2),
+        type: "select",
+        options: [
+          { value: "info", label: "\u2139\uFE0F Info" },
+          { value: "success", label: "\u2705 Success" },
+          { value: "warning", label: "\u26A0\uFE0F Warning" },
+          { value: "error", label: "\u274C Error" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx11(ShellField, { label: "T\xEDtulo", value: data.shellNotifTitle || "", onChange: (v2) => u("shellNotifTitle", v2), placeholder: "Operaci\xF3n exitosa" }),
+    /* @__PURE__ */ jsx11(ShellField, { label: "Mensaje", value: data.shellNotifMessage || "", onChange: (v2) => u("shellNotifMessage", v2), placeholder: "Los cambios se guardaron" })
+  ] });
+};
+var ShowModalNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore10((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs11(ShellNodeBase, { id, label: "Show Modal", icon: /* @__PURE__ */ jsx11(SquareStack, { size: 14 }), accentColor: "violet", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx11(ShellField, { label: "T\xEDtulo", value: data.shellModalTitle || "", onChange: (v2) => u("shellModalTitle", v2), placeholder: "Confirmaci\xF3n" }),
+    /* @__PURE__ */ jsx11(ShellField, { label: "Contenido HTML", value: data.shellModalContent || "", onChange: (v2) => u("shellModalContent", v2), placeholder: "<p>\xBFEst\xE1s seguro?</p>" })
+  ] });
+};
+var ExecuteCommandNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore10((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs11(ShellNodeBase, { id, label: "Exec Command", icon: /* @__PURE__ */ jsx11(Play, { size: 14 }), accentColor: "teal", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx11(ShellField, { label: "Command ID", value: data.shellCommandId || "", onChange: (v2) => u("shellCommandId", v2), placeholder: "palette.toggle" }),
+    /* @__PURE__ */ jsx11(ShellField, { label: "Argumento (JSON)", value: data.shellCommandArg || "", onChange: (v2) => u("shellCommandArg", v2), placeholder: '{"key": "value"}' })
+  ] });
+};
+var RegisterShortcutNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore10((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs11(ShellNodeBase, { id, label: "Shortcut", icon: /* @__PURE__ */ jsx11(Keyboard, { size: 14 }), accentColor: "amber", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx11(ShellField, { label: "Keys", value: data.shellKeys || "", onChange: (v2) => u("shellKeys", v2), placeholder: "Control+Shift+P" }),
+    /* @__PURE__ */ jsx11(ShellField, { label: "Command ID", value: data.shellCommandId || "", onChange: (v2) => u("shellCommandId", v2), placeholder: "palette.toggle" }),
+    /* @__PURE__ */ jsx11(ShellField, { label: "Descripci\xF3n", value: data.shellShortcutDesc || "", onChange: (v2) => u("shellShortcutDesc", v2), placeholder: "Abrir paleta" })
+  ] });
+};
+var EmitEventNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore10((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs11(ShellNodeBase, { id, label: "Emit Event", icon: /* @__PURE__ */ jsx11(Radio, { size: 14 }), accentColor: "rose", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx11(ShellField, { label: "Evento", value: data.shellEventName || "", onChange: (v2) => u("shellEventName", v2), placeholder: "app:customEvent" }),
+    /* @__PURE__ */ jsx11(ShellField, { label: "Data (JSON)", value: data.shellEventData || "", onChange: (v2) => u("shellEventData", v2), placeholder: '{"msg": "hello"}' })
+  ] });
+};
+
+// src/components/studio/nodes/shell/ShellConfigNode.tsx
+import { Settings2 } from "lucide-react";
+import { useTimelineStore as useTimelineStore11 } from "@decido/engine";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var ShellConfigNode = ({ id, data }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const updateKeyframe = useTimelineStore11((s) => s.updateKeyframe);
+  const u = (field, val) => updateKeyframe(activeTimelineId, id, { [field]: val });
+  return /* @__PURE__ */ jsxs12(ShellNodeBase, { id, label: "Shell Config", icon: /* @__PURE__ */ jsx12(Settings2, { size: 14 }), accentColor: "teal", isExecuting: data.isExecuting, children: [
+    /* @__PURE__ */ jsx12(
+      ShellField,
+      {
+        label: "Tema",
+        value: data.shellTheme || "",
+        onChange: (v2) => u("shellTheme", v2),
+        type: "select",
+        options: [{ value: "", label: "\u2014 Sin cambio \u2014" }, { value: "dark", label: "\u{1F319} Dark" }, { value: "light", label: "\u2600\uFE0F Light" }]
+      }
+    ),
+    /* @__PURE__ */ jsx12(ShellField, { label: "Primary", value: data.shellPrimary || "", onChange: (v2) => u("shellPrimary", v2), placeholder: "#6366f1" }),
+    /* @__PURE__ */ jsx12(ShellField, { label: "Accent", value: data.shellAccent || "", onChange: (v2) => u("shellAccent", v2), placeholder: "#f59e0b" }),
+    /* @__PURE__ */ jsx12(
+      ShellField,
+      {
+        label: "Sidebar",
+        value: data.shellSidebarState || "",
+        onChange: (v2) => u("shellSidebarState", v2),
+        type: "select",
+        options: [{ value: "", label: "\u2014 Sin cambio \u2014" }, { value: "true", label: "\u{1F441} Visible" }, { value: "false", label: "\u{1F6AB} Oculto" }]
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      ShellField,
+      {
+        label: "Panel",
+        value: data.shellPanelState || "",
+        onChange: (v2) => u("shellPanelState", v2),
+        type: "select",
+        options: [{ value: "", label: "\u2014 Sin cambio \u2014" }, { value: "true", label: "\u{1F441} Visible" }, { value: "false", label: "\u{1F6AB} Oculto" }]
+      }
+    ),
+    /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx12("label", { className: "text-[10px] uppercase tracking-wider text-text-muted", children: "Config Extra (JSON)" }),
+      /* @__PURE__ */ jsx12(
+        "textarea",
+        {
+          value: data.shellConfigJson || "",
+          onChange: (e) => u("shellConfigJson", e.target.value),
+          className: "bg-surface-tertiary/50 border border-border-subtle rounded-lg px-2 py-1.5 text-xs text-text-primary w-full focus:outline-hidden focus:border-teal-500/50 transition-colors font-mono resize-y min-h-[40px]",
+          placeholder: '{"shortcuts": [{"id": "s1", "keys": "Ctrl+K", "commandId": "palette.toggle"}]}',
+          rows: 2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 pt-1 border-t border-border-subtle", children: [
+      /* @__PURE__ */ jsx12(Settings2, { size: 12, className: "text-teal-400" }),
+      /* @__PURE__ */ jsx12("span", { className: "text-[10px] font-mono text-teal-400", children: "Full Shell Configuration" })
+    ] })
+  ] });
+};
+
+// src/components/studio/editor/nodeTypeRegistry.ts
+var nodeTypes = {
+  dialogue: DialogueNode,
+  "ai:dialogue": DialogueNode,
+  logic: LogicNode,
+  "mcp:execute": LogicNode,
+  ui: StateNode,
+  "ui:state": StateNode,
+  "core:subflow": SubflowNode,
+  "core:entry": EntryNode,
+  "core:return": ReturnNode,
+  "ui:render": RenderNode,
+  "render": RenderNode,
+  "trigger": TriggerNode,
+  "event:trigger": TriggerNode,
+  "condition": ConditionalNode,
+  "logic:condition": ConditionalNode,
+  "set": SetVariableNode,
+  "state:set": SetVariableNode,
+  "morph": MorphNode,
+  "ui:morph": MorphNode,
+  // Shell Control Nodes
+  "shell:registerButton": RegisterButtonNode,
+  "shell:registerTab": RegisterTabNode,
+  "shell:registerPanel": RegisterPanelNode,
+  "shell:registerSidebar": RegisterSidebarNode,
+  "shell:registerStatusBar": RegisterStatusBarNode,
+  "shell:registerTopBar": RegisterTopBarNode,
+  "shell:registerAction": RegisterActionNode,
+  "shell:toggleSidebar": ToggleSidebarNode,
+  "shell:togglePanel": TogglePanelNode,
+  "shell:splitPane": SplitPaneNode,
+  "shell:focusTab": FocusTabNode,
+  "shell:closeTab": CloseTabNode,
+  "shell:setTheme": SetThemeNode,
+  "shell:applyPalette": ApplyPaletteNode,
+  "shell:updateToken": UpdateTokenNode,
+  "shell:notification": ShowNotificationNode,
+  "shell:modal": ShowModalNode,
+  "shell:execCommand": ExecuteCommandNode,
+  "shell:shortcut": RegisterShortcutNode,
+  "shell:emitEvent": EmitEventNode,
+  "shell:config": ShellConfigNode
+};
+var TRACK_X_MAP = {
+  "ai:dialogue": 100,
+  "ui:state": 450,
+  "mcp:execute": 800,
+  "core:subflow": 1100,
+  "core:entry": 300,
+  "core:return": 300,
+  "ui:render": 1400,
+  "render": 1400,
+  "event:trigger": -200,
+  "logic:condition": 600,
+  "state:set": 1e3,
+  "set": 1e3,
+  "morph": 1400,
+  "ui:morph": 1400,
+  "shell:registerButton": 1700,
+  "shell:registerTab": 1700,
+  "shell:registerPanel": 1700,
+  "shell:registerSidebar": 1700,
+  "shell:registerStatusBar": 1700,
+  "shell:registerTopBar": 1700,
+  "shell:registerAction": 1700,
+  "shell:toggleSidebar": 2e3,
+  "shell:togglePanel": 2e3,
+  "shell:splitPane": 2e3,
+  "shell:focusTab": 2e3,
+  "shell:closeTab": 2e3,
+  "shell:setTheme": 2300,
+  "shell:applyPalette": 2300,
+  "shell:updateToken": 2300,
+  "shell:notification": 2600,
+  "shell:modal": 2600,
+  "shell:execCommand": 2600,
+  "shell:shortcut": 2600,
+  "shell:emitEvent": 2600,
+  "shell:config": 2900
+};
+var NODE_TYPE_TO_TRACK = {
+  "dialogue": "dialogue",
+  "ai:dialogue": "dialogue",
+  "logic": "logic",
+  "mcp:execute": "logic",
+  "ui": "ui",
+  "ui:state": "ui",
+  "core:subflow": "subflow",
+  "core:entry": "entry",
+  "core:return": "return",
+  "ui:render": "render",
+  "render": "render",
+  "trigger": "trigger",
+  "event:trigger": "trigger",
+  "condition": "condition",
+  "logic:condition": "condition",
+  "set": "set",
+  "state:set": "set"
+};
+function mapNodePayload(decidoNode) {
+  const data = { ...decidoNode.payload };
+  const t = decidoNode.type;
+  if (t === "core:subflow") data.label = decidoNode.payload.label;
+  if (t === "ui:render" || t === "render") {
+    data.label = decidoNode.payload.label || decidoNode.payload.state || "UI Component";
+    data.state = decidoNode.payload.state || decidoNode.payload.label || "UI Component";
+    data.uiSchema = decidoNode.payload.uiSchema || decidoNode.payload.schema;
+  }
+  if (t === "event:trigger") {
+    Object.assign(data, {
+      triggerType: decidoNode.payload.triggerType || "SYSTEM_START",
+      cronExpression: decidoNode.payload.cronExpression,
+      webhookPath: decidoNode.payload.webhookPath,
+      eventChannel: decidoNode.payload.eventChannel,
+      guardExpression: decidoNode.payload.guardExpression,
+      priority: decidoNode.payload.priority
+    });
+  }
+  if (t === "logic:condition") data.conditionExpression = decidoNode.payload.conditionExpression || "";
+  if (t === "morph" || t === "ui:morph") {
+    Object.assign(data, {
+      morphType: decidoNode.payload.morphType || "workbench",
+      morphData: decidoNode.payload.morphData || null,
+      componentId: decidoNode.payload.componentId || "",
+      suspendOnMorph: decidoNode.payload.suspendOnMorph || false
+    });
+  }
+  if (t.startsWith("shell:")) {
+    Object.keys(decidoNode.payload).forEach((key) => {
+      if (key.startsWith("shell")) data[key] = decidoNode.payload[key];
+    });
+  }
+  return data;
+}
+function buildKeyframeDefaults(track, label, position, extra) {
+  const kf = { t: Date.now(), track, position, label, state: label };
+  if (track === "dialogue") {
+    kf.speech = "Nuevo di\xE1logo...";
+    kf.actorId = "assistant";
+  } else if (track === "render" && extra?.uiSchema) {
+    kf.uiSchema = extra.uiSchema;
+    kf.autoComplete = false;
+  } else if (track === "subflow") kf.targetBlueprintId = "";
+  else if (track === "morph") kf.morphType = "workbench";
+  else if (track === "set") {
+    kf.target = "";
+    kf.value = "";
+  } else if (track === "condition") kf.conditionExpression = "true";
+  if (track.startsWith("shell:")) {
+    kf.track = "shell";
+    kf.shellAction = extra?.shellAction || track.replace("shell:", "");
+  }
+  return kf;
+}
+
+// src/components/studio/editor/edgeStyles.ts
+var VALID_HANDLES = /* @__PURE__ */ new Set(["success", "error", "true", "false", "fallback", "cancel"]);
+var HANDLE_COLORS = {
+  success: "#22c55e",
+  error: "#ef4444",
+  true: "#22c55e",
+  false: "#ef4444",
+  fallback: "#f97316",
+  cancel: "#a855f7"
+};
+function buildStyledEdges(timelineEdges, activeNodeIds, activeEdgeIds) {
+  return timelineEdges.map((e) => {
+    const rawHandle = e.sourceHandle || "success";
+    const sourceHandle = VALID_HANDLES.has(rawHandle) ? rawHandle : "success";
+    const color = HANDLE_COLORS[sourceHandle] || "#a855f7";
+    const isSourceActive = activeNodeIds.includes(e.source);
+    const isTraversed = activeEdgeIds.includes(e.id);
+    const activeColor = isTraversed ? "#22d3ee" : color;
+    const glowFilter = isTraversed ? `drop-shadow(0 0 10px ${activeColor})` : isSourceActive ? "drop-shadow(0 0 5px rgba(255,255,255,0.8))" : "none";
+    return {
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      sourceHandle,
+      targetHandle: e.targetHandle,
+      animated: isSourceActive || isTraversed,
+      style: { stroke: activeColor, strokeWidth: isTraversed ? 5 : isSourceActive ? 4 : 3, filter: glowFilter },
+      markerEnd: { type: MarkerType.ArrowClosed, color: activeColor }
+    };
+  });
+}
+
+// src/components/studio/editor/CanvasContextMenu.tsx
+import { MessageCircle, Cpu, Monitor, Network, LogIn, LogOut, Zap, Layout, GitBranch } from "lucide-react";
+import { Fragment, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var MENU_ITEMS = [
+  { section: "Di\xE1logo" },
+  { track: "dialogue", label: "Dialogue Node", icon: /* @__PURE__ */ jsx13(MessageCircle, { size: 14, className: "text-blue-400" }), color: "hover:bg-blue-500/10" },
+  { section: "L\xF3gica" },
+  { track: "logic", label: "Logic Gate", icon: /* @__PURE__ */ jsx13(Cpu, { size: 14, className: "text-amber-400" }), color: "hover:bg-amber-500/10" },
+  { section: "Estado UI" },
+  { track: "ui", label: "State Change", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-purple-400" }), color: "hover:bg-purple-500/10" },
+  { section: "HSM / Subflujos" },
+  { track: "subflow", label: "Subflow", icon: /* @__PURE__ */ jsx13(Network, { size: 14, className: "text-violet-400" }), color: "hover:bg-violet-500/10" },
+  { track: "entry", label: "Entry", icon: /* @__PURE__ */ jsx13(LogIn, { size: 14, className: "text-emerald-400" }), color: "hover:bg-emerald-500/10" },
+  { track: "return", label: "Return", icon: /* @__PURE__ */ jsx13(LogOut, { size: 14, className: "text-rose-400" }), color: "hover:bg-rose-500/10" },
+  { section: "Triggers / Branching" },
+  { track: "trigger", label: "Event Trigger", icon: /* @__PURE__ */ jsx13(Zap, { size: 14, className: "text-yellow-400" }), color: "hover:bg-yellow-500/10" },
+  { track: "condition", label: "Condici\xF3n", icon: /* @__PURE__ */ jsx13(GitBranch, { size: 14, className: "text-amber-400" }), color: "hover:bg-amber-500/10" },
+  { track: "set", label: "Set Variable", icon: /* @__PURE__ */ jsx13(Layout, { size: 14, className: "text-violet-400" }), color: "hover:bg-violet-500/10" },
+  { section: "Morfolog\xEDa" },
+  { track: "morph", label: "Morph Stage", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-purple-400" }), color: "hover:bg-purple-500/10" },
+  // Shell: Registro
+  { section: "\u{1F5A5}\uFE0F Shell: Registro" },
+  { track: "shell:registerButton", label: "Activity Bar", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-teal-400" }), color: "hover:bg-teal-500/10", extra: { shellAction: "registerActivityBarItem" } },
+  { track: "shell:registerTab", label: "Open Tab", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-cyan-400" }), color: "hover:bg-cyan-500/10", extra: { shellAction: "openTab" } },
+  { track: "shell:registerPanel", label: "Panel View", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-indigo-400" }), color: "hover:bg-indigo-500/10", extra: { shellAction: "registerPanelView" } },
+  { track: "shell:registerSidebar", label: "Sidebar View", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-sky-400" }), color: "hover:bg-sky-500/10", extra: { shellAction: "registerSidebarView" } },
+  { track: "shell:registerStatusBar", label: "Status Bar", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-emerald-400" }), color: "hover:bg-emerald-500/10", extra: { shellAction: "registerStatusBarItem" } },
+  { track: "shell:registerTopBar", label: "Top Bar", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-violet-400" }), color: "hover:bg-violet-500/10", extra: { shellAction: "registerTopBarItem" } },
+  { track: "shell:registerAction", label: "Register Cmd", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-amber-400" }), color: "hover:bg-amber-500/10", extra: { shellAction: "registerCommand" } },
+  // Shell: Layout
+  { section: "\u{1F5A5}\uFE0F Shell: Layout" },
+  { track: "shell:toggleSidebar", label: "Toggle Sidebar", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-sky-400" }), color: "hover:bg-sky-500/10", extra: { shellAction: "toggleSidebar" } },
+  { track: "shell:togglePanel", label: "Toggle Panel", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-indigo-400" }), color: "hover:bg-indigo-500/10", extra: { shellAction: "togglePanel" } },
+  { track: "shell:splitPane", label: "Split Pane", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-violet-400" }), color: "hover:bg-violet-500/10", extra: { shellAction: "splitPane" } },
+  { track: "shell:focusTab", label: "Focus Tab", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-cyan-400" }), color: "hover:bg-cyan-500/10", extra: { shellAction: "focusTab" } },
+  { track: "shell:closeTab", label: "Close Tab", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-rose-400" }), color: "hover:bg-rose-500/10", extra: { shellAction: "closeTab" } },
+  // Shell: Tema
+  { section: "\u{1F5A5}\uFE0F Shell: Tema" },
+  { track: "shell:setTheme", label: "Set Theme", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-amber-400" }), color: "hover:bg-amber-500/10", extra: { shellAction: "setTheme" } },
+  { track: "shell:applyPalette", label: "Apply Palette", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-pink-400" }), color: "hover:bg-pink-500/10", extra: { shellAction: "applyPalette" } },
+  { track: "shell:updateToken", label: "CSS Token", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-orange-400" }), color: "hover:bg-orange-500/10", extra: { shellAction: "updateToken" } },
+  // Shell: Interacción
+  { section: "\u{1F5A5}\uFE0F Shell: Interacci\xF3n" },
+  { track: "shell:notification", label: "Notification", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-emerald-400" }), color: "hover:bg-emerald-500/10", extra: { shellAction: "showNotification" } },
+  { track: "shell:modal", label: "Show Modal", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-violet-400" }), color: "hover:bg-violet-500/10", extra: { shellAction: "showModal" } },
+  { track: "shell:execCommand", label: "Exec Command", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-teal-400" }), color: "hover:bg-teal-500/10", extra: { shellAction: "executeCommand" } },
+  { track: "shell:shortcut", label: "Shortcut", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-amber-400" }), color: "hover:bg-amber-500/10", extra: { shellAction: "registerShortcut" } },
+  { track: "shell:emitEvent", label: "Emit Event", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-rose-400" }), color: "hover:bg-rose-500/10", extra: { shellAction: "emitEvent" } },
+  // Shell: Config
+  { section: "\u{1F5A5}\uFE0F Shell: Config" },
+  { track: "shell:config", label: "Shell Config", icon: /* @__PURE__ */ jsx13(Monitor, { size: 14, className: "text-teal-400" }), color: "hover:bg-teal-500/10", extra: { shellAction: "shellConfig" } }
+];
+var CanvasContextMenu = ({ x, y: y2, onAdd, onClose }) => {
+  const uiComponents = useUIComponentStore((s) => s.components);
+  const renderItems = Object.values(uiComponents);
+  const menuStyle = {
+    position: "fixed",
+    left: Math.min(x, window.innerWidth - 240),
+    top: Math.min(y2, window.innerHeight - 600),
+    zIndex: 999
+  };
+  return /* @__PURE__ */ jsxs13("div", { style: menuStyle, className: "w-56 bg-surface-secondary/95 backdrop-blur-xl border border-border-default rounded-xl shadow-2xl shadow-black/50 overflow-hidden", children: [
+    /* @__PURE__ */ jsx13("div", { className: "px-3 py-2 border-b border-border-subtle", children: /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold text-text-muted uppercase tracking-widest", children: "\u2795 Agregar Nodo" }) }),
+    /* @__PURE__ */ jsxs13("div", { className: "max-h-[480px] overflow-y-auto py-1", children: [
+      MENU_ITEMS.map((item, i) => {
+        if (item.section) return /* @__PURE__ */ jsx13("div", { className: "px-3 pt-2 pb-1 text-[9px] font-bold text-text-muted uppercase tracking-widest", children: item.section }, `s-${i}`);
+        return /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            onClick: () => onAdd(item.track, item.label, item.extra),
+            className: `w-full flex items-center gap-2.5 px-3 py-1.5 text-xs text-text-primary hover:text-text-primary transition-colors ${item.color}`,
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsx13("span", { children: item.label })
+            ]
+          },
+          `i-${i}`
+        );
+      }),
+      renderItems.length > 0 && /* @__PURE__ */ jsxs13(Fragment, { children: [
+        /* @__PURE__ */ jsx13("div", { className: "px-3 pt-2 pb-1 text-[9px] font-bold text-text-muted uppercase tracking-widest", children: "UI Components" }),
+        renderItems.map((comp) => /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            onClick: () => onAdd("render", comp.name, { uiSchema: comp.schema }),
+            className: "w-full flex items-center gap-2.5 px-3 py-1.5 text-xs text-text-primary hover:text-text-primary hover:bg-pink-500/10 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx13(Layout, { size: 14, className: comp.source === "ai-generated" ? "text-pink-400" : "text-cyan-400" }),
+              /* @__PURE__ */ jsx13("span", { children: comp.name }),
+              /* @__PURE__ */ jsx13("span", { className: "ml-auto text-[9px] text-text-muted", children: comp.source === "ai-generated" ? "AI" : "built-in" })
+            ]
+          },
+          comp.id
+        ))
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/studio/editor/EditorToolbar.tsx
+import React from "react";
+import { Undo2, Redo2, LayoutGrid, AlignHorizontalDistributeCenter, AlignVerticalDistributeCenter, Trash2 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var EditorToolbar = React.memo(function EditorToolbar2({
+  canUndo,
+  canRedo,
+  undoCount,
+  redoCount,
+  undo,
+  redo,
+  nodes,
+  edges,
+  setNodes,
+  updateKeyframePosition,
+  removeKeyframe,
+  activeTimelineId,
+  currentBlueprintId,
+  fitView,
+  setSelectedNodeId
+}) {
+  const handleAutoLayout = () => {
+    const { nodes: layoutedNodes } = getLayoutedElements(nodes, edges, { direction: "TB" });
+    setNodes(layoutedNodes);
+    layoutedNodes.forEach((n) => updateKeyframePosition(activeTimelineId, n.id, n.position));
+    setTimeout(() => fitView({ padding: 0.2, duration: 600 }), 50);
+  };
+  const handleAlignH = () => {
+    const selected = nodes.filter((n) => n.selected);
+    if (selected.length < 2) return;
+    const avgY = selected.reduce((s, n) => s + n.position.y, 0) / selected.length;
+    setNodes((nds) => nds.map((n) => !n.selected ? n : { ...n, position: { ...n.position, y: avgY } }));
+    selected.forEach((n) => updateKeyframePosition(activeTimelineId, n.id, { ...n.position, y: avgY }));
+  };
+  const handleAlignV = () => {
+    const selected = nodes.filter((n) => n.selected);
+    if (selected.length < 2) return;
+    const avgX = selected.reduce((s, n) => s + n.position.x, 0) / selected.length;
+    setNodes((nds) => nds.map((n) => !n.selected ? n : { ...n, position: { ...n.position, x: avgX } }));
+    selected.forEach((n) => updateKeyframePosition(activeTimelineId, n.id, { ...n.position, x: avgX }));
+  };
+  const handleDeleteSelected = () => {
+    const selected = nodes.filter((n) => n.selected);
+    if (selected.length === 0) return;
+    const targetId = currentBlueprintId || activeTimelineId;
+    selected.forEach((n) => removeKeyframe(targetId, n.id));
+    setSelectedNodeId(null);
+  };
+  return /* @__PURE__ */ jsxs14("div", { className: "absolute top-3 right-3 z-20 flex items-center gap-1 bg-surface-secondary/90 backdrop-blur-xs border border-border-default rounded-lg p-1", children: [
+    /* @__PURE__ */ jsxs14("button", { onClick: undo, disabled: !canUndo, className: "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed hover:bg-surface-glass text-text-primary", title: "Deshacer (\u2318Z)", children: [
+      /* @__PURE__ */ jsx14(Undo2, { size: 14 }),
+      canUndo && /* @__PURE__ */ jsx14("span", { className: "text-[9px] text-emerald-400 font-mono", children: undoCount })
+    ] }),
+    /* @__PURE__ */ jsx14("div", { className: "w-px h-4 bg-surface-glass" }),
+    /* @__PURE__ */ jsxs14("button", { onClick: redo, disabled: !canRedo, className: "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors disabled:opacity-30 disabled:cursor-not-allowed hover:bg-surface-glass text-text-primary", title: "Rehacer (\u2318\u21E7Z)", children: [
+      /* @__PURE__ */ jsx14(Redo2, { size: 14 }),
+      canRedo && /* @__PURE__ */ jsx14("span", { className: "text-[9px] text-blue-400 font-mono", children: redoCount })
+    ] }),
+    /* @__PURE__ */ jsx14("div", { className: "w-px h-4 bg-surface-glass" }),
+    /* @__PURE__ */ jsx14("button", { onClick: handleAutoLayout, className: "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-surface-glass text-text-primary", title: "Organizar Nodos (Dagre Layout)", children: /* @__PURE__ */ jsx14(LayoutGrid, { size: 14 }) }),
+    /* @__PURE__ */ jsx14("div", { className: "w-px h-4 bg-surface-glass" }),
+    /* @__PURE__ */ jsx14("button", { onClick: handleAlignH, className: "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-surface-glass text-text-primary", title: "Alinear Horizontalmente", children: /* @__PURE__ */ jsx14(AlignHorizontalDistributeCenter, { size: 14 }) }),
+    /* @__PURE__ */ jsx14("button", { onClick: handleAlignV, className: "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-surface-glass text-text-primary", title: "Alinear Verticalmente", children: /* @__PURE__ */ jsx14(AlignVerticalDistributeCenter, { size: 14 }) }),
+    /* @__PURE__ */ jsx14("div", { className: "w-px h-4 bg-surface-glass" }),
+    /* @__PURE__ */ jsx14("button", { onClick: handleDeleteSelected, className: "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs transition-colors hover:bg-red-500/20 text-red-400", title: "Eliminar Seleccionados", children: /* @__PURE__ */ jsx14(Trash2, { size: 14 }) })
+  ] });
+});
+
+// src/components/studio/editor/editorKeyHandler.ts
+function createEditorKeyHandler(opts) {
+  return (e) => {
+    const meta = e.metaKey || e.ctrlKey;
+    const t = e.target;
+    if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT") return;
+    const nodes = opts.getNodes();
+    const edges = opts.getEdges();
+    const tid = opts.currentBlueprintId || opts.activeTimelineId;
+    if (meta && e.key === "a") {
+      e.preventDefault();
+      opts.setNodes((n) => n.map((x) => ({ ...x, selected: true })));
+      opts.setEdges((ed) => ed.map((x) => ({ ...x, selected: true })));
+    }
+    if (meta && e.key === "c") {
+      const sel = nodes.filter((n) => n.selected);
+      if (!sel.length) return;
+      const ids = new Set(sel.map((n) => n.id));
+      opts.clipboard.current = { nodes: sel, edges: edges.filter((e2) => ids.has(e2.source) && ids.has(e2.target)) };
+    }
+    if (meta && e.key === "v") {
+      const { nodes: cn, edges: ce } = opts.clipboard.current;
+      if (!cn.length) return;
+      e.preventDefault();
+      const idMap = {};
+      opts.setNodes((n) => n.map((x) => ({ ...x, selected: false })));
+      cn.forEach((node) => {
+        const newId = `${node.id}_copy_${Date.now()}_${Math.random().toString(36).substring(7)}`;
+        idMap[node.id] = newId;
+        opts.addKeyframe(tid, {
+          id: newId,
+          t: Date.now(),
+          track: opts.NODE_TYPE_TO_TRACK[node.type || ""] || node.type || "dialogue",
+          label: `${node.data.label || node.data.state || "Copy"} (copia)`,
+          state: `${node.data.state || node.data.label || "Copy"} (copia)`,
+          position: { x: node.position.x + 50, y: node.position.y + 50 },
+          speech: node.data.speech,
+          actorId: node.data.actorId,
+          intent: node.data.intent,
+          uiSchema: node.data.uiSchema || node.data.schema,
+          autoComplete: node.data.autoComplete,
+          triggerType: node.data.triggerType,
+          guardExpression: node.data.guardExpression,
+          priority: node.data.priority,
+          conditionExpression: node.data.conditionExpression,
+          variableTarget: node.data.variableTarget,
+          variableValue: node.data.variableValue,
+          targetBlueprintId: node.data.targetBlueprintId,
+          handle: node.data.handle
+        });
+      });
+      ce.forEach((edge) => {
+        const ns = idMap[edge.source], nt = idMap[edge.target];
+        if (ns && nt) opts.addTimelineEdge(tid, {
+          id: `edge-${ns}-${nt}-${Date.now()}`,
+          source: ns,
+          target: nt,
+          sourceHandle: edge.sourceHandle || null,
+          targetHandle: edge.targetHandle || null
+        });
+      });
+    }
+    if (e.key === "Delete" || e.key === "Backspace") {
+      const sn = nodes.filter((n) => n.selected);
+      const se = edges.filter((e2) => e2.selected);
+      if (!sn.length && !se.length) return;
+      e.preventDefault();
+      sn.forEach((n) => opts.removeKeyframe(tid, n.id));
+      se.forEach((e2) => opts.removeTimelineEdge(tid, e2.id));
+      opts.setSelectedNodeId(null);
+    }
+  };
+}
+
+// src/components/studio/NodePropertiesPanel.tsx
+import React2 from "react";
+import { X as X2, Variable } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+import { useTimelineStore as useTimelineStore12, useEngineStore } from "@decido/engine";
+
+// src/components/studio/editor/TrackPropertyEditors.tsx
+import { Mic2, Monitor as Monitor2, Zap as Zap2, Image as Image2, PenSquare } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var TRACK_CONFIG = {
+  dialogue: { icon: Mic2, label: "Di\xE1logo", color: "text-purple-400", bg: "bg-purple-500/10", border: "border-purple-500/20" },
+  ui: { icon: Monitor2, label: "Estado UI", color: "text-cyan-400", bg: "bg-cyan-500/10", border: "border-cyan-500/20" },
+  logic: { icon: Zap2, label: "L\xF3gica MCP", color: "text-orange-400", bg: "bg-orange-500/10", border: "border-orange-500/20" },
+  render: { icon: Image2, label: "UI Render", color: "text-pink-400", bg: "bg-pink-500/10", border: "border-pink-500/20" },
+  trigger: { icon: Zap2, label: "Trigger", color: "text-yellow-400", bg: "bg-yellow-500/10", border: "border-yellow-500/20" },
+  set: { icon: PenSquare, label: "Set Variable", color: "text-violet-400", bg: "bg-violet-500/10", border: "border-violet-500/20" }
+};
+function getTrackConfig(track) {
+  return TRACK_CONFIG[track] || { icon: Zap2, label: track, color: "text-orange-400", bg: "bg-orange-500/10", border: "border-orange-500/20" };
+}
+var DialogueEditor = ({ keyframe, onUpdate }) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsx15("h4", { className: "text-[10px] font-bold text-purple-400/40 uppercase tracking-widest border-b border-purple-500/20 pb-1", children: "Configuraci\xF3n Di\xE1logo" }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "Actor ID" }),
+    /* @__PURE__ */ jsxs15(
+      "select",
+      {
+        value: keyframe.actorId || "system",
+        onChange: (e) => onUpdate({ actorId: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-purple-300 focus:outline-hidden focus:border-purple-500/50",
+        children: [
+          /* @__PURE__ */ jsx15("option", { value: "system", children: "\u{1F680} System" }),
+          /* @__PURE__ */ jsx15("option", { value: "user", children: "\u{1F464} User" }),
+          /* @__PURE__ */ jsx15("option", { value: "client", children: "\u{1F4BC} Client" }),
+          /* @__PURE__ */ jsx15("option", { value: "inventory_agent", children: "\u{1F4E6} Inventory Agent" })
+        ]
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1 flex-1", children: [
+    /* @__PURE__ */ jsxs15("label", { className: "text-[10px] text-text-muted flex justify-between", children: [
+      /* @__PURE__ */ jsx15("span", { children: "Texto (TTS)" }),
+      /* @__PURE__ */ jsxs15("span", { className: "text-purple-400/50", children: [
+        keyframe.speech?.length || 0,
+        " chars"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx15(
+      "textarea",
+      {
+        value: keyframe.speech || "",
+        onChange: (e) => onUpdate({ speech: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-2 text-xs text-text-primary focus:outline-hidden focus:border-purple-500/50 min-h-[120px] resize-y",
+        placeholder: "Escribe el di\xE1logo aqu\xED..."
+      }
+    )
+  ] })
+] });
+var UIStateEditor = ({ keyframe, onUpdate }) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsx15("h4", { className: "text-[10px] font-bold text-cyan-400/40 uppercase tracking-widest border-b border-cyan-500/20 pb-1", children: "Eventos Interfaz" }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "App State Trigger" }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "text",
+        value: keyframe.state || "",
+        onChange: (e) => onUpdate({ state: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-cyan-300 font-mono focus:outline-hidden focus:border-cyan-500/50",
+        placeholder: "e.g., loading_screen"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx15("div", { className: "mt-1 bg-surface-glass rounded-lg border border-border-default p-3", children: /* @__PURE__ */ jsxs15("label", { className: "flex items-start gap-3 cursor-pointer", children: [
+    /* @__PURE__ */ jsx15("input", { type: "checkbox", checked: keyframe.canvas || false, onChange: (e) => onUpdate({ canvas: e.target.checked }), className: "mt-0.5 rounded border-border-strong bg-surface-glass text-cyan-500 w-4 h-4 cursor-pointer" }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx15("span", { className: "text-xs font-bold text-cyan-300", children: "Embeber Lienzo 3D" }),
+      /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-text-muted mt-1", children: "Al pasar por este nodo, mostrar\xE1 el motor SpatialCanvas3D." })
+    ] })
+  ] }) })
+] });
+var RenderEditor = ({ keyframe, onUpdate }) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsx15("h4", { className: "text-[10px] font-bold text-pink-400/40 uppercase tracking-widest border-b border-pink-500/20 pb-1", children: "UI Component" }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "Nombre" }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "text",
+        value: keyframe.label || keyframe.state || "",
+        onChange: (e) => onUpdate({ label: e.target.value, state: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-pink-300 font-mono focus:outline-hidden focus:border-pink-500/50",
+        placeholder: "e.g., Formulario Contacto"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx15("div", { className: "bg-surface-glass rounded-lg border border-border-default p-3", children: /* @__PURE__ */ jsxs15("label", { className: "flex items-start gap-3 cursor-pointer", children: [
+    /* @__PURE__ */ jsx15("input", { type: "checkbox", checked: keyframe.autoComplete ?? true, onChange: (e) => onUpdate({ autoComplete: e.target.checked }), className: "mt-0.5 rounded border-border-strong bg-surface-glass text-pink-500 w-4 h-4 cursor-pointer" }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx15("span", { className: "text-xs font-bold text-pink-300", children: "Auto-Complete" }),
+      /* @__PURE__ */ jsx15("span", { className: "text-[10px] text-text-muted mt-1", children: "Si activo, el nodo se completa al mostrarse. Si no, espera interacci\xF3n." })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "UI Schema (JSON)" }),
+    /* @__PURE__ */ jsx15(
+      "textarea",
+      {
+        value: typeof keyframe.uiSchema === "object" ? JSON.stringify(keyframe.uiSchema, null, 2) : keyframe.uiSchema || "",
+        onChange: (e) => {
+          try {
+            onUpdate({ uiSchema: JSON.parse(e.target.value) });
+          } catch {
+          }
+        },
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-2 text-[10px] text-pink-200 font-mono focus:outline-hidden focus:border-pink-500/50 min-h-[80px] resize-y",
+        placeholder: '{"type":"div","children":...}'
+      }
+    )
+  ] })
+] });
+var LogicEditor = ({ keyframe, onUpdate }) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsx15("h4", { className: "text-[10px] font-bold text-orange-400/40 uppercase tracking-widest border-b border-orange-500/20 pb-1", children: "Motor de L\xF3gica" }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "T\xF3pico / Intenci\xF3n" }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "text",
+        value: keyframe.intent || "",
+        onChange: (e) => onUpdate({ intent: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-orange-300 font-mono focus:outline-hidden focus:border-orange-500/50",
+        placeholder: "e.g., process_payment"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx15("div", { className: "p-3 bg-orange-500/10 border border-orange-500/20 rounded", children: /* @__PURE__ */ jsx15("p", { className: "text-[10px] text-orange-300/80 leading-relaxed", children: "Este nodo disparar\xE1 eventos hacia el Event Mesh para orquestar servicios remotos." }) })
+] });
+var TriggerEditor = ({ keyframe, onUpdate }) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsx15("h4", { className: "text-[10px] font-bold text-yellow-400/40 uppercase tracking-widest border-b border-yellow-500/20 pb-1", children: "Activaci\xF3n Autom\xE1tica" }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "Guard Expression" }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "text",
+        value: keyframe.guardExpression || "",
+        onChange: (e) => onUpdate({ guardExpression: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-yellow-300 font-mono focus:outline-hidden focus:border-yellow-500/50",
+        placeholder: "!user.onboardingComplete"
+      }
+    ),
+    /* @__PURE__ */ jsx15("span", { className: "text-[9px] text-text-muted", children: "Si true, el flujo se auto-activa al cargar la app." })
+  ] }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "Prioridad" }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "number",
+        value: keyframe.priority || 0,
+        onChange: (e) => onUpdate({ priority: parseInt(e.target.value) || 0 }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-yellow-300 font-mono focus:outline-hidden focus:border-yellow-500/50 w-20",
+        placeholder: "0"
+      }
+    ),
+    /* @__PURE__ */ jsx15("span", { className: "text-[9px] text-text-muted", children: "Mayor = se eval\xFAa primero." })
+  ] })
+] });
+var SetVariableEditor = ({ keyframe, onUpdate }) => /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-4", children: [
+  /* @__PURE__ */ jsx15("h4", { className: "text-[10px] font-bold text-violet-400/40 uppercase tracking-widest border-b border-violet-500/20 pb-1", children: "Escritura de Variable" }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "Variable Target" }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "text",
+        value: keyframe.variableTarget || "",
+        onChange: (e) => onUpdate({ variableTarget: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-violet-300 font-mono focus:outline-hidden focus:border-violet-500/50",
+        placeholder: "e.g., user.onboardingComplete"
+      }
+    ),
+    /* @__PURE__ */ jsx15("span", { className: "text-[9px] text-text-muted", children: 'Prefijo "user." = persistente. Sin prefijo = sesi\xF3n.' })
+  ] }),
+  /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("label", { className: "text-[10px] text-text-muted", children: "Valor" }),
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        type: "text",
+        value: keyframe.variableValue ?? "",
+        onChange: (e) => onUpdate({ variableValue: e.target.value }),
+        className: "bg-surface-overlay border border-border-default rounded px-2 py-1.5 text-xs text-emerald-300 font-mono focus:outline-hidden focus:border-violet-500/50",
+        placeholder: "e.g., true, 50, user.xp + 10"
+      }
+    ),
+    /* @__PURE__ */ jsx15("span", { className: "text-[9px] text-text-muted", children: "Puede ser literal o expresi\xF3n JS." })
+  ] })
+] });
+
+// src/components/studio/NodePropertiesPanel.tsx
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+var NodePropertiesPanel = ({ selectedNodeId, onClose }) => {
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const timelines = useTimelineStore12((s) => s.timelines);
+  const updateKeyframe = useTimelineStore12((s) => s.updateKeyframe);
+  const variables = useEngineStore((s) => s.variables);
+  const kf = timelines[activeTimelineId]?.keyframes.find((k) => k.id === selectedNodeId);
+  const track = kf?.track || "";
+  const referencedVars = React2.useMemo(() => {
+    if (!kf) return [];
+    const text = (kf.speech || "") + (kf.state || "");
+    const m = text.match(/\{\{([^}]+)\}\}/g) || [];
+    return [...new Set(m.map((x) => x.replace(/\{\{|\}\}/g, "").trim()))];
+  }, [kf?.speech, kf?.state, kf]);
+  if (!kf) return null;
+  const cfg = getTrackConfig(track);
+  const Icon = cfg.icon;
+  const onUpdate = (patch) => updateKeyframe(activeTimelineId, kf.id, patch);
+  return /* @__PURE__ */ jsx16(AnimatePresence, { children: /* @__PURE__ */ jsxs16(
+    motion.div,
+    {
+      initial: { x: 300, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: 300, opacity: 0 },
+      transition: { type: "spring", bounce: 0, duration: 0.3 },
+      className: "absolute right-0 top-0 bottom-0 w-[300px] bg-surface-primary border-l border-border-default z-50 shadow-2xl flex flex-col",
+      children: [
+        /* @__PURE__ */ jsxs16("div", { className: `p-4 border-b border-border-default flex items-center justify-between ${cfg.bg}`, children: [
+          /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx16(Icon, { size: 16, className: cfg.color }),
+            /* @__PURE__ */ jsx16("h3", { className: `text-sm font-bold uppercase tracking-widest ${cfg.color}`, children: cfg.label })
+          ] }),
+          /* @__PURE__ */ jsx16("button", { onClick: onClose, className: "p-1 rounded-md hover:bg-surface-glass text-text-primary/50 hover:text-text-primary transition-colors", children: /* @__PURE__ */ jsx16(X2, { size: 16 }) })
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-5", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx16("h4", { className: "text-[10px] font-bold text-text-primary/40 uppercase tracking-widest border-b border-border-default pb-1", children: "Metadatos Base" }),
+            /* @__PURE__ */ jsxs16("div", { className: "grid grid-cols-2 gap-2 mt-1", children: [
+              /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx16("label", { className: "text-[10px] text-text-muted", children: "Node ID" }),
+                /* @__PURE__ */ jsx16("input", { type: "text", value: kf.id, readOnly: true, className: "bg-surface-overlay border border-border-subtle rounded px-2 py-1 text-xs text-text-secondary font-mono outline-hidden" })
+              ] }),
+              /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx16("label", { className: "text-[10px] text-text-muted", children: "Tiempo (t)" }),
+                /* @__PURE__ */ jsxs16("div", { className: "flex items-center border border-border-default rounded overflow-hidden", children: [
+                  /* @__PURE__ */ jsx16("input", { type: "number", step: "0.1", value: kf.t, onChange: (e) => onUpdate({ t: parseFloat(e.target.value) || 0 }), className: "bg-surface-glass px-2 py-1 text-xs text-text-primary outline-hidden w-full font-mono" }),
+                  /* @__PURE__ */ jsx16("span", { className: "bg-surface-glass px-2 py-1 text-xs text-text-muted border-l border-border-default", children: "s" })
+                ] })
+              ] })
+            ] })
+          ] }),
+          track === "dialogue" && /* @__PURE__ */ jsx16(DialogueEditor, { keyframe: kf, onUpdate }),
+          track === "ui" && /* @__PURE__ */ jsx16(UIStateEditor, { keyframe: kf, onUpdate }),
+          track === "render" && /* @__PURE__ */ jsx16(RenderEditor, { keyframe: kf, onUpdate }),
+          track === "logic" && /* @__PURE__ */ jsx16(LogicEditor, { keyframe: kf, onUpdate }),
+          track === "trigger" && /* @__PURE__ */ jsx16(TriggerEditor, { keyframe: kf, onUpdate }),
+          track === "set" && /* @__PURE__ */ jsx16(SetVariableEditor, { keyframe: kf, onUpdate }),
+          /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-3 mt-2", children: [
+            /* @__PURE__ */ jsxs16("h4", { className: "text-[10px] font-bold text-emerald-400/40 uppercase tracking-widest border-b border-emerald-500/20 pb-1 flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx16(Variable, { size: 10 }),
+              "Data Bindings"
+            ] }),
+            referencedVars.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx16("span", { className: "text-[9px] text-text-muted uppercase", children: "Variables Referenciadas" }),
+              /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-1", children: referencedVars.map((v2) => /* @__PURE__ */ jsxs16("span", { className: `text-[10px] font-mono px-1.5 py-0.5 rounded border ${variables[v2] !== void 0 ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-red-500/10 border-red-500/20 text-red-400"}`, children: [
+                `{{${v2}}}`,
+                " ",
+                variables[v2] !== void 0 ? `= ${variables[v2]}` : "\u26A0 undefined"
+              ] }, v2)) })
+            ] }),
+            /* @__PURE__ */ jsxs16("div", { className: "p-2 bg-emerald-500/5 border border-emerald-500/10 rounded text-[10px] text-text-muted", children: [
+              "Usa ",
+              /* @__PURE__ */ jsx16("code", { className: "text-emerald-400 bg-surface-glass px-1 rounded", children: `{{variable}}` }),
+              " en el texto para interpolar valores del Motor."
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/components/studio/NodePalette.tsx
+import { useState, useMemo } from "react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "motion/react";
+import { ChevronDown, ChevronRight, GripVertical as GripVertical2, PanelLeftClose as PanelLeftClose2, PanelLeft as PanelLeft3, Search, Layout as Layout3, Image as Image4 } from "lucide-react";
+
+// src/components/studio/editor/paletteCatalog.tsx
+import {
+  MessageCircle as MessageCircle2,
+  Cpu as Cpu2,
+  Monitor as Monitor3,
+  Network as Network2,
+  LogIn as LogIn2,
+  LogOut as LogOut2,
+  Zap as Zap3,
+  Layout as Layout2,
+  GitBranch as GitBranch2,
+  PenSquare as PenSquare2,
+  Terminal as Terminal2,
+  PanelBottom as PanelBottom2,
+  Sidebar as Sidebar2,
+  Minus as Minus2,
+  ArrowUpFromDot as ArrowUpFromDot2,
+  FileText as FileText2,
+  Columns2 as Columns22,
+  Focus as Focus2,
+  X as X3,
+  Palette as Palette2,
+  Paintbrush as Paintbrush2,
+  Pipette as Pipette2,
+  Bell as Bell2,
+  SquareStack as SquareStack2,
+  Play as Play2,
+  Keyboard as Keyboard2,
+  Radio as Radio2,
+  Settings2 as Settings22,
+  PanelLeft as PanelLeft2
+} from "lucide-react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var DRAG_DATA_KEY = "application/decido-node";
+var STATIC_CATEGORIES = [
+  { id: "dialogue", label: "Di\xE1logo", icon: /* @__PURE__ */ jsx17(MessageCircle2, { size: 14 }), items: [
+    { type: "dialogue", label: "Dialogue", icon: /* @__PURE__ */ jsx17(MessageCircle2, { size: 16 }), color: "border-blue-500/40", description: "Nodo de di\xE1logo AI" }
+  ] },
+  { id: "logic", label: "L\xF3gica / MCP", icon: /* @__PURE__ */ jsx17(Cpu2, { size: 14 }), items: [
+    { type: "logic", label: "Logic Gate", icon: /* @__PURE__ */ jsx17(Cpu2, { size: 16 }), color: "border-amber-500/40", description: "Evaluaci\xF3n condicional" }
+  ] },
+  { id: "ui", label: "Estado UI", icon: /* @__PURE__ */ jsx17(Monitor3, { size: 14 }), items: [
+    { type: "ui", label: "State Change", icon: /* @__PURE__ */ jsx17(Monitor3, { size: 16 }), color: "border-purple-500/40", description: "Cambio de estado visual" }
+  ] },
+  { id: "hsm", label: "HSM / Subflujos", icon: /* @__PURE__ */ jsx17(Network2, { size: 14 }), items: [
+    { type: "core:subflow", label: "Subflow", icon: /* @__PURE__ */ jsx17(Network2, { size: 16 }), color: "border-violet-500/40", description: "Subflujo jer\xE1rquico" },
+    { type: "core:entry", label: "Entry", icon: /* @__PURE__ */ jsx17(LogIn2, { size: 16 }), color: "border-emerald-500/40", description: "Punto de entrada" },
+    { type: "core:return", label: "Return", icon: /* @__PURE__ */ jsx17(LogOut2, { size: 16 }), color: "border-rose-500/40", description: "Punto de retorno" }
+  ] },
+  { id: "triggers", label: "Triggers / Branching", icon: /* @__PURE__ */ jsx17(Zap3, { size: 14 }), items: [
+    { type: "trigger", label: "Event Trigger", icon: /* @__PURE__ */ jsx17(Zap3, { size: 16 }), color: "border-yellow-500/40", description: "Disparador de evento" },
+    { type: "condition", label: "Condici\xF3n", icon: /* @__PURE__ */ jsx17(GitBranch2, { size: 16 }), color: "border-amber-500/40", description: "Bifurcaci\xF3n condicional" },
+    { type: "set", label: "Set Variable", icon: /* @__PURE__ */ jsx17(PenSquare2, { size: 16 }), color: "border-violet-500/40", description: "Escribir variable (UserState o sesi\xF3n)" }
+  ] },
+  { id: "morphology", label: "Morfolog\xEDa", icon: /* @__PURE__ */ jsx17(Layout2, { size: 14 }), items: [
+    { type: "morph", label: "Morph Stage", icon: /* @__PURE__ */ jsx17(Monitor3, { size: 16 }), color: "border-purple-500/40", description: "Controlar \xE1rea de renderizado" }
+  ] },
+  // Shell Control
+  { id: "shell-register", label: "\u{1F5A5}\uFE0F Shell: Registro", icon: /* @__PURE__ */ jsx17(Terminal2, { size: 14 }), items: [
+    { type: "shell:registerButton", label: "Activity Bar", icon: /* @__PURE__ */ jsx17(PanelLeft2, { size: 16 }), color: "border-teal-500/40", description: "Registrar bot\xF3n en Activity Bar", meta: { shellAction: "registerActivityBarItem" } },
+    { type: "shell:registerTab", label: "Open Tab", icon: /* @__PURE__ */ jsx17(FileText2, { size: 16 }), color: "border-cyan-500/40", description: "Abrir tab en el editor", meta: { shellAction: "openTab" } },
+    { type: "shell:registerPanel", label: "Panel View", icon: /* @__PURE__ */ jsx17(PanelBottom2, { size: 16 }), color: "border-indigo-500/40", description: "Registrar vista en panel inferior", meta: { shellAction: "registerPanelView" } },
+    { type: "shell:registerSidebar", label: "Sidebar View", icon: /* @__PURE__ */ jsx17(Sidebar2, { size: 16 }), color: "border-sky-500/40", description: "Registrar vista en sidebar", meta: { shellAction: "registerSidebarView" } },
+    { type: "shell:registerStatusBar", label: "Status Bar", icon: /* @__PURE__ */ jsx17(Minus2, { size: 16 }), color: "border-emerald-500/40", description: "A\xF1adir item al status bar", meta: { shellAction: "registerStatusBarItem" } },
+    { type: "shell:registerTopBar", label: "Top Bar", icon: /* @__PURE__ */ jsx17(ArrowUpFromDot2, { size: 16 }), color: "border-violet-500/40", description: "A\xF1adir bot\xF3n al top bar", meta: { shellAction: "registerTopBarItem" } },
+    { type: "shell:registerAction", label: "Register Cmd", icon: /* @__PURE__ */ jsx17(Terminal2, { size: 16 }), color: "border-amber-500/40", description: "Registrar un comando", meta: { shellAction: "registerCommand" } }
+  ] },
+  { id: "shell-layout", label: "\u{1F5A5}\uFE0F Shell: Layout", icon: /* @__PURE__ */ jsx17(Columns22, { size: 14 }), items: [
+    { type: "shell:toggleSidebar", label: "Toggle Sidebar", icon: /* @__PURE__ */ jsx17(PanelLeft2, { size: 16 }), color: "border-sky-500/40", description: "Mostrar/ocultar sidebar", meta: { shellAction: "toggleSidebar" } },
+    { type: "shell:togglePanel", label: "Toggle Panel", icon: /* @__PURE__ */ jsx17(PanelBottom2, { size: 16 }), color: "border-indigo-500/40", description: "Mostrar/ocultar panel", meta: { shellAction: "togglePanel" } },
+    { type: "shell:splitPane", label: "Split Pane", icon: /* @__PURE__ */ jsx17(Columns22, { size: 16 }), color: "border-violet-500/40", description: "Dividir editor", meta: { shellAction: "splitPane" } },
+    { type: "shell:focusTab", label: "Focus Tab", icon: /* @__PURE__ */ jsx17(Focus2, { size: 16 }), color: "border-cyan-500/40", description: "Enfocar un tab", meta: { shellAction: "focusTab" } },
+    { type: "shell:closeTab", label: "Close Tab", icon: /* @__PURE__ */ jsx17(X3, { size: 16 }), color: "border-rose-500/40", description: "Cerrar un tab", meta: { shellAction: "closeTab" } }
+  ] },
+  { id: "shell-theme", label: "\u{1F5A5}\uFE0F Shell: Tema", icon: /* @__PURE__ */ jsx17(Palette2, { size: 14 }), items: [
+    { type: "shell:setTheme", label: "Set Theme", icon: /* @__PURE__ */ jsx17(Palette2, { size: 16 }), color: "border-amber-500/40", description: "Cambiar dark/light", meta: { shellAction: "setTheme" } },
+    { type: "shell:applyPalette", label: "Apply Palette", icon: /* @__PURE__ */ jsx17(Paintbrush2, { size: 16 }), color: "border-pink-500/40", description: "Aplicar paleta de colores", meta: { shellAction: "applyPalette" } },
+    { type: "shell:updateToken", label: "CSS Token", icon: /* @__PURE__ */ jsx17(Pipette2, { size: 16 }), color: "border-orange-500/40", description: "Modificar token CSS", meta: { shellAction: "updateToken" } }
+  ] },
+  { id: "shell-interaction", label: "\u{1F5A5}\uFE0F Shell: Interacci\xF3n", icon: /* @__PURE__ */ jsx17(Bell2, { size: 14 }), items: [
+    { type: "shell:notification", label: "Notification", icon: /* @__PURE__ */ jsx17(Bell2, { size: 16 }), color: "border-emerald-500/40", description: "Mostrar toast", meta: { shellAction: "showNotification" } },
+    { type: "shell:modal", label: "Show Modal", icon: /* @__PURE__ */ jsx17(SquareStack2, { size: 16 }), color: "border-violet-500/40", description: "Abrir modal", meta: { shellAction: "showModal" } },
+    { type: "shell:execCommand", label: "Exec Command", icon: /* @__PURE__ */ jsx17(Play2, { size: 16 }), color: "border-teal-500/40", description: "Ejecutar comando", meta: { shellAction: "executeCommand" } },
+    { type: "shell:shortcut", label: "Shortcut", icon: /* @__PURE__ */ jsx17(Keyboard2, { size: 16 }), color: "border-amber-500/40", description: "Registrar atajo", meta: { shellAction: "registerShortcut" } },
+    { type: "shell:emitEvent", label: "Emit Event", icon: /* @__PURE__ */ jsx17(Radio2, { size: 16 }), color: "border-rose-500/40", description: "Emitir evento", meta: { shellAction: "emitEvent" } }
+  ] },
+  { id: "shell-config", label: "\u{1F5A5}\uFE0F Shell: Config", icon: /* @__PURE__ */ jsx17(Settings22, { size: 14 }), items: [
+    { type: "shell:config", label: "Shell Config", icon: /* @__PURE__ */ jsx17(Settings22, { size: 16 }), color: "border-teal-500/40", description: "Configuraci\xF3n completa del shell", meta: { shellAction: "shellConfig" } }
+  ] }
+];
+
+// src/components/studio/NodePalette.tsx
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var NodePalette = ({ className }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [expandedCategories, setExpandedCategories] = useState({
+    dialogue: true,
+    logic: true,
+    ui: true,
+    render: true,
+    hsm: false,
+    triggers: false,
+    morphology: false,
+    "shell-register": true,
+    "shell-layout": true,
+    "shell-theme": true,
+    "shell-interaction": true,
+    "shell-config": true
+  });
+  const [searchFilter, setSearchFilter] = useState("");
+  const uiComponents = useUIComponentStore((s) => s.components);
+  const categories = useMemo(() => {
+    const renderItems = Object.values(uiComponents).map((comp) => ({
+      type: "render",
+      label: comp.name,
+      icon: /* @__PURE__ */ jsx18(Layout3, { size: 16 }),
+      color: comp.source === "ai-generated" ? "border-pink-500/40" : "border-cyan-500/40",
+      description: `${comp.category} \xB7 ${comp.source}`,
+      meta: { uiSchema: comp.schema, componentId: comp.id }
+    }));
+    const all = [...STATIC_CATEGORIES];
+    all.splice(3, 0, { id: "render", label: "UI Render", icon: /* @__PURE__ */ jsx18(Image4, { size: 14 }), items: renderItems });
+    return all;
+  }, [uiComponents]);
+  const filteredCategories = useMemo(() => {
+    if (!searchFilter.trim()) return categories;
+    const q = searchFilter.toLowerCase();
+    return categories.map((c) => ({ ...c, items: c.items.filter((i) => i.label.toLowerCase().includes(q) || i.type.toLowerCase().includes(q) || (i.description || "").toLowerCase().includes(q)) })).filter((c) => c.items.length > 0);
+  }, [categories, searchFilter]);
+  const onDragStart = (e, item) => {
+    e.dataTransfer.setData(DRAG_DATA_KEY, JSON.stringify({ type: item.type, label: item.label, meta: item.meta || {} }));
+    e.dataTransfer.effectAllowed = "move";
+  };
+  if (isCollapsed) return /* @__PURE__ */ jsx18("div", { className: `flex flex-col items-center py-3 px-1 bg-surface-primary/80 border-r border-border-subtle ${className || ""}`, children: /* @__PURE__ */ jsx18("button", { onClick: () => setIsCollapsed(false), className: "p-2 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors", title: "Abrir Palette", children: /* @__PURE__ */ jsx18(PanelLeft3, { size: 18 }) }) });
+  return /* @__PURE__ */ jsxs17(
+    motion2.div,
+    {
+      initial: { width: 0, opacity: 0 },
+      animate: { width: 220, opacity: 1 },
+      exit: { width: 0, opacity: 0 },
+      transition: { duration: 0.2 },
+      className: `flex flex-col bg-surface-primary/90 border-r border-border-subtle overflow-hidden select-none ${className || ""}`,
+      style: { width: 220 },
+      children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between px-3 py-2.5 border-b border-border-subtle", children: [
+          /* @__PURE__ */ jsx18("span", { className: "text-xs font-bold text-text-secondary uppercase tracking-wider", children: "Nodos" }),
+          /* @__PURE__ */ jsx18("button", { onClick: () => setIsCollapsed(true), className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors", children: /* @__PURE__ */ jsx18(PanelLeftClose2, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsx18("div", { className: "px-2 py-2 border-b border-border-subtle", children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 bg-surface-glass rounded-lg px-2.5 py-1.5", children: [
+          /* @__PURE__ */ jsx18(Search, { size: 12, className: "text-text-muted shrink-0" }),
+          /* @__PURE__ */ jsx18("input", { type: "text", placeholder: "Buscar nodos...", value: searchFilter, onChange: (e) => setSearchFilter(e.target.value), className: "bg-transparent text-xs text-text-primary placeholder-zinc-600 outline-hidden w-full" })
+        ] }) }),
+        /* @__PURE__ */ jsx18("div", { className: "flex-1 overflow-y-auto custom-scrollbar", children: filteredCategories.map((cat) => /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsxs17("button", { onClick: () => setExpandedCategories((p) => ({ ...p, [cat.id]: !p[cat.id] })), className: "w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold text-text-secondary hover:text-text-primary hover:bg-surface-glass transition-colors", children: [
+            expandedCategories[cat.id] ? /* @__PURE__ */ jsx18(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx18(ChevronRight, { size: 12 }),
+            /* @__PURE__ */ jsx18("span", { className: "text-text-muted", children: cat.icon }),
+            /* @__PURE__ */ jsx18("span", { children: cat.label }),
+            /* @__PURE__ */ jsx18("span", { className: "ml-auto text-[10px] text-text-muted bg-surface-glass px-1.5 py-0.5 rounded", children: cat.items.length })
+          ] }),
+          /* @__PURE__ */ jsx18(AnimatePresence2, { children: expandedCategories[cat.id] && /* @__PURE__ */ jsx18(motion2.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.15 }, className: "overflow-hidden", children: cat.items.map((item) => /* @__PURE__ */ jsxs17(
+            "div",
+            {
+              draggable: true,
+              onDragStart: (e) => onDragStart(e, item),
+              className: `flex items-center gap-2 px-3 py-2 mx-2 mb-1 rounded-lg border bg-surface-secondary/60 hover:bg-surface-glass cursor-grab active:cursor-grabbing transition-all group ${item.color}`,
+              children: [
+                /* @__PURE__ */ jsx18(GripVertical2, { size: 12, className: "text-text-muted group-hover:text-text-secondary shrink-0" }),
+                /* @__PURE__ */ jsx18("div", { className: "text-text-secondary group-hover:text-text-primary shrink-0", children: item.icon }),
+                /* @__PURE__ */ jsxs17("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx18("div", { className: "text-[11px] font-medium text-text-primary group-hover:text-text-primary truncate", children: item.label }),
+                  item.description && /* @__PURE__ */ jsx18("div", { className: "text-[9px] text-text-muted truncate", children: item.description })
+                ] })
+              ]
+            },
+            `${cat.id}-${item.type}-${item.label}`
+          )) }) })
+        ] }, cat.id)) })
+      ]
+    }
+  );
+};
+
+// src/components/studio/VariablePanel.tsx
+import { useState as useState2, useCallback } from "react";
+import { motion as motion3, AnimatePresence as AnimatePresence3 } from "motion/react";
+import { Variable as Variable2, Plus, Trash2 as Trash22, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Search as Search2 } from "lucide-react";
+import { useEngineStore as useEngineStore2 } from "@decido/engine";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+var VariablePanel = ({ isOpen, onToggle }) => {
+  const variables = useEngineStore2((s) => s.variables);
+  const setVariable = useEngineStore2((s) => s.setVariable);
+  const [newKey, setNewKey] = useState2("");
+  const [newValue, setNewValue] = useState2("");
+  const [search, setSearch] = useState2("");
+  const [editingKey, setEditingKey] = useState2(null);
+  const entries = Object.entries(variables).filter(
+    ([k]) => !search || k.toLowerCase().includes(search.toLowerCase())
+  );
+  const handleAdd = useCallback(() => {
+    if (!newKey.trim()) return;
+    let parsed = newValue;
+    if (newValue === "true") parsed = true;
+    else if (newValue === "false") parsed = false;
+    else if (!isNaN(Number(newValue)) && newValue.trim()) parsed = Number(newValue);
+    else try {
+      parsed = JSON.parse(newValue);
+    } catch {
+    }
+    setVariable(newKey.trim(), parsed);
+    setNewKey("");
+    setNewValue("");
+  }, [newKey, newValue, setVariable]);
+  const handleDelete = useCallback((key) => {
+    const currentVars = useEngineStore2.getState().variables;
+    const updated = { ...currentVars };
+    delete updated[key];
+    useEngineStore2.setState({ variables: updated });
+  }, []);
+  const handleUpdate = useCallback((key, rawValue) => {
+    let parsed = rawValue;
+    if (rawValue === "true") parsed = true;
+    else if (rawValue === "false") parsed = false;
+    else if (!isNaN(Number(rawValue)) && rawValue.trim()) parsed = Number(rawValue);
+    else try {
+      parsed = JSON.parse(rawValue);
+    } catch {
+    }
+    setVariable(key, parsed);
+    setEditingKey(null);
+  }, [setVariable]);
+  const getTypeColor = (val) => {
+    if (typeof val === "boolean") return "text-amber-400";
+    if (typeof val === "number") return "text-blue-400";
+    if (typeof val === "object") return "text-violet-400";
+    return "text-emerald-400";
+  };
+  const getTypeLabel = (val) => {
+    if (typeof val === "boolean") return "bool";
+    if (typeof val === "number") return "num";
+    if (typeof val === "object") return "obj";
+    return "str";
+  };
+  return /* @__PURE__ */ jsxs18("div", { className: "absolute bottom-0 left-0 right-0 z-30", children: [
+    /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        onClick: onToggle,
+        className: "flex items-center gap-2 px-3 py-1.5 bg-surface-secondary/90 backdrop-blur-xs border-t border-x border-border-default rounded-t-lg text-xs text-text-secondary hover:text-emerald-400 transition-colors ml-4",
+        children: [
+          /* @__PURE__ */ jsx19(Variable2, { size: 12 }),
+          /* @__PURE__ */ jsx19("span", { className: "font-bold uppercase tracking-wider text-[9px]", children: "Variables" }),
+          /* @__PURE__ */ jsx19("span", { className: "ml-1 bg-emerald-500/20 text-emerald-400 text-[9px] px-1.5 py-0.5 rounded-full font-mono", children: Object.keys(variables).length }),
+          isOpen ? /* @__PURE__ */ jsx19(ChevronDown2, { size: 10 }) : /* @__PURE__ */ jsx19(ChevronRight2, { size: 10 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx19(AnimatePresence3, { children: isOpen && /* @__PURE__ */ jsx19(
+      motion3.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2 },
+        className: "bg-surface-secondary/95 backdrop-blur-xl border-t border-border-default overflow-hidden",
+        children: /* @__PURE__ */ jsxs18("div", { className: "max-h-[220px] overflow-y-auto custom-scrollbar", children: [
+          /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-2 p-2 border-b border-border-subtle", children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1 flex-1 bg-surface-overlay rounded-lg px-2 border border-border-subtle", children: [
+            /* @__PURE__ */ jsx19(Search2, { size: 12, className: "text-text-muted" }),
+            /* @__PURE__ */ jsx19(
+              "input",
+              {
+                type: "text",
+                placeholder: "Buscar...",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                className: "bg-transparent text-xs text-text-primary outline-hidden py-1.5 w-full placeholder-zinc-600"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs18("div", { className: "divide-y divide-white/5", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx19("div", { className: "text-center text-text-muted text-[10px] py-4", children: search ? "Sin resultados" : "No hay variables definidas" }),
+            entries.map(([key, val]) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 px-3 py-1.5 hover:bg-surface-glass group transition-colors", children: [
+              /* @__PURE__ */ jsx19("span", { className: `text-[9px] font-bold uppercase ${getTypeColor(val)} bg-surface-glass px-1 py-0.5 rounded`, children: getTypeLabel(val) }),
+              /* @__PURE__ */ jsx19("span", { className: "text-xs text-text-primary font-mono truncate min-w-[100px]", children: key }),
+              /* @__PURE__ */ jsx19("span", { className: "text-text-muted text-[10px]", children: "=" }),
+              editingKey === key ? /* @__PURE__ */ jsx19(
+                "input",
+                {
+                  autoFocus: true,
+                  defaultValue: typeof val === "object" ? JSON.stringify(val) : String(val),
+                  onBlur: (e) => handleUpdate(key, e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") handleUpdate(key, e.target.value);
+                    if (e.key === "Escape") setEditingKey(null);
+                  },
+                  className: "flex-1 bg-surface-overlay border border-emerald-500/30 rounded px-1.5 py-0.5 text-xs text-text-primary outline-hidden font-mono"
+                }
+              ) : /* @__PURE__ */ jsx19(
+                "span",
+                {
+                  onClick: () => setEditingKey(key),
+                  className: `flex-1 text-xs font-mono truncate cursor-pointer hover:text-text-primary transition-colors ${getTypeColor(val)}`,
+                  children: typeof val === "object" ? JSON.stringify(val) : String(val)
+                }
+              ),
+              /* @__PURE__ */ jsx19(
+                "button",
+                {
+                  onClick: () => handleDelete(key),
+                  className: "opacity-0 group-hover:opacity-100 text-text-muted hover:text-red-400 transition-all p-0.5",
+                  children: /* @__PURE__ */ jsx19(Trash22, { size: 10 })
+                }
+              )
+            ] }, key))
+          ] }),
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 p-2 border-t border-border-subtle bg-surface-glass", children: [
+            /* @__PURE__ */ jsx19(Plus, { size: 12, className: "text-emerald-500" }),
+            /* @__PURE__ */ jsx19(
+              "input",
+              {
+                type: "text",
+                placeholder: "nombre",
+                value: newKey,
+                onChange: (e) => setNewKey(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") handleAdd();
+                },
+                className: "bg-surface-overlay border border-border-subtle rounded px-2 py-1 text-xs text-emerald-300 font-mono outline-hidden w-[120px] focus:border-emerald-500/30"
+              }
+            ),
+            /* @__PURE__ */ jsx19("span", { className: "text-text-muted text-[10px]", children: "=" }),
+            /* @__PURE__ */ jsx19(
+              "input",
+              {
+                type: "text",
+                placeholder: "valor",
+                value: newValue,
+                onChange: (e) => setNewValue(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") handleAdd();
+                },
+                className: "bg-surface-overlay border border-border-subtle rounded px-2 py-1 text-xs text-text-primary font-mono outline-hidden flex-1 focus:border-emerald-500/30"
+              }
+            ),
+            /* @__PURE__ */ jsx19(
+              "button",
+              {
+                onClick: handleAdd,
+                disabled: !newKey.trim(),
+                className: "px-2 py-1 text-[10px] bg-emerald-500/10 text-emerald-400 rounded font-bold hover:bg-emerald-500/20 disabled:opacity-30 transition-colors",
+                children: "Agregar"
+              }
+            )
+          ] })
+        ] })
+      }
+    ) })
+  ] });
+};
+
+// src/components/studio/ReactFlowEditor.tsx
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+var ReactFlowEditorInner = ({ className, style, id }) => {
+  const { fitView, getIntersectingNodes, screenToFlowPosition } = useReactFlow();
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [selectedNodeId, setSelectedNodeId] = useState3(null);
+  const [isVariablePanelOpen, setIsVariablePanelOpen] = useState3(false);
+  const lastFittedBlueprintRef = useRef(null);
+  const clipboardRef = useRef({ nodes: [], edges: [] });
+  const [contextMenu, setContextMenu] = useState3(null);
+  const activeTimelineId = usePlaygroundStore((s) => s.prototypeBrand);
+  const activeNodeIds = useEngineStore3((s) => s.activeNodeIds);
+  const activeEdgeIds = useEngineStore3((s) => s.activeEdgeIds);
+  const timelines = useTimelineStore13((s) => s.timelines);
+  const blueprintLibrary = useTimelineStore13((s) => s.blueprintLibrary);
+  const updateKeyframePosition = useTimelineStore13((s) => s.updateKeyframePosition);
+  const updateKeyframe = useTimelineStore13((s) => s.updateKeyframe);
+  const addTimelineEdge = useTimelineStore13((s) => s.addEdge);
+  const removeTimelineEdge = useTimelineStore13((s) => s.removeEdge);
+  const addKeyframe = useTimelineStore13((s) => s.addKeyframe);
+  const removeKeyframe = useTimelineStore13((s) => s.removeKeyframe);
+  const undo = useTimelineStore13((s) => s.undo);
+  const redo = useTimelineStore13((s) => s.redo);
+  const setActiveTimeline = useTimelineStore13((s) => s.setActiveTimeline);
+  const pastTimelines = useTimelineStore13((s) => s.pastTimelines);
+  const futureTimelines = useTimelineStore13((s) => s.futureTimelines);
+  useEffect(() => {
+    setActiveTimeline(activeTimelineId);
+  }, [activeTimelineId, setActiveTimeline]);
+  useEffect(() => {
+    const h = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      } else if ((e.metaKey || e.ctrlKey) && (e.key === "Z" || e.key === "y")) {
+        e.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [undo, redo]);
+  const canUndo = (pastTimelines[activeTimelineId]?.length || 0) > 0;
+  const canRedo = (futureTimelines[activeTimelineId]?.length || 0) > 0;
+  const currentBlueprintId = useBlueprintNavigation((s) => s.currentBlueprintId);
+  const pushNavigation = useBlueprintNavigation((s) => s.pushNavigation);
+  const drillTarget = currentBlueprintId ? blueprintLibrary[currentBlueprintId] : null;
+  const activeTimeline = drillTarget || timelines[activeTimelineId];
+  useEffect(() => {
+    if (!activeTimeline) return;
+    const renderTimelineId = drillTarget ? currentBlueprintId : activeTimelineId;
+    const blueprint = convertLegacyTimelineToBlueprint(renderTimelineId, activeTimeline.keyframes || [], activeTimeline.edges || []);
+    const decidoNodes = Object.values(blueprint.nodes);
+    const posMap = {};
+    decidoNodes.forEach((node) => {
+      if (node.visual?.x !== void 0 && node.visual?.y !== void 0 && (node.visual.y !== 0 || node.visual.x !== 0))
+        posMap[node.id] = { x: node.visual.x, y: node.visual.y };
+    });
+    const gapY = 150;
+    let unresolved = decidoNodes.filter((n) => !posMap[n.id]);
+    let changes = true;
+    while (unresolved.length > 0 && changes) {
+      changes = false;
+      unresolved = unresolved.filter((n) => {
+        const inEdge = blueprint.edges.find((e) => e.target === n.id && posMap[e.source]);
+        if (inEdge) {
+          const src = posMap[inEdge.source];
+          const pos = { x: src.x, y: src.y + gapY };
+          let col = true;
+          while (col) {
+            col = Object.values(posMap).some((p) => Math.abs(p.x - pos.x) < 50 && Math.abs(p.y - pos.y) < 50);
+            if (col) pos.x += 250;
+          }
+          posMap[n.id] = pos;
+          changes = true;
+          return false;
+        }
+        return true;
+      });
+    }
+    unresolved.forEach((n, i) => {
+      posMap[n.id] = { x: TRACK_X_MAP[n.type] || 0, y: i * 100 };
+    });
+    const newNodes = decidoNodes.map((dn) => ({
+      id: dn.id,
+      type: dn.type,
+      position: posMap[dn.id],
+      parentId: dn.visual?.parentId,
+      extent: dn.visual?.parentId ? "parent" : void 0,
+      data: {
+        keyframeId: dn.id,
+        isInteractive: true,
+        isExecuting: activeNodeIds.includes(dn.id),
+        onUpdateNodeData: (nodeId, partialData) => updateKeyframe(renderTimelineId, nodeId, partialData),
+        variables: useEngineStore3.getState().variables,
+        isSpeaking: useEngineStore3.getState().isSpeaking,
+        registeredMorphComponents: getRegisteredMorphComponents(),
+        onDrillDown: (blueprintId, label) => pushNavigation({ blueprintId, label }),
+        ...mapNodePayload(dn)
+      }
+    }));
+    const newEdges = activeTimeline.edges ? buildStyledEdges(activeTimeline.edges, activeNodeIds, activeEdgeIds) : [];
+    setNodes(newNodes);
+    setEdges(newEdges);
+    if (lastFittedBlueprintRef.current !== renderTimelineId) {
+      lastFittedBlueprintRef.current = renderTimelineId;
+      const needsLayout = newNodes.every((n) => n.position.x === 0 && n.position.y === 0) || newNodes.filter((n) => n.position.x === 0 && n.position.y === 0).length > newNodes.length * 0.5;
+      if (needsLayout && newNodes.length > 1) {
+        const { nodes: ln } = getLayoutedElements(newNodes, newEdges, { direction: "TB" });
+        setNodes(ln);
+        ln.forEach((n) => updateKeyframePosition(activeTimelineId, n.id, n.position));
+      }
+      setTimeout(() => fitView({ padding: 0.2, duration: 800 }), 50);
+    }
+  }, [activeTimeline, activeNodeIds, drillTarget, setNodes, setEdges, fitView]);
+  const onConnect = useCallback2((p) => {
+    setEdges((eds) => addEdge(p, eds));
+    addTimelineEdge(activeTimelineId, { id: `edge-${p.source}-${p.target}-${Date.now()}`, source: p.source, target: p.target, sourceHandle: p.sourceHandle || null, targetHandle: p.targetHandle || null });
+  }, [activeTimelineId, addTimelineEdge, setEdges]);
+  const onEdgesDelete = useCallback2((del) => {
+    del.forEach((e) => removeTimelineEdge(activeTimelineId, e.id));
+  }, [activeTimelineId, removeTimelineEdge]);
+  const onNodeDragStop = useCallback2((_2, node, dragged) => {
+    (dragged.length > 1 ? dragged : [node]).forEach((n) => {
+      updateKeyframePosition(activeTimelineId, n.id, n.position);
+      if (n.id === node.id) {
+        const groups = getIntersectingNodes(n).filter((g) => g.type === "group");
+        if (n.type !== "group") updateKeyframe(activeTimelineId, n.id, { parentId: groups[0]?.id || void 0 });
+      }
+    });
+  }, [activeTimelineId, updateKeyframePosition, updateKeyframe, getIntersectingNodes]);
+  const onNodeClick = useCallback2((_2, n) => setSelectedNodeId(n.id), []);
+  const onPaneClick = useCallback2(() => {
+    setSelectedNodeId(null);
+    setContextMenu(null);
+  }, []);
+  const onPaneContextMenu = useCallback2((e) => {
+    e.preventDefault();
+    const flowPos = screenToFlowPosition({ x: e.clientX, y: e.clientY });
+    setContextMenu({ x: e.clientX, y: e.clientY, flowPos });
+  }, [screenToFlowPosition]);
+  const addNodeAt = useCallback2((track, label, extra) => {
+    if (!contextMenu) return;
+    const targetId = currentBlueprintId || activeTimelineId;
+    addKeyframe(targetId, buildKeyframeDefaults(track, label, contextMenu.flowPos, extra));
+    setContextMenu(null);
+  }, [contextMenu, activeTimelineId, currentBlueprintId, addKeyframe]);
+  useEffect(() => {
+    const h = createEditorKeyHandler({
+      getNodes: () => nodes,
+      getEdges: () => edges,
+      setNodes,
+      setEdges,
+      clipboard: clipboardRef,
+      activeTimelineId,
+      currentBlueprintId,
+      addKeyframe,
+      addTimelineEdge,
+      removeKeyframe,
+      removeTimelineEdge,
+      setSelectedNodeId,
+      NODE_TYPE_TO_TRACK
+    });
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [nodes, edges, activeTimelineId, currentBlueprintId, setNodes, setEdges, addKeyframe, addTimelineEdge, removeKeyframe, removeTimelineEdge]);
+  const breadcrumbs = useBlueprintNavigation((s) => s.navigationStack);
+  const navigateToLevel = useBlueprintNavigation((s) => s.navigateToLevel);
+  const isInsideSubflow = breadcrumbs.length > 1;
+  return /* @__PURE__ */ jsxs19("div", { style, className: `relative flex flex-col overflow-hidden w-full h-full ${className || ""}`, id, children: [
+    isInsideSubflow && /* @__PURE__ */ jsxs19("div", { className: "flex-none flex items-center gap-1 px-3 py-2 bg-surface-overlay border-b border-border-default backdrop-blur-xs z-10", children: [
+      /* @__PURE__ */ jsxs19("button", { onClick: () => navigateToLevel(0), className: "flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary transition-colors px-1.5 py-0.5 rounded hover:bg-surface-glass", children: [
+        /* @__PURE__ */ jsx20(Home, { size: 12 }),
+        /* @__PURE__ */ jsx20("span", { children: "Root" })
+      ] }),
+      breadcrumbs.slice(1).map((frame, idx) => /* @__PURE__ */ jsxs19(React5.Fragment, { children: [
+        /* @__PURE__ */ jsx20(ChevronRight3, { size: 12, className: "text-text-muted" }),
+        /* @__PURE__ */ jsxs19("button", { onClick: () => navigateToLevel(idx + 1), className: `text-xs px-1.5 py-0.5 rounded transition-colors ${idx + 1 === breadcrumbs.length - 1 ? "text-purple-300 bg-purple-500/10 border border-purple-500/20" : "text-text-secondary hover:text-text-primary hover:bg-surface-glass"}`, children: [
+          "\u{1F4E6} ",
+          frame.label
+        ] })
+      ] }, idx + 1))
+    ] }),
+    /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        className: "flex-1 relative flex overflow-hidden",
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          const raw = e.dataTransfer.getData("application/decido-node");
+          if (!raw) return;
+          try {
+            const { type, label, meta } = JSON.parse(raw);
+            const flowPos = screenToFlowPosition({ x: e.clientX, y: e.clientY });
+            addKeyframe(currentBlueprintId || activeTimelineId, buildKeyframeDefaults(type, label, flowPos, meta));
+          } catch (err) {
+            console.error("[ReactFlowEditor] Drop failed:", err);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx20(NodePalette, {}),
+          /* @__PURE__ */ jsxs19(
+            index,
+            {
+              nodes,
+              edges,
+              nodeTypes,
+              onNodesChange,
+              onEdgesChange,
+              onEdgesDelete,
+              onConnect,
+              onNodeDragStop,
+              onNodeClick,
+              onPaneClick,
+              onPaneContextMenu,
+              colorMode: "dark",
+              fitView: true,
+              fitViewOptions: { padding: 0.2 },
+              minZoom: 0.1,
+              selectionOnDrag: true,
+              panOnDrag: [1],
+              selectionMode: SelectionMode.Partial,
+              multiSelectionKeyCode: "Meta",
+              deleteKeyCode: null,
+              children: [
+                /* @__PURE__ */ jsx20(Controls, { className: "fill-white" }),
+                /* @__PURE__ */ jsx20(
+                  EditorToolbar,
+                  {
+                    canUndo,
+                    canRedo,
+                    undoCount: pastTimelines[activeTimelineId]?.length || 0,
+                    redoCount: futureTimelines[activeTimelineId]?.length || 0,
+                    undo,
+                    redo,
+                    nodes,
+                    edges,
+                    setNodes,
+                    updateKeyframePosition,
+                    removeKeyframe,
+                    activeTimelineId,
+                    currentBlueprintId,
+                    fitView,
+                    setSelectedNodeId
+                  }
+                ),
+                /* @__PURE__ */ jsx20(MiniMap, { nodeStrokeColor: () => "#ffffff", nodeColor: () => "#333333", maskColor: "rgba(0, 0, 0, 0.7)" }),
+                /* @__PURE__ */ jsx20(Background, { color: "#555", gap: 20 })
+              ]
+            }
+          ),
+          contextMenu && /* @__PURE__ */ jsxs19(Fragment2, { children: [
+            /* @__PURE__ */ jsx20("div", { className: "fixed inset-0 z-998", onClick: () => setContextMenu(null) }),
+            /* @__PURE__ */ jsx20(CanvasContextMenu, { x: contextMenu.x, y: contextMenu.y, onAdd: addNodeAt, onClose: () => setContextMenu(null) })
+          ] })
+        ]
+      }
+    ),
+    selectedNodeId && /* @__PURE__ */ jsx20(NodePropertiesPanel, { selectedNodeId, onClose: () => setSelectedNodeId(null) }),
+    /* @__PURE__ */ jsx20(VariablePanel, { isOpen: isVariablePanelOpen, onToggle: () => setIsVariablePanelOpen((o) => !o) })
+  ] });
+};
+var ReactFlowEditor = (props) => /* @__PURE__ */ jsx20(ReactFlowProvider, { children: /* @__PURE__ */ jsx20(ReactFlowEditorInner, { ...props }) });
+export {
+  ReactFlowEditor
+};
+/*! Bundled license information:
+
+@dagrejs/dagre/dist/dagre.esm.js:
+  (*! For license information please see dagre.esm.js.LEGAL.txt *)
+*/